SooA Kim: Project-03-Dynamic-Drawing

sketch_1

/* 
   SooA Kim
   Section D
   sookim
   Project 3 - Dynamic Drawing 
*/

var c1 = 100;
var c2 = 120;
var c3 = 210;
var angle = 0;

function setup() {
    createCanvas(640, 460);
    rectMode(CENTER);
}

function draw() {
    background(c1, c2, c3);
    noStroke();

    //background color
    if (mouseX > width/3) {
        background(0);
    }
    
    //pink circles and rectangles with symmetry
    fill(255, 100, 100);
    var m = max(min(mouseX, 640),0);
    var size = m * 320.0 / 640.0;
    rect(10 + m * 100.0 / 640.0, 230, size, size);
    rect(width - m * 100.0 / 640.0, 230, size, size);
    ellipse(10 + m * 320.0 / 640.0, 100, size + 50, size);
    ellipse(width - m * 320.0 / 640.0, 100, size + 50, size);

    //blue rectangle with rotation in the middle
    fill(0, 0, 255);
    var x1 = max(min(mouseX, 100), 0);
    push();
    translate (340, 230);
    rotate(radians(angle));
    rect(x1, m , 100, 100);
    pop();
    angle = angle + 1

    //circle green
    fill(100, 255, c3);
    var y = min(100, mouseY); 
    ellipse (mouseX, y + 100, 50, 200);
}

The assignment was pretty challenging for me this week. I wish that I had more time to understand and be comfortable using min()/max ()and constraint(). I mainly focused on understanding how each shape is made by different application of motion functions.