Processing Documentation

Processing Documentation

Shapes

Rectangles

// Draws a rectangle with the top left at (x, y)
rect(x, y, width, height);

Ellipses and Circles

// Draws an ellipse
// `x` is the coordinate of the left side
// `y` is the coordinate of the top side
ellipse(x, y, width, height);

// To draw a circle, just make width and height
// the same value, which is the diameter
ellipse(x, y, diameter, diameter)

Lines

// Draws a line from (x1, y1) to (x2, y2)
line(x1, y1, x2, y2);

Text

// Set the font for the next text you draw
textFont(fontName);

// Set the font size for the next text you draw
textSize(size);

// Draws "Hello" on the screen at (x, y)
text("Hello", x, y);

Points

// Draws a point at the given coordinates
point(x, y);

Triangles

// Draws a triangle
// You must pass 3 coordinates for each point
triangle(x1, y1, x2, y2, x3, y3);

Color

Fill Colors

// Set the whole background color with the given
// red, green, blue values (r, g, b)
background(r, g, b);

// Set the fill color for the next shape you draw
// with the given red, green, blue values (r, g, b)
fill(r, g, b);

// Remove the fill color for the next shape you draw
noFill(r, g, b);

Outline Colors

// Set the outline color for the next shape you draw
// with the given red, green, blue values (r, g, b)
stroke(r, g, b);

// Remove the outline for the next shape you draw
noStroke(r, g, b);

Animation

// Defining the `draw` function like this will
// run the code inside the function repeatedly
draw = function() {
    // Your code here will repeat
}

Interaction

Mouse

// current x-coordinate of the mouse
mouseX

// current y-coordinate of the mouse
mouseY

// Draw a 10x10 square where the mouse is
rect(mouseX, mouseY, 10, 10)

// Handle mouse events
// Define one of these functions

mouseClicked = function() {
    // Code here runs when the mouse is clicked
    // (This is a full click when you release the button)
}

mousePressed = function() {
    // Code here runs when the mouse is pressed
    // This is before your hand lifts up off the button
}

mouseReleased = function() {
    // Code here runs when the mouse is released
    // This is when your hand lifts up off the button
}

mouseMoved = function() {
    // Code here runs when the mouse is moved
}

mouseDragged = function() {
    // Code here runs when the mouse is dragged
}

Keyboard

// Value for which key is being pressed right now
key
key.toString() // Returns a string with the value of the key
key.code // Returns the numeric key code

// Boolean for whether any key is currently being pressed
keyIsPressed

// Example
if (keyIsPressed) {
    // Do something because a key is being pressed
}

// Handle keyboard events
// Define one of these functions

keyPressed = function() {
    // Code here runs when the key is pressed
    // (This is a when you first touch the key)
}

keyReleased = function() {
    // Code here runs when the key is released
    // (This is when you release your finger from the key)
}

Numbers

Canvas

// Get the width of the screen
width

// Get the height of the screen
height

// Draw an ellipse that's the half the width
// and half the height of the screen
ellipse(0, 0, width / 2, height / 2);

Random

// Get a random number between 0 and `num`
random(num);

// Get a random x coordinate on the screen
var x = random(width)

// Get a random y coordinate on the screen
var y = random(height)

// Draw a circle with diameter 10 at that random spot
ellipse(x, y, 10, 10)

// Set the background to a random color
// Each r/g/b value can go up to 255
background(random(255), random(255), random(255))