0.2 Pr0120-image explorer

Table of contents

• Preface
  • Viewing tip
    • Images
    • Listings
• Preview
  • Normal output from the sketch
  • Output when the image is too wide
  • Output when the image is too tall
• General background information
• Discussion and sample code
  • The class named Pr0120a
    • Beginning of the class
    • The setup method
    • The draw method
  • The class named Pr0120aRunner
    • Beginning of the class
    • Check for size problems
    • Copy from input to output
    • An object of the PImage class
    • The arrays named pixels
    • One-dimensional arrays
    • Extracting RGB color component values
    • The property named length and a for loop
    • Store colors in the output array
    • Display pixel information
    • The method named displayPixelInfo
    • Calls to the text method
    • Converting from two dimensions to one dimension
• Run the program
• 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 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.

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

• Image 1 . Normal output.
• Image 2 . Output for image too wide.
• Image 3 . Output for image too tall.
• Image 4 . Output produced by a common mathematical algorithm.

Listings

• Listing 1 . Beginning of the class named Pr0120a.
• Listing 2 . The setup method.
• Listing 3 . The draw method.
• Listing 4 . Beginning of the class named Pr0120aRunner.
• Listing 5 . Check for size problems.
• Listing 6 . Copy from input to output.
• Listing 7 . Store colors in the output array.
• Listing 8 . Display pixel information
• Listing 9 . The method named displayPixelInfo.
• Listing 10 . Pr0120a.pde.
• Listing 11 . Class Pr0120aRunner.

Preview

In this module, I will teach you how to write a Processing sketch that can be used to determine the following information by pointing to a locationin an image and pressing a mouse button:

• Width and height of an image.
• X and Y coordinates of the mouse pointer.
• RGB color values for the pixel at the mouse pointer.

Normal output from the sketch

Normal output from this sketch is shown in the screen capture image in Image 1 . (Note that a screen capture image does not show the mouse pointer.)

Figure

Image 1. normal output.