Processing: Creative Coding and Computational Art

these elements is the creation of an off-screen image, also sometimes referred to as an
image buffer. Beyond drawing to the display window, you can also use the
createGraphics() function to generate a PGraphics object that you can draw directly
into. You can then output this off-screen image to the screen, or even save it to a file.
The next example uses these two structures to generate an off-screen image that will
eventually be turned into a tiled background (see Figure A-18). The sketch allows a user to
draw within the display window. The drawing is simultaneously output to the screen (using
Processing’s built-in graphics context) and written to an off-screen buffer (using a
PGraphics object created with the createGraphics() function). When the user releases
the mouse, the off-screen image is scaled, positioned, and drawn to the screen as a tiled
fill pattern. Notice in the sketch code that the two PGraphics methods beginDraw() and
endDraw() are used, in a sense, as entry and exit portals for drawing to the off-screen
PGraphics object.
/* Tile Designer
Ira Greenberg, October 11, 2006
draw to off-screen buffer
to create a tiled background */
PGraphics p;
int tiles = 10;
float strokeWt = 2.75;
float scaleFactor;
boolean isRecordable = false;
void setup() {
size(400, 400);
background(0);
smooth();
float tileWidth = width/tiles;
scaleFactor = tileWidth/width;
}
void draw() {
// write to off-screen buffer
if (isRecordable){
p.line(pmouseX, pmouseY, mouseX, mouseY);
}
// preview drawing of tile
if (mousePressed){
stroke(255);
line(pmouseX, pmouseY, mouseX, mouseY);
}
}
void mousePressed(){
p = createGraphics(width, height, JAVA2D);
noStroke();
PROCESSING LANGUAGE API
735
A