User Interaction

// USER INTERACTION 

// This sketch includes examples of: 

//

//       - function keyPressed()

//       - function mousePressed()

//       - if (keyIsPressed)

//       - if (mouseIsPressed)

//       - translate()

//       - rotate()

//       - push() and pop()

//       - random()

//       - variables: width, height

//       - variables: mouseX, mouseY

//       - custom variables 

//       - custom if statements 

//

// 

// 

//

// ---------------------------------

// GLOBAL VARIABLE SPACE -----------

​

let angle = 0; 

​

let middleR; 

let middleG; 

let middleB; 

​

let circleR; 

let circleG; 

let circleB; 

​

let topR;

let topB; 

let topG; 

​

let bottomR; 

let bottomG; 

let bottomB; 

​

let backgroundR; 

let backgroundG; 

let backgroundB; 

​

let topY;

let bottomY; 

​

// ---------------------------------

// MAIN FUNCTIONS ------------------

​

function setup() {

  createCanvas(400, 400);

  // MODES 

  angleMode(DEGREES); 

  rectMode(CENTER);

  // COLORS

  middleR = random(255); 

  middleG = random(255); 

  middleB = random(255); 

​

  circleR = random(255); 

  circleG = random(255); 

  circleB = random(255); 

  topR = random(255);

  topB = random(255); 

  topG = random(255); 

  bottomR = random(255); 

  bottomG = random(255); 

  bottomB = random(255); 

​

  backgroundR = random(255); 

  backgroundG = random(255); 

  backgroundB = random(255); 

  topY = 10; 

  bottomY = 390; 

  // STROKE

  noStroke(); 

}

​

function draw() {

  background(backgroundR, backgroundG, backgroundB);

​

  // MIDDLE COLOR

  if(mouseIsPressed){

    middleR = random(255); 

    middleG = random(255); 

    middleB = random(255); 

  }

  fill(middleR, middleG, middleB);

  // MIDDLE SHAPE 

  push();

    translate(width/2,height/2);

    rotate(angle);

    rect(0,0,100,100); 

    angle++;       //ADD 01 TO ANGLE

    // angle+=10;  //ADD 10 TO ANGLE

  pop();

  // TOP 

  fill(topR,topG,topB); 

  rect(width/2,topY,width,25);

  // BOTTOM 

  fill(bottomR,bottomG,bottomB); 

  rect(width/2,bottomY,width,25);

  // CIRCLE @ (mouseX,mouseY)

  fill(circleR, circleG, circleB);

  circle(mouseX, mouseY, 20);

}

​

// ---------------------------------

// INTERACTIVE FUNCTIONS -----------

​

function keyPressed(){

  if(keyCode == UP_ARROW){

    bottomY-= 10; 

    if(bottomY < 0){

      bottomY = 390; 

    }

  }

  if(keyCode == DOWN_ARROW){

    topY+= 10; 

    if(topY > height){

      topY = 10; 

    }

  }

}

​

function mousePressed(){

  backgroundR = random(255); 

  backgroundG = random(255); 

  backgroundB = random(255); 

}

// ---------------------------------

// ---------------------------------