| << Chapter < Page | Chapter >> Page > |
You can selectively enable and disable the last two lines of code in Listing 1 to cause the output image to be either the raw image (as in Image 1 ) or a modified version of the raw image (as in Image 2 ). As explained earlier , the red and green color components are inverted and the blue color component is set to zero in the last line of code in Listing 1 .
The code in Listing 2 is the same as in Pr0120-Image Explorer . It is included here to provide continuity in the discussion.
if(width>= img.width){
if((cnt % img.width == 0)&&(cnt != 0)){
//Compensate for excess display width by// increasing the output counter.
ctr += (width - img.width);}//end if
//Store the pixel in the output pixel array// and increment the output counter.
pixels[ctr]= c;
ctr++;}//end if
}//end for loopupdatePixels();//required
}//end else
The code in Listing 3 is only slightly different from the code in Pr0120-Image Explorer .
//Display the author's name on the output.text("Dick Baldwin",10,20);//Disable the requirement to press a mouse button to
// display information about the pixel.// if(mousePressed){
displayPixelInfo(img);// }//end if
}//end run
The call to the text method was inserted in Listing 3 to display my name in the upper-left corner of Image 2 .
The call to the displayPixelInfo method was removed from the if statement in Listing 3 . This causes the pixel information shown at the bottom of Image 2 to be displayed any time that the mouse pointer is inside the display window withno requirement to press a mouse button to display the information.
(The information is actually displayed all of the time based on the last known location of the mouse pointer. At the beginning, the mouse pointer isassumed to be at coordinates 0,0. After that, if the mouse enters and then leaves the output display window, the last known location is the point on the edge where it leftthe window.)
The remainder of the class named class Pr0130aRunner is essentially the same as before. I explained the entire class in Pr0120-Image Explorer and won't repeat that explanation in this module.
I encourage you to copy the code from Listing 4 and Listing 5 into your PDE. Be sure to put the code from Listing 4 in the leftmost tab.
Don't forget to put an image file of your choice in a folder named data that is a child of the folder that contains the files with the .pde extension. You will need to edit the code from Listing 4 to change the name of the image file in two different places . Change the name from Pr0130a.jpg to the name of your file.
Run the sketchand observe the results. Experiment with the code. Make changes, run the sketch again, and observe the results of your changes. Make certain that you can explain why your changes behave as they do.
Don't forget to also create and run the JavaScript version of your sketch in your HTML 5 compatible browser.
Click here to view my JavaScript version of the sketch in your HTML 5compatible browser.
If you have a programmable Android device , try creating and running the Android version of your sketch in your Android device.
Also try creating and running the stand-alone version of the sketch by selecting Export Application from the File menu while in Java mode.
This module introduced you to pixel-based image processing algorithms, similar to those that you might find in commercial image editing software suchas Photoshop .
Click here to view the JavaScript version of the sketch discussed in this module in your HTML 5compatible browser.
This section contains a variety of miscellaneous information.
Financial : Although the Connexions site makes it possible for you to download a PDF file for thismodule at no charge, and also makes it possible for you to purchase a pre-printed version of the PDF file, you should beaware that some of the HTML elements in this module may not translate well into PDF.
I also want you to know that, I receive no financial compensation from the Connexions website even if you purchase the PDF version of the module.
In the past, unknown individuals have copied my modules from cnx.org, converted them to Kindle books, and placed them for sale on Amazon.com showing me as the author. Ineither receive compensation for those sales nor do I know who does receive compensation. If you purchase such a book, please beaware that it is a copy of a module that is freely available on cnx.org and that it was made and published withoutmy prior knowledge.
Affiliation : I am a professor of Computer Information Technology at Austin Community College in Austin, TX.
Complete listings of the classes discussed in this module are provided in Listing 4 and Listing 5 .
/*Pr0130a.pde
Copyright 2013, R.G.BaldwinProgram illustrates how to write a relatively simple image
processing algorithm and how to display the output inan image explorer. The image explorer displays the
coordinates of the mouse pointer along with the RGB colorvalues of the pixel at the mouse pointer. Also displays
the width and height of the image.Displays an error message in place of the image if the
image is wider or taller than the output display window.**********************************************************/
//@pjs preload required for JavaScript version in browser./* @pjs preload="Pr0130a.jpg"; */
PImage img;PFont font;
Pr0130aRunner obj;void setup(){
//This size matches the width of the image and allows// space below the image to display the text information.
size(365,344);frameRate(30);
img = loadImage("Pr0130a.jpg");obj = new Pr0130aRunner();
font = createFont("Arial",16,true);}//end setup
//-------------------------------------------------------//void draw(){
obj.run();}//end draw
class Pr0130aRunner{void run(){
background(255);//whitetextFont(font,16);//Set the font size, and colorfill(0);//black textloadPixels();//required
img.loadPixels();//requiredfloat reD,greeN,bluE;//store color values hereint ctr = 0;//output pixel array counter
//Display error message in place of image if the// image won't fit in the display window.
if(img.width>width){
text("--Image too wide--",10,20);text("Image width: " + img.width,10,40);
text("Display width: " + width,10,60);}else if(img.height>height){
text("--Image too tall--",10,20);text("Image height: " + img.height,10,40);
text("Display height: " + height,10,60);}else{
//Copy pixel colors from the input image to the// display image.
for(int cnt = 0;cnt<img.pixels.length;cnt++){
//Get and save RGB color values for current pixel.reD = red(img.pixels[cnt]);greeN = green(img.pixels[cnt]);bluE = blue(img.pixels[cnt]);//Construct output pixel color
//Selectively enable and disable the following two// statements to display either the raw image, or
// a modified version of the raw image where the// red and green color components have been
// inverted and the blue color component has been// set to zero.
//color c = color(reD, greeN, bluE);//rawcolor c = color(255-reD, 255-greeN, 0);//modifiedif(width>= img.width){
if((cnt % img.width == 0)&&(cnt != 0)){
//Compensate for excess display width by// increasing the output counter.
ctr += (width - img.width);}//end if
//Store the pixel in the output pixel array// and increment the output counter.
pixels[ctr]= c;
ctr++;}//end if
}//end for loopupdatePixels();//required
}//end else//Display the author's name on the output.text("Dick Baldwin",10,20);//Disable the requirement to press a mouse button to
// display information about the pixel.// if(mousePressed){
displayPixelInfo(img);// }//end if
}//end run//-----------------------------------------------------//
//Method to display coordinate and pixel color info at// the current mouse pointer location. Also displays
// width and height information about the image.void displayPixelInfo(PImage image){
//Protect against mouse being outside the frameif((mouseX<width)&&(mouseY<height)&&(mouseX>= 0)&&(mouseY>= 0)){//Get and display the width and height of the
// image.text("Width: " + image.width + " Height: " +
image.height,10,height - 50);//Get and display coordinates of mouse pointer.text("X: " + mouseX + ", Y: " + mouseY,10,
height - 30);//Get and display color data for the pixel at the// mouse pointer.
text("R: " + red(pixels[mouseY*width+mouseX]) +
" G: " + green(pixels[mouseY*width+mouseX]) +
" B: " + blue(pixels[mouseY*width+mouseX]),
10,height - 10);}//end if
}//end displayPixelInfo}//end class Pr0130aRunner
-end-
Notification Switch
Would you like to follow the 'The processing programming environment' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|