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:
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).
[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(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:
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:
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