Month: September 2017

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.

Matthew Erlebacher Looking Outward-03

Carolina Tamayo in Lustre

The piece of generative art that I found to be the most interesting was Lustre. I have never been a big fan of fashion but this image struck me. Using a 3D printer to add accessories to a dress is something that I never would have thought of. The algorithms used to create the model were likely set up to create multiple triangular pyramids that were all interconnected. On the whole the piece is mesmerizing to look at and I can’t help but admire how much work went into it.

This was worked on by Carolina Tamayo, Alyssa Hamilton, and Rehan Butt. Unfortunately, the only thing on the piece that I could find was this picture.

thlai-Project-03-Dynamic-Drawing

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

thlai-project-03

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

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

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

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

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

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

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

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


    translate(width/2, height/2);

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

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

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

    rotate(radians(mouseX/7)); // CENTER SQUARE
    rect(sq1.x, sq1.y, sq1.w, sq1.h);

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

thlai-LookingOutwards-03

 

 

Custom Jewelry – Nervous System

All of Nervous System’s (a generative design studio) projects are intriguing and inspired by natural phenomena, but their custom jewelry in particular caught my eye. These beautiful rings are truly one of a kind, as each fuses together art, science, and technology. Nervous System’s rings are inspired by natural phenomena such as cells and coral, and they are first 3D printed in wax then cast in metal.

What I admire most about Nervous System’s work is how many of their jewelry pieces are co-created with the client, meaning the client had a large role of co-designing via Nervous System’s app, Cell Cycle. Not much information is given on their process and the algorithms used to build their pieces, but their generative work is always grounded by their fascination of organic shapes and unconventional geometries, as stated in their biography. They design a system that generates these natural forms to create all sorts of pieces of art, and as generative art is, each piece is different than the last.

When I look at all of Nervous System’s work, it’s clear that they take a liking to certain patterns – a lot of their work look like nerves or coral – yet each is distinctive. That’s the beauty of generative artwork.

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

cchau1 – Project03 – Dynamic Drawing

sketch

var rectT = 300;
var rectB = 500;
var rectW = 80;
var blackH = 10;
var blackW = 80;
var boxH = 150;
var crayonPos = 10;
var windowW = 20;
var angle = 0;

function setup() {
    createCanvas(600, 500);

}

function draw() {
    var color1 = color(60,200,255);
    var color2 = color(200,212,240);
    var t = map(mouseY,0,width,0,1);
    var bgColor = lerpColor(color1,color2,t);
  // wanted to try the lerpColor function and the hues are controlled
  // by the mouseY function; supposedly represents a sky

    background(bgColor);

  //mock sun
     push();
     fill(255,240,20);
     rotate(radians(mouseX));
     rectMode(CENTER); // center rect around 0,0
     rect(10,10, 200,200);
     pop();
     angle = angle + 5;

  //windows to emulate a classroom
    fill(255);
    rect(0,0,windowW,height);
    rect(0,0,width,windowW);
    rect(height/2,0,windowW,height);
    rect(width-40,0,windowW,height);
    rect(0,height/2,width,windowW);

//these if-statements are to control the height of the specific crayon
//when the cursor is within the range of that specific crayon
//controls red crayon
    if (10<=mouseX & mouseX<=100){
      fill(255,0,0);
      rect(10, mouseY,rectW,height-boxH-mouseY);

    }
//controls orange crayon
    if (110<=mouseX & mouseX<=200){
      fill(255,165,2);
      rect(110, mouseY,rectW,height-boxH-mouseY);

//controls yellow crayon
    }
    if (210<=mouseX & mouseX<=300){
      fill(255,252,17);
      rect(210, mouseY,rectW,height-boxH-mouseY);

//controls green crayon
    }
    if (310<=mouseX & mouseX<=400){
      fill(48,201,63);
      rect(310, mouseY,rectW,height-boxH-mouseY);

//controls blue crayon
    }
    if (410<=mouseX & mouseX<=500){
      fill(45,76,255);
      rect(410, mouseY,rectW,height-boxH-mouseY);
//controls purple crayon
    }
    if (510<=mouseX & mouseX<=600){
      fill(132,21,255);
      rect(510, mouseY,rectW,height-boxH-mouseY);

//draws all the crayons by calling it (mostly for practice calling functions)
    }
    Red();
    Orange();
    Yellow();
    Green();
    Blue();
    Purple();

    //crayon box remains constant
    fill(243,201,48);
    rect(0,height-boxH,width,boxH);

    //symbol
    fill(51,141,62);
    ellipse(width/2,height-75,200,80)

    //green lines on box
    fill(51,141,62);
    rect(0,height-boxH,width,10);
    rect(0,height-boxH+20,width,10);

}

 //crayon functions:
function Red() {
  noStroke();
  fill(255,0,0);
  rect(crayonPos,height-(rectB-rectT),rectW,rectB-rectT)
  fill(0);
  rect(crayonPos,rectT+20,blackW,blackH);
}

function Orange() { //orange crayon
  fill(255,165,2);
  rect(crayonPos + 100,height-(rectB-rectT),rectW,rectB-rectT);
  fill(0);
  rect(crayonPos+100,rectT+20,blackW,blackH);
}

function Yellow() {
  fill(255,252,17);
  rect(crayonPos + 200,height-(rectB-rectT),rectW,rectB-rectT);
  fill(0);
  rect(crayonPos+200,rectT+20,blackW,blackH);
}

function Green() {
  fill(48,201,63);
  rect(crayonPos + 300,height-(rectB-rectT),rectW,rectB-rectT);
  fill(0);
  rect(crayonPos+300,rectT+20,blackW,blackH);
}

function Blue() {
  fill(45,76,255);
  rect(crayonPos + 400,height-(rectB-rectT),rectW,rectB-rectT);
  fill(0);
  rect(crayonPos+400,rectT+20,blackW,blackH);
}

function Purple() {
  fill(132,21,255);
  rect(crayonPos + 500,height-(rectB-rectT),rectW,rectB-rectT);
  fill(0);
  rect(crayonPos+500,rectT+20,blackW,blackH);
}

I got the idea from looking at a crayon box as I was finishing the Autolab assignments and had an idea about “selecting” crayons from a crayon box. It was a little difficult to try and alter the parameter using the mouseX function so that each individual crayon will go up to mouseY height. I had wanted to use an array but decided to work with using just if statements using the “width” of crayons.
I wanted to experiment with other options with color, which using lerpColor() to combine the two rgb hues and controlling that with the mouseY.

This is the rough draft of the process. I illustrated how many crayons and listed the various r,g,b values and how where the mouse would be to trigger an event (that is, the height of the crayon).

looking-outwards-03-ssharada-section a

As a response to how data can affect our built environments, Synthesis Design + Architecture teamed up with IBM Watson Analytics to design an interior feature wall for the Watson Experience Center in San Francisco. The project, named Data Moiré after the dizzying patterns created by overlapping sets of lines, uses data from the influence of mobile phones on monthly consumer spending to create a precise screen material that defines the wall.

The data-driven patterns on the surface of the wall are a result of parametric modeling based on Watson’s own data analysis, actively showing off the capabilities of the system itself. The generative design was CNC milled onto two sheets of aluminium, which creates an intricate screen of information that is lit from between the two layers.

akluk – section A – project-03 – DynamicDrawings

sketch.jsIt was quite challenge to align and create a dynamic ring of shapes that was uniformly spaced and distributed. 

var radius = 200
var x_c = 320;
var y_c = 240;
//1/8 of 2 pi
var theta = 0.785;
var shapes = 8;
function setup() {
    createCanvas(640, 480);
    background(220);
}

function draw() {
    background(0);

    //draws dynamically colored background
    //left rectangle
    fill(color(255-mouseX/3,mouseX/2,255-mouseX/3));
    rect(0,0,mouseX,480);

    //right rectangle
    fill(color(100,170,255-mouseX/4));
    rect(mouseX,0,640-mouseX,480);

    //calculations to create dynamic behavior
    var distance = dist(width,y_c,mouseX,mouseY);
    radius = distance/2;
    translate(320,240);
    push();

    //offset rotation
    rotate(radius/10);

    //creates the ring of shapes
    for (i = 0; i < shapes; i++)
    {
    	rotate(theta);
    	fill(color(40+i*radius/8,100-i*radius/8,100));
    	if (i%2 == 1){
    		triangle(160-radius,0,180-radius,-20,180-radius,20);
    	}
    	else{
    		ellipse(160-radius,0,30+radius/6,30+radius/6);
    	}
    }
    pop();
}

Ziningy1 – Section C- Looking Outwards -03

Silk Pavillion 

MIT Mediated Matter Group’s project Silk Pavilion immediately attracted my attention as I am browsing through their project page. I am surprised by how computer algorithm can generated such organic form. The Silk Pavilion is done by Prof. Fiorenzo Omenetto (TUFTS University) and Dr. James Weaver (WYSS Institute, Harvard University).  Inspired by the silkworm’s ability to generate a 3D cocoon out of a single multi-property silk thread, the pavilion’s overall geometry was created using an algorithm that assigns a single continuous thread across patches, providing various degrees of density. Overall density variation was informed by deploying the silkworm as a biological “printer” in the creation of a secondary structure. Positioned at the bottom rim of the scaffold, 6,500 silkworms spun flat, non-woven silk patches as they locally reinforced the gaps across the silk fibers.

I really enjoyed this project/installation as how they explore the  relationship between digital and biological fabrication. The method of deploying the actual silk worms as biological “printer” is very impressive to me, and this also shows that the blind instinct of silkworms is sometimes revealed as almost machine-like.

ifv-Looking-Outwards-03

MIT’s Self-Folding Origami Technology

Creators create designs digitally that when printed and inflated with air they self-fold into origami forms.

After reading the prompt this project immediately came to mind. I admire the gesture of taking a step towards creating technology that can completely assemble itself. This technology could be used not only for artistic purposes but also for practical functions, the video above addresses this by saying these principles could be applied to the design of airbags. The materials and designs used consciously imitate the aesthetics and traditions of origami. As the program for designing is developed I hope there becomes a way to make more randomized forms which can still have a significant transformation. After doing some more research I found this video which shows that the project has taken a a turn for practicality and autonomy.