Author: tmanheim@andrew.cmu.edu

Taisei Manheim – Looking Outward – 07

The project I chose was PENNY, an artificial intelligence tool developed by Stamen and researchers at Carnegie Mellon University.  Penny is an AI that is built on machine learning using neural networks to understand what kind of infrastructure is found in low income versus high income housing and then guess the neighborhood income based on these patterns.  It was built on top of DigitalGlobe’s analytics platform called GBDX, which uses the world’s most advanced commercial imaging satellites to create high resolution imagery that developers could then use.  The AI was first given income data from the U.S. Census Bureau, which was then divided into smaller areas to match satellite images from GBDX. Then the Census based color map was overlaid on the satellite map.  Then the AI looked for patterns in the satellite imagery and how they correlate to the income map. Through this is started to notice patterns in NEw York City, such as lower income areas tending to have baseball diamonds, parking lots, and large similarly shaped buildings (such as housing projects), middle income areas having more single family homes and apartment buildings, and high income areas having more greener spaces, tall shiny buildings, and single family homes with lush backyards.  You could then change the neighborhoods by adding different types of infrastructure to see how the AI would predict the income of the area would change. I found this project interesting because I live in New York City and you could notice differences in low income areas and high income areas, but never seen the visuals of the neighborhood’s infrastructure converted into data to understand their income.

link to project

Satellite imagery using DigitalGlobe’s analysis program GBDX.
Income date from the US Census Bureau that was overlaid on the satellite image.

Taisei Manheim – 06 – Abstract Clock


sketch

For this project I show time by having multiple objects to rotate around the Earth, with the sun/moon representing the hour, clouds representing the minute and satellite representing the seconds.  As seen in the sketch below the numerical values are represented in a semicircle around the Earth with the left side representing 9am/pm and the right side representing 9pm/am.  For the minutes and seconds the left side represents 15/45 and the right side represents 45/15.  In addition the sky is darkest at 3am and lightest at 3pm with a gradient between those times.  I wanted to have a clock that was abstract but could still be used to read time if you understood how it worked.

At first I thought the rotation around the Earth would be fairly simple and be used simply by translating and rotating, but I realized that wouldn’t work how I wanted it to using the hour(), minutes(), and seconds() commands so I had to figure it out more mathematically.  I couldn’t get each object to move from the right to the left once it finished its rotation from the left side to the right side so I had two of each object (only one is visible on the screen at any given time).

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-06

var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(480, 480);
    millisRolloverTime = 0;
}

function draw() {
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();

    //Reckon the current millisecond, 
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    //sky color lightest at 3pm and darkest 3am with color changing between
    var skyColor = 22 * abs(15 - H);
    background(135 - skyColor, 206 - skyColor, 235 - skyColor);
    
    //Earth
    noStroke();
    fill(0,0,255);
    ellipse(width / 2, height, width / 4, width / 4);
    
    //North America
    fill(127,255,0);
    beginShape();
    vertex(width / 2 + 6, height - 51.5);
    vertex(width / 2 + 5, height - 52);
    vertex(width / 2 + 5, height - 52.7);
    vertex(width / 2 + 6, height - 54.5);
    vertex(width / 2 + 8, height - 56.3);
    vertex(width / 2 + 10, height - 57.5);
    vertex(width / 2 + 12, height - 58.5);
    vertex(width / 2 + 7, height - 59.5);
    vertex(width / 2, height - width / 8);
    vertex(width / 2 - 7, height - 59.5);
    vertex(width / 2 - 12, height - 58.5);
    vertex(width / 2 - 17, height - 57.5);
    vertex(width / 2 - 22, height - 55.5);
    vertex(width / 2 - 27, height - 53);
    vertex(width / 2 - 32, height - 50.5);
    vertex(width / 2 - 37, height - 47);
    vertex(width / 2 - 42, height - 42.5);
    vertex(width / 2 - 42 + 8, height - 42  + 4);
    vertex(width / 2 - 42 + 12, height - 42  + 9);
    vertex(width / 2 - 42 + 25, height - 42  + 35);
    vertex(width / 2 - 42 + 27, height - 42  + 38);
    vertex(width / 2 - 42 + 30, height - 42  + 40);
    vertex(width / 2 - 42 + 35, height);
    vertex(width / 2 + 5, height);
    vertex(width / 2 + 2, height - 2);
    vertex(width / 2 + 1, height - 3);
    vertex(width / 2 - 0.5, height - 5);
    vertex(width / 2 - 2, height - 8);
    vertex(width / 2 - 4, height - 12);
    vertex(width / 2 - 4, height - 14);
    vertex(width / 2 - 3, height - 15);
    vertex(width / 2 - 1, height - 16.5);
    vertex(width / 2 + 1, height - 17.3);
    vertex(width / 2 + 3, height - 18);
    vertex(width / 2 + 5, height - 18.5);
    vertex(width / 2 + 7, height - 18.5);
    vertex(width / 2 + 9, height - 18.2);
    vertex(width / 2 + 11, height - 17.7);
    vertex(width / 2 + 13, height - 17.2);
    vertex(width / 2 + 15, height - 16.5);
    vertex(width / 2 + 17, height - 15.7);
    vertex(width / 2 + 19, height - 15.4);
    vertex(width / 2 + 21, height - 15.4);
    vertex(width / 2 + 21.5, height - 15.7);
    vertex(width / 2 + 21.7, height - 16.3);
    vertex(width / 2 + 21.7, height - 17);
    vertex(width / 2 + 21.4, height - 17.5);
    vertex(width / 2 + 21, height - 18.5);
    vertex(width / 2 + 19.5, height - 19.8);
    vertex(width / 2 + 18.5, height - 20.5);
    vertex(width / 2 + 18, height - 21.5);
    vertex(width / 2 + 18, height - 23);
    vertex(width / 2 + 19.5, height - 28);
    vertex(width / 2 + 22.5, height - 33);
    vertex(width / 2 + 25.5, height - 36);
    vertex(width / 2 + 28.5, height - 40);
    vertex(width / 2 + 29.5, height - 42);
    vertex(width / 2 + 29.5, height - 44);
    vertex(width / 2 + 28.5, height - 45);
    vertex(width / 2 + 27, height - 46);
    endShape();

    //text
    fill(255);
    textSize(24);
    text(H + ":" + M + ":" + S, width / 2 - 30, 100);
    
    //remapping hour, second, minute values to use with cos and sin for circular motion
    var sec = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
    var min = map(minute() + map(second(), 0, 60, 0, 1), 0, 60, 0, TWO_PI) - HALF_PI;
    var hr = map(hour() + map(minute(), 0, 60, 0, 1), 0, 24, 0, TWO_PI * 2) - HALF_PI;

    //seconds
    //sattelite 1
    //wing 1
    fill(150);
    quad(width / 2 + cos(sec) * width / 2 * 0.75, height + sin(sec) * width / 2 * 0.75,
        width / 2 + cos(sec) * width / 2 * 0.75, (height + sin(sec) * width / 2 * 0.75) - 30,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 10, (height + sin(sec) * width / 2 * 0.75) - 30,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 10, height + sin(sec) * width / 2 * 0.75);
    //wing 2
    quad(width / 2 + cos(sec) * width / 2 * 0.75, height + sin(sec) * width / 2 * 0.75,
        width / 2 + cos(sec) * width / 2 * 0.75, (height + sin(sec) * width / 2 * 0.75) + 20,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 10, (height + sin(sec) * width / 2 * 0.75) + 20,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 10, height + sin(sec) * width / 2 * 0.75);
    fill(255);
    //body
    quad(width / 2 + cos(sec) * width / 2 * 0.75, height + sin(sec) * width / 2 * 0.75,
        width / 2 + cos(sec) * width / 2 * 0.75, (height + sin(sec) * width / 2 * 0.75) - 10,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 20, (height + sin(sec) * width / 2 * 0.75) - 10,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 20, height + sin(sec) * width / 2 * 0.75);

    //sattelite 2
    //wing 1
    fill(150);
    quad(width / 2 - cos(sec) * width / 2 * 0.75, height - sin(sec) * width / 2 * 0.75,
        width / 2 - cos(sec) * width / 2 * 0.75, (height - sin(sec) * width / 2 * 0.75) - 30,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 10, (height - sin(sec) * width / 2 * 0.75) - 30,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 10, height - sin(sec) * width / 2 * 0.75);
    //wing 2
    quad(width / 2 - cos(sec) * width / 2 * 0.75, height - sin(sec) * width / 2 * 0.75,
        width / 2 - cos(sec) * width / 2 * 0.75, (height - sin(sec) * width / 2 * 0.75) + 20,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 10, (height - sin(sec) * width / 2 * 0.75) + 20,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 10, height - sin(sec) * width / 2 * 0.75);
    fill(255);
    //body
    quad(width / 2 - cos(sec) * width / 2 * 0.75, height - sin(sec) * width / 2 * 0.75,
        width / 2 - cos(sec) * width / 2 * 0.75, (height - sin(sec) * width / 2 * 0.75) - 10,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 20, (height - sin(sec) * width / 2 * 0.75) - 10,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 20, height - sin(sec) * width / 2 * 0.75);
    
    //minutes
    //cloud1
    fill(255);
    ellipse(width / 2 + cos(min) * width / 2 * 0.5, height + sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) + 10, height + sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) - 10, height + sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) + 5, (height + sin(min) * width / 2 * 0.5) + 7, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) - 5, (height + sin(min) * width / 2 * 0.5) + 7, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) + 5, (height + sin(min) * width / 2 * 0.5) - 7, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) - 5, (height + sin(min) * width / 2 * 0.5) - 7, 15, 15);
    ///cloud2
    ellipse(width / 2 - cos(min) * width / 2 * 0.5, height - sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) + 10, height - sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) - 10, height - sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) + 5, (height - sin(min) * width / 2 * 0.5) + 7, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) - 5, (height - sin(min) * width / 2 * 0.5) + 7, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) + 5, (height - sin(min) * width / 2 * 0.5) - 7, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) - 5, (height - sin(min) * width / 2 * 0.5) - 7, 15, 15);
    
    //hours
    //moon & sun 1
    fill(255,255,0);
    ellipse(width / 2 + cos(hr) * width / 2, height + sin(hr) * width / 2, 50, 50);
    //moon & sun 2
    fill(255,255,0);
    ellipse(width / 2 - cos(hr) * width / 2, height - sin(hr) * width / 2, 50, 50);
}

Taisei Manheim – Looking Outward – 06

The project that I chose was a piece called Color-Wander by Matt DesLauriers, a generative artist and creative coder from Toronto.  Color-Wander is a high resolution generative artwork that shows lines that are randomly drawn and produces a different pattern of lines and colors every time that it is clicked.  This project combines Node.js and HTML Canvas because it does well at handling larger resolutions. In order to make the image more polished, Matt used photos of snails, flowers, architecture, geometry and more as distortion maps to drive the algorithm.  When choosing colors, rather than choosing colors by hand he sourced the top 200 palettes from an online design community forum.  I find this project to be interesting because each time you click everything changes about the image, such as the density of strokes, stroke type, and overall style of the image rather than just the colors changing.

link to project
Example of an image produced by clicking.

Taisei Manheim – Project 05 – Wallpaper


sketch

For this project I wanted the repetition to be a geometric pattern.  I chose this pattern because of the sense of three dimensionality it gave as well as the interesting relationship between positive and negative space.

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-05

function setup() {
    createCanvas(600, 600);
    background(128);
    var w = 50;
    for (var y = 0; y < height + 50; y += 100) {
        for (var x = 0; x < width; x += 100) {
            //top quad
            stroke(255);
            fill(255,192,203);
            quad(x, y, x + w, y - sqrt(3) * w / 4,  x + 2 * w, y, x + w, y + sqrt(3) * w / 4); ;
            line(x + 2 * w - 10, y - 5, x + w - 10, y + sqrt(3) * w / 4 - 5);
            line(x + 2 * w - 20, y - 10, x + w - 20, y + sqrt(3) * w / 4 - 10);
            line(x + 2 * w - 30, y - 14, x + w - 30, y + sqrt(3) * w / 4 - 14);
            line(x + 2 * w - 40, y - 18, x + w - 40, y + sqrt(3) * w / 4 - 18);

            //left quad
            stroke(255);
            fill(255,162,233);
            quad(x, y, x + w, y + sqrt(3) * w / 4, x + w, y + sqrt(3) * w / 4 + 57, x, y + 57); 
            line(x, y + 11, x + w, y + sqrt(3) * w / 4 + 11);
            line(x, y + 22, x + w, y + sqrt(3) * w / 4 + 22);
            line(x, y + 33, x + w, y + sqrt(3) * w / 4 + 33);
            line(x, y + 44, x + w, y + sqrt(3) * w / 4 + 44);

            //right quad
            stroke(255);
            fill(255,132,255);
            quad(x + w, y + sqrt(3) * w / 4, x + 2 * w, y, x + 2 * w, y + 57, x + w, y + sqrt(3) * w / 4 + 57); 
            line(x + 2 * w - 10, y + 5, x + 2 * w - 10, y + 57 + 5);
            line(x + 2 * w - 20, y + 10, x + 2 * w - 20, y + 57 + 10);
            line(x + 2 * w - 30, y + 14, x + 2 * w - 30, y + 57 + 14);
            line(x + 2 * w - 40, y + 18, x + 2 * w - 40, y + 57 + 18);
        }
    }
    noLoop();
}

Taisei Manheim – Looking Outward – 05

The project I chose was the Nike Strike Series FA16 by onformative, a studio for digital art and design.  Growing up, I was a huge soccer fan and I have always loved the Nike soccer advertisements so I was curious about how they were made.  For this project, onformative created still images and films for the fall 2016 launch of the Strike Series apparel collection. In order to do this, they took full body scans of several famous soccer players which were made into specialized 3D models that served as the base for the visuals.  Motion capture data from training drills were used to create the dynamic imagery that fit the campaign’s slogan, “Play fast. Train faster.” The data of each player like speed and power helped to define and stylize the figures. In order to create dramatic effect, rim and back lighting highlights the players on darkened backgrounds. The collection is very prominent on each athlete, which results in captivating images and films.


Promotional video made as part of the series using 3D body scanning  technology.

Taisei Manheim – Project 04 – String Art

sketch

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-04

function setup() {
    createCanvas(400,300);
}

function draw() {
    var x = 0; //used to define color
    background(0);
    strokeWeight(1);
    stroke(255);
    for (var i = 0; i < 400; i+=10){
        stroke(255);
        line(0, height - i, i, 0); //top left curved lines
        
        line(i, i, width, height -i); //top half of bottom right curved lines
        line(i, i, width - i, height); //bottom hald of bottom right curved lines

        //changes lines from white to magenta depending on mouse location
        if (mouseX > width / 2) {
            x = 0;
        }
        if (mouseX <+ width / 2) {
            x = 255;
        }

        //lines that turn magenta
        stroke(255, x, 255);
        line(0, height, i, i); //bottom left
        line(width, 0, i, i); //top right

        //sky blue lines
        stroke(135, 206, 235);
        line(width, height, 0, i); //bottom half
        line(0, 0, width, i); //top half
    }

}

When creating this I tried to create a fairly balanced composition with some areas having a denser amount of lines and some areas having not as many lines. I wanted to have some element of color change in order to change the way you perceive the drawing.

Taisei Manheim – Looking Outward – 04

The project that I chose was Game of Skill 2.0 by Christine Sun Kim, which was presented at MoMA P.S.1.  Christine has been deaf since birth and through this exhibit she attempts to show her subjective experiences with sound.  Viewers were invited to hold an old fashioned radio with a staff and drag it along a velcro strip hung above their heads. As they walk with the staff being dragged along the strip, a sound is emitted at different levels and speeds depending on the direction and speed that the viewers walk in.  By making the viewer exert a special effort in order to comprehend the sound, Christine shows the labor involved with listening, which is usually a passive activity. Christine has always been fascinated by how people take hearing for granted and through this exhibit affects how people interpret their own hearing of sounds.  I admire how Christine was able to take the parts of sound and hearing that we usually don’t think about such as the act of hearing itself and how sight connects with hearing and made people face these questions that she faces on a daily basis.

Taisei Manheim – 03 – Dynamic Drawing

sketch

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-03

var angle = 0;

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

function draw() {
    var speed = 3

    noStroke();
    background(135 - mouseX / 3, 206 - mouseX / 3, 235 - mouseX / 3); //sky color changes as mouse moves

    //stars
    fill("white");
    if (mouseX > width / 2) {
        fill("white"); //white if nighttime
    }
    if (mouseX <= width / 2) {
        fill(135 - mouseX / 3, 206 - mouseX / 3, 235 - mouseX / 3); //color of sky if daytime
    }  
    //stars rotate by their centers
    push();
    translate(30, 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(57, 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(21, 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(67, 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(90, 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(113, 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(113, 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(37, 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 30, 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 57, 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 21, 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 67, 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 +90, 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 113, 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 113, 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 37, 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 30, 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 57, 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 21, 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 67, 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 +90, 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 113, 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 113, 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 37, 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 30, 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 57, 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 21, 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 67, 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 +90, 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 113, 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 113, 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 37, 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 30, 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 57, 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 21, 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 67, 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 +90, 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 113, 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 113, 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 37, 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();

    push();
    translate(30, 120 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(57, 120 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(21, 120 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(67, 120 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(90, 120 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(113, 120 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(113, 120 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(37, 120 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 30, 120 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 57, 120 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 21, 120 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 67, 120 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 +90, 120 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 113, 120 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 113, 120 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 37, 120 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 30, 120 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 57, 120 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 21, 120 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 67, 120 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 +90, 120 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 113, 120 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 113, 120 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 37, 120 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 30, 120 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 57, 120 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 21, 120 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 67, 120 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 +90, 120 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 113, 120 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 113, 120 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 37, 120 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 30, 120 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 57, 120 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 21, 120 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 67, 120 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 +90, 120 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 113, 120 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 113, 120 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 37, 120 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();

    push();
    translate(30, 240 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(57, 240 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(21, 240 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(67, 240 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(90, 240 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(113, 240 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(113, 240 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(37, 240 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 30, 240 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 57, 240 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 21, 240 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 67, 240 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 +90, 240 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 113, 240 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 113, 240 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(120 + 37, 240 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 30, 240 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 57, 240 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 21, 240 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 67, 240 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 +90, 240 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 113, 240 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 113, 240 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(240 + 37, 240 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 30, 240 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 57, 240 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 21, 240 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 67, 240 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 +90, 240 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 113, 240 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 113, 240 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(360 + 37, 240 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 30, 240 + 40);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 57, 240 + 33);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 21, 240 + 60);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 67, 240 + 71);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 +90, 240 + 83);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 113, 240 + 111);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 113, 240 + 47);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    push();
    translate(480 + 37, 240 + 104);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 5, 5);
    pop();
    angle = angle + 5;

    //sun
    //sun moves twice the speed of mouse
    fill('yellow');
    ellipse(mouseX * 2, 50, 200 - mouseX / 3, 200 - mouseX / 3);

    //moon
    //moon moves twice the speed of mouse
    ellipse((mouseX - 300) * 2, 50, 200 - mouseX / 3, 200 - mouseX / 3);
    fill(135 - mouseX / 3, 206 - mouseX / 3, 235 - mouseX / 3); //fill for moon shadow
    ellipse((mouseX - 325) * 2.19, 50, 200 - mouseX / 3, 200 - mouseX / 3);

    //buildings
    //buildings move in inverse direction of mouse
    colorMode(RGB, 255);
    fill(mouseX - 400); //buildings go from black to white as mouse moves
    rect(1100 - mouseX / speed, 480 - 200, 50, 200);
    rect(1050 - mouseX / speed, 480 - 50, 50, 50);
    rect(950 - mouseX / speed, 480 - 150, 50, 150);
    rect(900 - mouseX / speed, 480 - 250, 50, 250);
    rect(850 - mouseX / speed, 480 - 100, 50, 100);
    rect(800 - mouseX / speed, 480 - 200, 50, 200);
    rect(750 - mouseX / speed, 480 - 50, 50, 50);
    rect(700 - mouseX / speed, 480 - 150, 50, 150);
    rect(650 - mouseX / speed, 480 - 300, 50, 300);
    rect(600 - mouseX / speed, 480 - 200, 50, 200);
    rect(550 - mouseX / speed, 480 - 100, 50, 100);
    rect(500 - mouseX / speed, 480 - 250, 50, 250);
    rect(450 - mouseX / speed, 480 - 150, 50, 150);
    rect(400 - mouseX / speed, 480 - 200, 50, 200);
    rect(350 - mouseX / speed, 480 - 300, 50, 300);
    rect(300 - mouseX / speed, 480 - 175, 50, 175);
    rect(250 - mouseX / speed, 480 - 225, 50, 225);
    rect(200 - mouseX / speed, 480 - 100, 50, 100);
    rect(150 - mouseX / speed, 480 - 200, 50, 200);
    rect(100 - mouseX / speed, 480 - 300, 50, 300);
    rect(50 - mouseX / speed, 480 - 175, 50, 175);
    rect(0 - mouseX / speed, 480 - 50, 50, 50);
}

For this project I was inspired by the New York City skyline from the Brooklyn side looking at Manhattan. I tried to show the change in time over the day through multiple changing elements, such as the color of the sky changing, the sun and then moon appearing and changing in size, and the rotating stars appearing at night. The most difficult part was getting the stars to rotate because when I tried putting them in the same push() function they would all rotate around one star so I had to separate them into different functions.

Taisei Manheim – Looking Outward – 03

The project I chose was Coded Clay by Brian Peters, a former architecture professor at Carnegie Mellon University.  As an architecture student I appreciate how he used architectural software such as Rhino and Grasshopper to parametrically design intricate pottery.  He starts by hand sketching the design that he wants and then he creates a custom Grasshopper script to design the movements of the 3D printer. The 3D printer was custom made by him in order to use clay and the tiny zig-zag movements with the path of the machine give the sense of the pottery being woven.  Once printed, the pieces have to dry for several days and then they are fired in a kiln twice, once before glazing and once afterwards. The idea for Coded Clay came from Brian Peter’s time in the Netherlands where he worked on 3D printing with clay within an architecture firm in Amsterdam.

Taisei Manheim – Project – 02 – Variable – Face


sketch

When coding this project, at first I had difficulty controlling the different variables in order to make them work in the way that I wanted them to, such as the color of the face and body.  However, once I got the hang of it I was able to have multiple elements of the face changing at the same time without the face becoming too distorted.

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-02

var eyeSize = 10;
var faceWidth = 100;
var faceHeight = 200;
var mouthWidth = 10;
var mouthHeight = 10;
var bodyWidth = 300;
var bodyHeight = 200;
var color = 100;
var armWidth = 20;
var armHeight = 100;

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

function draw() {
    background('pink');

    fill(50, 155, 255);
    fill(50, 155 - color, 255 - color);

    var armLx = width / 2 - bodyWidth / 4 - armWidth / 2
    var armRx = width / 2 + bodyWidth / 4 - armWidth / 2
    var armLy = height / 2 + faceHeight / 2 - armHeight + 40
    var armRy = height / 2 + faceHeight / 2 - armHeight + 40
    rect(armLx, armLy, armWidth, armHeight);
    rect(armRx, armRy, armWidth, armHeight);
    //arms

    ellipse(armLx + armWidth / 2, armLy, 40, 60);
    ellipse(armRx + armWidth / 2, armRy, 40, 60);
    //hands

    var bodyPos = height / 2 + faceHeight / 2 + bodyHeight / 2 - 10
    ellipse(width / 2, bodyPos, bodyWidth, bodyHeight);
    //body

    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    //face

    fill('white')
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    arc(eyeLX, height / 2, 2.5 * eyeSize, eyeSize, 0, PI);
    arc(eyeLX, height / 2 + 2, 2.5 * eyeSize, eyeSize, PI, PI + PI, OPEN);
    arc(eyeRX, height / 2, 2.5 * eyeSize, eyeSize, 0, PI);
    arc(eyeRX, height / 2 + 2, 2.5 * eyeSize, eyeSize, PI, PI + PI, OPEN);
    //eyes

    fill('black');
    ellipse(eyeLX, height / 2 + 1, eyeSize - 2, eyeSize - 2);
    ellipse(eyeRX, height / 2 + 1, eyeSize - 2, eyeSize - 2);
    //pupils

    fill('black');
    rect(eyeLX - 15, height / 2 - faceHeight / 4, 30, 8);
    rect(eyeRX - 15, height / 2 - faceHeight / 4, 30, 8);
    //eyebrows

    fill(255, 0, 0);
    ellipse(width / 2, height / 2 + faceHeight / 4, mouthWidth, mouthHeight);
    //mouth

    fill('orange');
    rect(width / 2 - 60, height / 2 - 10 - faceHeight / 2, 120, 30);
    rect(width / 2 - 25, height / 2 - 110 - faceHeight / 2, 50, 100);
    //top hat
}

function mousePressed() {
    faceWidth = random(100, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 20);
    mouthWidth = random(5, 30);
    mouthHeight = random(5, 30);
    bodyWidth = random(300, 500);
    bodyHeight = random(200, 400);
    color = random(0,155);  
    armWidth = random(20, 30);
    armHeight = random(80, 120);
}