For this project, I decided to start with the rotating squares that I learned in recitation. From there, I layered shapes with differing positions, sizes, angles, and a change in background color to create a cohesive art piece. I thought it was fun to experiment with stroke, stroke colors, shapes, layering, rotating, and mouseX/mouseY positions to create a moving art piece.
//Rachel Shin
//reshin@andrew.cmu.edu
//15-104
//Section B
//Project 03- Dynamic Drawing
var angle = 0;
var angle2 = 0;
function setup() {
createCanvas(480, 640);
}
function draw() {
//background: color change based on mousex
background(109, 140, 148);
if (mouseX > width/2) {
background(202, 220, 224);
}
//circle1: size change, position same
noFill();
strokeWeight(10);
stroke(230, 197, 211);
ellipse(50, 50, mouseX, mouseX);
//circle2: size change, position same
noFill();
strokeWeight(20);
stroke(194, 79, 83);
ellipse(430, 430, -mouseX, -mouseX);
//circle3: size change, position same
noFill();
strokeWeight(30);
stroke(79, 121, 194);
ellipse(430, 50, mouseX, mouseX);
//circle4: size change, position same
noFill();
strokeWeight(40);
stroke(139, 194, 79);
ellipse(50, 430, -mouseX, -mouseX);
//rect 1: size change, position same
noStroke();
fill(139, 173, 137);
rect(20, 50, (-mouseX/3), (mouseY/2));
//rect2: size change, position same
noStroke();
fill(246, 250, 190);
rect(20, 460, mouseX/5, mouseY/8);
//circle3: size same, position change
fill(173, 146, 108);
ellipse(mouseX/2, mouseY/3, 100, 200);
//spinning squares
noStroke();
fill('white');
push();
rotate(degrees(angle));
rect(mouseX, 5, 50, 50);
pop();
angle = angle + 2;
push();
translate(195,195);
rotate(degrees(angle2));
rect(mouseX-100, 5, 50, 50);
pop();
angle2 = angle2 - 2;
//baymax
if (mouseY > height/2) {
//if vertical position is at 240 or more, draw baymax
noStroke();
fill('white');
ellipse (200, 300, 100, 70);
noStroke();
fill('black');
ellipse (175, 300, 15, 15);
noStroke();
fill('black');
ellipse (225, 300, 15, 15);
noStroke();
fill('black');
rect (175, 300, 50, 5);
text("HI, I'M BAYMAX, YOUR PERSONAL HEALTH CARE COMPANION", 50, 400, 400, 50);
}
}