HW Week 6: Transform

/*

Week 6: Transformations

​

Assignment Instructions:

Using the transformation functions (translate(x,y), rotate(angle), 

and/or scale(x,y)) create a sketch with animated, spiralling shapes. 

Your sketch must incorporate a color palette of interpolated colors 

using lerpColor(). To successfully complete this assignment, you must 

use at least two of the three transformation functions.

​

translate() - line 51, 62, 71

scale() - line 90

rotate() - line 88

lerp() - line 72 - 81

​

Happy Viewing! :)

*/

​

var colorFrom, colorTo; //defining the colour values for lerp

var h = 150 //base for the colour value. Allowing us for randomness

var angle = 0.0; //angle for rotation

var theta = 0.0; //angle for rotation 2

var rotationspeed = 0.25; //roation speed 1

var rotationspeed2 = 0.02; //rotation speed 2

var offset = 10; //offset to allow increments in animation

var z = 15; //defining the base dimensions for the circle and square

var rectStep = 5;

​

//defining the canvas set up standards.

function setup() { 

  createCanvas(windowWidth,windowHeight);

  colorMode(HSB, 360, 100, 100);

  strokeWeight(1);

  rectMode(CENTER);

 }

​

//calling the drawings into function. Loop is endless. No background to allow overlay.

function draw() {

  //setting the layout for lerp function

  colorFrom = color(h,100,100); //the color we want to start interpolating from

  colorTo = color(h+50,100,100); //the color we want to interpolate to

  var c = 0;

  var lerpAmt = map(mouseX+100, c, width, 0, 1.0);

  var lerpedCol = lerpColor(colorFrom,colorTo,lerpAmt);    

​

  //rotatingcircles on the left

  push();

    stroke(lerpedCol); //defines stroke

    noFill(); //removing fill color

    translate(width/4,height/2); //translates to the center of canvas

    rotatingcircles(); //Calls rotatingcircles function (line 100)

    theta += rotationspeed;

    offset += rotationspeed; 

  pop();

  //rotating circles on the right

  push();

    stroke(lerpedCol); //defines stroke

    noFill(); //removing fill color

    translate(width - width/4,height/2); //translates to the center of canvas

    rotatingcircles(); //Calls rotatingcircles function

​

    theta += rotationspeed;

    offset += rotationspeed; 

  pop();

​

  push();

  rectMode(CENTER);

  translate(width/2,height/2);

  for(var x=0; x < 400; x += rectStep){

    noStroke();

    //interpolation amount changes each step of our

    //for loop

    var lerpAmt2 = map(x, 0, width, 0, 1.0);

    var lerpedCol2 = lerpColor(colorFrom,

      colorTo,

      lerpAmt2);    

    fill(lerpedCol2);

    rect(x-200,0,rectStep,height);

    push();

    fill(0);

    fill(0,255,0);

    angle = map(mouseX, 0,width, 0,360);

    rotate(radians(angle));

    var scaleValY = mouseY / 300 || 1;

    scale(100, scaleValY);

    rect(0,0,100,100);

    pop();

  }

  pop();

}

​

//interaction with the animation on screen

function keyPressed() {

  if (key === 's' | key === 'S'){ //changes the shape size

    z += z;

  }

  if (key === 'a' | key === 'A'){ //changes the shape colour

    h = random(360);

  }

  if (key === 'r' | key === 'R'){ //changes the shape colour

    angle -= 1;

  }

  if(key === 'd' || key === 'D'){ //restart the drawing spirals

    offset = 10;

  }

  if(key === 'x' || key === 'X') { //erase the board

  background = color('black');

  }

  redraw();

}

​

//defining the size 

function rotatingcircles(){

  var x =  cos(theta) * offset;//Ellipse X position variable

  var y = sin(theta) * offset;//Ellipse Y position variable

  ellipse(x,y,z,z);//ellipse shape

}