DokuWiki

To use an image in a Processing program, that image has to be located in the “data” folder of your sketch. You can copy it there yourself or use the Sketch→Add File… menu selection.

Processing uses the PImage class to represent images. To create a PImage object from an image file, we can load the image (in .gif, .jpg, or .tga format) into the sketch with loadImage:

PImage myImage = loadImage("ImageFile.jpg")

or create an empty picture with createImage:

PImage myImage = createImage(width, height, RGB)

The last argument passed to createImage is a color mode; for now, we'll only be using RGB.

The PImage class has a few useful variables:

PImage.width - The width of this picture.

PImage.height - The height of this picture.

PImage.pixels[] - An array with every pixel that makes up this picture.

Now, we know from back in Part 2 that the window in Processing can be given a width and height. So, we can do things like this:

size(myImage.width, myImage.height);

in order to make the display window size match the image size. You can do other effects as well, like shrinking the image or making the display window size larger for a “border” effect. In any case, we now have the image loaded, the display window sized to match it, and we'd like to display it. We can do this with the image function:

image(myImage, x, y)

where the upper-left corner of the image will be at pixel coordinates (x,y).

When using the PImage.pixels[] array:

• You don't have to use loadPixels(). The array is automatically populated when you load the picture however this is not guaranteed to be true in future versions, so I do it anyway.
• Use get() and set() to change color values:

PImage.get() - grabs the whole picture.

PImage.get(x, y) - grabs the pixel at (x,y).

PImage.get(x, y, width, height) - grabs a rectangle with upper-left corner at (x,y), with given width and height.

PImage.set(x, y, color) - set pixel (x,y) to color.

PImage.set(x, y, PImage) - draw the image, with upper-left corner at (x,y).

• To commit changes, you call PImage.updatePixels(). This does not re-draw the screen.
• You have to call image() to place the modified picture on the screen.

[Note: there are global versions of the get and set functions, which operate on the global pixels[] matrix.]

Processing has a number of functions that make editing pictures much simpler than changing individual pixels:

blend(x, y, width, height, dx, dy, dwidth, dheight, MODE)

Copy a given section onto the picture, then blend with MODE. Can be used globally or with an individual PImage. Modes, from the official Documentation:

• BLEND - linear interpolation of colours: C = A*factor + B
• ADD - additive blending with white clip: C = min(A*factor + B, 255)
• SUBTRACT - subtractive blending with black clip: C = max(B - A*factor, 0)
• DARKEST - only the darkest colour succeeds: C = min(A*factor, B)
• LIGHTEST - only the lightest colour succeeds: C = max(A*factor, B)
• DIFFERENCE - subtract colors from underlying image.
• EXCLUSION - similar to DIFFERENCE, but less extreme.
• MULTIPLY - Multiply the colors, result will always be darker.
• SCREEN - Opposite multiply, uses inverse values of the colors.
• OVERLAY - A mix of MULTIPLY and SCREEN. Multiplies dark values, and screens light values.
• HARD_LIGHT - SCREEN when greater than 50% gray, MULTIPLY when lower.
• SOFT_LIGHT - Mix of DARKEST and LIGHTEST. Works like OVERLAY, but not as harsh.
• DODGE - Lightens light tones and increases contrast, ignores darks. Called “Color Dodge” in Illustrator and Photoshop.
• BURN - Darker areas are applied, increasing contrast, ignores lights. Called “Color Burn” in Illustrator and Photoshop.

blend(sourceImage, x, y, width, height, dx, dy, dwidth, dheight, MODE)

Blend, but take the section from sourceImage.

blendColor(c1, c2, MODE)

Blend colors c1 and c2 with one of the following modes: BLEND, ADD, SUBTRACT, DARKEST, LIGHTEST, DIFFERENCE, EXCLUSION, MULTIPLY, SCREEN, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, or BURN

copy(x, y, width, height, dx, dy, dwidth, dheight)

Copy a part of this picture on to the picture at a different location, possibly with different dimensions. This can be used globally (uses the global pixels[] array) or with a PImage (uses the PImage.pixels[] array.)

copy(sourceImage, x, y, width, height, dx, dy, dwidth, dheight)

Copy a part of the source picture on to this picture at a different location, possibly with different dimensions. This can be used globally (uses the global pixels[] array) or with a PImage (uses the PImage.pixels[] array.)

filter(MODE [, level] )

Apply the given filter (with an optional level) to this picture. Can be used globally or locally. Modes:

• THRESHOLD - Simple edge detection. Level between 0.0 and 1.0, defualt 0.5.
• GRAY - Grayscale (no level).
• INVERT - Invert (no level).
• POSTERIZE - Posterize with the specified number of levels (unknown default).
• BLUR - Guassian blur. The level is the “radius” (default 1).
• ERODE - Reduce bright areas by amount defined by “level”.
• DILATE - Increases bright areas by amount defined by “level”.

get()

Grabs the whole picture. Works globally or with a PImage.

Syntax:

get() //global
PImage.get() //PImage

get(x, y)

Grabs the pixel at (x,y). Works globally or with a PImage.

Syntax:

get(x, y)        // global
PImage.get(x, y) // PImage

get(x, y, width, height)

Grabs a rectangle with upper-left corner at (x,y), with given width and height. Works globally or with a PImage.

Syntax:

get(x, y, width, height);        // global
PImage.get(x, y, width, height); // PImage

imageMode(MODE)

For any function that draws an image to the screen, you can choose between two modes:

• CORNER - This is the default. The first two arguments are the upper-left corner, the second two are the width and height.
• CORNERS - The first two arguments are the upper-left corner, and the second two are the lower-right corner.

For instance, with imageMode set to CORNERS, get(x, y, width, height) would become get(x1, y1, x2, y2).

lerpColor(c1, c2, amount)

Calculate a color between c1 and c2. An “amount” of 0.0 is the first color, 1.0 is the second, 0.5 is half-way in between, etc.

noTint()

Remove all tint. (See tint())

scale(x, y)

Scale the width to “x” percent of the original, and scale the height to “y” percent of the original.

set(x, y, color)

Set pixel (x,y) to color. Works globally or with a PImage.

Syntax:

set(x, y, color);        // global
PImage.set(x, y, color); // PImage

set(x, y, PImage)

Draw the image, with upper-left corner at (x,y). Works globally or with a PImage.

Syntax:

set(x, y, PImage); //global
set(x, y, SecondPImage); //PImage

tint(color)

Everything after this command (until next call to noTint()) will be tinted the given color.

Saving the contents of the drawing screen as an image is simple. Just use save(), passing the name of the file to save into (and the proper extension for the format type). The file will be placed in the main sketch directory. You can save to any supported format. In the example, the window is saved as a PNG file.

Syntax:

save("contents.png");

Prev: Part 9- A Few Functions for Creating and Manipulating Basic Shapes | Next: Part 11- Sound