Header-Processing_2.jpg

Week 2

Variables

Variables are like containers for data: you can assign any values to these variables (e.g. int - integers; float - numbers with decimals), and these values may be manipulated throughout your program.
// set up sketch size and background colour
size(250,250);
background(255);
 
// smooth edges of shapes
smooth();
 
// set up two variables
int a = 15;
int b = 15;
 
// define fill and stroke
noStroke();
fill(100,150,220,120);
 
// draw 3 ellipses using above variables as inputs for width and height
// at each stage, multiply variables to make the ellipse larger
ellipse(40,40,a,b);
a = a * 2;
b = b * 3;
ellipse(80,80,a,b);
a = a * 3;
b = b * 4;
ellipse(150,150,a,b);

Loops

The loop function instructs the computer to continuously execute a set of instructions for n number of times.
// set up size and background
size(250,250);
background(255);
 
// smooth edges of shapes
smooth();
 
// define size of circles, number of circles, and spacing between circles
int circleSize = 20;
int numCircles = 10;
int circleSpacing = 25;
 
// define fill and stroke
noStroke();
fill(100,150,220,100);
 
// start a loop and store the number of the current iteration in a variable called i
// set i to 1 at the start, and keep going as long as i is less than numCircles
// at each iteration, increase i by 1
for (int i=1; i<numCircles; i++) {
 
  // draw a circle, using defined variables and increase the y-position each time using i
  ellipse(circleSize,i*circleSpacing,circleSize,circleSize);
}
 

Nested Loops

Nested loops are loops that occur within a loop. You can get more than one instruction being executed simultaneously with this method.
// set up size and background
size(250,250);
background(255);
 
// smooth edges of shapes
smooth();
 
// define size of circles, number of circles, and spacing between circles
int circleSize = 20;
int numCircles = 10;
int circleSpacing = 25;
 
// define fill and stroke
noStroke();
fill(100,150,220,100);
 
// first loop - using variable j to control x-position
for (int j=1; j<numCircles; j++) {
 
  // inner loop - using variable i to control y-position
  for (int i=1; i<numCircles; i++) {
    // draw the circle
    ellipse(j*circleSpacing,i*circleSpacing,circleSize,circleSize);
  }
 
}
 

Nested Loops with Random Numbers

The random function generates random numbers in a variable. Every time the function is called, it will return any value within the range specified by the user.
// set up size and background
size(250,250);
background(255);
 
// smooth edges of shapes
smooth();
 
// define size of circles, number of circles, and spacing between circles
int circleSize = 20;
int numCircles = 10;
int circleSpacing = 25;
 
// define fill and stroke
noStroke();
fill(100,150,220,100);
 
// nested loop to create a grid of circles
for (int j=1; j<numCircles; j++) {
 
  for (int i=1; i<numCircles; i++) {
    // random numbers to randomly vary the x and y position of each circle
    float shiftX = random(1,50);
    float shiftY = random(1,50);
    // draw the circle
    ellipse(j*circleSpacing+shiftX,i*circleSpacing+shiftY,circleSize,circleSize);
  }
 
}
 


Week 3


Motion 1

/* Define the size of the circle by storing it in a variable */
int circleSize = 100;
 
/* Define a variable to hold the changing Y position of the circle
and initialize it to be half the circle size so that the circle starts
out with it's top edge touching the top of the sketch */
int circleY = circleSize/2;
 
/* Define a variable to control the amount of change (speed) of the
circle. This number will be added to the Y-position of the circle at
each frame. */
int increment = 1;
 
 
/* The code within setup() is used to initialize settings for your sketch. */
void setup() {
  size(250,250);
  fill(255);
  smooth();
  noStroke();
 
  /* Set the frame rate to 60 - this will cause the draw() block of code
  to run 60 times per second which will result in smooth motion. Try
  changing this number to see how it affects the animation quality. */
  frameRate(60);
}
 
 
/* The code within draw() is repeatedly run at the rate defined by
frameRate(). Put code in here to create sketches that change over time */
void draw() {
 
  /* Clear the screen by setting a background colour. Without this,
  subsequent shapes will keep adding up on screen.. comment out this
  line and see what happens! */
  background(50);
 
  /* Increase the Y-position of the circle by adding the 'increment' variable.
  This could be shortened to: circleY += increment */
  circleY = circleY + increment;
 
  /* Draw the circle using the new Y-position. the X position will be set
  to half of the sketch width so that the circle appears in the centre. */
  ellipse(width/2, circleY, circleSize, circleSize);
 
}

Motion 2

/* Define the size of the circle by storing it in a variable */
int circleSize = 100;
 
/* Define a variable to hold the changing Y position of the circle
and initialize it to be half the circle size so that the circle starts
out with it's top edge touching the top of the sketch */
int circleY = circleSize/2;
 
/* Define a variable to control the amount of change (speed)
of the circle. It will be used to add or subtract from the
Y-position of the circle at each frame */
int increment = 1;
 
/* Define variables to store the boundaries of the animation.
We will assign values to these within setup() */
int topLimit;
int bottomLimit;
 
 
/* The code within setup() is used to initialize settings for your sketch. */
void setup() {
  size(250,250);
  fill(255);
  smooth();
  noStroke();
 
  /* Set the frame rate to 60 - this will cause the draw() block of code
  to run 60 times per second which will result in smooth motion. Try
  changing this number to see how it affects the animation quality. */
  frameRate(60);
 
  /* Set the top limit of the animation to the initial value of circleY. */
  topLimit = circleY;
 
  /* Set the bottom limit of the animation to be the sketch height minus half
  the circle size, so that the circle just touches the bottom of the sketch. */
  bottomLimit = height-(circleSize/2);
}
 
 
/* The code within draw() is repeatedly run at the rate defined by
frameRate() above. Put code in here to create animations */
void draw() {
 
  /* Clear the screen by setting a background colour. Without this,
  subsequent shapes will keep adding up on screen.. comment out this
  line and see what happens! */
  background(50);
 
  /* Check if the current Y-position of the circle is outside the bounds
  set by either topLimit or bottomLimit, and if so, reverse the direction
  by multiplying by -1. */
  if (circleY < topLimit || circleY > bottomLimit) {
    increment = increment * -1;
  }
 
  /* Apply the change to the circle's Y position.
  This could be shortened to: circleY += change */
  circleY = circleY + increment;
 
  /* Draw the circle using the new Y-position. the X position will be set
  to half of the sketch width so that the circle appears in the centre. */
  ellipse(width/2, circleY, circleSize, circleSize);
 
}

Motion 2 Interactive

/* Define the size of the circle by storing it in a variable */
int circleSize = 100;
 
/* Define a variable to hold the changing Y position of the circle
and initialize it to be half the circle size so that the circle starts
out with it's top edge touching the top of the sketch */
int circleY = circleSize/2;
 
/* Define a variable to control the amount of change (speed)
of the circle. It will be used to add or subtract from the
Y-position of the circle at each frame */
int increment = 1;
 
/* Define variables to store the boundaries of the animation.
We will assign values to these within setup() */
int topLimit;
int bottomLimit;
 
 
/* The code within setup() is used to initialize settings for your sketch. */
void setup() {
  size(250,250);
  fill(255);
  smooth();
  noStroke();
 
  /* Set the frame rate to 60 - this will cause the draw() block of code
  to run 60 times per second which will result in smooth motion. Try
  changing this number to see how it affects the animation quality. */
  frameRate(60);
 
  /* Set the top limit of the animation to the initial value of circleY. */
  topLimit = circleY;
 
  /* Set the bottom limit of the animation to be the sketch height minus half
  the circle size, so that the circle just touches the bottom of the sketch. */
  bottomLimit = height-(circleSize/2);
}
 
 
/* The code within draw() is repeatedly run at the rate defined by
frameRate(). Put code in here to create sketches that change over time */
void draw() {
 
  /* Clear the screen by setting a background colour. Without this,
  subsequent shapes will keep adding up on screen.. comment out this
  line and see what happens! */
  background(50);
 
  /* Check if the current Y-position of the circle is outside the bounds
  set by either topLimit or bottomLimit, and if so, reverse the direction
  by multiplying the increment by -1. */
  if (circleY < topLimit || circleY > bottomLimit) {
    increment = increment * -1;
  }
 
  /* Apply the increment to the circle's Y position.
  This could be shortened to: circleY += increment */
  circleY = circleY + increment;
 
  /* Draw the circle using the new Y-position. The X position will be set
  to to the current X-position of the mouse. */
  ellipse(mouseX, circleY, circleSize, circleSize);
 
}

Interactive 1

/* Define a variable to store the x-distance that the mouse moved */
int mouseDistanceX;
 
/* The code within SETUP is used to initialize settings for your sketch. */
void setup() {
  size(250, 250);
  background(255);
  smooth();
 
  /* Set the frame rate to 60 - this will cause the draw() block of code
  to run 60 times per second which will result in smooth motion. Try
  changing this number to see how it affects the animation quality. */
  frameRate(60);
}
 
 
/* The code within DRAW is repeatedly run at the rate defined by
frameRate(). Put code in here to create sketches that change over time */
void draw() {
 
  /* Find out the distance that the mouse moved by subtracting the previous
  mouse x-position from the current mouse x-position and apply the absolute
  value (abs) so that the number is always positive. */
  mouseDistanceX = abs(mouseX-pmouseX);
 
  /* Use the distance variable to influence the green and blue values */
  stroke(40, mouseDistanceX*3, mouseDistanceX*4);
 
  /* Also use the distance variable to set the stroke weight.
  Faster mouse movements will cause this number to be higher, and
  therefore give a thicker stroke weight. */
  strokeWeight(mouseDistanceX);
 
  /* Draw a line from the previous mouse location to current mouse location.
  pmouseX and pmouseY are system variables that contains the previous
  location of the mouse */
  line(pmouseX, pmouseY, mouseX, mouseY);
}

Interactive 2

/* Define two variables that will contain random X and Y values for the end
points of the lines */
float randX;
float randY;
 
/* Set a boolean (true or false) variable that will control whether or not
to enable drawing, and initialize it to false */
boolean drawing = false;
 
/* The code within setup() is used to initialize settings for your sketch. */
void setup() {
  size(250, 250);
  background(255);
  smooth();
  noFill();
 
  /* Set the frame rate to 200 - this will cause the draw() block of code
  to run 200 times per second which will result in faster drawing. Note
  that this is a DESIRED frame rate. Some computers won't be able to keep up. */
  frameRate(200);
}
 
 
/* The code within draw() is repeatedly run at the rate defined by
frameRate(). Put code in here to create sketches that change over time */
void draw() {
 
  /* Check if the drawing variable is true, if so, run the code, otherwise
  do nothing */
  if (drawing) {
 
    /* Generate a random x,y coordinate anywhere in the sketch boundaries */
    randX = random(0, width);
    randY = random(0, height);
 
    /* Generate a random colour value */
    stroke(random(0,255), random(0,255), random(0,255), random(0,255));
 
    /* Draw a line from the current mouse position to the random location */
    line(mouseX, mouseY, randX, randY);
 
  }
 
}
 
 
/* The code within mousePressed() will run when the mouse button is pressed.
In this case, we set the drawing variable to true. */
void mousePressed() {
  drawing = true;
}
 
 
/* The code within mouseReleased() will run when the mouse button is released.
In this case, we set the drawing variable to false */
void mouseReleased() {
  drawing = false;
}

Interactive 3


/* Set up variables for the max length of the grass and
the max width of the tufts */
int grassLength = 80;
int tuftWidth = 30;
 
/* Define two variables that will contain random X and Y values for the end
points of the grass blades */
float randX;
float randY;
 
/* Set a boolean (true or false) variable that will control whether or not
to enable drawing, and initialize it to false */
boolean drawing = false;
 
 
/* The code within setup() is used to initialize settings for your sketch. */
void setup() {
  size(250, 250);
  background(65, 55, 50);
  smooth();
  noFill();
 
  /* Set the frame rate to 200 - this will cause the draw() block of code
  to run 200 times per second which will result in faster drawing. Note
  that this is a DESIRED frame rate. Some computers won't be able to keep up. */
  frameRate(200);
}
 
 
/* The code within draw() is repeatedly run at the rate defined by
frameRate(). Put code in here to create sketches that change over time */
void draw() {
 
  /* Check if the drawing variable is true, if so, run the code, otherwise
  do nothing */
  if (drawing) {
 
    /* Generate a random x,y coordinate using tuftWidth and grassLength
    variables as constraints */
    randX = random(mouseX-tuftWidth,mouseX+tuftWidth);
    randY = random(mouseY-grassLength, mouseY);
 
    /* Generate a random colour value, restricting the ranges such that we
    get values more towards green.  */
    stroke(random(0,20), random(100,200), random(0,40), random(100,150));
 
    /* Draw a line from the current mouse position to the random location */
    line(mouseX, mouseY, randX, randY);
 
  }
 
}
 
 
/* The code within mousePressed() will run when the mouse button is pressed.
In this case, we set the drawing variable to true if the left button is
pressed, or clear the sketch if the right mouse button is pressed. */
void mousePressed() {
  if (mouseButton == LEFT) {
    drawing = true;
  } else if (mouseButton == RIGHT) {
    background(65, 55, 50);
  }
}
 
 
/* The code within mouseReleased() will run when the mouse button is released.
In this case, we set the drawing variable to false */
void mouseReleased() {
  drawing = false;
}

Interactive 4

/* Set up variables for the max length of the grass and
the max width of the tufts. wildness will be used to affect the
control point of the curved line and therefore the width of the
grass blades*/
int grassLength = 150;
int tuftWidth = 80;
int wildness = 100;
 
/* Define two variables that will contain random X and Y values for the end
points of the grass blades */
float randX;
float randY;
 
/* Set a boolean (true or false) variable that will control whether or not
to enable drawing, and initialize it to false */
boolean drawing = false;
 
 
/* The code within setup() is used to initialize settings for your sketch. */
void setup() {
  size(250, 250);
  background(65, 55, 50);
  smooth();
  noStroke();
 
  /* Set the frame rate to 200 - this will cause the draw() block of code
  to run 200 times per second which will result in faster drawing. Note
  that this is a DESIRED frame rate. Some computers won't be able to keep up. */
  frameRate(200);
}
 
 
/* The code within draw() is repeatedly run at the rate defined by
frameRate(). Put code in here to create sketches that change over time */
void draw() {
 
  /* Check if the drawing variable is true, if so, run the code, otherwise
  do nothing */
  if (drawing) {
 
    /* Use a loop to increase the number of shapes drawn. Since the random
    numbers are generated inside the loop, a new set of random numbers will
    be generated for each iteration of the loop! */
    for (int i=0; i<3; i++) {
 
      /* Generate a random x,y coordinate using tuftWidth and grassLength
      variables as constraints */
      randX = random(mouseX-tuftWidth,mouseX+tuftWidth);
      randY = random(mouseY-grassLength, mouseY);
 
      /* Generate a random fill colour value, restricting the ranges such
      that we get values more towards green.  */
      fill(random(0,20), random(100,200), random(0,40), random(50,255));
 
      /* Draw a curve from the current mouse position to the random location,
      using the wildness variable to generate a random control point relative
      to the mouse position. */
      curve(mouseX+(random(-wildness,wildness)), mouseY+(random(-wildness,wildness)), mouseX, mouseY, randX, randY,  randX, randY);
 
    }
 
  }
 
}
 
 
/* The code within mousePressed() will run when the mouse button is pressed.
In this case, we set the drawing variable to true if the left button is
pressed, or clear the sketch if the right mouse button is pressed. */
void mousePressed() {
  if (mouseButton == LEFT) {
    drawing = true;
  } else if (mouseButton == RIGHT) {
    background(65, 55, 50);
  }
}
 
 
/* The code within mouseReleased() will run when the mouse button is released.
In this case, we set the drawing variable to false */
void mouseReleased() {
  drawing = false;
}

Text

/* Set a PFont variable called fontA which will be used to reference
the font we will load */
PFont fontA;
 
/* Set a String variable to hold the text we will draw */
String txt = "repetition";
 
/* Number of repetitions of the word to draw */
int num = 6;
 
/* Initialize the settings for the sketch */
void setup() {
  size(250, 250);
  background(40);
  smooth();
 
  /* Load the font. Fonts must be placed within the data
  directory of your sketch. Use Tools > Create Font
  to create a distributable bitmap font.
  For vector fonts, use the createFont() function. */
  fontA = loadFont("Gulim.vlw");
}
 
/* Container for drawing */
void draw() {
 
  /* Start a loop to repeat the text as many times as specified by num */
  for (int i=0; i<num; i++) {
 
    /* Select a font and type size */
    textFont(fontA, 30);
 
    /* Set text alignment options - horizontal and vertical */
    textAlign(LEFT, TOP);
 
    /* Pick a fill colour for the type */
    fill(255, 100, 210);
 
    /* Draw the text, defined by txt, on the sketch at the x,y coordinates
    specified. width/num*i will cause each word to appear evenly spaced
    from top to bottom (height) of the sketch */
    text(txt, 10, (height/num)*i);
  }
 
  /* Stop drawing now */
  noLoop();
 
}
 


Random

Another example using the random(); function.
//Initial screen settings
size (400,400);
background(0);
smooth();
stroke(255,60,10,20);
 
//Begin loop
 
for (int i=80;i<300;i++) {
  float r=random(8);
  strokeWeight(r);
 
  //offset = random number up to 8 multiplied by 50
  float offset=r*50.0;
 
  line (i-10,400,i+offset,0);
}

Void

This keyword is used to indicate a function that returns no value. Every function in Processing will return some value for a datatype you may be working with but if you use the keyword 'void' to specify someting, it returns nothing.
//Declare above set-up so you can use this variable globally (throughout program)
float y=0.0;
 
//Screen set-up
//Void is used so that you do not need to keep revisiting these settings
//throughout the program
//Void set-up is how you can break up your code
//You can set everything up at the beginning
//When it jumps through to the void draw function, it works off of this set up
//Void draw would not be looped around - it would only be declared once
void setup() {
  size (250,250);
}
 
//void draw function creates the illusion of movement
//The y variable value changes from initial given value (kind of like a loop)
//The smaller the increment in the value of this variable,
//the slower the illusion of movement works
void draw() {
  y=y+0.5;
  line(0,y,100,y);
}

Variable Value Changing

Here is an example of how you can use change in variable values to create the illusion of movement.
//Declare variables used throughout the program
float circleX=0;
float circleY=0;
float circleW=50;
float circleH=100;
float circleStroke=255;
float circleFill=55;
 
float backgroundColour=255;
//'change' sets the amount each of these variables change
float change=0.5;
 
//Basic set-up
void setup() {
  size (200,200);
  smooth();
}
 
void draw() {
  //Draw the background and ellipse
  //Variables are used for everything; bkg, stroke, fil, location, size
  background(backgroundColour);
  stroke(circleStroke);
  fill(circleFill);
  ellipse(circleX,circleY,circleW,circleH);
 
  //Change the values of all variables
  //The variable change is used to incremement and decrement the other variables
  circleX+=change;
  circleY+=change;
  circleW+=change;
  circleH+=change;
  circleStroke+=change;
  circleFill+=change;
}

Framerate

This predefined system variable is used to specify the number of frames you want displayed per second in your program. The default rate is 60 frames per second - if you want the program to run faster, increase the amount of frames per second, if you want the program to run slower, decrease the number.
//Declare variables used later on in the program
float r;
float g;
float b;
float a;
 
float diam;
float x;
float y;
 
 
//Basic setup for program
void setup() {
size(200,200);
background(255);
smooth();
//Controls how quickly 'movement' occurs in the output
frameRate(15);
}
 
void draw() {
//Each time through draw(), new random numbers are picked for a new ellipse.
//In the 'random' parameters for colour values:
//Argument 1: minimum
//Argument 2: maximum
r = random(255);
g = random(255);
b = random(255);
a = random(255);
diam = random(20);
x = random(width);
y = random(height);
 
//Use values to draw boxes of different colours
noStroke();
fill(r,g,b,a);
rect(x,y,diam,diam);
}