processing Hello World


Example

The easiest way to write Processing code is to simply call a series of functions. Press the run button in the Processing editor, and Processing will run your code. Here's an example:

size(200, 200);
background(0, 0, 255);
fill(0, 255, 0);
ellipse(100, 100, 100, 100);

This code creates a 200x200 window, draws a blue background, changes the fill color to green, and then draws a circle in the middle of the screen.

green circle on blue background

However, most Processing sketches will use the predefined setup() and draw() functions.

  • The setup() function is called automatically by Processing, once at the very beginning of the sketch. This function is used for doing the initial setup, such as size, and loading of resources such as image and sound files.

  • The draw() function is called automatically by Processing 60 times per second. This function is used for drawing and getting user input.

    void setup() {
      size(200, 200);
    }
    
    void draw(){
      background(0);
      ellipse(mouseX, mouseY, 25, 25);
    }
    

This code creates a 200x200 window and then draws a circle at the current mouse position.

circle at mouse