Table of contents
- Preface
- Preview
- Discussion and sample code
- Run the sketch
- Summary
- Miscellaneous
- Complete program listing
Preface
This module is one in a collection of modules designed to teach you about the Processing open source programming environment.
Processing is a Java-based OOP programming environment for people who want to create images, animations, and interactions.
The purpose of this module is to teach you:
- How to develop a template sketch for implementing pixel modification algorithms, and
- How to implement a space-wise linear pixel modification algorithm.
Click here to view the JavaScript version of the sketch discussed in this module in your HTML 5 compatible browser.
Viewing tip
I recommend that you open another copy of this module in a separate browser window and use the following links to easily find and view the imagesand listings while you are reading about them.
Images
Listings
- Listing 1 . Beginning of the class and the run method.
- Listing 2 . Beginning of the processPixels method.
- Listing 3 . Beginning of a for loop.
- Listing 4 . Compute the scale factor for the column.
- Listing 5 . Compute a new color.
- Listing 6 . Store modified pixel color in the output pixel array.
- Listing 7 . Pr0140a.pde.
- Listing 8 . Pr0140aRunner.pde.
Preview
The algorithm
The pixel modification algorithm that I will implement in this module can be described as follows:
Scale the blue and green color components of each pixel by a scale factor that is less than or equal to 1.0.
The green scale factor:
- Is equal to 1.0 on the left side of the image
- Is equal to 0.0 on the right side of the image
- Decreases linearly with distance going from left to right across the image.
The blue scale factor
- Is 0.0 on the left side of the image
- Is 1.0 on the right side of the image
- Increases linearly with distance going from left to right across the image.
The value of the red color component is not modified.
The output images
Depending on whether or not pixel modification is enabled before compiling the program, the sketch will produce one of the two images shown in Image 1 and Image 2 .
The raw image is shown in Image 1 .
Image 1. the raw image.
The modified image is shown in Image 2 .
Image 2. the modified image.
Discussion and sample code
This sketch consists of two classes:
The code in Listing 7 is the code that needs to be in the leftmost tab of the PDE.
Will explain in fragments
I will break this code down and explain it in fragments. As I go along, I will be explaining how this code forms a template for the development of otherpixel modification algorithms in future modules.
The driver class named Pr0140a
The driver class that appears in the leftmost tab in the PDE hasn't changed significantly since I first explained it in Pr0120-Image Explorer . Therefore, I won't repeat that explanation here.