Project 03 – Dynamic Drawing

//Iris Yip
//15104 Section D

var wwidth = 600,
    wheight = 600,
    ballsize, //radius
    ballx, 
    bally, 
    hvelocity, 
    vvelocity,
    clickdistance,
    rvalue,greenvalue,bluevalue;

function setup() {
  
  createCanvas(wwidth, wheight);
  
  // starting point
  ballx = wwidth/2;
  bally = wheight/2;
  
  // starting velocity
  hvelocity = random(-5,5);
  vvelocity = random(-5,5);
  
  // starting ball size
  ballsize = random(10,150);
  
  // ball color
  redvalue = random(100,255);
  greenvalue = random(100,255);
  bluevalue = random(100,255);
  
};

function draw() {
  
  
  //background
  background(0)
  let rectBlue = map(mouseY, 0, height, 0, 255);
  fill(255, rectBlue, 200);
  rect(0,0, 600, 600);
  
  
  fill(redvalue, greenvalue, bluevalue);
  ellipse(mouseX, mouseY, 100, 100);


    
  // ball bounce-back conditions
  if(ballx >= width - ballsize || ballx <= ballsize){
    hvelocity = -hvelocity;
  };
  if(bally >= height - ballsize || bally <= ballsize){
    vvelocity = -vvelocity;
  };
  
  // ball location change
  ballx += hvelocity;
  bally += vvelocity;
  
  // render ball
  noStroke();
  fill(redvalue, greenvalue, bluevalue);
  ellipse(ballx, bally, ballsize * 2, ballsize * 2);
  
  
};
  
function mouseClicked() {
  {
    
    clickdistance = dist(mouseX, mouseY, ballx, bally);
    
    if(clickdistance <= ballsize) {
      
      // change velocity if clicked on the ball
      hvelocity = random(-5,5);
      vvelocity = random(-5,5);
      
      // change ball color
      redvalue = random(100,255);
      greenvalue = random(100,255);
      bluevalue = random(100,255);
      
      //changing ball size
      ballsize = random(50,100);
      
    };
  
  };

  
};