//Professor: Xinxin

//Student: Alex Wang 

​

//Define the x and y position of the bouncing square.

let x;

let y;

​

//Define the speed in different axises of the square.

let xspeed;

let yspeed;

​

//Define color variables.

let r, g, b;

​

//Define score counter.

var number = 0;

​

​

//Define the initial scale of the shrinking borders, also act as a timer.

var timecounter = 600;

​

//Define the transparency of the square. It will makes the square dissapear at last.

let T;

​

function setup() {

  createCanvas(600, 600);

​

  // All about the setup function is to creat a button that can allow players to manually refresh the game.

  resetSketch();

  col = color(0,0,0,0);

  var button = createButton("");

  button.mousePressed(resetSketch);

  button.position(0, 0);

  button.size(600, 600);

  button.style('background-color', col);

​

}

​

​

// The 'reset function' replaced the original 'setup function '.

function resetSketch() {

  // Each time the square is spawned, it will move alone a different vector.

  xspeed = random(-50, 50);

  yspeed = random(-50, 50);

​

​

  // Each time the square will be spawned at a different place.

  x = random(width);

  y = random(height);

​

  // Reset the score-counter for each roll.

  number = 0;

​

  // Reset the shrinking border for each roll.

  timecounter = 600;

​

  // Reset the square to 'Visiable'.

  T = 255;

​

​

}

​

​

// This function generateds random colors and they will be easily applied later on-trigger.

function pickcolor()

​

{

  r = random(100, 256);

  g = random(100, 256);

  b = random(100, 256);

}

​

​

​

function draw() {

  //  if ((mouseX < 0) || (mouseX > 600) ||

  //   (mouseY < 0) || (mouseY > 600)) 

  // {

  //   return;

  // }

// These codes created that shrinking borders, and also everything is colored with r,g,b variables.

  timecounter = timecounter - 2;

​

  background(r, b, g, 100);

  fill(r, g, b, 100)

​

  stroke(r, g, b, T);

  strokeWeight(4);

  noFill();

  //pickcolor();

  fill(r, g, b, 100)

  rect(0, 0, 600, timecounter);

  noFill();

  fill(r, g, b, 100)

  rect(0, 0, timecounter, 600)

  noFill();

​

​

  fill(r, g, b, T);

  rect(x, y, 80, 60);

  noFill();

​

  fill(r, g, b);

  textSize(200);

  textAlign(CENTER);

​

  text(number, width / 2, height / 2 + 60);

​

// X and Y will go alone with a random vector.

  x = x + xspeed

  y = y + yspeed

  //These 'if' functions creates the bouncing effect. When the square touches the edge of the canvas, the number goes up, and everything is assigned with a new color value.

  if (x + 60 >= width)

​

  {

    xspeed = -xspeed;

    x = width - 80;

    pickcolor();

    number++;

​

  } else if (x <= 0) {

    xspeed = -xspeed;

    x = 0

    pickcolor();

    number++;

  }

​

​

  if (y + 60 >= height)

​

  {

    yspeed = -yspeed;

    y = height - 60;

    pickcolor();

    number++;

​

  } else if (y <= 0) {

    yspeed = -yspeed;

    y = 0

    pickcolor();

    number++;

​

  }

  //When the timer runs out of time, the square will not move anymore, so everything freezes.

  if (timecounter <= 0) {

    xspeed = 0;

    x = 200;

    yspeed = 0;

    y = 200;

    //This will make sure the final number is visible.

​

    r = r + 50;

    b = b + 50;

    g = g - 50;

​

// The square and all the strokes vanish alone with the shrinking square.

    T = timecounter;

  }

​

​

​

​

}