Mihika Bansal – Project 03 – Dynamic Drawing

sketch

/*
Mihika Bansal 
Section E 
mbansal@andrew.cmu.edu
Project-01
*/
var angle1 = 0; //rotates one direction
var angle2 = 0; //rotates the other direction
var rgb1 = 0; //random color generator 1
var rgb2 = 0; //random color generator 2
var dimension = 20; //size of elements
function setup() {
    createCanvas(600, 480);
  }

function draw() {

    rgb1 = random(0, 300); //randomizing here creates the flashing effect 
    rgb2 = random(0,275); 
    dimension = random(5, 60);
    
    if (mouseX < width / 2) { //determine if the mouse is on the left of the canvas 
        background(0, 0, 51);
        push();
        rotate(radians(angle1)); //creating the rows of shapes in the top left corner
        fill(rgb1 * 0.2, rgb2 * 0.5, rgb1 * 0.8); // the multiplication randomizes the color more
        rect(mouseY * 0.8, mouseY * 0.5, dimension, dimension);
        fill(rgb2 * 0.5, rgb2 * 0.3, rgb1 * 0.6); 
        ellipse(mouseY * 0.3, mouseY * 0.2, dimension, dimension); //the distance from the rotation point is dependent on the position of mouse y 
        fill(rgb1 * 0.85, rgb2 * 0.9, rgb1 * 0.7);
        ellipse(mouseY, mouseY, dimension * 1.5, dimension * 1.5); 
        fill(rgb1 * 0.7, rgb2 * 0.65, rgb1 * 0.7);
        rect(mouseY * 1.3, mouseY * 1.3, dimension * 2, dimension * 2);
        pop();
        angle1 += 2; 

        push(); 
        translate(width - 5, height - 5); //creating the line of shapes in the bottom right corner
        rotate(radians(angle2));
        fill(rgb1 * 0.2, rgb2 * 0.5, rgb1 * 0.8);
        rect(mouseY * 0.8, mouseY * 0.5, dimension, dimension);
        fill(rgb2 * 0.5, rgb2 * 0.3, rgb1 * 0.6); 
        ellipse(mouseY * 0.3, mouseY * 0.2, dimension, dimension); 
        fill(rgb1 * 0.85, rgb2 * 0.9, rgb1 * 0.7);
        ellipse(mouseY, mouseY, dimension * 1.5, dimension * 1.5); 
        fill(rgb1 * 0.7, rgb2 * 0.65, rgb1 * 0.7);
        rect(mouseY * 1.3, mouseY * 1.3, dimension * 2, dimension * 2);
        pop(); 
        angle2 -= 2; 
    }
    else { //when mouse is on right of screen
        background(77, 0, 0);
        push();
        rotate(radians(angle1));
        fill(rgb1 * 0.25, rgb2 * 0.4, rgb1 * 0.71);
        rect(mouseY * 0.8, mouseY * 0.57, dimension, dimension);
        fill(rgb2 * 0.5, rgb2 * 0.3, rgb1 * 0.6); 
        ellipse(mouseY * 0.3, mouseY * 0.2, dimension, dimension); 
        fill(rgb1 * 0.8, rgb2 * 0.9, rgb1 * 0.7);
        ellipse(mouseY, mouseY, dimension * 1.5, dimension * 1.5); 
        fill(rgb1 * 0.7, rgb2 * 0.65, rgb1 * 0.7);
        rect(mouseY * 1.3, mouseY * 1.3, dimension * 2, dimension * 2);
        pop();
        angle1 -= 2; 

        push(); 
        translate(width - 5, height - 5);
        rotate(radians(angle2));
        fill(rgb1 * 0.2, rgb2 * 0.54, rgb1 * 0.8);
        rect(mouseY * 0.86, mouseY * 0.5, dimension, dimension);
        fill(rgb2 * 0.5, rgb2 * 0.35, rgb1 * 0.64); 
        ellipse(mouseY * 0.3, mouseY * 0.2, dimension, dimension); 
        fill(rgb1 * 0.85, rgb2 * 0.9, rgb1 * 0.7);
        ellipse(mouseY, mouseY, dimension*1.5, dimension * 1.5); 
        fill(rgb1 * 0.77, rgb2 * 0.65, rgb1 * 0.7);
        rect(mouseY * 1.3, mouseY * 1.3, dimension * 2, dimension * 2);
        pop(); 
        angle2 += 2; // changes angle 
       
    }

}

With this piece I worked with direction of the rotation being dependent on the position of the mouse. I also made the distance of each element dependent on the y position of the mouse. This project was interesting and helpful in understanding the random function and the rotation function.