| << Chapter < Page | Chapter >> Page > |
Although this isn't rocket science, you may need to get a pencil and paper and draw some diagrams in order to understand exactly how the code in Listing 7 work. I will leave that as an exercise for the student.
Listing 7 also signals the end of the else clause that began in Listing 5 .
The code in Listing 8 tests to determine if a mouse button is pressed, and if so, calls the method named displayPixelInfo to cause the information shown at the bottom of Image 1 to be displayed.
If you remove the if statement and simply call the displayPixelInfo method at this point without regard to the mouse buttons, this information will be displayed any time that the mouse pointer isinside the display window.
//Display pixel information only if a mouse button
// is pressed.if(mousePressed){
displayPixelInfo(img);}//end if
}//end run
Listing 8 also signals the end of the run method.
The method named displayPixelInfo is shown in its entirety in Listing 9 .
This method displays coordinate and color information for the pixel at the current mouse pointer location. It also displays the width and the height of 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 Pr0120aRunner
The new material in Listing 9 is the set of repeated calls to the text method. There are many overloaded versions of this method. In a nutshell, theversion used in Listing 9 displays the String given by the first parameter at a location in the display window specified by the secondand third parameters.
The individual lines of text, as shown in Image 1 , are positioned relative to the bottom of the display window. Therefore, if there isinsufficient blank space at the bottom of the window (70 vertical pixels), the text will be drawn on the bottom of the image.
You may also need some guidance relative to the use of the following expression in Listing 9 :
mouseY * width + mouseX
This is the expression that is used to extract color data from the one-dimensional pixel array for a pixel at a given X,Y coordinate position.
Listing 9 also signals the end of the class named Pr0120aRunner .
I encourage you to copy the code from Listing 10 and Listing 11 and paste it into your PDE. Be sure to put the code from Listing 10 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 10 to change the name of the image file in two different places . Change the name from Pr0120a.jpg to the name of your file.
Run the sketch and observe the results. Experiment with the code. Make changes, run the sketch again, and observe the results of your changes. Make certain that youcan 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 the JavaScript version of the sketch discussed in this module in your HTML 5 compatible 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.
In this module, you learned how to write an image explorer sketch that can be used determine the coordinates and RGB color values of any pixel inan image by pointing to the pixel with a mouse. The sketch can also be used to determine thedimensions of the image.
Click here to view the JavaScript version of the sketch discussed in this module in your HTML 5 compatible 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 code discussed in this module are provided in Listing 10 and Listing 11 .
/*Pr0120a.pde
Copyright 2013, R.G.BaldwinProgram illustrates how to write an image explorer sketch
that will display the coordinates of the mouse pointeralong with the RGB color values 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 theimage is wider or taller than the output display window.
**********************************************************///@pjs preload required for JavaScript version in browser.
/* @pjs preload="Pr0120a.jpg"; */PImage img;
PFont font;Pr0120aRunner obj;
void setup(){//Make the height of the frame at least 70 pixels
// greater than the height of the image to allow room// to display width, height, and pixel information.
// Otherwise, the black text may not be visible,// depending on the image colors. If the height of the
// frame is less than the height of the image, an error// message is displayed in place of the image.
//Make width of the frame at least as wide as the// width of the image. Otherwise an error message will
// be displayed in place of the image.size(400,344);
frameRate(30);img = loadImage("Pr0120a.jpg");
obj = new Pr0120aRunner();font = createFont("Arial",16,true);
}//end setup//-------------------------------------------------------//
void draw(){obj.run();
}//end draw
class Pr0120aRunner{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]);//Normally some sort of image processing algorithm// would be implemented here.//Construct output pixel color
color c = color(reD, greeN, bluE);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//Display pixel information only if a mouse button// is pressed.
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 Pr0120aRunner
-end-
Notification Switch
Would you like to follow the 'The processing programming environment' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|