//Serina Liu
//Section C
//serinal@andrew.cmu.edu
//Project-03
var sizex = 320;
var sizey = 240;
var R = 0;
var G = 0;
var B = 0;
var circle = 320;
var dir = 1;
var speed = 10;
function setup() {
createCanvas(640, 480);
background (25);
}
function draw() {
if (mouseX < width*0.44) {
background (255, 228, 225);
} else if (mouseX > width*0.6) {
background (224, 255, 255);
} else {
background (255, 215, 0);
}
//changing the background color in three different intervals
R = 0;
G = 0;
B = 0;
if (mouseX < width*0.44) {
sizex= 190;
sizey= 250;
R= 256;
} else if (mouseX > width*0.6) {
sizex= 700;
sizey= 900;
B= 256;
} else {
sizex=400;
sizey=470;
G= 256;
}
//size of rectangle changing in three different intervals
//color of rectangle also changing in three different intervals
noStroke();
fill(256, 256, 256);
ellipseMode (CENTER);
ellipse (320, 230, circle ,circle);
//ellipse
circle += dir*speed;
if (circle > 550) {
dir = -dir;
circle =550;
} else if (circle < 0) {
dir = -dir;
circle = 0;
}
//ellipse moving outward and inward
var rectangle=(width-mouseX);
fill (R, G, B);
rectMode (CENTER);
rect (rectangle, mouseY, sizex/8, sizey/30);
//mirrors the rectangle in the opposite direction
fill(R, G, B);
rectMode(CENTER);
rect(mouseX, mouseY, sizex/8, sizey/30);
//moving rectangle with mouse
}
It is hard to work on motion heavy ones because they tend to give me a headache after looking at them for too long, but I had fun with this one. I think the more practice that I am getting is definitely helping me. I was inspired by a lot of the motion graphics that you see nowadays, with the pastel color backgrounds, whites and then a loud pop of color. I wanted to just focus on the rectangle mainly changing things, but included the ellipse zoom in and out for some added visual simulation.