Sammie Kim-Project-03-Dynamic-Drawing

sketch

//Sammie Kim
//sammiek@andrew.cmu.edu
//Section D
//Project 3

//Global variables for default
var colorR = 0;
var colorG = 9;
var colorB = 48;
var angle1 = 0;
var angle2 = 0;

function setup() {
    createCanvas(640, 480);
}

function draw() {
    //Changing background colorR as my mouse moves in the Y direction
    var colorR1 = min(colorR + mouseY, 173);
    var colorG1 = min(colorG + mouseY, 48);
    var colorB1 = min(colorB + mouseY, 63);
    background(colorR1, colorG1, colorB1);

    //Limit the mouse range, so the images don't go off the canvas
    mouseX = max(min(mouseX, 500), 0);

    //Y coordinates of the rectangle behind the circle
    var rectY = 480 - mouseY;
    var rect2Y = 0 + mouseY;

    fill("black");
    rectMode(CENTER);
    rect(320,rectY,140,300); //center rectangle
    rect(110,rect2Y,50,400); //left rectangle
    rect(530,rect2Y,50,400); //right rectangle

    //X locations of the circles
    var circAx = mouseX
    var circBx = mouseX - 40
    var circCx = mouseX - 20
    var circDx = mouseX-50

    //Changing the widths of the circles
    var circAw = mouseX - 80;
    var circBw = mouseX - 150;
    var circCw = mouseX * 0.5 - 30;
    var circDw = mouseX * 0.4;

    //Series of circles
    fill(mouseX, mouseY, 100);
    circAw = constrain(circAw, 90, 350); //constrain main circle size
    circle(circAx,240,circAw);//Big visible circle
    fill(colorR1, colorG1, colorB1);
    circle(circBx, 240, circBw); //Big hidden circle
    fill(mouseX, 200, mouseY);
    circle(circCx,240, circCw);//Small visible circle
    fill(colorR1, colorG1, colorB1);
    circle(circDx,240, circDw); //Small hidden circle

    //Changing size of the rotating squares
    var rectSize = mouseY * 0.2;
    var rectSize2 = mouseY * 0.1

    //Rotating square
    fill(253, 242, 216);
    noStroke();
    push();
    translate(mouseX,240);
    rotate(radians(angle1));
    rectMode(CENTER);
    rect(100,100,rectSize,rectSize);
    pop();
    angle1= angle1 + 2;

    //Second rotating square
    fill(126, 211, 216);
    push();
    translate(mouseX,300)
    rotate(radians(angle2));
    rectMode(CENTER);
    rect(120,100,rectSize2,rectSize2);
    pop();
    angle2 = angle2 + 2
  }

This project was challenging in many aspects; I had to think about the shape’s coordinates in relation to the mouse location and constrain them so that they don’t leave the canvas. I was able to apply a lot of the knowledge I gained from the lab exercises with rotating squares and the lecture about creating movement. Overall, this project prompted me to be both creative and logical.