Create Graphics.

The createGraphics() function creates an object from the PGraphics class PGraphics is the main graphics and rendering context for Processing. The beginDraw() method is necessary to prepare for drawing and endDraw() is necessary to finish. Use this class if you need to draw into an off-screen graphics buffer or to maintain two contexts with different properties.

Copy


PGraphics pg;

void setup() {
  size(640, 360);
  pg = createGraphics(400, 200);
}

void draw() {
  fill(0, 12);
  rect(0, 0, width, height);
  fill(255);
  noStroke();
  ellipse(mouseX, mouseY, 60, 60);
  
  pg.beginDraw();
  pg.background(51);
  pg.noFill();
  pg.stroke(255);
  pg.ellipse(mouseX-120, mouseY-60, 60, 60);
  pg.endDraw();
  
  // Draw the offscreen buffer to the screen with image() 
  image(pg, 120, 60); 
}

Functions Used

fill()

Sets the color used to fill shapes

Learn More

stroke()

Sets the color used to draw lines and borders around shapes

Learn More

size()

Defines the dimension of the display window width and height in units of pixels

Learn More

ellipse()

Draws an ellipse (oval) to the screen

Learn More

createGraphics()

Creates and returns a new PGraphics object

Learn More

rect()

Draws a rectangle to the screen

Learn More

setup()

The setup() function is run once, when the program starts

Learn More

draw()

Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called

Learn More

noFill()

Disables filling geometry

Learn More

noStroke()

Disables drawing the stroke (outline)

Learn More

image()

The image() function draws an image to the display window

Learn More

background()

The background() function sets the color used for the background of the Processing window

Learn More