Your First Sketch

The Two Functions You’ll Always Use

Every Processing sketch is built around two functions: setup() and draw(). Understanding what each one does — and the difference between them — is the foundation of everything you’ll make.

void setup() {
  // Runs once when the sketch starts
}

void draw() {
  // Runs repeatedly, over and over
}

setup() runs exactly once, at the moment your sketch launches. You use it to configure the sketch — setting the canvas size, loading files, initializing variables, and doing any work that only needs to happen once.

draw() runs in a loop, continuously, for as long as the sketch is running. By default it runs 60 times per second (60 frames per second, or fps). Every time draw() is called, it can update positions, redraw shapes, and react to input. This is where your animation lives.

The relationship between them creates a simple but powerful pattern:

sketch starts → setup() runs once
                     ↓
               draw() runs
               draw() runs
               draw() runs  ← repeated until you stop the sketch
               draw() runs
                    ...

Your Minimal First Sketch

Here’s the simplest useful sketch:

void setup() {
  size(400, 400);
  background(0);
}

void draw() {
  // nothing yet
}

size(400, 400) sets the canvas to 400 pixels wide by 400 pixels tall. The numbers are always width first, then height.

background(0) fills the background with a color. A single number means grayscale — 0 is black, 255 is white. You can also pass three numbers for red, green, and blue: background(255, 0, 0) for red.

Run this. You get a black square. Not exciting yet, but the foundation is solid.

Drawing a Circle

Add an ellipse to the center of the canvas:

void setup() {
  size(400, 400);
}

void draw() {
  background(30);
  ellipse(200, 200, 80, 80);
}

ellipse(x, y, width, height) draws an ellipse centered at (x, y). When width and height are equal, you get a circle. Here it’s drawn at the center of the 400x400 canvas, with a diameter of 80 pixels.

Note that background(30) is now in draw(), not setup(). This is intentional — calling background at the start of every draw call clears the canvas, preventing drawing artifacts from piling up. Remove it and drag your mouse over the sketch window to see what happens without that clear.

Making It Follow the Mouse

Processing provides two special variables that are always up to date: mouseX and mouseY. They hold the current pixel coordinates of your cursor relative to the sketch window.

void setup() {
  size(400, 400);
}

void draw() {
  background(30);
  ellipse(mouseX, mouseY, 80, 80);
}

Run this and move your mouse over the sketch window. The circle follows your cursor. With just one change — replacing the fixed numbers 200, 200 with mouseX, mouseY — you’ve added interactivity.

This is one of Processing’s defining features: the path from idea to running, interactive result is very short.

Saving Your Sketch

Press Ctrl+S (Windows/Linux) or Cmd+S (macOS). If this is the first save, a dialog asks you to name the sketch. Choose a name with no spaces — use underscores instead, like mouse_circle. Processing creates a folder with that name in your sketchbook and saves a .pde file inside it.

Save often. Processing doesn’t autosave.

Running and Stopping

• Run: Click the play button (▶) in the toolbar, or press Ctrl/Cmd+R
• Stop: Click the stop button (■), or close the sketch window directly

When you modify code and want to see the change, you must stop the running sketch and run it again. Processing doesn’t hot-reload.

Using println() for Debugging

println() prints a value to the console at the bottom of the IDE. It’s your primary debugging tool:

void setup() {
  size(400, 400);
}

void draw() {
  background(30);
  ellipse(mouseX, mouseY, 80, 80);
  println("Mouse position: " + mouseX + ", " + mouseY);
}

Move your mouse and watch the console. You’ll see a stream of position values updating 60 times per second.

A note on performance: println() inside draw() prints 60 times a second. This is fine for short sessions but can make the console a wall of text. Remove or comment out println calls when you’re done debugging.

// println("Mouse position: " + mouseX + ", " + mouseY);

The // at the start of a line turns it into a comment — Processing ignores it.

Common First Errors and What They Mean

“The function size() needs parameters” You wrote size() without numbers inside. Processing needs to know the width and height.

“Syntax error, maybe a missing semicolon” Every statement in Processing (Java) ends with a semicolon. Scan your code for missing ; at the ends of lines.

“Cannot find anything named ellipse” You may have misspelled the function name. Function names in Processing are case-sensitive — ellipse works, Ellipse does not.

“void cannot be resolved to a type” You’re not inside a function. Make sure your code is inside setup() or draw(), not floating outside them.

Blank gray window that won’t close The sketch is running but might be in an infinite loop or waiting. Click the stop button in the IDE toolbar.

Putting It Together: A Complete First Sketch

Here’s a slightly more interesting version that combines everything from this tutorial:

void setup() {
  size(500, 500);
  background(20, 20, 40);  // dark blue-black
}

void draw() {
  background(20, 20, 40);  // clear the canvas each frame

  // Draw a large, dim circle at the center
  fill(255, 255, 255, 30);  // white, very transparent
  noStroke();
  ellipse(width / 2, height / 2, 300, 300);

  // Draw a solid circle that follows the mouse
  fill(255, 200, 50);      // warm yellow
  ellipse(mouseX, mouseY, 50, 50);

  // Show coordinates in the console
  // println(mouseX + ", " + mouseY);
}

A few new things here:

• fill(r, g, b, a) — the fourth number controls transparency (0 = fully transparent, 255 = fully opaque)
• noStroke() — removes the outline from shapes
• width / 2 and height / 2 — Processing provides width and height variables that always equal the canvas size you set in size()

Run it. Move your mouse. Notice how the glowing yellow circle drifts over the dim background circle. This is the core loop of creative coding: set up conditions, then let time and interaction drive the result.

In the next tutorial, you’ll go deeper into the coordinate system and learn how to transform the canvas itself using translate, rotate, and scale.