Min Jun Kim -Project 3 Dynamic Drawing Section B

sketch

/*
Min Jun Kim
minjunki@andrew.cmu.edu
15104-B
Project 3
*/

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

function draw() {

	//set up and first quad 
	strokeWeight(3);
	push();
	background(mouseX);
	translate(width/2,height/2);
	rotate(mouseX/-100);
	drawQuad();
	pop();

	//the oval representing the eye
	push();
	fill(mouseX);
	translate(width/2,height/2)
	ellipse(0,0,mouseX*1.9,mouseX*1.3)
	pop();

	//red circle in middle
	push();
	translate(width/2,height/2);
	fill(mouseX*255/640,10,10);
	ellipse(0,0,mouseX,mouseX);
	pop();

	//a ring around the spinning reverse quads
	push();
	translate(width/2,height/2);
	fill(mouseX*255/640,10,10)
	ellipse(0,0,mouseX/1.3,mouseX/1.3);
	pop();

	//quad 2	
	translate(width/2,height/2);
	push();
	fill(0);
	rotate(mouseX/-300);
	quad(-mouseX/3,0,0,mouseX/3,mouseX/3,0,0,-mouseX/3)
	pop();

	//quad 3
	push();
	fill(mouseX*255/640,10,10)
	rotate(mouseX/-400);
	quad(-mouseX/4,0,0,mouseX/4,mouseX/4,0,0,-mouseX/4)
	pop();

	//quad 4
	push();
	fill(0);
	rotate(mouseX/-500);
	quad(-mouseX/5,0,0,mouseX/5,mouseX/5,0,0,-mouseX/5)
	pop();

	//quad 5
	push();
	fill(mouseX*255/640,10,10)
	rotate(mouseX/-600);
	quad(-mouseX/6,0,0,mouseX/6,mouseX/6,0,0,-mouseX/6);
	pop();

	//quad 6
	push();
	fill(0);
	rotate(mouseX/-700);
	quad(-mouseX/7,0,0,mouseX/7,mouseX/7,0,0,-mouseX/7);
	pop();

	//spinning rect 1
	push();
	fill(0);
	rotate(mouseX/30-0.4);
	rect(mouseX/4,mouseX/4,mouseX/20,mouseX/20);
	pop();

	//spinning rect 2
	push();
	fill(0);
	rotate(mouseX/30+1.6);
	rect(mouseX/4,mouseX/4,mouseX/20,mouseX/20)
	pop();

	//spinning rect 3
	push();
	fill(0);
	rotate(mouseX/30-2.5);
	rect(mouseX/4,mouseX/4,mouseX/20,mouseX/20)
	pop();

	//upper black cover
	push();
	fill(1);
	noStroke();
	rect(-400,-100+mouseX*2,1000,1000);
	pop();

	//lower black cover
	push();
	noStroke();
	fill(1);
	rect(-400,-200-mouseX*2,800,300)
	pop();



}

//function that draws quads
function drawQuad() {
	quad(-mouseX/2,0,0,mouseX/2,mouseX/2,0,0,-mouseX/2);
	
}

The project is based on dynamically drawing when mouse is moved across the horizontal axis (mouseX).
The process was rather simple and started with me messing around with the rotate function. I was rotating a quad and I thought that overlaying the quad with multiple quads would look pretty cool. I initially tried to call the drawQuad function that I made to create multiple quads, but I quickly learned that doing so will make identical quads and so I had to manually create multiple quads in the middle by differing the speed at which it grows. The manual process however became a lot easier once I learned about the Push() and Pop() on this week’s readings. After creating multiple rotating quads in the middle I realized the it reminded me of the sharingan from Naruto and went along with it to create something that somewhat resembles it. I ended up manipulating size, position, angle, color and speed.
All in all, I had a lot of fun figuring things out for this project.