jknip-Project-03-dynamic-drawing

sketch.js

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