Kristine Kim- Project 03- Dynamic-Drawing

sketch

var radx = 200;
var rady = 200;
var anglet = 0;
var angless = 0;
var angles = 0;
var anglem = 0;
var angleb = 0;
var anglebb = 0;


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

function draw() {
//background color changing depending on the placment of the mouse
    background(mouseX,mouseY, 200);
// creating the 4 ellipses 
    fill(mouseX, 245, 127);
    ellipse(width/4, height/2,radx,rady);
    fill(mouseX, 245, 127);
    ellipse(width/2, height/4,rady,radx);
    fill(mouseX, 245, 127);
    ellipse(width/1.33, height/2,radx,rady);
    fill(mouseX, 245, 127);
    ellipse(width/2, height/1.33,rady,radx);
//This code transforms the 4 ellipses
    if (mouseX > width/2){
        radx = 50 + (width/2 - mouseX);
    }else {
        radx = 50 + (width/2 - mouseX);
    }
/*6 squares, all different sizes rotating either clockwise or
counter clockwise based on the left top corner of the squares*/

//rotating the smallest square, color stays the same
    fill (23, 0, 173);
    push();
    translate(mouseX, mouseY);
    rotate(radians(anglet));
    rect(0,0,25,25);
    pop();
    anglet = anglet + 12

//rotating smaller square , color stays the same
    fill(255, 55, 0);
    push();
    translate(mouseX,mouseY);
    rotate(radians(angless));
    rect(0,0,60,100);
    pop();
    angless = angless - 12;

//rotating small square, color changes with the mouse
    fill (150, mouseX, mouseY);
    push();
    translate(mouseX,mouseY);
    rotate(radians(angles));
    rect(0,0,90,150);
    pop();
    angles = angles + 10;

//rotating medium square, color changes with the mouse
    fill (200, mouseY, mouseX);
    push();
    translate(mouseX, mouseY);
    rotate(radians(anglem));
    rect(0,0,140,140);
    pop();
    anglem = anglem - 10; 


//rotating bigger square, color changes with the mouse
    fill(mouseY, mouseX, 250);
    push();
    translate(mouseX,mouseY);
    rotate(radians(angleb));
    rect(0,0,170,170);
    pop();
    angleb = angleb + 8;

//roating biggeest square, color changes with the mouse
    fill(mouseX,140, mouseY);
    push();
    translate(mouseX,mouseY);
    rotate(radians(anglebb));
    rect(0,0,200,200);
    pop();
    anglebb = anglebb -8;
}

This project was a little bit more challenging for me but definitely made me more interested in this class and coding for art in general. I started by creating an ellipse and making it change the height and the width(shape/size) with the mouse movement. Then added more element and abstraction with the rotating squares and rectangles.