// Jessica Nip
// Section A
// jknip@andrew.cmu.edu
// Project-03
var R = 0;
var G = 0;
var B = 0;
var R2 = 0;
var G2 = 0;
var B2 = 0;
var R3 = 0;
var G3 = 0;
var B3 = 0;
var R4 = 0;
var G4 = 0;
var B4 = 0;
function setup() {
createCanvas(640, 480);
rectMode(CENTER);
}
function draw() {
background(255,215,122);
fill(R,G,B); // control rect color explicitly
noStroke();
var m = max(min(mouseX, 480), 0);
var size = m * width / height/2;
rect(m, mouseY, size, size);
rect(m/2.2, mouseY, size/2, size/2);
rect(m/7, mouseY, size/3, size/3);
fill(R2,G2,B2);
rect(m, mouseY/3, size, size);
rect(m/7, mouseY/3, size/3, size/3);
rect(m/2.2, mouseY/3, size/2, size/2);
fill(R3,G3,B3);
rect(m, mouseY/1.6, size, size);
rect(m/7, mouseY/1.6, size/3, size/3);
rect(m/2.2, mouseY/1.6, size/2, size/2);
fill(R4,G4,B4);
rect(m, mouseY*1.5, size, size);
rect(m/7, mouseY*1.5, size/3, size/3);
rect(m/2.2, mouseY*1.5, size/2, size/2);
stroke(255);
strokeWeight(12);
line(450, 0, mouseX, mouseY); // White line
stroke(50);
var mx = map(mouseX, 0, width, 180, 250);
line(120, 0, mx, mouseY); // Black line
if (mouseX > width/2) {
R = 146; //purple
G = 129;
B = 159;
R2 = 6; //blue
G2 = 67;
B2 = 90;
R3 = 45; //dark purple
G3 = 35;
B3 = 56;
R4 = 231; //peach
G4 = 165;
B4 = 150;
} else if (mouseX > width/3) {
R = 196; //mauve/pink
G = 155;
B = 168;
R2 = 101; //lighter blue
G2 = 128;
B2 = 139;
R3 = 74; //purple
G3 = 48;
B3 = 76;
R4 = 231;// rich peach
G4 = 165;
B4 = 130;
} else if (mouseX > 0 < width/3) {
R = 196; //light purple grey
G = 176;
B = 174;
R2 = 190; //lightest blue
G2 = 200;
B2 = 230;
R3 = 110; //pinkish purple
G3 = 66;
B3 = 87;
R4 = 231; //dark peach
G4 = 165;
B4 = 110;
}
}
In this project, I wanted to play with ascending shapes in scale and gradients. I would love to incorporate more complex motion into this set in the future.