/*
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.