Category: Project-03-Dynamic-Drawing

sketch

//Jihoon Park
//Section A
//jihoonp@andrew.cmu.edu
//project-03

var x = 0;
var y = 0;
var dirL = 1;
var dirC = 1;
var speedL = 1;
var speedC = 1;
var w = 30; // size of big squares
var v = 10; //size of intermittent squares
var s = 30; //space between squares
var r = 0;
var g = 100;
var b = 200;


function setup () {
	createCanvas(640, 480);
}

function draw () {
	background(r,g,b);
	r+=dirC*speedC;
	g+=dirC*speedC;
	b+=-dirC*speedC;
	if (r>255||r<0) {
		dirC=-dirC;
	}
	if (g>255||g<0) {
		dirC=-dirC;
	}
	if (b>255||b<0) {
		dirC=-dirC;
	}
	//sets colors for squares, that periodically change

    for (var i=0 ;i < 10; i++) {
    	var yPos = ((s*2)*i)+(w/2);

    	for (var j=0; j<13;j++){
    		var xPos = ((s*2)*j)+(w/2);
    		noStroke();
    		fill(g,b,r);
    		rectMode(CENTER);
			rect(xPos,yPos,w,w);
	//creates primary squares
		}

    }
    
    fill(g,b,r);
    strokeWeight(20);
    line(0,0,0,640);

    for (var l=0; l<10 ; l++) {
    	var Ypos = ((s*2)*l)-(.5*s);

    	for (var k=0;k<13;k++) {
    		var Xpos = ((s*2)*k)-(.5*s);
    		noStroke();
    		fill(b,r,g);
    		rectMode(CENTER);
    		rect(Xpos, Ypos,v,v);
    //creates secondary squares	
    	}
    }
    


	stroke(g,b,r);
   	strokeWeight(w/2);
    line(x,y,x,height);
    line(x+(w*2),y,x+(w*2),height);
    line(x+(w*4),y,x+(w*4),height);
    line(x+(w*6),y,x+(w*6),height);
    line(x+(w*8),y,x+(w*8),height);
    line(x+(w*10),y,x+(w*10),height);
    line(x+(w*12),y,x+(w*12),height);
    line(x+(w*14),y,x+(w*14),height);
    line(x+(w*16),y,x+(w*16),height);
    line(x+(w*18),y,x+(w*18),height);
    line(x+(w*20),y,x+(w*20),height);
    line(x+(w*22),y,x+(w*22),height);
    line(x+(w*24),y,x+(w*24),height);
    line(x+(w*26),y,x+(w*26),height);
    line(x+(w*28),y,x+(w*28),height);
    line(x+(w*30),y,x+(w*30),height);

    line(x-(w*2),y,x-(w*2),height);
    line(x-(w*4),y,x-(w*4),height);
    line(x-(w*6),y,x-(w*6),height);
    line(x-(w*8),y,x-(w*8),height);
    line(x-(w*10),y,x-(w*10),height);
    line(x-(w*12),y,x-(w*12),height);
    line(x-(w*14),y,x-(w*14),height);
    line(x-(w*16),y,x-(w*16),height);
    line(x-(w*18),y,x-(w*18),height);
    line(x-(w*20),y,x-(w*20),height);
    line(x-(w*22),y,x-(w*22),height);
    line(x-(w*24),y,x-(w*24),height);
    line(x-(w*26),y,x-(w*26),height);
    line(x-(w*28),y,x-(w*28),height);
    line(x-(w*30),y,x-(w*30),height);
    speedL = mouseX/50;
    x += dirL*speedL;
    //makes lines move


    if (x>width) {
    	x=0;
    //makes lines repeat
	}
	
}

function mouseDragged() {
	v = (mouseX+mouseY)/s;
	w = s-v;
	//changes square sizes when mouse dragged
}
	
	

I figured out a way to draw multiple objects in different location with one function called for loop. I incorporated it to draw squares that change according to the location of the mouse when clicked.

sketch

/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 03
*
*/

var x1w = 220;
var y1w = 140;
var x2w = 320;
var y2w = 40;
var x3w = 420;
var y3w = 140;
var x4w = 320;
var y4w = 240;

var x1y = 120;
var y1y = 240;
var x2y = 220;
var y2y = 140;
var x3y = 320;
var y3y = 240;
var x4y = 220;
var y4y = 340;

var x1b = 320;
var y1b = 240;
var x2b = 420;
var y2b = 140;
var x3b = 520;
var y3b = 240;
var x4b = 420;
var y4b = 340;

var x1p = 220;
var y1p = 340;
var x2p = 320;
var y2p = 240;
var x3p = 420;
var y3p = 340;
var x4p = 320;
var y4p = 440;

var fade = 0;

function setup() {
    createCanvas(640, 480);
    rectMode(CENTER);
}

function draw() {
	background(0);

//creates a square in the center that rotates and fades in and out of view
	fill(fade + mouseX);
	angleMode(RADIANS);
	var r = (mouseX, mouseX);
	push();
	translate(width/2, height/2);
	rotate(r);
	rect(0, 0, 60, 60);
	pop();

//creates similar circles, only they don't rotate but do change position
	ellipse(width/2 - mouseX, height/2 - mouseX, 30, 30);
	ellipse(width/2 + mouseX, height/2 + mouseX, 30, 30);
	ellipse(width/2 - mouseX, height/2 + mouseX, 30, 30);
	ellipse(width/2 + mouseX, height/2 - mouseX, 30, 30);

	fill(255); // white diamond, moves with mouseX
	noStroke();
	quad(x1w + mouseX, y1w - mouseX, x2w, y2w, x3w - mouseX, y3w - mouseX, x4w, y4w - mouseX * 2);

	fill(247, 249, 157); // yellow diamond, moves with mouseX
	noStroke();
	quad(x1y, y1y, x2y - mouseX, y2y + mouseX, x3y - mouseX * 2, y3y, x4y - mouseX, y4y - mouseX);

	fill(172, 217, 253); // blue diamond, moves with mouseX
	noStroke();
	quad(x1b + mouseX * 2, y1b, x2b + mouseX, y2b + mouseX, x3b, y3b, x4b + mouseX, y4b - mouseX);

	var pinkR = 216;
	var pinkG = 164;
	var pinkB = 221;

// makes pink diamond disappear in relation to mouseY (if in bottom half of canvas)
	if(mouseY > height/2){
		var pinkR = pinkR - mouseY + 240;
		var pinkG = pinkG - mouseY + 240;
		var pinkB = pinkB - mouseY + 240;
	}

	fill(pinkR, pinkG, pinkB); // pink diamond, moves with mouseX
	noStroke();
	quad(x1p + mouseX, y1p + mouseX, x2p, y2p + mouseX * 2, x3p - mouseX, y3p + mouseX, x4p, y4p);

}

For this project I was inspired by a design from a show called Steven Universe. It was a lot of fun to play with fading colors and changing the shapes of the quadrilaterals. I included my original sketches at the bottom, and although the finished project is different from my original idea, I think I like how it turned out.

I wanted my piece to have some sort of story. When I came up with the idea of having eyes opening and closing, I then wanted my piece to be about day vs. night, and sun vs. moon. The 4 elements that change with mouse movement are: 1) the position of the sun vs. the moon, 2) the color of the background, 3) the dilation/size of the pupils, and 4) the shape of the eyes/how open they are, and for a bonus: the eyes blink when you click your mouse!

sketch

var eyeHeight = 90;

function setup() {
    createCanvas(480, 640);
}

function draw() {
	// Background color changes from orange to purple as moving mouse vertical
	  colR = map(mouseY, 0, height, 243, 44);
    colG = map(mouseY, 0, height, 135, 17);
    colB = map(mouseY, 0, height, 107, 106);
    background(colR, colG, colB);

    //Eye Shapes
    eyeHeight = map(mouseY, 0, height, 90, 0); // Maps mouse placement to eye height
    noStroke();
    fill(255);
    ellipse(width/4, height/2, 160, eyeHeight); // Left eye will close (height decrease) as mouse moves down
    ellipse(3*width/4, height/2, 160, eyeHeight); // Right eye will close (height decrease) as mouse moves down
    
    //Left Iris
    fill("LightBlue");
    ellipse(width/4, height/2, 90, eyeHeight);
    
    //Left Pupil
    noStroke();
    fill(0);
    ellipse(width/4, height/2, eyeHeight/2, eyeHeight/2); //Pupil dilates (ellipse size increases) with mouse moving up

    //Right Iris
    fill("LightBlue");
    ellipse(3*width/4, height/2, 90, eyeHeight);
    
    //Right Pupil
    noStroke();
    fill(0);
    ellipse(3*width/4, height/2, eyeHeight/2, eyeHeight/2); //Pupil dilates (ellipse size increases) with mouse moving up

    //Sun - using mouseY will make sun go up as mouse goes up
    fill("yellow");
    ellipse(width/2, mouseY, 42, 42); //Center circle
    //Spikes
    triangle(width/2 + 10, mouseY, width/2, mouseY-35, width/2 - 10, mouseY);//Top spike
    triangle(width/2 + 10, mouseY, width/2, mouseY+35, width/2 - 10, mouseY);//Bottom spike
    triangle(width/2, mouseY + 10, width/2 - 35, mouseY, width/2, mouseY - 10);//Left spike
    triangle(width/2, mouseY + 10, width/2 + 35, mouseY, width/2, mouseY - 10);//Right spike
    triangle(width/2 + 5, mouseY + 15, width/2 + 25, mouseY + 28, width/2 +5, mouseY - 15);//Bottom right spike
    triangle(width/2 + 5, mouseY - 15, width/2 + 25, mouseY - 28, width/2 +5, mouseY + 15);//Top right spike
    triangle(width/2 - 5, mouseY + 15, width/2 - 25, mouseY + 28, width/2 -5, mouseY - 15);//Bottom left spike
    triangle(width/2 - 5, mouseY - 15, width/2 - 25, mouseY - 28, width/2 -5, mouseY + 15);//Top right spike

    //Moon - using height-mouseY will make moon go down as mouse goes up
    fill(112, 120, 195);
    ellipse(width/2, height-mouseY, 50, 50);//Moon circle
    //Craters
    fill(120, 70, 225, 99);
    ellipse(width/2 - 7, height-mouseY + 7, 11, 12);
    ellipse(width/2 + 3, height-mouseY - 2, 6, 7);
    ellipse(width/2 + 11, height-mouseY - 14, 8, 8);
    ellipse(width/2 -13, height-mouseY - 9, 5, 6);
    ellipse(width/2 +2, height-mouseY + 16, 5, 6);
    
    if (mouseIsPressed) {
    fill(colR, colG, colB);
    ellipse(width/4, height/2, 160, 90);//Ellipse covers left eye  
    ellipse(3*width/4, height/2, 160, 90);//Ellipse covers right eye
    stroke(0);
    noFill();
    strokeWeight(3);
    arc(width/4, height/2, 155, eyeHeight, TWO_PI, PI); // Left closed eye
    arc(3*width/4, height/2, 155, eyeHeight, TWO_PI, PI); // Right closed eye
    }
}

Working on this project I wanted the ability to display colors opposite of each other on the color wheel at the same time. From that I knew I wanted to add three shape series (one for each RGB value). Figuring out the concept of the piece took a little longer. Believe it or not, this is an abstract attempt to model what its like to adjust your an analogue clock. The circle represents the gears shifting with one another, the center “flashing” circle signifies the frustration of trying to get it to the right time, and the hands are pretty obvious. In working on this piece, I tried to use some of the simple tools we learned in class regarding transformations and variables.

sketch-165.js

//Victor Tavarez
//section D
//vtavarez@andrew.cmu.edu
//Project-03-Dynamic-Drawing 

// varying background RGB values
var bgR = 0;
var bgG = 0;
var bgB = 0;

var Sh1R;
var Sh1G;
var Sh1B;

var CircleSize = 20;

function setup() {
    createCanvas(640, 480);

}

function draw() {
    background(bgR, bgG, bgB);
    noStroke();

    //modifying the background to "season-changing colors"
    bgR = map(mouseY, 0, height, 0, 255);
    bgG = map(mouseX, 0, width, 0, 255);
    
    // modifying my first set of shapes
    Sh1R = (abs(255-bgR));
    Sh1G = (abs(255-bgG));
    Sh1B = (abs(255-bgB));

    //creating different shapes with the same color changing scheme
    var Sh1aX = width/5;
    var Sh1aY = height/5;
    var Sh1D = 75;
    fill(Sh1R,Sh1G,Sh1B);

    // creating vertical changing in shape 1 category
    Sh1aY = map(mouseY,0,height,height/5, (height-height/5));
    ellipse(Sh1aX, Sh1aY, Sh1D, Sh1D);    
    var Sh1bX = width-Sh1aX;
    var Sh1bY = height-Sh1aY;
    ellipse(Sh1bX, Sh1bY, Sh1D, Sh1D);

    // Creating Horizontal changing for Shape 1 category
    var Sh1cX = Sh1aX;
    var Sh1cY = height - height/5;
    Sh1cX = map(mouseY,0,height,width/5, (width-width/5)); //gets x motion
    ellipse(Sh1cX, Sh1cY, Sh1D, Sh1D);

    // Creating final horizontal trasformation
    var Sh1dX = width - Sh1cX;
    var Sh1dY = height/5;
    ellipse(Sh1dX, Sh1dY, Sh1D, Sh1D);

    // Modifying the second set of Shapes 
    var Sh2R = (abs(255-bgB));
    var Sh2G = (abs(255-bgR));
    var Sh2B = (abs(255-bgG)); 
    fill(Sh2R, Sh2G, Sh2B);
    
    // creating the attibutes of new shapes
    var Sh2aX = width/2;
    var Sh2aY = height/2;
    var Sh2W = 30;
    var Sh2H = 70;
    var Sh2aDeg = 0
    
    push();
    Sh2aDeg = map(mouseX, 0, width, 0, 360);
    translate(Sh2aX,Sh2aY);
    rotate(radians(Sh2aDeg));
    rect(0, 0, Sh2W, 3*Sh2H,50);  
      
    //secondary shape in this series
    var Sh2bX = (width/2);
    var Sh2bY = (height/2);
    var Sh2bDeg = map(mouseX,0,width,0,360);
    rotate(radians(Sh2bDeg));
    rect(0,0, Sh2W,3*Sh2H, 50);
    pop();

    //final shape series 
    
    var Sh3R = (abs(255-bgG));
    var Sh3G = (abs(255-bgB));
    var Sh3B = (abs(255-bgR)); 
    fill(Sh3R,Sh3G,Sh3B);
    
    var SizeModifier = abs(mouseX-mouseY);

    if (CircleSize > 100) {
        SizeModifier *=-1
    }
    CircleSize += SizeModifier
    ellipse(width/2, height/2, CircleSize, CircleSize);
}

For this project, the hardest part was coding efficiently. Given the amount of little coding experience I drew objects individually as I knew how which ended up taking up many lines of code.

kdlee-project-03-a

var redX = 0;
var redY = 0;
var redW = 32;
var redH = 480;
var redModifier = 64;
var blueX = 0;
var blueY = 16;
var blueW = 64;
var blueH = 32;
var blueModifier = 64;
var whiteX = 0;
var whiteY = 0;
var whiteW = 64;
var whiteH = 32;
var whiteModifier = 64;
var dotX = 8;
var dotY = 16;
var dotD = 32;
var dotModifier = 32;
var rectTurn = 180;
var coloryYellow ="#FAFCFC";//"#18192E";// "#CEDEE6";//"#FEEEDD"; //"#FFCC39";
var colorRed = "#6393B6";//"#D54E21";// "#2A3C4F";//"#30C9A3";//"#FC4E4D";
var colorBlue = "#DDDADC";//"#F3CB2F"; //"#F37A70";//"#FE8D7B";//"#6B7FE0";

function setup() {
    createCanvas(640, 480);
}

function draw() {
    noStroke();
    background(coloryYellow);//YELLOW

    var redW = map(mouseX, 0, width, 0, redModifier);
    rectMode(CORNER);
    fill(colorRed);//RED
    rect(redX, redY, redW, redH);//Repeated 10 RED rectangles
    rect(redX + 1 * redModifier, redY, redW, redH);
    rect(redX + 2 * redModifier, redY, redW, redH);
    rect(redX + 3 * redModifier, redY, redW, redH);
    rect(redX + 4 * redModifier, redY, redW, redH);
    rect(redX + 5 * redModifier, redY, redW, redH);
    rect(redX + 6 * redModifier, redY, redW, redH);
    rect(redX + 7 * redModifier, redY, redW, redH);
    rect(redX + 8 * redModifier, redY, redW, redH);
    rect(redX + 9 * redModifier, redY, redW, redH);
//    if (mouseX < 0){
//      var redW = 0;
//    }
    push();//ALL Blue Rectangles
    rectMode(CENTER);
    var blueW = map(mouseY, 0, height, 0, blueModifier) * 2;
    var redW = map(mouseX, 0, width, 0, redModifier);
    fill(colorBlue);//BLUE

    push();//Repeated 4 BLUE bars 0th Column
    translate(blueX + redW / 2 - blueModifier, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2 - blueModifier, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2 - blueModifier, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2 - blueModifier, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 1st Column
    translate(blueX + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 2nd Column
    translate(blueX + blueModifier + redW / 2, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + blueModifier + redW / 2, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + blueModifier + redW / 2, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + blueModifier + redW / 2, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 3rd Column
    translate(blueX + 2 * blueModifier + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 2 * blueModifier + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 2 * blueModifier + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 2 * blueModifier + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 4th Column
    translate(blueX + 3 * blueModifier + redW / 2, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 3 * blueModifier + redW / 2, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 3 * blueModifier + redW / 2, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 3 * blueModifier + redW / 2, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 5th Column
    translate(blueX + 4 * blueModifier + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 4 * blueModifier + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 4 * blueModifier + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 4 * blueModifier + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 6th Column
    translate(blueX + 5 * blueModifier + redW / 2, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 5 * blueModifier + redW / 2, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 5 * blueModifier + redW / 2, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 5 * blueModifier + redW / 2, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 6th Column
    translate(blueX + 6 * blueModifier + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 6 * blueModifier + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 6 * blueModifier + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 6 * blueModifier + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 7th Column
    translate(blueX + 7 * blueModifier + redW / 2, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 7 * blueModifier + redW / 2, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 7 * blueModifier + redW / 2, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 7 * blueModifier + redW / 2, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 8th Column
    translate(blueX + 8 * blueModifier + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 8 * blueModifier + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 8 * blueModifier + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 8 * blueModifier + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 9th Column
    translate(blueX + 9 * blueModifier + redW / 2, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 9 * blueModifier + redW / 2, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 9 * blueModifier + redW / 2, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 9 * blueModifier + redW / 2, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 10th Column
    translate(blueX + 10 * blueModifier + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 10 * blueModifier + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 10 * blueModifier + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 10 * blueModifier + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    pop();
}

sketch

// Sofia Miren Syjuco
// Section A
// smsyjuco@andrew.cmu.edu
// Assignment-03-C

xPosition1 = 320;
yPosition1 = 0;
yPosition2 = 240;
rectSize = 30;
circleSize = 15;
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    noStroke();

    // have background gradiate as mouseY changes from pink to green
    colR = map(mouseY, 0, height, 255, 152);
    colB = map(mouseY, 0, height, 153, 151);
    colG = map(mouseY, 0, height, 0, 255);
    background(colR, colG, colB);

    push();
    translate(320, 240);
    fill (0);
    // rotate the squares faster/slower depending on mouseY position
    rotate (millis ()/mouseY);
    // create the black rectangle
    rect (0 - rectSize/2, yPosition1, rectSize, rectSize);
    // if mouseY is on lower half of screen, alter the yPosition variables
    // this will effect rectangle placement
    if ((mouseY > 0) & (mouseY < 200)) {
        yPosition1 = mouseY;
        yPosition2 = (0 - mouseY);
         }
    pop();

    push();
    translate (320, 240);
    fill ("white");
    // rotate the squares faster/slower depending on mouseY position
    rotate (millis ()/mouseY);
    // create the white rectangle
    rect (0 - rectSize/2, yPosition2, rectSize, rectSize);
    // if mouse Y on upper half of screen, let mouseY effect square's position
    if ((mouseY < 0) & (mouseY > -200)){
        yPosition2 = mouseY;
     }
    pop();
 
    push();
    // make the circle's color gradiate from black/white depending on mouseY
    fill (mouseY);
    // create the ellipse
    ellipse (xPosition1, height/2, circleSize, circleSize);
    // if the mouseY is within certain bounds, change ellipse position
    if ((mouseY > 40) & (mouseY < 440)){
        xPosition1 = mouseY + 100;
    // if the circle is on right half of screen, make it big (20x20)
        if (xPosition1 > 320){
            circleSize = 20;
            }
    // if the circle is on the left half of screen, make it small (10x10)
         if (xPosition1 < 320) {
            circleSize = 10;
            }
    }
    pop();
}

My process for this project was to slowly cobble together elements of what we had learned, and step-by-step create a foundation which I could later experiment on. It took a lot of testing and just moving numbers around, but in the end I think I have a better understanding of manipulating shapes, and translating things.

sketch

var diamOne = 150;
var diamTwo = 100;
function setup() {
    createCanvas(640,480);


}

function draw() {
    background ("#3D3355");
  fill ("#F13F5F");

  push();//small flower spinning
  translate(width/3,height/3+100);
  rotate (millis()/1000);
  translate(-width/3,-height/3+100);
  rotate(radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate(radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate(radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  pop();
  push();
  fill("#C2AFC7");
  noStroke();
  ellipse (width/2+100,height/2-100,diamOne);
  pop();
  push();
  fill("#E790A5");
  noStroke();
  ellipse (width/2+50,height/2+150,diamTwo);
  pop();
    if (mouseY>height/2) { //changes size of diamOne
      diamOne -= (diamOne-5)>=15;
    } else {
      diamOne += (diamOne+5)>=100;
    }
    if (mouseX >width/2) {//changes sizes of diamTwo
      diamTwo += (diamTwo+10)> 30;

    } else {
      diamTwo -= (diamTwo-10)>50;
    }



}

sketch-137.js

var mainRec =0; //main rectangle color
var diam =100; //diameter of main green circle
var blkdiam =100; //diameter of main black circle
var diamSmall =80; //upper left & lower right circle diameters
var diamSmall2 =80; //upper right & lower left circle diameters
var leftCorner1 =10; //x point of white square
var leftCorner2 =10; //y point of white square
function setup() {
    createCanvas(640, 480);
}

function draw() {
	var newBackground=map(mouseY,0,height,0,255);
	background(newBackground); 

	var firstColor = map(mouseY, 0, height, 151, 255); //sets bounds for first red value
	var secondColor = map(mouseY, 0, height, 230,51); //sets bounds for green value
	var thirdColor = map(mouseY, 0, height, 0, 210); // sets bounds for blue value

	background(firstColor,secondColor,thirdColor);

	if ((mouseX > 170) & (mouseX < 470) && //allows for the change of middle rectangle color
		(mouseY > 50) && (mouseY < 430)) {
			mainRec = mainRec + 1;
		}

    fill(mainRec);
    noStroke();
    rect(170,50,300,380); //main long rectangle in center

    fill('Aqua');
    noStroke();
    ellipse(170,50,diamSmall,diamSmall); //upper left corner circle
    
    fill('Aqua');
    noStroke();
    ellipse(470,430,diamSmall,diamSmall); // lower right corner circle
    
    if (mouseY>height/2) { //this is for upper left & lower right circles
    	diamSmall -= (diamSmall-1) >= 10; //shrink when mouse < halfway down
    } else {
        diamSmall += (diamSmall+1) <= 80; //grow when mouse is > halfway down
    } 

    fill('Aqua');
    noStroke();
    ellipse(470,50,diamSmall2,diamSmall2); //upper right corner circle

    fill('Aqua');
    noStroke();
    ellipse(170,430,diamSmall2,diamSmall2); //lower left corner circle

    if (mouseY<height/2) {
        diamSmall2 -= (diamSmall2-1) >= 10; //shrink when y is < halfway down
    } else {
        diamSmall2 += (diamSmall2+1) <= 80; //grow when y is > halfway down
    }


    push(); //spinning pink ellipse
    translate(width/2, height/2);
    rotate(millis()/1000);
    translate(-width/2, -height/2);
    fill('pink');
    noStroke();
    ellipse(width/2,height/2,450,50);
    pop();

    push(); //spinning purple ellipse
    translate(width/2, height/2);
    rotate(-millis()/mouseX); //slightly different rate of speed & opposite directin
    translate(-width/2, -height/2);
    fill('purple');
    noStroke();
    ellipse(width/2,height/2,550,50);
    pop();

    push(); //spinning orange ellipse
    translate(width/2, height/2);
    rotate(-millis()/1000); //-direction 
    translate(-width/2,-height/2);
    fill('orange');
    noStroke();
    ellipse(width/2,height/2,450,50);
    pop();

    push(); //spinning dark pink ellipse
    translate(width/2, height/2);
    rotate(millis()/mouseX); //slower speed
    translate(-width/2,-height/2);
    fill('DeepPink');
    noStroke();
    ellipse(width/2,height/2,550,50);
    pop();

    fill('Aquamarine'); //middle circle
    noStroke();
    ellipse(width/2,height/2,diam,diam);

    if (mouseX > width/2) { // grows diameter if mouse is < half width
    	diam += (diam+3) <= 200;
    } else {
        diam -= (diam-3) >= 100; //shrinks diameter if mouse is > half width
    }

    fill('black');
    noStroke();
    ellipse(width/2,height/2,blkdiam,blkdiam);

    if (mouseX > width/2) {
        blkdiam -= (blkdiam-3) >=30; // shrinks diameter if mouse is < half width
    } else {
        blkdiam += (blkdiam+3) <=100; //grows diameter if mouse is > half width
    }

    fill('white'); //rect in upper right corner
    noStroke();
    rect(leftCorner1,leftCorner2,30,30);

    if (mouseX > width/2) { //mouse towards right, rect = lower right 
        leftCorner1 = 600;
    } else {
        leftCorner1 =10;
    }

    if (mouseX > width/2) { //mouse towards left, rect = upper left
        leftCorner2 = 440;
    } else {
        leftCorner2 =10;
    }


    





}

I wanted to make a piece that would overlap with lots of rotating parts. I wanted to use mostly circles and have them grow or shrink depending on mouse position. I tried to keep within a color scheme of oranges, greens, and pinks.