## dayoungc- Project-03- Dynamic Drawing

``````//Dayoung Chung
//SECTION E
//dayoungc@andrew.cmu.edu
//Project-03

function setup() {
createCanvas(640, 480);
//background(0);
}

function draw() {

/*
stroke(255);
strokeWeight(3);
for (var i = 0; i < 20; i++) {
for (var j = 0; j < 20; j++) {
line(i*30+i, j*30+j, i*30-i, j*30-j);
}
}
*/

background(0);
//i: x j:y
for(var i= 0; i<20; i++) {
for (var j= 0; j<20; j++) {

stroke((255 - (i+j)*5)*mouseX/100, (255 - (i+j)*5)*mouseX/400, (255 - (i+j)*5)*mouseX/600);
//stroke(202,192,253);
strokeWeight(6 * mouseY/600);
line(i*30 + (30*mouseX/600), j*30+(30*mouseY/600), i*30+30-(30*mouseX/600), j*30+30-(30*mouseY/600));
}
}
}``````

I made a large number of lines to make a pattern of my own. Wave your mouse around to adjust the color and shape of lines.When you move your mouse to right or down, the lines get thicker. And when you move your mouse to left or up, then the lines disappear. In future, I would like to learn more about mapping and making angles to make a complicated pattern.

## haewanp – Project 03 – Dynamic Drawing

``````//Hae Wan Park
//15104-A
//haewanp@andrew.cmu.edu
//Project-03-DynamicDrawing

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

}

function draw() {

var Top = 480;
var bottom = Top + 180;
var x = 110;
var y = 50;
var c1 = color(0);
var c2 = color(0);

var mX = max(min(mouseX, 480), 0);
var mY = max(min(mouseY, 640), 0);

var mX_L = max(min(mouseX, 240), 0); // when mouse is on left side
var mX_R = max(min(mouseX, 480), 240); // when mouse is on right side

if (mY > height/2) {
c1 = color(255); //change color from black to white
strokeWeight(20);
}

background(c1);

//Blue Stripe Pattern when mouse hovers below than half of height
for (var r = 0; r < 40; r += 1) {

if (r % 2 == 0) {

if (mY > height/2) {
c2 = color(0, 41, 149); //change color from black to blue
}
stroke(c2);
}
line(-50, height/10 * r - 560 + mY, width + 50, height/10 * r - 260 - mY);
}

//outline of cube
strokeJoin(ROUND);
strokeWeight(5);
stroke(255);

//outline of cube disappears when mouse hovers below than half of height
if (mY > height/2) {
strokeWeight(0);
}

for (i = -4; i < 4; i+=1) {

fill(237, 10, 124); // Magenta, Top Side of Cube
quad(mX, Top + 2*y + (mX_R - mX_L)/10,
mX_L - x, Top + y,
width/2, Top - (mX_R - mX_L)/10,
mX_R + x, Top + y);

fill(14, 198, 184);  // Green, Left Side of Cube
quad(mX, Top + 2*y + (mX_R - mX_L)/10,
mX_L - x, Top + y,
mX_L - x, bottom,
mX, bottom + y + (mX_R - mX_L)/10);

fill(255, 241, 0); // yellow, Right Side of Cube
quad(mX, Top + 2*y + (mX_R - mX_L)/10,
mX_R + x, Top + y,
mX_R + x, bottom,
mX, bottom + y + (mX_R - mX_L)/10);

Top = Top - 210 + mY/5.5;
bottom = bottom - 210 + mY/5.5;
}

}

``````

It was a process to consider the relationship among graphic elements and explore the way execute in coding. The more I learn about p5.js the more challenging project comes. But, actually, that means also I can create more complex and dynamic graphics in p5.js.

## mjnewman Project-03 Dynamic Drawings, Section A

``````//Meredith Newman
//Section A
//mjnewman@andrew.cmu.edu
//Project-02-Dynamic-Drawing

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

function draw() {
//clean slate
background(255);

//sliding blue rectangle used for background when mouse is full width
fill(32, 24, 135);
noStroke();
rect(0, 0, mouseX, 480);

//white lines behind diagonal red lines
stroke(255);
strokeWeight(90);
if (mouseX <= width) {
line(0, 0, mouseX, 480);
line(0, 480, mouseX, 0);
}

//red diagonal lines
stroke(230, 24, 30);
strokeWeight(30);
if (mouseX <= width) {
line(0, 30, mouseX, 450);
line(30, 480, mouseX - 30, 0);
}

noStroke();
//white stripes on cross
fill(255);
rect(0, 150, mouseX, 180);
rect(270, 0, 100, mouseY);

//red stripes on cross
fill(230, 24, 30);
rect(0, 190, mouseX, 100);
rect(290, 0, 60, mouseY);

//changing of color to colour
if (mouseX < width* 0.75){
textSize(70);
fill(13, 202, 89);
textStyle(BOLD);
text("Color", 230, 265);
} else if (mouseX > width * 0.75){
textSize(70);
fill(32, 24, 135);
textStyle(BOLD);
text("Colour", 230, 265);
}
}
``````

I wanted to approach my project not just with the idea of of dynamic drawings, but also of dynamic words. I also wanted to add a little humor (or humour) to the project, the changing of color from green is a slight nod to the “right way” of spelling the word. If I had more time, I would have found a way to incorporate more words that are translated differently from culture to culture, but in the same language.

## eeryan-project03-dynamicdrawing

``````//Erin Ryan
//Lab C
//eeryan@andrew.cmu.edu
//Project 03
var circleX = 450;
var circleY = 220;
var cD = 190;//diameter of earth
var mD = 40;//diameter of moon
var time = 1;
skyR = 30;
skyG = 30;
skyB = 89;
//orbit variables
var posX = 0;
var posY = 0;
var theta = 0;

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

function draw() {
background(skyR,skyG,skyB);
//make earth
stroke(66,66,104);
strokeWeight(3);
fill(113,111,179);
ellipse(circleX, circleY,cD,cD);
//earth face
//earth makes sleeping face when sky is darker
if(mouseX < 200){
stroke(66,66,104);
strokeWeight(3);
arc(circleX - cD/5,circleY - cD/8,10,10,0,PI);
arc(circleX + cD/5,circleY - cD/8,10,10,0,PI);
fill(66,66,104);
ellipse(circleX,circleY+10,15,15);
//text
fill(255);
strokeWeight(1.5);
noStroke();
rect(circleX-cD,circleY - 30,90,30,30,30,0,30);
noFill();
stroke(80);
strokeWeight(1);
text("zzzzzzzzz",circleX - cD + 18,circleY - 11);
}
//earth wakes up when sky is lighter
if(mouseX >= 200){
noStroke();
fill(66,66,104);
ellipse(circleX - cD/5,circleY - cD/8,10,10);
ellipse(circleX + cD/5,circleY - cD/8,10,10);
strokeWeight(3);
arc(circleX,circleY+10,20,20,0,PI);
//text
fill(255);
strokeWeight(1.5);
noStroke();
rect(circleX-cD,circleY - 30,90,30,30,30,0,30);
noFill();
stroke(80);
strokeWeight(1);
text("good morning!",circleX - cD + 8,circleY - 11);
}
//make moon orbit the earth
theta = mouseX/5 * 0.05;
posX = radiusX * cos(theta);//use trigonometric function x = rcos(theta) to determine x coordinate
posY = radiusY * sin(theta);//use trigonometric function y = rsin(theta) to determine y coordinate
translate(width/2, height/2);
fill(226,223,172);
ellipse(posX, posY, mD, mD);
//make moon change size via mapping
mD = map(theta,0,6,80*(theta+1),15);
//moon detailing
noStroke()
fill(196,193,153);
ellipse(posX - mD/5, posY - mD/5, mD/6, mD/6);
stroke(196,193,153);
noFill();
ellipse(posX + mD/4, posY + mD/6, mD/7, mD/7);
//make sky change color
skyR = mouseX/5 + 30;
skyG = mouseX/4 + 30;
skyB = mouseX/2 + 89;
}``````

My concept was to show the Moon orbiting around the Earth, with the Moon changing size, position, and velocity as it moved through space, adding an element of perspective to the drawing.

I was unsure how to code an elliptical orbit, as I knew that the rotate() function used for circular orbits wouldn’t apply.

I ended up using the trigonometric formulas x=rcos(theta) and y=rsin(theta) to get the orbit coordinates – I then tweaked theta so it corresponded with mouseX. I initially tried to use conditionals to get the moon to change size, but it was very complicated, and wouldn’t transition smoothing, so I ended up using the mapping function.

I decided to add more elements of detail to the Moon, and I gave the Earth an awake and asleep face. I wish I could have easily added more details to the Earth so that it looked more like Earth, but it ended up just looking like a random planet.

## hdw – Project 3 – Dynamic Drawing

Press any key to interact.

``````var x = 180
var r = 30;
var ellipseX;//ellipse's x position
var ellipseY;
var z = 0 //distance from center + opacity
var canBig = 1;

function setup() {
background(255, 255, 255);
createCanvas(640, 480);
ellipseY = .5*height;
ellipseX = .5*width;

}

function keyPressed() {
if(canBig == 1){
r=r+5;
x=x-5;
z=z+1;
}
if(r>320 & canBig == 1){
canBig = 0;
print(boundary);
}
if(canBig == 0){
r=r-5;
x=x+5;
z=z-1;
}
if(r < 5 & canBig == 0){
canBig = 1;
}
}

function draw() {

background(255, 255, 255, 200);
noStroke();
fill(0);

//middle flower
//outer right
fill(255,0,x,30+z*.15)
ellipse(ellipseX+z, ellipseY, r, r);

//white
fill(255,255,255,30)
ellipse(ellipseX, ellipseY, r, r);

//outer left
fill(255,0,x,30+z*.15)
ellipse(ellipseX-z, ellipseY, r, r);

//outer bottom
fill(255,0,x,30+z*.15)
ellipse(ellipseX, ellipseY+z, r, r);

//white
fill(255,255,255,30)
ellipse(ellipseX, ellipseY, r, r);

//outer top
fill(255,0,x,30+z*.15)
ellipse(ellipseX, ellipseY-z, r, r);

//white center
fill(255,255,255,5+.25*z)
ellipse(ellipseX-0.7,ellipseY,2*z,2*z)
ellipse(ellipseX+0.7,ellipseY,2*z,2*z)
ellipse(ellipseX,ellipseY-0.7,2*z,2*z)
ellipse(ellipseX,ellipseY+0.7,2*z,2*z)

//center ellipses
fill(255,0,x,30+z*.15)
ellipse(ellipseX,ellipseY,2*z,z)
ellipse(ellipseX,ellipseY,z,2*z)

//magenta center
fill(255,0,x+3*z,30+z*.15)
ellipse(ellipseX,ellipseY,1.3*z,z)
ellipse(ellipseX,ellipseY,z,1.3*z)

//white center bud
fill(255,255,255)
ellipse(ellipseX,ellipseY,z*.1,z*.1)
}
``````

This week’s drawing is a blooming flower. I had originally wanted to do something more complicated but struggled with the code as is. I had Stella Han help me figure out how to create boundaries so that when it hit a certain height it would shrink again. I also had Shovik Mani help me figure out a bug in my code. Originally I had posted the function for keyPress inside the drawing function and couldn’t figure out why it wouldn’t draw.

## jooheek-Project03-DynamicDrawing

``````//Joo Hee Kim
//Section E
//jooheek@andrew.cmu.edu
//Project-03

var faceW = 300;
var faceH = 300;
var eyeW = 50;
var eyeH = 50;
var pupilW = 20;
var pupilH = 20;
var mouthW = 40;
var mouthH = 20;
var candyW = 70;
var candyH = 50;
var r = 255;
var g = 100;
var b = 171;

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

function draw() {
background(55, 55, 175);
noStroke();

var mouthX = width/2;
var mouthY = height/2 + faceH/4;

//face
fill(249, 225, 197);
ellipse(width/2, height/2, faceW, faceH);

//eye-white
fill(255);
ellipse(width/2 - faceW/4, height/2, eyeW, eyeH);

fill(255);
ellipse(width/2 + faceW/4, height/2, eyeW, eyeH);

//mouth
fill(204, 64, 64);
ellipse(width/2, height/2 + faceH/4, mouthW, mouthH);

//pupil-left
push();
translate(width/2 - faceW/4, height/2);//make point of rotation the middle of eye
rotate(mouseX/100);
fill(0);
ellipse(10, 10, pupilW, pupilH);
pop();

//pupil-right
push();
translate(width/2 + faceW/4, height/2);
rotate(mouseX/100);
fill(0);
ellipse(10, 10, pupilW, pupilH);
pop();

//candy
fill(r, g, b);
ellipse(mouseX, mouseY, 70, 50);

fill(r, g, b);
triangle(mouseX, mouseY, mouseX - 40, mouseY + 40, mouseX - 40, mouseY -40);

fill(r, g, b);
triangle(mouseX, mouseY, mouseX + 40, mouseY -40, mouseX + 40, mouseY + 40);

//mouth gets bigger & color gets random as candy gets closer to the face
if (mouseX > width/2-faceW/2 & mouseX < width/2+faceW/2 && mouseY > height/2 - faceH/2 && mouseY < height/2 + faceH/2) {
mouthW = mouthW+1;
mouthH = mouthH+1;
r = random(0, 255);
g = random(0, 255);
b = random(0, 255);
}

//mouth resets when it reaches certain size
if (mouthW > 200 & mouthH > 100) {
mouthW = 40;
mouthH = 20;
}

if (dist(mouseX, mouseY, width/2, height/2 + faceH/4) < 50) {
faceW = 450;
faceH = 450;
eyeW = 100;
eyeH = 100;
pupilW = 50;
pupilH = 50;
mouthW = 200;
mouthH = 100;
}

if (dist(mouseX, mouseY, width/2, height/2) > 225) {
faceW = 300;
faceH = 300;
eyeW = 50;
eyeH = 50;
pupilW = 20;
pupilH = 20;
mouthW = 40;
mouthH = 20;

}

}
``````

For this assignment, I started with the concept of a guy desperate for a piece of candy. Then, I worked out how to include interactive properties that were associated with mouseX and mouseY.

## jknip-Project-03-dynamic-drawing

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

## Project-03 Dynamic Drawing

``````//Thomas Wrabetz
//Section C
//twrabetz@andrew.cmu.edu
//Project-03

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

function draw() {
background(200);
noStroke();

var cornerDist = dist(width, height, width/2, height/2);
var mouseDist = min( dist(width/2, height/2, mouseX, mouseY ), cornerDist );
var reverseDist = (cornerDist - mouseDist) / cornerDist;
//The ellipses' sizes are proportional to the ratio of the mouse's distance
//from the corners to the distance of the corner from the center
if( reverseDist >= 0 )
{
fill(255);
ellipse(width/2,height/2, 960 * reverseDist, 600 * reverseDist);
fill(50);
ellipse(width/2,height/2, 300 * reverseDist, 300 * reverseDist);
}

//Fill value for the spiral is dependent on mouse X and Y
var startRed = ( mouseX / width );
var startGreen = ( mouseY / height );
var startBlue = ( abs( mouseX - width / 2 ) + abs( mouseY - height / 2 ) ) / width;
var fillRed = startRed;
var fillGreen = startGreen;
var fillBlue = startBlue;
//Draw a spiral of circles; the curvature of the spiral depends on mouseDist
for( offset = 1; offset < cornerDist; offset *= 1.1 )
{
fill(fillRed, fillGreen, fillBlue);
push();
translate( width/2, height/2 );
rotate( ( 8 * PI * log(log(offset)) * ( mouseDist / cornerDist) ) );
ellipse( offset, 0, 10 + offset / 10, 10 + offset / 10 );
pop();
fillRed += 3 * startRed; fillGreen += 3 * startGreen; fillBlue += 3 * startBlue;
}
} ``````

I worked with a spiral that unwraps based on the mouse’s distance from the center of the image.

## thlai-Project-03-Dynamic-Drawing

I had a lot of fun making this, although a large part of it was guess and check for the code I was not familiar with. I wanted it to look something like a kaleidoscope with 8 reflective sides, so I created a symmetrical and radial composition.

``````// Tiffany Lai
// 15-104, Section !
// thlai@andrew.cmu.edu
// Project 03 - Dynamic Drawing

var r; // RED
var g; // GREEN
var b; // BLUE

function setup() {
createCanvas(640, 480);
rectMode(CENTER);
noStroke();
fill(255, 150);
sq1 = { // CENTER
x: 0,
y: 0,
w: 100,
h: 100,
}
sq2 = { // MIDDLE CIRCLE
x: 150,
y: 0,
w: 100,
h: 100,
}
sq3 = { // BG LINES
x: 250,
y: 0,
w: 10,
h: 10,
}
}

function draw() {
background(r, g, b);

r = map(mouseX, 0, width, 100, 230); // BG (change colors)
g = map(mouseY, 0, width, 150, 200);
b = map(mouseX, 0, height, 200, 255);

sq1.w = map(mouseX, 0, width, 20, 200); // CENTER SQUARE (change size with mouseX)
sq1.h = map(mouseX, 0, width, 20, 200);

sq2.w = map(mouseX, 0, width, 100, 20); // CIRCLE OF SQUARES (change size with mouseX)
sq2.h = map(mouseX, 0, width, 100, 20);

sq3.w = map(mouseY, 0, height, 1, 200); // BACKGROUND LINES (change size with mouseX)
sq3.h = map(mouseY, 0, height, 1, 500);

translate(width/2, height/2);

for (var i = 0; i < 16; i++) { // BACKGROUND LINES
push();
fill(r-10, g-10, b-10); // vertical lines
rotate(TWO_PI * i / 16);
rect(sq3.x, 0, 5, sq3.h);

rotate(TWO_PI * i / 16); // horizonal lines
rect(sq3.x, 0, sq3.w, 5);
pop();
}

push(); // CORNER LINES
strokeWeight(1);
translate(-width/2, -height/2);
stroke(r-30, g-30, b-30);
line(0, 0, mouseX, mouseY); // line point follows mouse
line(0, height, mouseX, mouseY);
line(width, 0, mouseX, mouseY);
line(width, height, mouseX, mouseY);
pop();

rect(sq1.x, sq1.y, sq1.w, sq1.h);

for (var i = 0; i < 8; i++) { // CIRCLE OF SQUARES is eight
push();
rotate(TWO_PI * i / 8);
rect(sq2.x, sq2.y, sq2.w, sq2.h);
pop();
}
}

``````

## aerubin-Project-03-Section-C

Since this project was so open ended, it took me a while to settle on a design. I was inspired by the spinning squares we learned how to create in the lab and I thought it would be cool to combine many of them to create a shimmer effect. I then decided to sketch out a disco ball utilizing strips composed of rotating squares.

I then found the color scheme from a picture I found via Google. I really wanted to make the click result as unexpected as possible so I decided to stick with white and grey for the pre-clicked image. Then suddenly, with a click of the mouse, the room goes dark and a disco ball appears and begins to spin. All in all, I am satisfied with my product and I really enjoyed this more open-ended project.

Instructions:
Click to see the squares form into the final design.
Move cursor into left side of the sketch to see it shine.
Move cursor into bottom left corner to see it sparkle.
Click again to see the ball stop “spinning.”

``````//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Week 3-Dynamic Drawing

//Rate of Spinning Variables
var angle = 0;
var x = 0;

//Positions of Squares (see bottom for more details)
var a = 23;
var b= 23;
var c= 23;
var d = 391;
var e = 0;
var f = 50;
var g = 391;
var h = 0;
var i = 69;
var j = 23;
var k = 0;
var l = 115;
var m = 0;
var n = 0;
var o = 161;
var p = 0;
var q = 0;
var r = 207;
var s = 0;
var t = 0;
var u = 253;
var v = 0;
var w = 0;
//yellow
var red1 = 255;
var green1 = 255;
var blue1 = 255;
//green
var red2 = 255;
var green2 = 255;
var blue2 = 255;
//blue
var red3 = 255;
var green3 = 255;
var blue3 = 255;
//red
var red4 = 255;
var green4 = 255;
var blue4 = 255;

//Makes Background Black when clicked
var blackBackground = 0;

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

function draw() {
background(230-blackBackground);
fill(255);
noStroke()

//Center 46x46 Squares
push();
translate(a, b);
rectMode(CENTER);
fill(red1, green1, blue1+150)
rect(0, 0, 46, 46);
pop();
angle = angle+x;

push();
translate(a, (b + 46));
rectMode(CENTER);
fill(red1, green1, blue1+165);
rect(0, 0, 46, 46);
pop();
angle = angle+x;

push();
translate(a, (b + 92));
rectMode(CENTER);
fill(red2+150, green2+100, blue2);
rect(0, 0, 46, 46);
pop();
angle = angle+x;

push();
translate(a, (b + 138));
rectMode(CENTER);
fill(red3+120, green3+120, blue3+100);
rect(0, 0, 46, 46);
pop();
angle = angle+x;

push();
translate(a, (b + 184));
rectMode(CENTER);
fill(red3+40, green3+40, blue3+100);
rect(0, 0, 46, 46);
pop();
angle = angle+x;

push();
translate(a, (b + 230));
rectMode(CENTER);
fill(red3+190, green3+120, blue3+100);
rect(0, 0, 46, 46);
pop();
angle = angle+x;

push();
translate(a, (b + 276));
rectMode(CENTER);
fill(red3+200, green3+150, blue3+80);
rect(0, 0, 46, 46);
pop();
angle = angle+x;

push();
translate(a, (b + 322));
rectMode(CENTER);
fill(red4, green4+40, blue4+40);
rect(0, 0, 46, 46);
pop();
angle = angle+x;

//41x41 squares left
push();
translate(c, d);
rectMode(CENTER);
fill(red1, green1, blue1+110)
rect(0, 0, (46-e), (46-e));
pop();
angle = angle+x;

push();
translate(c, (d+41));
rectMode(CENTER);
fill(red1, green1, blue1+170)
rect(0, 0, (46-e), (46-e));
pop();
angle = angle+x;

//WHITE
push();
translate(c, (d+82));
rectMode(CENTER);
rect(0, 0, (46-e), (46-e));
pop();
angle = angle+x;

push();
translate(c, d+123);
rectMode(CENTER);
fill (red2+100, green2+100, blue2);
rect(0, 0, (46-e), (46-e));
pop();
angle = angle+x;

push();
translate(c, d+164);
rectMode(CENTER);
fill (red3+130, green3+160, blue3+100);
rect(0, 0, (46-e), (46-e));
pop();
angle = angle+x;

push();
translate(c, d+205);
rectMode(CENTER);
fill (red3+100, green3+100, blue3+100);
rect(0, 0, (46-e), (46-e));
pop();
angle = angle+x;

push();
translate(c, d+246);
rectMode(CENTER);
fill (red3+70, green3+90, blue3+80);
rect(0, 0, (46-e), (46-e));
pop();
angle = angle+x;

push();
translate(c, d+287);
rectMode(CENTER);
fill (red3+180, green3+120, blue3+100);
rect(0, 0, (46-e), (46-e));
pop();
angle = angle+x;

//41x41 squares right

//WHITE
push();
translate(c+71, d);
rectMode(CENTER);
rect(0, 0, (46-e), (46-e));
pop();
angle = angle+x;

push();
translate(c+71, (d+41));
rectMode(CENTER);
fill(red1, green1, blue1+190);
rect(0, 0, (46-e), (46-e));
pop();
angle = angle+x;

push();
translate(c+71, (d+82));
rectMode(CENTER);
fill(red3+190, green3+180, blue3+130);
rect(0, 0, (46-e), (46-e));
pop();
angle = angle+x;

push();
translate(c+71, d+123);
rectMode(CENTER);
fill(red3+110, green3+120, blue3+60);
rect(0, 0, (46-e), (46-e));
pop();
angle = angle+x;

push();
translate(c+71, d+164);
rectMode(CENTER);
fill(red3+190, green3+170, blue3+110);
rect(0, 0, (46-e), (46-e));
pop();
angle = angle+x;

push();
translate(c+71, d+205);
rectMode(CENTER);
fill(red3+150, green3+110, blue3+90);
rect(0, 0, (46-e), (46-e));
pop();
angle = angle+x;

push();
translate(c+71, d+246);
rectMode(CENTER);
fill(red4, green4+30, blue4+60);
rect(0, 0, (46-e), (46-e));
pop();
angle = angle+x;

push();
translate(c+71, d+287);
rectMode(CENTER);
fill(red4, green4+50, blue4+90);
rect(0, 0, (46-e), (46-e));
pop();
angle = angle+x;

//36x36 squares left
push();
translate(f, g);
rectMode(CENTER);
fill(red1, green1, blue1+60);
rect(0, 0, (46-h), (46-h));
pop();
angle = angle+x;

push();
translate(f, (g+36));
rectMode(CENTER);
fill(red2+170, green2+90, blue2+10);
rect(0, 0, (46-h), (46-h));
pop();
angle = angle+x;

push();
translate(f, (g+72));
rectMode(CENTER);
fill(red2+110, green2+100, blue2);
rect(0, 0, (46-h), (46-h));
pop();
angle = angle+x;

push();
translate(f, (g+108));
rectMode(CENTER);
fill(red2+150, green2+100, blue2);
rect(0, 0, (46-h), (46-h));
pop();
angle = angle+x;

push();
translate(f, (g+144));
rectMode(CENTER);
fill(red3+110, green3+140, blue3+100);
rect(0, 0, (46-h), (46-h));
pop();
angle = angle+x;

//WHITE
push();
translate(f, (g+180));
rectMode(CENTER);
rect(0, 0, (46-h), (46-h));
pop();
angle = angle+x;

push();
translate(f, (g+216));
rectMode(CENTER);
fill(red3+60, green3+120, blue3+100);
rect(0, 0, (46-h), (46-h));
pop();
angle = angle+x;

push();
translate(f, (g+252));
rectMode(CENTER);
fill(red3+100, green3+120, blue3+70);
rect(0, 0, (46-h), (46-h));
pop();
angle = angle+x;

//36x36 right side

push();
translate(f+140, g);
rectMode(CENTER);
fill(red1, green1, blue1+160);
rect(0, 0, (46-h), (46-h));
pop();
angle = angle+x;

push();
translate(f+140, (g+36));
rectMode(CENTER);
fill(red3+190, green3+170, blue3+140);
rect(0, 0, (46-h), (46-h));
pop();
angle = angle+x;

push();
translate(f+140, (g+72));
rectMode(CENTER);
fill(red3+190, green3+120, blue3+100);
rect(0, 0, (46-h), (46-h));
pop();
angle = angle+x;

push();
translate(f+140, (g+108));
rectMode(CENTER);
fill(red3+110, green3+120, blue3+70);
rect(0, 0, (46-h), (46-h));
pop();
angle = angle+x;

push();
translate(f+140, (g+144));
rectMode(CENTER);
fill(red3+280, green3+180, blue3+130);
rect(0, 0, (46-h), (46-h));
pop();
angle = angle+x;

push();
translate(f+140, (g+180));
rectMode(CENTER);
fill(red4+10, green4+60, blue4+30);
rect(0, 0, (46-h), (46-h));
pop();
angle = angle+x;

push();
translate(f+140, (g+216));
rectMode(CENTER);
fill(red4, green4, blue4+80);
rect(0, 0, (46-h), (46-h));
pop();
angle = angle+x;

push();
translate(f+140, (g+252));
rectMode(CENTER);
fill(red4, green4+60, blue4+40);
rect(0, 0, (46-h), (46-h));
pop();
angle = angle+x;

//31x31 squares left
push();
translate(i, j);
rectMode(CENTER);
fill(red1, green1, blue1+10);
rect(0, 0, (46-k), (46-k));
pop();
angle = angle+x;

push();
translate(i, j+31);
rectMode(CENTER);
fill(red1, green1, blue1+159);
rect(0, 0, (46-k), (46-k));
pop();
angle = angle+x;

push();
translate(i, j+62);
rectMode(CENTER);
fill(red1, green1, blue1+100);
rect(0, 0, (46-k), (46-k));
pop();
angle = angle+x;

push();
translate(i, j+93);
rectMode(CENTER);
fill(red2+180, green2+100, blue2);
rect(0, 0, (46-k), (46-k));
pop();
angle = angle+x;

push();
translate(i, j+124);
rectMode(CENTER);
fill(red2+10, green2+40, blue2);
rect(0, 0, (46-k), (46-k));
pop();
angle = angle+x;

push();
translate(i, j+155);
rectMode(CENTER);
fill(red3+30, green3+120, blue3+100);
rect(0, 0, (46-k), (46-k));
pop();
angle = angle+x;

push();
translate(i, j+186);
rectMode(CENTER);
fill(red3+160, green3+160, blue3+110);
rect(0, 0, (46-k), (46-k));
pop();
angle = angle+x;

push();
translate(i, j+217);
rectMode(CENTER);
fill(red3, green3+120, blue3+100);
rect(0, 0, (46-k), (46-k));
pop();
angle = angle+x;

//31x31 squares right
push();
translate(i+195, j);
rectMode(CENTER);
fill(red1, green1, blue1+180)
rect(0, 0, (46-k), (46-k));
pop();
angle = angle+x;

//WHITE
push();
translate(i+195, j+31);
rectMode(CENTER);
rect(0, 0, (46-k), (46-k));
pop();
angle = angle+x;

push();
translate(i+195, j+62);
rectMode(CENTER);
fill(red3+150, green3+120, blue3+100);
rect(0, 0, (46-k), (46-k));
pop();
angle = angle+x;

push();
translate(i+195, j+93);
rectMode(CENTER);
fill(red3+190, green3+160, blue3+130);
rect(0, 0, (46-k), (46-k));
pop();
angle = angle+x;

//KEEP WHITE
push();
translate(i+195, j+124);
rectMode(CENTER);
fill(red4+10, green4+70, blue4+80);
rect(0, 0, (46-k), (46-k));
pop();
angle = angle+x;

push();
translate(i+195, j+155);
rectMode(CENTER);
fill(red4+10, green4+90, blue4+100);
rect(0, 0, (46-k), (46-k));
pop();
angle = angle+x;

push();
translate(i+195, j+186);
rectMode(CENTER);
fill(red4, green4+100, blue4+70);
rect(0, 0, (46-k), (46-k));
pop();
angle = angle+x;

push();
translate(i+195, j+217);
rectMode(CENTER);
fill(red4, green4, blue4);
rect(0, 0, (46-k), (46-k));
pop();
angle = angle+x;

//26x26 squares left

//WHITE
push();
translate(l, m);
rectMode(CENTER);
rect(0, 0, (46-n), (46-n));
pop();
angle = angle+x;

push();
translate(l, m+26);
rectMode(CENTER);
fill(red1, green1, blue1);
rect(0, 0, (46-n), (46-n));
pop();
angle = angle+x;

push();
translate(l, m+52);
rectMode(CENTER);
fill(red1, green1, blue1+130);
rect(0, 0, (46-n), (46-n));
pop();
angle = angle+x;

push();
translate(l, m+78);
rectMode(CENTER);
fill(red1, green1, blue1+180);
rect(0, 0, (46-n), (46-n));
pop();
angle = angle+x;

push();
translate(l, m+104);
rectMode(CENTER);
fill(red2+120, green2+60, blue2);
rect(0, 0, (46-n), (46-n));
pop();
angle = angle+x;

push();
translate(l, m+130);
rectMode(CENTER);
fill(red2+90, green2+130, blue2);
rect(0, 0, (46-n), (46-n));
pop();
angle = angle+x;

push();
translate(l, m+156);
rectMode(CENTER);
fill(red3+16, green3+180, blue3+100);
rect(0, 0, (46-n), (46-n));
pop();
angle = angle+x;

push();
translate(l, m+182);
rectMode(CENTER);
fill(red3+180, green3+170, blue3+100);
rect(0, 0, (46-n), (46-n));
pop();
angle = angle+x;

//26x26 squares right

//WHITE
push();
translate(l+238, m);
rectMode(CENTER);
rect(0, 0, (46-n), (46-n));
pop();
angle = angle+x;

push();
translate(l+238, m+26);
rectMode(CENTER);
fill(red3+150, green3+120, blue3+110);
rect(0, 0, (46-n), (46-n));
pop();
angle = angle+x;

push();
translate(l+238, m+52);
rectMode(CENTER);
fill(red3+190, green3+170, blue3+120);
rect(0, 0, (46-n), (46-n));
pop();
angle = angle+x;

push();
translate(l+238, m+78);
rectMode(CENTER);
fill(red3+180, green3+120, blue3+70);
rect(0, 0, (46-n), (46-n));
pop();
angle = angle+x;

push();
translate(l+238, m+104);
rectMode(CENTER);
fill(red4+30, green4, blue4+50);
rect(0, 0, (46-n), (46-n));
pop();
angle = angle+x;

push();
translate(l+238, m+130);
rectMode(CENTER);
fill(red4+10, green4+50, blue4+120);
rect(0, 0, (46-n), (46-n));
pop();
angle = angle+x;

push();
translate(l+238, m+156);
rectMode(CENTER);
fill(red4+20, green4+90, blue4+30);
rect(0, 0, (46-n), (46-n));
pop();
angle = angle+x;

push();
translate(l+238, m+182);
rectMode(CENTER);
fill (red4, green4+40, blue4+80);
rect(0, 0, (46-n), (46-n));
pop();
angle = angle+x;

// 21x21 sqares left
push();
translate(o, p);
rectMode(CENTER);
fill(red1, green1, blue1);
rect(0, 0, (46-q), (46-q));
pop();
angle = angle+x;

push();
translate(o, p+21);
rectMode(CENTER);
fill(red1, green1, blue1+150);
rect(0, 0, (46-q), (46-q));
pop();
angle = angle+x;

//KEEP WHITE
push();
translate(o, p+42);
rectMode(CENTER);
rect(0, 0, (46-q), (46-q));
pop();
angle = angle+x;

push();
translate(o, p+63);
rectMode(CENTER);
fill(red2+150, green2+100, blue2);
rect(0, 0, (46-q), (46-q));
pop();
angle = angle+x;

push();
translate(o, p+84);
rectMode(CENTER);
fill(red2+150, green2+170, blue2);
rect(0, 0, (46-q), (46-q));
pop();
angle = angle+x;

push();
translate(o, p+105);
rectMode(CENTER);
fill(red2+40, green2+70, blue2);
rect(0, 0, (46-q), (46-q));
pop();
angle = angle+x;

//WHITE
push();
translate(o, p+126);
rectMode(CENTER);
rect(0, 0, (46-q), (46-q));
pop();
angle = angle+x;

push();
translate(o, p+147);
rectMode(CENTER);
fill(red3, green3+70, blue3+80);
rect(0, 0, (46-q), (46-q));
pop();
angle = angle+x;

// 21x21 sqares right
push();
translate(o+270, p);
rectMode(CENTER);
fill(red3+190, green3+170, blue3+120);
rect(0, 0, (46-q), (46-q));
pop();
angle = angle+x;

push();
translate(o+270, p+21);
rectMode(CENTER);
fill(red3+190, green3+150, blue3+100);
rect(0, 0, (46-q), (46-q));
pop();
angle = angle+x;

push();
translate(o+270, p+42);
rectMode(CENTER);
fill(red3+190, green3+120, blue3+120);
rect(0, 0, (46-q), (46-q));
pop();
angle = angle+x;

//KEEP WHITE
push();
translate(o+270, p+63);
rectMode(CENTER);
rect(0, 0, (46-q), (46-q));
pop();
angle = angle+x;

push();
translate(o+270, p+84);
rectMode(CENTER);
fill(red4, green4+100, blue4+100);
rect(0, 0, (46-q), (46-q));
pop();
angle = angle+x;

push();
translate(o+270, p+105);
rectMode(CENTER);
fill(red4, green4+50, blue4+70);
rect(0, 0, (46-q), (46-q));
pop();
angle = angle+x;

push();
translate(o+270, p+126);
rectMode(CENTER);
fill(red4+30, green4+120, blue4+140);
rect(0, 0, (46-q), (46-q));
pop();
angle = angle+x;

push();
translate(o+270, p+147);
rectMode(CENTER);
fill(red4, green4, blue4);
rect(0, 0, (46-q), (46-q));
pop();
angle = angle+x;

// 16x16 squares left
push();
translate(r, s);
rectMode(CENTER);
fill(red1, green1, blue1+100);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

push();
translate(r, s+16);
rectMode(CENTER);
fill(red1, green1, blue1+190);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

push();
translate(r, s+32);
rectMode(CENTER);
fill(red2+170, green2+100, blue2);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

push();
translate(r, s+48);
rectMode(CENTER);
fill(red2+100, green2+100, blue2);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

push();
translate(r, s+64);
rectMode(CENTER);
fill(red2+50, green2+100, blue2);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

push();
translate(r, s+80);
rectMode(CENTER);
fill(red3+180, green3+180, blue3+100);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

push();
translate(r, s+96);
rectMode(CENTER);
fill(red3+70, green3+100, blue3+90);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

push();
translate(r, s+112);
rectMode(CENTER);
fill(red3, green3, blue3+20);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

push();
translate(r, s+128);
rectMode(CENTER);
fill(red3+120, green3+180, blue3+80);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

// 16x16 squares right

//WHITE
push();
translate(r+300, s);
rectMode(CENTER);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

push();
translate(r+300, s+16);
rectMode(CENTER);
fill(red3+140, green3+120, blue3+120);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

push();
translate(r+300, s+32);
rectMode(CENTER);
fill(red3+180, green3+160, blue3+100);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

push();
translate(r+300, s+48);
rectMode(CENTER);
fill(red4+40, green4+140, blue4+140);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

push();
translate(r+300, s+64);
rectMode(CENTER);
fill(red4+10, green4+70, blue4+40);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

push();
translate(r+300, s+80);
rectMode(CENTER);
fill(red4+20, green4+130, blue4+70);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

push();
translate(r+300, s+96);
rectMode(CENTER);
fill(red4, green4, blue4);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

push();
translate(r+300, s+112);
rectMode(CENTER);
fill(red4, green4+60, blue4+120);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

push();
translate(r+300, s+128);
rectMode(CENTER);
fill(red4+30, green4+30, blue4+30);
rect(0, 0, (46-t), (46-t));
pop();
angle = angle+x;

// 9x9 squares left
push();
translate(u, v);
rectMode(CENTER);
fill(red1, green1, blue1+60);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u, v+9);
rectMode(CENTER);
fill(red2+20, green2+100, blue2);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u, v+18);
rectMode(CENTER);
fill(red2+30, green2+50, blue2);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u, v+27);
rectMode(CENTER);
fill(red2+170, green2+140, blue2);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u, v+36);
rectMode(CENTER);
fill(red2+100, green2+90, blue2);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

//WHITE
push();
translate(u, v+45);
rectMode(CENTER);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u, v+54);
rectMode(CENTER);
fill(red3+100, green3+120, blue3+60);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u, v+63);
rectMode(CENTER);
fill(red3, green3+120, blue3+60);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u, v+72);
rectMode(CENTER);
fill(red3+120, green3+120, blue3+100);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u, v+81);
rectMode(CENTER);
fill(red3, green3, blue3+60);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u, v+90);
rectMode(CENTER);
fill(red3+120, green3+120, blue3+50);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

// 9x9 squares right
push();
translate(u+323, v);
rectMode(CENTER);
fill(red4+50, green4+120, blue4+120);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u+323, v+9);
rectMode(CENTER);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u+323, v+18);
rectMode(CENTER);
fill(red4+30, green4+100, blue4+80);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u+323, v+27);
rectMode(CENTER);
fill(red4+10, green4+60, blue4+20);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u+323, v+36);
rectMode(CENTER);
fill(red4+20, green4+50, blue4+100);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u+323, v+45);
rectMode(CENTER);
fill(red4, green4+60, blue4+100);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u+323, v+54);
rectMode(CENTER);
fill(red4+40, green4+70, blue4+20);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u+323, v+63);
rectMode(CENTER);
fill(red4, green4+80, blue4+90);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u+323, v+72);
rectMode(CENTER);
fill(red4+40, green4+60, blue4+20);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u+323, v+81);
rectMode(CENTER);
fill(red4, green4+40, blue4+40);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

push();
translate(u+323, v+90);
rectMode(CENTER);
fill(red4, green4, blue4);
rect(0, 0, (46-w), (46-w));
pop();
angle = angle+x;

//Sparkles
if(mouseX<width/2) {
stroke(255);
strokeWeight(5);
line(80, 180, 130, 230);
line(130, 180, 80, 230);
line(105, 160-20, 105, 250+20);
line(60-20, 205, 150+20, 205);
}

if(mouseY>height/2) {
line(80+200, 180+200, 130+200, 230+200);
line(130+200, 180+200, 80+200, 230+200);
line(105+200, 160-20+200, 105+200, 250+20+200);
line(60-20+200, 205+200, 150+20+200, 205+200);
}
}
function mouseClicked() {
a = 217; //x position of 46x46 squares
b = 136; //y position of 46x46 squares
c = 184; //x position of 41x41 squares
d = 150; //y position of 41x41 squares
e = 5; //size of 41x41 squares
f = 150; //x position of 36x36 squares
g = 160; //y position of 36x36 squares
h = 10; //size of 36x36 squares
i = 122; //x position of 31x31 squares
j = 170; //y position of 31x31 squares
k = 15; //size of 31x31 squares
l = 100; //x position of 26x26 squares
m = 185; //y position of 26x26 squares
n = 20; //size of 26x26 squares
o = 83; //x position of 21x21 squares
p = 197; //y position of 21x21 squares
q = 25; //size of 21x21 squares
r = 67; //x position of 16x16 squares
s = 205; //y position of 16x16 squares
t = 30; //size of 16x16 squares
u = 55; //x position of 9x9 squares
v = 220; //y position of 9x9 squares
w = 35; //size of 9x9 squares

red1 = 244;
green1 =241;
blue1 = 50;

red2 = 50;
green2 = 130;
blue2 = 82;

red3 = 45;
green3 = 67;
blue3 = 143;

red4 = 212;
green4 = 60;
blue4 = 64;

x = .07 - x; //Makes squares spin
blackBackground = 230;
}``````