Min Ji Kim Kim – Project 03 – Dynamic-Drawing

sketch

/*
Min Ji Kim Kim
Section A
mkimkim@andrew.cmu.edu
Project-03
*/
var angle = 0; //angle used to rotate rectangle

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

function draw() {
    noStroke();

    //change background color depending on mouseX position
    background(204, 255, 200);
    if (mouseX > width / 2) {
        background(170, 170, 230);
    }

    //navy rectangle
    fill(0, 76, 152);
    rectMode(CENTER);
    rect(width / 2, height / 2, mouseX, 200); //change rectangle width according to mouseX position

    //turquoise circle
    fill(0, 180, 159);
    circle(mouseY, mouseX, 80); //circle moves inversely to mouse

    //light blue circle
    fill(176, 211, 234);
    circle(300, 500, mouseY / 2); //expand or shrink circle by a factor of 1/2 depending on mouseY position 

    //light pink rectangle
    fill(245, 199, 231);
    rectMode(CENTER);
    rect(249, mouseY, 50, 100); //rectangle follows mouseY

    //salmon color rectangle translation and rotation
    push();
    translate(width / 3, 200);
    rotate(radians(angle));
    fill(250, 152, 167);
    rectMode(CENTER);
    rect(0, 0, 90, 90);
    pop();

    //mouseX controls salmon colored rectangle's rotation direction
    if (mouseX < width / 3) { //if mouseX is on the left 1/3 of the canvas, rotate anticlockwise
        angle = angle - 3;
    } else { //if mouseX is on the right 2/3 of the canvas, rotate clockwise
        angle += 3;
    }

    //small magenta circle 
    fill(110, 0, 70);
    ellipseMode(CENTER);
    ellipse(mouseX, mouseY, 35); //circle follows the mouse

    //orange rectangle
    fill(255, 178, 149);
    rect(mouseX, 380, 170, 25); //rectangle follows mouseX
}

I tried playing with a lot of different shapes, sizes and colors to create an abstract design. I had so much fun using mouseX and mouseY and manipulating them to get different effects.