composite expressions

Anywhere where you need to specify a value, you can also use a composite expression of the type of value required. Composite expression may involve any combination of the following:

• numerical operators :: 10 + 500
• variables :: a + width - 10
• functions :: random() + myAngle()
• mathematical operators (which are also functions) :: log(500) + b

Some useful functions to use in expressions are:

• round()
• abs()
• ceil()
• floor()
• random()
• sqrt()

The following sketch uses random() to draw concentric squares all over the canvas.

int minSize = 50;
int maxSize = 100;

void setup() {
  size(400, 400);
  smooth();
  rectMode(CENTER);
  strokeWeight(2);
}

void draw() {
  drawSquares(random(width), random(height), random(minSize, maxSize)); 
}

void drawSquares(float xPos, float yPos, float sqSize) {
  // draw the outer square first
  fill(254, 255, 0);
  stroke(255, 166, 0);
  drawSquare(xPos, yPos, sqSize);

  // draw the inner square next
  fill(252, 233, 8);
  stroke(216, 61, 4);
  drawSquare(xPos, yPos, sqSize/2);
}

void drawSquare(float xPos, float yPos, float sqSize) {
  rect(xPos, yPos, sqSize, sqSize);
}

You are also likely to encounter these short versions of operators:

• a += b; is equivalent to a = a+b;
• a -= b; is equivalent to a = a-b;
• a *= b; is equivalent to a = a*b;
• a /= b; is equivalent to a = a/b;
• a++; is equivalent to a = a+1;
• a--; is equivalent to a = a-1;

In practice,

• x = x+1;
  x++;
  x += 1;
  :: adds 1 to the value of x and makes the result the new value of x
• x = x+25;
  x += 25;
  :: adds 25 to the value of x and makes the result the new value of x
• x = x-1;
  x--;
  x -= 1;
  :: subtracts 1 from the value of x and makes the result the new value of x

operator precedence

If you don't explicitly state the order in which an expression is evaluated, they are evaluated based on the operator precedence rules. It's a good idea to specify the order of the operations yourself, using brackets.

For example, let's declare the following variables:

int a = 10;
int b = 5;
int c = 12;
int d = 2;

and evaluate the following expressions:

 a + b *  c / d
10 + 5 * 12 / 2
10 +  60    / 2
10 +       30
  40

( a + b) *  c / d
(10 + 5) * 12 / 2
   15    * 12 / 2
       180    / 2
             90

( a + (b *  c)) / d
(10 + (5 * 12)) / 2
(10 +   60)     / 2
   70           / 2
               35

datatype conversion

Sometimes you need to explicitly convert one data type into another. For instance, often you might need to use a function that returns a float value in an integer expression:

int n = sin(angle) + 2;  // will throw an error

Using a special function int() you can convert a float expression into an int.

int n = int(sin(angle)) + 2;  // will not throw an error

Processing includes conversion functions for most variable types such as int(), float(), boolean(), ...

Let's modify our star so that its size is relative to the speed of the mouse. To do this, we'll need to use the abs() function to get the offset between the current and previous mouse positions. Since abs() returns a float, we'll need the int() conversion to pass the value into our function.

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

void draw() {
  background(0);

  // draw a star at the current mouse position with size relative to the mouse movement
  fill(216, 61, 4);
  int avgMove = int((abs(pmouseX-mouseX)+abs(pmouseY-mouseY))/2);
  drawStar(mouseX, mouseY, avgMove*5); 
}

void drawStar(int xPos, int yPos, int starSize) {
  beginShape();
  vertex(xPos, yPos-starSize/2);
  vertex(xPos-starSize/3, yPos+starSize/2);
  vertex(xPos+starSize/2, yPos-starSize/8);
  vertex(xPos-starSize/2, yPos-starSize/8);
  vertex(xPos+starSize/3, yPos+starSize/2);
  vertex(xPos, yPos-starSize/2);
  endShape();
}

Processing Workshop

Elie Zananiri
Alberta College of Art + Design
3-5 April 2008