Cheat Sheet

Structure

void setup() {
  // basic setup of the sketch
  size(500, 500);
}
void draw() {
  // everything in here is drawn in a loop
}

void drawMyFunction() {
   // function goes in here 
}

Assignment operations go into draw() and mouse or keyboard interaction can be initiated below draw(). User-defined functions are usually specified below draw().

Functions

Functions can be called within draw . Java used the term method.

Modularity: Functions break down a larger program into smaller parts, making the code more managable and readable.

Reusability: Functions allow you to reuse code without having to retype it.

Basic functions (built-in)

From library

size(width, height);
background(color);
frameRate(fps);
println(string of text); 
random(low, high); // returns a value in this range

translate();

User-defined functions

Declaration has three parts:

  1. Return type
  2. Function name
  3. Arguments
returnType functionName(parameters) {
   // Code body of function 
}

Functions are typically called below draw(). It ultimately also helps when debugging by turning on and off parts of the program.

Arguments

drawBlackCircle(int diameter); // diameter is a parameter in the function and a local variable only used in that function 
drawBlackCircle(100); // 100 is the argument

A result of a mathematical expression could also be passed

drawBlackCircle(mouseX + 10);

Drawing a line would need four arguments (x, y), (x, y). But the line function itself is already built-in the library.

line(10, 25, 100, 75);

Parameters are the variables that live inside the parantheses in the function definition. Arguments are the values passed into the function when it is called.

drawCar(80, 175, 40, color(100, 0, 100); 

void drawCar (int x, int y, int thesize, color c) {
   // the code for the function
}

Remember

  • Pass the same amount of arguments as defined in the function’s parameters
  • When the argument is passed, it must be the same type as declared within the parameters in the function definition. An integer must be passed into an integer, a floating point into a floating point, and so on
  • The value you pass to a function can be a literal value, a varable, or the result of an expression
  • Parameters act as local variables to a function and are only accessible within that function

Shapes

ellipseMode(CENTER);
rectMode(CORNERS); 

point(1, 1);
line(1, 5, 1, 9);
rect(5, 6, 9, 9);
ellipse(6, 2, 7, 3);
triangle(100, 10, 10, 190, 190, 190);
arc(250, 170, 60, 30, 0, PI);

Colour

RGB

The colour model RGB is an additive system and colours are contructed from red, green, and blue. The value can range from 0 to 255 and defines the intensity of which the colour is displayed.

fill(255); // white
fill(0); // black
fill(255, 0, 0); // red 
fill(0, 255, 0); // green 
fill(0, 0, 255); // blue

Stroke & Fill

stroke(r, g, b, a);
noStroke(); 
strokeWeight(); 

fill(r, g, b, a);  
noFill(); 

Changing the location

mouseX and mouseY are global variables for the vertical and horizontal position of the mouse.

mouseX
mouseY
pmouseX // previous location
pmouseY 

Text

// BEFORE SETUP
// STEP 1 Declare PFont variable
PFont f; 

// SETUP
// STEP 2 Create font
f = createFont("Arial Black", 25, true); 

// DRAW
// STEP 3 Specify font to be used
textFont(f, 25); 

// STEP 4 Specify font color                                    
fill(255);

// STEP 5 Display Text
text("TEXT GOES HERE", 195, 325); // coordinates  

Code from the text tutorial on the Processing website.

Interaction / Events

void mousePressed() {
  // Code is written whenever mouse is pressed
} 

void keyPressed() {
  // Code is written whenever random key is pressed
}

Variables

  • Whole numbers
    integers, int
  • Decimal numbers
    floating point values, float
  • Characters
    variables of type, char
  • Boolean
    true / false

System variables

  • width (in pixels)
  • height (in pixels)
  • frameCount (number of frames processed)
  • frameRate (rate that frames are processed)
  • displayWidth (screen width in pixels)
  • displayHeight (screen height in pixels)
  • key (most recent key pressed)
  • keyCode (numeric code for key pressed)
  • keyPressed (true or false)
  • mousePressed (true or false)
  • mouseButton (button pressed: left, right, center)

List from: Shiffman., D., 2015. Learning Processing. 2nd ed. Amsterdam [etc.]: Elsevier Science & Technology, p.58

Initializing a variable

int name = value

Assignment operations

Are initialized at the bottom of draw() and are used to change the value of the variable.

Boolean expressions

Determines to either true or false.

Relational operators

> greater than
< less than
>= greater than or equal to
<= lesser than or equal to
== equal to
!= not equal to

Conditionals: if, else, else if

if mouseX < width/2) {
   fill(255); 
   rect(0, 0, width/2, height; 
}

if (boolean expression) {
   // execute code if boolean is true 
}

if (boolean expression) {
   // execute code if boolean is true 
} else {
   // execute this code if boolean is false 
}

else if evaluates conditional statements in the order in which they are written. Once an expression is true, the remaining code is ignored.

There can only be one if and one else in one conditional statement but more else if.

constrain();

“The constrain() function constrains a value to not exceed a maximum and minimum value.” (Processing Reference). The value is constrained and the the constrained value is assigned to the respective variable.

constrain(amt, low, high);
amt // the value to constrain
low // minimum value 
high // maximum value

Logical operators

|| // logical OR 
&& // logical AND 
! // logical NOT

Boolean Variables

Remember: Boolean variables are either true or false

Increment

increment++
decrement --
Increases the value of an integer variable by 1. Equivalent to the operation i = i + 1. If the value of the variable i is five, then the expression i++ increases the value of i to 6.

Trigonometry

Study of relationships between the sides and angles of trangles and sohcahtoa is a mnemonic device for remembering the definitions of the trigonometric functions, sine, cosine, and tangent.

  • soh: sine = opposite / hypotenuse
  • cah: cosine = adjacent / hypotenuse
  • toa: tangent = opposite / adjacent

Pixel location (x, y coordinates) are known as Cartesian coordinates (René Descartes).

Polar coordinates describe a point in space as an angle of rotation around the origin and radius from the origin. Trigonometric formulas allow you to convert the coordinates to Cartesian to draw a shape.

Object-oriented programming

Objects use: variables, conditional statements, loops, functions, … The properties of an object are variables and the functionalities are the functions.

A class is different from an object.

The cookie cutter is the class, the cookies are the objects.

Object-oriented programming allows us to take the variables and functions out of the main program and store them inside an object. Advantages are clean and readable code.

Objects can also be passed in as arguments to a function.

All classes must include four elements: name, data, constructor, and methods. The class exists as its own block and is placed anywhere outside of setup() and draw(). A class can also include other objects among its variables.

void setup() {
}

void draw(){
}

class Car {
}

Class name — specified by “class ChooseAName“. The code for the class comes into curly brackets after the name declaration. Class names are uppercase to distinguish them from variable names.

Data — Collection of variables which are referred to as instances. Each instance contains a set of variables.

Constructor — Special function inside of a class that creates the instance of the object itself. Used to create an individual object within the sketch, whenever a new object is created from this class. It is called by invoking the new operator.

Car myCar = new Car();

Functionality — Add functionality by writing methods with a return type, name, arguments, and a body of code.

  1. Declare an object
  2. Initialize object
    When initializing a primitive variable it is set equal to a number. An object may contain multiple pieces of data.
  3. Call methods on the object (functions) with dot syntax
Car myCar; // Declare an object 

void setup() {
myCar = new Car(); // Initialize object
}

void draw() {
background(255); // Calling methods
myCar..move(); // Dot syntax
myCar. display();
}

Arrays

Any time a program requires multiple instances of similar data, one might use an array. An array can be thought of as a list of variables. In an array, each element of the list has a unique index, an int value that designates its position in the list. The name refers to the list as a whole. Arrays end with square brackets [] after the type declaration. Arrays are of fixed size and when it’s defined, it can’t be changed. The array size is defined as an integer and can be a hard-coded number, a variable (of type integer), or an expression that evaluates to an integer.

int [] arrayOfInts; 
// type, array indication, name
// the arrayOfInts will store a list of integers
int[] arrayOfInts = new int [42]; 
// type, array indication, name 
// new operator, type, size of array (must be an integer)

Terms

  • Function
  • Variable
  • Boolean
  • Boolean variable
  • Integer
  • Char
  • Float
  • Conditional operators
  • Assignment operations