aerubin-Project-06-Curves

For this project, I was inspired by the polar curves we learned in calculus. I remember drawing them on the graphing calculator and adding them together to make cool designs. This polar curve reminds me of part of a flower, so I rotated it around itself to create one. The flower grows when the mouse is moved from left to right, and the number of petals change when the mouse is moved from top to bottom. In addition, I also added a bee that bounces around to establish the flower design. The bee can also be hidden behind the flower if the mouse is far enough to the right.


Equation to the polar curve pictured above and utilized to make the petals for the flower.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-07-Curves

var turn = 0;
var beeX = 200; //x position of bee
var beeY = 200; //y position of bee
var xvel = 0;
var yvel = 0;

function setup() {
    createCanvas(400, 400);
    xvel = random(-4,4); //x velocity of bee
    yvel = random(-4,4); //y velocity of bee
    frameRate(5);
}

function draw() { 
    background(178, 216, 203);

    //moves bee
    push();
    translate(beeX-200, beeY-200);
    makeBee();
    pop();

    beeX+= xvel;
    beeY+= yvel;

    //makes bee bounce off edges
    if (beeX<35 || beeX>375) {
        xvel = -xvel;
    }

    if (beeY<50 || beeY>375) {
        yvel = -yvel;
    }

    //makes the curve repeat around itself to make a flower
    fill(249, 212, 222);
    stroke(255);
    push();
    translate(width/2, height/2);
    //mouseY controls the number of times the curve is repeated
    for (var rot = 0; rot < 360; rot+= 45-mouseY/40) {
        makeFlower(rot);
    }
    pop();
}

function makeFlower(turn) {
    //mouseX controls the size of the flower
    var a = 10 + mouseX/4;
    beginShape();
    rotate(radians(turn));
    for(var t = 0; t < 2*TWO_PI; t+= .01) {
        //equation for curve
        var r = a*sin(t)+(a*sin(5*(t/2)));
        //polar curve to x,y plane equation
        var x = r*cos(t);
        var y = r*sin(t);
        vertex(x, y);
    }
    endShape();
}

function makeBee() {
    strokeWeight(1);
    stroke(0);

    //wings
    push();
    fill(228-20, 242-20, 251-10);
    rotate(radians(-20));
    ellipse(120, 230, 20, 40);
    pop();

    push();
    fill(228, 242, 251);
    rotate(radians(20));
    ellipse(200+50, 230-140, 20, 40);
    pop();

    //body of bee
    fill(253, 190, 44);
    ellipse(200, 200, 50, 40);

    //stinger of bee
    fill(0);
    triangle(175, 195, 175, 205, 165, 200);

    //eye
    ellipse(220-7, 198, 7, 7);

    //stripes
    noFill();
    strokeWeight(3);
    stroke(0);
    arc(160, 210-8, 70, 70, 12, 13);
    arc(160+10, 210-7, 70, 70, 12-.1, 13);
    arc(160-10, 210-7, 70, 70, 12+.1, 13-.1);

    //smile
    strokeWeight(2);
    arc(220, 210-8, 20, 20, 1.5, 2.5);

    //antennae
    arc(220+5, 210-20, 20, 20, 3.7, 4.5);
    arc(220+5+3, 210-20+2, 20, 20, 3.7, 4.5);

    //legs
    arc(220-30, 210+20-6, 20, 10, 12.7-.5, 13.5-.7);
    arc(220-30+6, 210+20-6, 20, 10, 12.7-.5, 13.5-.7);
    arc(220-30-6, 210+20-6-2, 20, 10, 12.7-.5, 13.5-.7);
    arc(220-30-12, 210+20-6-4, 20, 10, 12.7-.5, 13.5-.7);
}

aerubin-LookingOutwards-07-Section-C

Airbnb is a hospitality service that enables people to rent a place to stay in a multitude of locations around the world. This service is much less expensive than hotels and can be more accommodating to needs as it is renting another individual’s room, home, or even an igloo instead of a single costly hotel room. The data from all of the online transactions was recorded and Rachel Binx turned it into a work of art.

This represents Airbnb’s top 50 markets, with the thickness of the lines corresponding to the relative volume of travels between each pair.

Rachel Binx is an American data visualizer, developer, and designer. She has worked at Stemen Design and NASA and is also a co-founder of Meshu and Gifpop. While working at Stemen, she was assigned to create a visual representation of all places people have traveled to and from utilizing Airbnb. Her design utilized data from Airbnb’s top 50 markets listed in a circular pattern. Lines were then drawn in between locations with the thickness of the lines being dependent on the number of travels between each pair of locations.

Originally only designed to be on a presentation by Airbnb’s CEO, it turned into this abstract design that is both visually pleasing and informational. I really admire her design as it shows data in an interesting and intuitive manor. The data taken from the travels between areas could have easily been written out in an uninteresting fashion with places listed next to their given volume of travel. This would make it difficult to quickly examine the places with the highest/lowest volume of travel between each pair. She did not only turn the data into a easily legible design, but she turned it into artwork.

http://rachelbinx.com/Airbnb

aerubin-LookingOutwards-06-Section-C

Marina Savova is an artist that focuses on abstract painting. Originally from Bulgaria, she studied painting at the University of Veliko Turnovo. After graduating, she has had 16 individual exhibitions around the world from Serbia to Germany to her home country in Bulgaria. She has also won three awards for her painting and now many of her works are located in galleries and owned by private collectors all over the globe.

At first glance, her art may seem like it is just a random combination of paint and splatters – which it is to a certain extent. Her paintings fall in the realm of the abstract as random shapes and lines are scattered on a canvas. This however, is for a certain effect. With each random shape and line, comes a specific chosen color as all of her paintings feature a clearly defined color scheme. This is utilized to show emotion with color and allow the emphasization of the pigment of the shapes and lines, rather than featuring an object or shape.

Abstract paintings are unique in their ability to have a different effect on each individual that views it. Instead of simply depicting an image or a snapshot in time, they are meant to be interpreted many ways – which is the beauty of randomness. Marina Savova painted each shape in such a manner that it looks effortlessly done as though she the act of painting was quite spontaneous. Her artistic sensibilities are mainly seen in her choice of color as that provides the main mood of each piece. I really admire her ability to paint so abstractly and randomly, although still achieving emotion through randomness.

http://retroavangarda.com/gallery-of-friends/albums/Miriana_Savova/?img=843

aerubin-Project-06-Abstract-Clock

For this project, I wanted to create a clock out of an everyday object. I came to the conclusion that flowers could be made into an analog clock with the petals acting as the hands and the timekeeper. I thought the largest outside petals could symbolize the largest hour hand, the middle petals could represent the minute hand, and the smallest petals could act as the second hand. In addition, I added a hand in the center of the flower that represents the seconds in a smooth transition that follows the seconds petals. Overall, I am very satisfied with my product and I think it would be feasible to create and implement in today’s clock designs.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-06-Abstract-Clock

var a = 0;
var b = 255;
var n = 255;
var c = 0;
var d = 255;
var m = 255;
var e = 0;
var f = 255;
var o = 255;
var flowerx = 110;
var flowery = 110;
var nn = 255;
var mm = 255;
var oo = 255;
var nnn = 255;
var mmm = 255;
var ooo = 255;
var offset = 0;
var mil_start = 0;

function setup() {
    createCanvas(450, 450);   

    //millisecond hand in sinc with second petals
    var sc_start = second();
    mil_start = millis();
    offset = sc_start*6;
}

function draw() {
    background(204, 235, 197);
    
    //Flower Pot
    noStroke();
    fill(236, 211, 207);
    strokeWeight(1);
    stroke(0);
    quad(134, 325, 316, 325, 281, 375, 169, 375);
    ellipse(width/2, 430, 180, 140);
    noStroke();
    quad(135, 325, 315, 325, 280, 375, 170, 375);
    fill(205, 179, 176);
    strokeWeight(1);
    stroke(0);
    ellipse(width/2, 325, 182, 30);

    //Flower Leaves
    push();
    noStroke();
    rotate(radians(45));
    fill(82, 100, 35);
    ellipse(358, 12, 20, 50);
    pop();

    push();
    noStroke();
    rotate(radians(42));
    fill(82, 100, 35);
    ellipse(330, 60, 50, 20);
    pop();

    noFill();
    stroke(82, 100, 35);
    strokeWeight(6);
    //Yellow Flower Stem
    arc(50+430-90, 55+236+46, 70+330-100, 70+280-100, PI, PI+QUARTER_PI);
    //Orange Flower Stem
    arc(50+105, 55+274, 70+50, 70+50-30, PI+90, QUARTER_PI-19.5);
    //Pink Flower Stem
    arc(50+83, 55+269, 70+50+70, 70+50-30+100+170, PI+90, QUARTER_PI-19.5);

    noStroke();

    var darkpink = color(194, 20, 69); 
    var mediumpink = color(249, 109, 170);
    var lightpink = color(233, 186, 193);

    //Center of Pink Flower
    fill(253, 184, 50);
    ellipse(flowerx+80, flowery, 57, 57);
    fill(243, 121, 33);
    ellipse(flowerx+80, flowery, 57-15, 57-15);
    fill(243, 82, 30);
    ellipse(flowerx+80, flowery, 57-30, 57-30);

    var mil = millis();

    //Pink Flower Second Hand
    push();
    translate(flowerx+80, flowery);
    rotate(radians((6/1000)*(mil-mil_start)+offset));
    stroke(darkpink);
    strokeWeight(2);
    line(0, 0, 0, -26);
    pop();

    //Pink Flower Clock
    push();
    translate(flowerx+80, flowery);
    for (var i = 0; i < 60; i++) {
        if (second() == i) {
            n = 255;
        }
        else {n = darkpink;}
        secondPetals(i, n);
    }

    for (var j = 0; j < 60; j++) {
        if (minute() == j) {
            m = 255;
        }
        else {m = mediumpink;}
        minutePetals(j, m);
    }

    for (var k = 0; k < 24; k++) {
        if (hour() == k) {
            o = 255;
        }
        else {o = lightpink;}
        hourPetals(k, o);
    }
    pop();

    var darkyellow = color(192, 152, 32);
    var mediumyellow = color(229, 220, 49);
    var lightyellow = color(250, 247, 71);

    //Center of Yellow Flower
    fill(125, 69, 67);
    ellipse(flowerx+235, flowery+100, 57, 57);
    fill(82, 38, 27);
    ellipse(flowerx+235, flowery+100, 57-15, 57-15);
    fill(48, 45, 48);
    ellipse(flowerx+235, flowery+100, 57-30, 57-30);

    //Yellow Flower Second Hand
    push();
    translate(flowerx+235, flowery+100);
    rotate(radians((6/1000)*(mil-mil_start)+offset));
    stroke(mediumyellow);
    strokeWeight(2);
    line(0, 0, 0, -26);
    pop();

    //Yellow Flower Clock
    push();
    translate(flowerx+235, flowery+100);
    for (var ii = 0; ii < 60; ii++) {
        if (second() == ii) {
            nn = 255;
        }
        else {nn = darkyellow;}
        secondPetals(ii, nn);
    }

    for (var jj = 0; jj < 60; jj++) {
        if (minute() == jj) {
            mm = 255;
        }
        else {mm = mediumyellow;}
        minutePetals(jj, mm);
    }

    for (var kk = 0; kk < 24; kk++) {
        if (hour() == kk) {
            oo = 255;
        }
        else {oo = lightyellow;}
        hourPetals(kk, oo);
    }
    pop();

    var darkorange = color(243, 82, 30);
    var mediumorange = color(243, 121, 33);
    var lightorange = color(253, 184, 50);

    //Center of Orange Flower
    fill(0);
    ellipse(flowerx-20, flowery+160, 57, 57);
    fill(207, 52, 32);
    ellipse(flowerx-20, flowery+160, 57-15, 57-15);
    fill(253, 217, 101);
    ellipse(flowerx-20, flowery+160, 57-30, 57-30);

    //Orange Flower Second Hand
    push();
    translate(flowerx-20, flowery+160);
    rotate(radians((6/1000)*(mil-mil_start)+offset));
    stroke(mediumorange);
    strokeWeight(2);
    line(0, 0, 0, -26);
    pop();

    //Orange Flower Clock
    push();
    translate(flowerx-20, flowery+160)
    for (var iii = 0; iii < 60; iii++) {
        if (second() == iii) {
            nnn = 255;
        }
        else {nnn = darkorange;}
        secondPetals(iii, nnn);
    }

    for (var jjj = 0; jjj < 60; jjj++) {
        if (minute() == jjj) {
            mmm = 255;
        }
        else {mmm = mediumorange;}
        minutePetals(jjj, mmm);
    }

    for (var r = 0; r < 24; r++) {
        if (hour() == r) {
            ooo = 255;
        }
        else {ooo = lightorange;}
        hourPetals(r, ooo);
    }
    pop();
}

function secondPetals(a, b) {
    push();
    noStroke();
    rotate(radians(a*6));
    fill(b);
    ellipse(0, -35, 3.5, 9);
    pop();
}

function minutePetals(c, d) {
    push();
    noStroke();
    rotate(radians(c*6));
    fill(d);
    ellipse(0, -48, 4.6, 15);
    pop();
}

function hourPetals(e, f) {
    push();
    noStroke();
    rotate(radians(e*15));
    fill(f);
    ellipse(0, -80, 20, 50);
    pop();
}

Initial Sketch of Product (petals are not drawn to scale)

aerubin-Project-05-Wallpaper

I was inspired by the popular palm leaf design as I wanted to choose a design with a balance between organic and geometric forms. In my design, the geometric repeating layered square pattern in the background is contrasted with the randomly placed leaves in the foreground.

My Inspiration:

I first began by drawing creating a function that draws the squares to then rotate the pattern so they create a diamond-shaped configuration for the basis of my background design. The leaves add interest to the geometric pattern that would otherwise be basic and uninteresting without a random organic design in the foreground. The two different types of leaves compose the foreground design and they are placed in aesthetically pleasing random positions. Overall, I could see a wall or a shirt featuring this design for a casual look.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-05-Wallpaper

function setup() {
    createCanvas(400, 480);
    background(220);
    noLoop();
}

function draw() {
    //Background Square Pattern
    push();
    rotate(radians(45));
    translate(-150,-300);
    for(var i = 0; i < 10; i++) {
        for(var r = 0; r < 1000; r +=130) {
            squares((i*130), r); 
        }
    }
    pop();

    //Fan Leaves Design
    push();
    for(var m = 10; m < 20; m++) {
        rotate(radians(m*3));
        fanleaves(m+40, m-50);
    }
    pop()

    //Fan Leaves Design (Upper Left)
    push();
    for(var u = 0; u < 2; u++) {
        fanleaves(u-100, u-160);
    }
    pop();

    //Wide Leaves (Upper Right & Lower Left)
    push();
    for(var v = 0; v < 20; v+=2) {
        rotate(45);
        wideleaves(v+100,v+200);
    }
    pop();

    //Wide Leaves (Upper Left)
    push();
    rotate(20);
    for(var e = 0; e < 40; e+=10) {
        wideleaves(e-100, e-190);
    }
    pop();

    //Wide Leaves (Lower Right)
    push();
    rotate(radians(-30));
    for(var h = 0; h < 1; h++) {
        wideleaves(h-180, h+370);
    }
    pop();

    //Wide Leaves (Lower Middle)
    push();
    rotate(radians(15));
    for(var k = 0; k < 90; k+=80) {
        wideleaves(k, k+100);
    }
    pop();

} 
function squares(p,q) {
    fill(0);
    noStroke();
    rectMode(CENTER);
    //p = x cordinate
    //q = y cordinate
    rect(-55+p, 35+q, 150, 150);
    fill(244, 218, 215);
    rect(-55+p, 35+q, 120, 120);
    fill(0);
    rect(-55+p, 35+q, 90, 90);
    fill(244, 218, 215);
    rect(-55+p, 35+q, 60, 60);
    fill(0);
    rect(-55+p, 35+q, 30, 30); 
}

function fanleaves(f,l) {
    translate(f+200, l+300);
    fill(86, 165, 78);
    stroke(38, 84, 32);
    for(var t = 10; t < 28; t++) {
        rotate(radians(t*.5));
        triangle(0, 0, 100, 70, 90, 70);
    }
}

function wideleaves(w,o) {
    translate(w, o);
    noFill();
    strokeWeight(4);
    stroke(41, 96, 51);
    line(300, 320, 300, 100);
    strokeWeight(2);
    for(var a = 0; a < 77; a+=2.7) {
        line(300, 300-a, 270-(a*.4), 280-a);
    }
    for(var b = 0; b < 155; b+=2.7) {
        line(300, 223-b, 239+(b*.4), 203-b);
    }
    for(var c = 0; c < 77; c+=2.7) {
        line(300, 300-c, 330+(c*.4), 280-c);
    }
    for(var d = 0; d < 155; d+=2.7) {
        line(300, 223-d, 361-(d*.4), 203-d);
    }
}

aerubin-LookingOutwards-05-Section-C

In many of the technology classes and programs I have attended in the past, we used computer programs to create 3D representations of what we intended on building. One of the most notable computer programs we used is Autodesk Inventor. The program allows the user to build a product utilizing 2D shapes to begin a design. Then the creator has the ability to “extrude” their design to suddenly make it appear three dimensional. The final design can then be viewed in both a 2D and 3D view and can even be 3D printed with the correct equipment. Autodesk Inventor is extremely important and helpful for creating parts, designing complex structures, and creating intricate art and sculptures.

2D and 3D views of a product generated by Autodesk Inventor

Bruce Beasley, an artist, took Autodesk Inventor to the next level. Renowned for his sculptures that have been premiered in the Guggenheim and the Museum of Modern Art, his latest project utilized Autodesk Inventor to create the “Coriolis Series.” This is a series of sculptures that were designed on the computer, then 3D printed with liquid plastic.

Coriolis XXIII – Bruce Beasley

The advantage of using Autodesk Inventor is the precision one may achieve when the design is dependent on subtle digital calibrations. Intricacy does not always occur in sculpting with other mediums such as stone or bronze, which are difficult to manipulate to a fine degree. In addition, when one makes a mistake on a computer program, it is easily fixed with a simple command to go back a step or multiple steps. When one makes a mistake with stone, there is no “control z,” and one would have to completely start over or work with the mistake to try to disguise it. It is also possible to view the final design before the printing product in a 3D rendered form to know what it will look like from every angle, which is very important for sculptures as it is desired to have the work be interesting from every possible viewing point. In conclusion, creating and viewing sculptures on the computer is helpful for artists and creatives for designing and even printing works of 3D art.

https://www.autodesk.com/gallery/exhibits/currently-on-display/the-coriolis-series

aerubin-project-04-string-art

I was inspired by the interesting curves and shapes that are depicted in paintings of waves. I began by drawing a single wave and then trying different lengths and positions to create the desired effect. I also added movement in the bottom-most waves that makes it seem like it is moving from left to right. I really enjoy using the “for loops” in our design, it makes coding much faster and simpler than writing out every parameter for each line.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-04-String-Art

var Y_AXIS = 1;
var c1, c2;

function setup() {
    createCanvas(300, 400);
    background(220);
    c1 = color(255, 183, 60);
    c2 = color(45, 100, 245);
}

function draw() {
    background(220);

    setGradient(0, 0, 300, 400, c1, c2, Y_AXIS);

    for(var i=0; i <200; i++) {
        littlewaves(i);
}
    for(var p=0; p <200; p++) {
        rightwave(p);
}
    //Sun
    noStroke();
    fill(255, 250, 217);
    ellipse(153, 204, 50, 50);

}

function littlewaves(x) {
    //little waves on bottom
    for(var z=0; z<10; z++) {
    push();
    translate(x+(z*20)+(mouseX/2),30); //moves waves 
    rotate(radians(x*2));
    stroke(53, 74, 107);
    line(150,200,10 + x, 400);
    pop(); 
}
}

function rightwave(y) {
    //middle curve
    push();
    translate(y+210, 60);
    rotate(radians(y));
    stroke(97, 132, 158);
    line(150,200,10 + y, 200);
    pop();

    //large wave, dark colored
    push();
    translate(y+122, 170);
    rotate(radians(y*2));
    stroke(82, 115, 149);
    line(150,230,10 + y, 20);
    pop();

    //large wave, light colored
    push();
    translate(y+50, 150);
    rotate(radians(y));
    stroke(70, 170, 200);
    line(150,230,10 + y, 20);
    pop();
}

function setGradient(x, y, w, h, c1, c2, axis) {

    //Sets Gradient in Background
    noFill();
    if (axis == Y_AXIS) {
    for (var i = y; i < y+h; i++) {
    var inter = map(i, y, y+h, 0, 1);
    var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(x, i, x+w, i);
    }
  }
}

aerubin-LookingOutwards-04-Section-C

As a music major, technology has affected our craft in both negative and positive ways. One of the most beneficial aspects of technology integrated into music, in my opinion, is the newfound ease that compositional programs provide composers, musicians, and creatives. Back in the day, composers would sit down and write hundreds of thousands of notes, one by one, on pieces of paper. This is a very slow method, erasing becomes a large hassle, and there is no way to hear what it sounds like completed, especially for compositions for large ensembles, unless one was to recruit the 50+ musicians necessary to create a full orchestra.

One of Beethoven’s original scores to exemplify the issues encountered while composing using pen and paper:

Composing on the computer allows the composer to quickly tap notes on the staff to write music. If the artist would like to get rid of a note, it is easy to click on it and press delete instead of erasing; one can even select an entire section to delete. One now has the ability to copy a melody, and paste it to have another instrument double the line, or even place it in another section of the piece. It is also possible to move a passage up or down by any interval, such as moving a melody down by an octave or changing the key by moving an entire piece a half-step or more up/down. In addition, there is a play-back setting that allows the composer to hear computer-generated instruments perform their work, and even listen to selected instruments individually. All of these features have greatly improved the speed and ease of composing.

Audacity
Created by: Roger Dannenberg and Dominic Mazzoni, Carnegie Mellon University

There are a multitude of composition applications and computer programs. Some of the most common ones are Sibelius, Ableton Live, Audacity, Pro Tools, Garage Band, and MuseScore. There are many differences between all of them, as some have the ability to edit sound, while others are more adapted for writing in notes on a staff. For many of my composition assignments I do for music classes, I use a computer program to cleanly write out and listen to my assignments. It is extremely helpful as I am not particularly fluent on piano, so I can easily listen to the counterpoint of my four-part harmony without the struggle of playing it myself. All in all, composing music utilizing technology has changed the field of composition and the music world for the better.

MuseScore
Written Using C++

https://en.wikipedia.org/wiki/List_of_music_software

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

aerubin-LookingOutwards-03-Section-C

KINEMATIC PETALS DRESS
Museum of Fine Arts (MFA), Boston
Project by: Nervous System

The Kinematic Petals Dress explores the “synergy between fashion and technology” by creating 3D printed clothing utilizing an algorithm that can be altered based on the wearer and designer. Individually customizable, the dress can be manipulated through a computer program that adjusts sizing through a 3D scan. The shape of the interlocking petals that create the material can also be tailored to the designer’s liking. When the design is complete, it is then sent to the 3D printer and the 1600+ unique pieces and 2600+ hinges are fabricated and the dress is complete.

I think it is a very unique approach to traditional attire. There are plenty of pros and cons to this design as although it can be completely devised through a computer program and printed instead of sewn like traditional clothing, however, shell structures can only move in one direction which has its limitations and prevents the 360 degrees of movement other fabric has. Another feature of the Kinematic Dress is its customizability as it is tailored for each customer based on their 3D scan. In addition, the pattern of the scales, shape of the scales, and the length of the dress can be altered. The algorithm created probably forms the base that the dress begins at when beginning the design process, with uniform scales over a standard body type. This could then be changed to the designers liking and the base form is still generally represented in the final design. It is amazing how innovative designers have become to arrive at the stage where it is feasible to design and print clothing from a computer.

More information at: http://n-e-r-v-o-u-s.com/blog/?p=7162