Homework 9: DOM User Interface

/*

Creates a user interface for the canvas sketch using the

DOM library. The interface controls the following parameters

in the sketch: size, color, animationSpeed, isAnimated.

​

Date: October 24, 2021

*/

​

var x = 0;

var y = 0;

var angle1 = 0; //angle1 will also be used to calculate the lerpColor for the squares

var angle2;

var period1 = 245.0;

var period2 = 50.0;

var counter = 0 //counts number of squares to finish sketch

var newCol = 'white'; //new colour of squares

var newSize = 8; //new size of squares

​

var changeCol; //btn name to change colours of squares

var changeSize;

var changeSpeed;

var stopAnimation;

var animationSpeed = 1; //speed of animation

var isAnimated = true; //boolean for whether sketch is animated or not

var lastSpeed;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(RGB);

  background(0);

  noStroke();

  //Change colour of squares everytime the button 'change colours' is pressed.

  changeCol = createElement('button', 'change colours');

  changeCol.position(10, 10);

  changeCol.mousePressed(

    function() {

      //randomly choose colours to lerp

      let colours = [color(100, 189, 200), color(255, 0, 160), color(random(255), random(255), random(255))];

      let startCol = random(colours);

      let endCol = random (colours);

​

      var target; //assign sin(amt) to target but first, we'll have to correct the data incase sin(amt) comes out to be a negative number

​

      if (sin(angle1) < 0) { // checks if sin(amt) (a.k.a sin(angle1)) is negative & uses cos(amt) instead

        target = cos(angle1); 

        //print('used COS');

        if (cos(angle1) < 0) { // checks if cos(amt) (a.k.a cos(angle1)) is negative & makes it positive

          target = cos(angle1) * (-1);

        }

      }else { //if sin(amt) is already positive, it assigns the value to target variable.

        target = sin(angle1);

        //print('used SIN');

      }

​

      //new color for square

      newCol = lerpColor(startCol, endCol, target);

    }

  );

  //Change size of squares depending on key pressed (UP or DOWN).

  changeSize = createElement('p','Hit UP key / Hit DOWN key');

  changeSize.position(10, 40);

  changeSize.style('color', 'white');

  //Change speed of animation depending on key pressed (RIGHT or LEFT).

  changeSpeed = createElement('p','Hit RIGHT key / Hit LEFT key');

  changeSpeed.position(10, 80);

  changeSpeed.style('color', 'purple');

  //STOP the animation by hitting the spacebar.

  stopAnimation = createElement('p','Hit SPACEBAR STOP the animation');

  stopAnimation.position(10, 120);

  stopAnimation.style('color', 'red');

}

​

function draw() {

  //ends drawing of sketch at the right point in time.

  if (counter > 1875) {

    noLoop();

  }

  //sketch starts in the middle of the canvas

  translate(width / 2, height / 2);

​

  //function call to get new color for each new square that'll be added to the sketch

  //fillColor(angle1);

  fill(newCol);

  //draws sketch of rectangle moving along the Lissajous curves

  for (var i = 0; i < counter; i++) {

    var amplitude = width / 6;

    angle1 = frameCount*animationSpeed / period1 * TWO_PI;

    angle2 = frameCount*animationSpeed / period2 * TWO_PI;

    x = sin(angle1) * amplitude;

    y = cos(angle2) * amplitude;

    rect(x, y, newSize, newSize);

  }

  counter++;

}

​

//If UP or DOWN key pressed, increases/decreases size of squares within the bound of 5 - 50 px

function keyPressed(){

      if (keyCode === UP_ARROW) {

        newSize+= 5;

        if(newSize>=50){

          newSize = 50;

        }

      } else if (keyCode === DOWN_ARROW) {

        newSize-= 5;

        if(newSize<=5){

          newSize = 5;

        }

      }

  //If RIGHT or LEFT arrows are chosen, increases/decreases animation speed

    if (keyCode === RIGHT_ARROW) {

          animationSpeed++;

          if(animationSpeed>=10){

            animationSpeed=10;

          }

        } else if (keyCode === LEFT_ARROW) {

          animationSpeed--;

          if(animationSpeed<=1){

            animationSpeed=1;

          }

        }

  //If spacebar is chosen, stops the animation

    if (keyCode === 32) {

          animationSpeed = 0;

          isAnimated = false;

        }

  }