/*
Programming Digitla Media: interactions with shapes

Review assignment

Code by Matthew A Bardin [2020]

Instructions: For this assignment, there are 4 different 
animated shapes moving across the screen. 
Create the necessary nested conditional statement(s) 
in order to change the background to a different color when each 
shape is pressed. Each shape should cause a different color to appear. 
The background should return to the starting color when the mouse is 
released.You do not need to delete/change any of the starting code, 
but you will have to add to it.
*/

let yellowSqX = 100;
let yellowSqY = -50;
let blueSqX = 300;
let blueSqY = -250;
let pinkCirX = -200;
let pinkCirY = 200;
let purpleCirX = 600;
let purpleCirY = 300;
let pinkCirDiam  = 50;
let purpleCirDiam = 100;
let bg = "gray";




function setup() {
  createCanvas(400, 400);

}

function draw() {
  background(bg);
  noStroke();

  //this animates the shapes. you don't need to do anything with this
  animateShapes();
  

}

//this is the brains of the function that animates the shapes. you do not need to change anything here.
function animateShapes() {
  yellowSqY++;
  blueSqY++;
  pinkCirX++;
  purpleCirX--;

  fill(100, 100, 0, 100);
  rect(yellowSqX, yellowSqY, 50, 50);
  fill(0, 200, 200, 150);
  rect(blueSqX, blueSqY, 50, 50);
  fill(255, 0, 255, 100);
  ellipse(pinkCirX, pinkCirY, pinkCirDiam);
  fill(41, 25, 173, 100);
  ellipse(purpleCirX, purpleCirY, purpleCirDiam);

  if (yellowSqY > 450) {
    yellowSqY = -50;
  }
  if (blueSqY > 450) {
    blueSqY = -50;
  }
  if (pinkCirX > 425) {
    pinkCirX = -25;
  }
  if (purpleCirX < -100) {
    purpleCirX = 450;
  }

}