Category: Project-03-Dynamic-Drawing

dayoungc- Project-03- Dynamic Drawing

sketch

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

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

mjnewman-dynamic-drawing

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

sketch

//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 radiusX = 280;
var radiusY = 190;
var theta = 0;

function setup() {
  createCanvas(640,480);
  posX = radiusX * cos(theta);
  posY = radiusY * sin(theta);
}

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.

preliminary sketches

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.

illustrator mock up

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.

sketch

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

sketch

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

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.

Project-03 Dynamic Drawing

sketch

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

thlai-project-03

// 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);
        rotate(radians(mouseX/50)); // rotation speed
        rect(sq3.x, 0, 5, sq3.h);

        rotate(TWO_PI * i / 16); // horizonal lines
        rotate(radians(mouseX/50)); // rotation speed
        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();

    rotate(radians(mouseX/7)); // CENTER SQUARE
    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);
        rotate(radians(mouseX/10)); // rotation speed
        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.”

sketch

//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);
    rotate(radians(angle));
    rectMode(CENTER);
    fill(red1, green1, blue1+150)
    rect(0, 0, 46, 46);
    pop();
    angle = angle+x;

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


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

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

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

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

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

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




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

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

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


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

    push();
    translate(c, d+164);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0, (46-e), (46-e));
    pop();
    angle = angle+x;


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

    push();
    translate(c+71, (d+82));
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    fill(red1, green1, blue1+60);
    rect(0, 0, (46-h), (46-h));
    pop();
    angle = angle+x;

    push();
    translate(f, (g+36));
    rotate(radians(angle));
    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));
    rotate(radians(angle));
    rectMode(CENTER);
    fill(red2+110, green2+100, blue2);
    rect(0, 0, (46-h), (46-h));
    pop();
    angle = angle+x;

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

    push();
    translate(f, (g+144));
    rotate(radians(angle));
    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));
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0, (46-h), (46-h));
    pop();
    angle = angle+x;

    push();
    translate(f, (g+216));
    rotate(radians(angle));
    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));
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    fill(red1, green1, blue1+160);
    rect(0, 0, (46-h), (46-h));
    pop();
    angle = angle+x;

    push();
    translate(f+140, (g+36));
    rotate(radians(angle));
    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));
    rotate(radians(angle));
    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));
    rotate(radians(angle));
    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));
    rotate(radians(angle));
    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));
    rotate(radians(angle));
    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));
    rotate(radians(angle));
    rectMode(CENTER);
    fill(red4, green4, blue4+80);
    rect(0, 0, (46-h), (46-h));
    pop();
    angle = angle+x;

    push();
    translate(f+140, (g+252));
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    fill(red1, green1, blue1+10);
    rect(0, 0, (46-k), (46-k));
    pop();
    angle = angle+x;

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

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

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

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

    push();
    translate(i, j+155);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0, (46-k), (46-k));
    pop();
    angle = angle+x;

    push();
    translate(i+195, j+62);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0, (46-n), (46-n));
    pop();
    angle = angle+x;

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

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

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

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

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

    push();
    translate(l, m+156);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0, (46-n), (46-n));
    pop();
    angle = angle+x;

    push();
    translate(l+238, m+26);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    fill(red1, green1, blue1);
    rect(0, 0, (46-q), (46-q));
    pop();
    angle = angle+x;

    push();
    translate(o, p+21);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0, (46-q), (46-q));
    pop();
    angle = angle+x;


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

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

    push();
    translate(o, p+105);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0, (46-q), (46-q));
    pop();
    angle = angle+x;

    push();
    translate(o, p+147);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0, (46-q), (46-q));
    pop();
    angle = angle+x;


    push();
    translate(o+270, p+84);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    fill(red4, green4, blue4);
    rect(0, 0, (46-q), (46-q));
    pop();
    angle = angle+x;

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

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

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

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

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

    push();
    translate(r, s+80);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    fill(red3, green3, blue3+20);
    rect(0, 0, (46-t), (46-t));
    pop();
    angle = angle+x;

    push();
    translate(r, s+128);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0, (46-t), (46-t));
    pop();
    angle = angle+x;

    push();
    translate(r+300, s+16);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    fill(red4, green4, blue4);
    rect(0, 0, (46-t), (46-t));
    pop();
    angle = angle+x;

    push();
    translate(r+300, s+112);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    fill(red1, green1, blue1+60);
    rect(0, 0, (46-w), (46-w));
    pop();
    angle = angle+x;

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

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

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

    push();
    translate(u, v+36);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0, (46-w), (46-w));
    pop();
    angle = angle+x;

    push();
    translate(u, v+54);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    fill(red3, green3+120, blue3+60);
    rect(0, 0, (46-w), (46-w));
    pop();
    angle = angle+x;

    push();
    translate(u, v+72);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    fill(red3, green3, blue3+60);
    rect(0, 0, (46-w), (46-w));
    pop();
    angle = angle+x;

    push();
    translate(u, v+90);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0, (46-w), (46-w));
    pop();
    angle = angle+x;

    push();
    translate(u+323, v+18);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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);
    rotate(radians(angle));
    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;
}