This example is for Processing 2+. If you have a previous version, use the examples included with your software. If you see any errors or have suggestions, please let us know.

Background Image.

This example presents the fastest way to load a background image into Processing. To load an image as the background, it must be the same width and height as the program.

// The next line is needed if running in JavaScript Mode with Processing.js
/* @pjs preload="moonwalk.jpg"; */ 

PImage bg;
int y;

void setup() {
  size(640, 360);
  // The background image must be the same size as the parameters
  // into the size() method. In this program, the size of the image
  // is 640 x 360 pixels.
  bg = loadImage("moonwalk.jpg");

void draw() {
  stroke(226, 204, 0);
  line(0, y, width, y);
  if (y > height) {
    y = 0;