3a – Worked examples

A variable

The code below sets up a variable for the x coordinate location the ellipse. This x coordinate is then assigned the value of the mouse x coordinate (mouseX).

//VARIABLES
//1. Declare your variable by 
//variableType variableName;
float x;
 
void setup(){
  size(400,150);
  smooth();
  //make the fill red
  fill(255,0,0);
}
 
void draw(){
  //2. Assign a value to your variable
  x = mouseX;
 
  //3. Use your variable to draw something
  ellipse(x,75,20,20); 
}

Bouncing Ball

//CONDITIONALS AND VARIABLES
//Declare and assign an initial value to our variables
float x = 0;
float speed = 2;
 
void setup(){
  size(400,150);
  smooth();
  //set the fill to red
  fill(255,0,0);
}
 
void draw(){
  //refresh the background
  background(255);
  // Increase the x position by speed for each loop of draw
  x = x+speed;
  //check if the ball has moved outside of the screen with an if statement
  //this means if((TEST1)OR(TEST2)){ 
  // the || means OR and the && means AND
  if((x==width)||(x==0)){
 //if it is we will change the speed to send it back the other direction
 // we do this by multiplying speed by negative one to change it's directino.
    speed = speed * -1;
  } //close the if statement
 
  //Use the variable to draw the ball to a new position
  ellipse(x,75,20,20); 
}

Random Variable

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com
 
// Example 4-7: Filling variables with random values
//variables for color of ellipses
float r;
float g;
float b;
float a;
//variables for diameter and location of ellipses
float diam;
float x;
float y;
 
void setup() {
     size(200,200);
     background(0);
     smooth();
}
 
void draw() {
     // Fill all variables with random values
     r = random(0,255);
     g = random(0,255);
     b = random(0,255);
     a = random(0,255);
     diam = random(0,20);
     x = random(0,width);
     y = random(0,height);
     // Use values to draw an ellipse for each loop of draw
     noStroke();
     fill(r,g,b,a);
     ellipse(x,y,diam,diam);
}

Basic Conditionals

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com
// Example 5-1: Conditionals
 
var button = false;
// Variables for color change
float r = 150;
float g = 0;
float b = 0;
 
void setup() {
  size(200,200);
}
 
void draw() {
  // Draw stuff
  background(r,g,b);  //use variables to set background color
  stroke(255);
  line(width/2,0,width/2,height); //draw the line down the middle
 
 
  // If the mouse is on the right side of the screen is equivalent to 
  // "if mouseX is greater than width divided by 2."
  if(mouseX > width/2) { //if(TEST){
    r = r + 10; // if the conditional is true make the red channel variable larger (more red)
  } else {
    r = r - 10;  // 'else' make the red channel variable smaller (more black)
  }
 
//SET THE RANGE FOR THE RED CHANNEL - MAX 255
  // If r is greater than 255, set it back to 255.  
  // If r is less than 0, set it back to 0.
  if (r > 255) { 
    r = 255; 
  } else if (r < 0) {
    r = 0; 
  }
}