Category: Section C

Ikrsek-Looking Outwards-04

“Our Time” is a piece commissioned by the MONA (Museum of Old and New Art) which was intended to take you on an ethereal sensory journey, warping the way you view and think of time. Using sound, light and motion to convey the passing of time. 21 large pendulums swing in midair in different directions as lights brighten and dim at their own pace. Each pendulum arm has a speaker which emits a barely audible echo, creating an eerily unfamiliar sensation speaking to the passage of time. They swing without seeming to adhere to any laws of nature, yet regardless seem to make the passage of time more palpable. Time exists among many frequencies in this room, and when you’re in there, experiencing it – that becomes obvious.
The amount of effort put into immersion in this is remarkable, and the piece utilizes our most basic senses to warp our perceptions of human constructs.

below is a video of the hauntingly beautiful piece…

Bettina-LookingOutwards-04-SectionC

Screenshot from the interaction Google Doodle page

Google Doodle

This Google Doodle released by Japan has a grid of rhombuses the user can click or unclick. A vertical bar travels across the columns “playing” the “notes” of clicked rhombuses the user has selected. I’m fascinated by how such a simple interaction/interface transcends language (I have no idea what the context of this piece is) and is accessible to anyone. A casual user can press random keys and enjoy various tunes. Someone with a trained ear can figure out the key the notes are in, which buttons correspond to which notes, and try to compose a piece. The geometric, abstract visuals are reminiscent of fireworks, not unlike the magical shows one might see at Disney!

Given my current knowledge of javascript, I could see something like this being constructed with conditionals and the playing controlled by for loops. However, I am eager to learn how to program UI animations such as fades and light-ups in a compact way!

Jdbrown – Looking Outward (4 – Sound Arts)

http://www.cmu.edu/news/stories/archives/2017/august/butterfly-sounds.html

This module has got me very excited, since sound art is what I do. As a composer and a music technician, I love the aural world and especially integrating physical computing with sound production. For my post this week, I’m doing some #self-promotion and showing folks a project I worked on last spring. In a class called Experimental Sound Synthesis, I and a bunch of other students created a generative sound installation at the Phipps Conservatory.

We used Pure Data patches running on Raspberry Pi microcomputers to generate and propagate our designs throughout the space.

Looking Outwards 03

I really enjoyed the computational art of Andy Lomas which was referenced in Prof. Levin’s article. The logic governing his algorithm was very well described, providing a useful insight into the methods of generative art. Lomas’s patterns are created by simulating a series of virtual cells which accumulate “nutrients” based on various factors, allowing them to multiply. He notes that many of the simulations were accidentally reminiscent of various forms of life, often based on intuitive factors (such as the directional growth of plant-like simulations). While this was touted as demonstrating the capability of algorithms to approximate organisms, I found it to be a reminder that life itself is merely algorithmic.

LookingOutwards-03

One of the projects at the Computational Fabrication Group at Massachusetts Institute of Technology involves analyzing faces and recreating them on a computer. Faces are challenging because we are sensitive to the minute details on a face, and algorithms can only do so much. The CFG managed to develop algorithms to analyze and reproduce human appearances in real-time. They use this technology to make advances in cosmetics, movies, computer vision, and even virtual reality.

This is fascinating to me because human face details are so intricate and complex. All of my projects have been very simple so I can’t imagine how they managed to develop an algorithm to track and recreate faces in real-time.

Project-03-sjahania

sketch

var skyColor = 150;
var sunY = 50;
var lightsOn = false;
var starsX = 100
var starsY = 320


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

function draw() {

	//sky color
	strokeWeight(1);
	var skyColor = mouseX/(640/225);
	background(0, 225 - skyColor, 225);
	
	//sun
	fill(255,228,0);
	ellipse(2*mouseX, sunY + (.2*mouseX), 80, 80);

	//moon
	fill(219,220,226);
	var moonY = 2*(-mouseX+480)
	if (moonY < 80) {
		moonY = 80;
	}
	arc(width/2, moonY, 80, 80, HALF_PI, PI + HALF_PI, CHORD);

	//stars
	fill(219,220,226);
	strokeWeight(10);
	if (mouseX > 400) {
		starsX = random(0,640);
		starsY = random(0,100);
		point(starsX,starsY);
	}


	//grass
	strokeWeight(1);
	var grassColor = mouseX/(640/177);
	noStroke();
	fill(0, 177 - grassColor, 0);
	rect(0, 420, 640, 60);


	//house
		//house part
	fill(165, 0, 0);
	rect(400, 270, 175, 180);

		//roof part
	fill(0);
	triangle(350,270,487,200,625,270);

		//door
	fill(0);
	arc(487,450,40,150,PI, TWO_PI)

		//door handle
	fill(255,228,0);
	ellipse(500,430,10,10);

		//window color
	if (lightsOn == true) {
		fill(255,228,0);
	} else {
		fill(0);
	}

		//windows
	ellipse(487,300,30,30);
	rect(430,320,40,40);
	rect(505,320,40,40);
	stroke(0);
	line(525,320,525,360);
	line(450,320,450,360);
	line(505,340,545,340);
	line(430,340,470,340);



}

function mousePressed() {
	if (lightsOn == true) {
		lightsOn = false;
	} else {
		lightsOn = true;
	}
}

I had trouble coming up with an idea, so I settled for something easy because I’m artistically challenged. The sun and moon set and rise respectively when the mouse goes left to right, the colors change, the house lights turn on with a mouse click, and the stars come out when it’s dark.

eeryan-LookingOutwards-03

Escapism by Iris Van Herpen

Escapism is a collection by Iris Van Herpen in collaboration with architect Daniel Wildrig and digital manufacturer .MGX by Materialise that encapsulates feelings of emptiness that result from escaping daily struggles via digital environments. It was one of the collections of hers that was featured at the Carnegie Museum of Art last Spring. When I went to see the exhibit, I was very interested in the intersection of fashion and digital manufacturing in her designs, as a designer who has an interest in fashion. Van Herpen’s work manifests along the borders of fashion, digital manufacturing, and product design. Many of the outfits in the collection are partially made via computational fabrication, using 3D printing. Her work realizes a combination between traditional craftsmanship and digital processes, as many pieces of her collections are 3D printed. The attached piece was made without any seams, and is completely 3D printed. For the piece above, she used an algorithm to create a a garment created of thin rumpled mesh.

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.

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.

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;
}