odhPFinal

//Owen D Haft
//15-104 Section D
//odh@andrew.cmu.edu
//Final Project

var wristJointX = 240; //X Position of the Wrist
var wristJointY = 240; //Y Position of the Wrist
var fingerJointRadius = 5; //Radius of the hand joints
var petalSize = 9; //Radius of the Petals
var petalHeight = 0; //Position of the Petals
//List of Translations
var Texts = ["Life is Beautiful", "La Vida es Bella",
                "La Vie est Belle", "La Vita è Bella", "A Vida é Bela", 
                "Das Leben ist Wunderschoen", "Życie jest Piękne",
                "החיים יפים", "لحياة جميلة", "삶은 아름답다", "生活是美好的", 
                "人生は素晴らしい", "ज़िन्दगी गुलज़ार है", "ชีวิตช่างสวยงาม",
                "Maisha ni Mazuri", "Жизнь прекрасна", "Vita Pulchrum est"];
var THeight = 30; //Height of the Text
var TColor = 0; //Fill color of the Text

function setup() {
    createCanvas(360, 360);
    background(141, 222, 255);
}

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

//Draws the Shapes of the Skeleton Hand
    //Forearm
    line(239, 241, 479, 481);
    line(241, 239, 481, 479);
    
    //Carpels
    line(wristJointX, wristJointY, 210, 210);
    line(wristJointX, wristJointY, 126, 234);
    line(wristJointX, wristJointY, 124, 236);
    line(wristJointX, wristJointY, 122, 238);
    line(wristJointX, wristJointY, 120, 240);

    //Metacarpels
    line(210, 210, 185, 195);
    line(126, 234, 110, 210);
    line(124, 236, 95, 215);
    line(122, 238, 85, 225);
    line(122, 240, 80, 235);

    line(110, 210, 135, 190);
    line(95, 215, 80, 185);
    line(85, 225, 65, 200);
    line(80, 235, 55, 220);

    //Styles the joints
    fill(0);
    strokeWeight(1);
    stroke(250);
    
    //Elbow
    ellipse()

    //Wrist Joint
    ellipse(wristJointX, wristJointY, 10);
    
    //Finger Joints
    ellipse(126, 234, fingerJointRadius);
    ellipse(124, 236, fingerJointRadius);
    ellipse(122, 238, fingerJointRadius);
    ellipse(120, 240, fingerJointRadius);

    ellipse(80, 235, fingerJointRadius);
    ellipse(85, 225, fingerJointRadius);
    ellipse(95, 215, fingerJointRadius);
    ellipse(110, 210, fingerJointRadius);
    ellipse(210, 210, fingerJointRadius);

    ellipse(55, 220, fingerJointRadius);
    ellipse(65, 200, fingerJointRadius);
    ellipse(80, 185, fingerJointRadius);
    ellipse(135, 190, fingerJointRadius);
    ellipse(185, 195, fingerJointRadius);

    //Fingertips
    strokeWeight(0); //Removes the outline on the fingertips

    triangle(178, 193, 184, 190, 165, 185);
    triangle(141, 188, 134, 183, 165, 185);
    triangle(81, 179, 75, 181, 86, 155);
    triangle(65, 194, 60, 197, 62, 172);
    triangle(52, 214, 50, 220, 40, 202);

//Flower
    //Stem
    noFill();
    strokeWeight(2); //Gives the Stem thickness
    stroke(84, 157, 26); //Stem Color
    
    curve(226, 154, 173, 156, 168, 195, 226, 191);

    //Pod
    fill(99, 47, 24);

    ellipse(177, 153, 13);

    //Petals
    fill(255, 232, 19);
    strokeWeight(0)
    stroke(0);

    //The Main text
    push();
    fill(TColor);
    textSize(30);
    text(Texts[0], 7, THeight); // Prints only "Life is Beautiful" from Texts 
    pop();

    push();
    translate(177, 153);
    for (var i = 0; i < 6; i++) { //Creates the petals of the flower
        rotate(PI/3);
        ellipse(10, petalHeight, petalSize);
            
        if (mouseIsPressed) { //Exapnds and moves the petals to
            petalHeight -= 1; //encompass the Canvas in Yellow
            petalSize += 1;   //adding a new "background" color

            if (petalSize > 500) { //Limits the growth of
                petalHeight = 500; //the petals and prompts 
                petalSize = 500;   //the Texts to be printed

                //Prints Texts with offset heights
                for (var j = 1; j < 18; j++) {
                    push();
                    translate(-180, -180);
                    fill(TColor + 255); //changes text color to white
                    textSize(16); //changes text size
                    text(Texts[j], random(10, 150), (THeight*2/3)*j+56);
                    pop(); 
                };
            };
        };
    };
    pop();

    //Draws pink petals once the yellow petals grow into the background
    if (mouseIsPressed) {
        translate(177, 153);
        for (var i = 0; i < 6; i++) {
            fill(219, 164, 164);
            rotate(PI/3);
            ellipse(10, 0, 9);
        };
    };
}

I chose to create an interactive art piece for my final project. The work features a skeleton-like hand gently holding a small flower with the words above, “Life is Beautiful”. As the viewer holds down the mouse, the petals grow and replace the background color, as new petals appear in their place. Once the growing petals completely eclipse the background, the phrase “life is beautiful” appears randomly on the screen in different languages.

I was inspired by a sketch I made earlier in the year (below) and the beautiful juxtaposition of the subjects.

For my final project I wanted to incorporate both maps and tracking data, so I looked for projects that used one or both of those.

The first project I looked at is “Mapping the World’s Friendships” by Stamen (https://stamen.com/work/facebook-mapping-the-worlds-friendships/). This project tracks the friendships of a people in a country with people from other countries. What I like about this work is how much  clear and detail information is presented. I also like how the abstraction of the data and the lack of precision with numbers makes it even more clear. However, the labeling and description of the piece makes it a little difficult to understand the concept. This next project I think does a much better job with clarity. The “Eyeo 2014 Poster” by Pitch Interactive tracks the data collected from Eyeo participants (http://pitchinteractive.com/work/eyeo2014poster.html). It tracks where in the world the participants “had their first kiss?” or “where they were on 9/11?”. This poster also is interactive, because it “tells a new story” with each rotation.

My proposal for my final project would be a map that tracks where my siblings, parents and I have visited, all over the world. I would have a world map that’s has different colored dots(at least 3 colors), correlating to which family member it is, with lines connecting to where we each individually lived(home) at the time. I love tracking data especially when it has to do with maps/geography. I definitely want to add an element of interaction, not quite sure what yet. Perhaps when a certain button or the mouse is pressed, it will highlight one of the subject’s path. Overall, the point of this project would be data display that tracks where the members of my family have been/visited.

Proposal Draft:

I chose to look at a film called ODDSAC made by the band Animal Collective in 2010. In the video above, I skipped to the part where the digital art shows up and where I most enjoyed it. The play between the visuals and the sound really caught my attention because I can’t tell whether the sound is informing and driving the visual, or vice versa. When reading about the film, Animal Collective talks about how some of the music involved in the film was inspired by the art made by the director, Danny Perez, which I think is reflected in segment I highlight from the movie. The back and forth between what inspired what.

I chose to make two turtles that would follow the mouse to reveal and image below. I gave each turtle a different angle of rotation to give them a “dance-like” feel, while they reveal an abstract picture.

Final Image:

odhP11

//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 11

//Declares the image
var abstract;

//Declares the turtles
var turtle1;
var turtle2;

function preload() {
    abstract = loadImage("https://i.imgur.com/ve9JtKn.jpg");
}

function setup() {
    createCanvas(480, 480);
    background(100, 100, 200);
    abstract.loadPixels();
    frameRate(20000);

    //Sets the start point of the turtles
    turtle1 = makeTurtle(width/2, height/2);
    turtle2 = makeTurtle(width/2, height/2);
}

function draw() {

    //Pulls the color from the image
    var color1 = abstract.get(turtle1.x, turtle1.y); //Gets the color from the image 
    var color2 = abstract.get(turtle2.x, turtle2.y);

    turtle1.setColor(color1);
    turtle1.setWeight(10);

    turtle2.setColor(color2);
    turtle2.setWeight(10);

//Turtles move towards the mouse
    turtle1.forward(10);
    turtle2.forward(10);

//Target is the mouse location
    var targetX = mouseX;
    var targetY = mouseY;

    turtle1.turnToward(targetX, targetY, 4); 
    turtle2.turnToward(targetX, targetY, 6); 
}


function turtleLeft(d) {
    this.angle -= d;
}

function turtleRight(d) {
    this.angle += d;
}

function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}

function turtleBack(p) {
    this.forward(-p);
}

function turtlePenDown() {
    this.penIsDown = true;
}

function turtlePenUp() {
    this.penIsDown = false;
}

function turtleGoTo(x, y) {
    if (this.penIsDown) {
        stroke(this.color);
        strokeWeight(this.weight);
        line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}

function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}

function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}

function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}

function turtleSetColor(c) {
    this.color = c;
}

function turtleSetWeight(w) {
    this.weight = w;
}

function turtleFace(angle) {
    this.angle = angle;
}

function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0,
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

odhP10

//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 10

var buildings = [];
//Declares the X location of the Moon
var moonX = 430;

function setup() {
    createCanvas(480, 240);
    for (var i = 0; i < 8; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }

    frameRate(10);
}
 
function draw() {
    background(10, 10, 80);
    
    //Moves the moon across the sky 
    //and resets when it exits the frame
    moonX = moonX - 1;
    if (moonX < -100) {
        moonX = 530;
        moonX = moonX - 1;
    };

    //Creates the moon
    noStroke();
    fill(250);
    ellipse(moonX, 60, 100, 100);
    fill(10, 10, 80)
    ellipse(moonX+20, 50, 80, 80);
    translate(0, 40);
    noFill(); 

    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
}

function updateAndDisplayBuildings(){
    // Update the building's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.007; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


// method to update position of building every frame
function buildingMove() {
    this.x += this.speed;
}
    

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(150); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    stroke(0); 
    for (var i = 0; i < this.nFloors; i++) {
        fill(255, 255, 50);
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
    }
    pop();
}

function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

I chose to have a nighttime view of a city skyline. I have the moon behind the buildings moving across the sky until it resets and reappears on the on the opposite side of the canvas. Overall, I am not pleased with the product along with my lack of understanding to create a more interesting and developed product.

Claudia Hart created “Dream” in 2009 as a depiction of the physical body on the boundary between abstract and graphic. Hart created this by modeling in the 3D all the elements and then placing a “camera” in the digital space. She explains that the movements performed by the “camera” are unfamiliar to a real, physical camera, adding to the supernatural, dream-like feeling in the piece.

I admired the depth of digital modeling and creation. Despite being a “slow-action” animation, the subtle movements of the body attest to the careful craft of Hart. I think she rides along the aforementioned line of abstract and graphic very successfully. The environment elicits a sense of separation from the real world that dreams give me. The subtle movements of the woman and the environment she’s is in is calming to follow.

Link to the project(with video): http://www.claudiahart.com/portfolio/dream.html

odhP9

//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 9

var underlyingImage;
var pict;

function preload() {
    //Loads two different images:
    //Image 1
    var myImageURL = "https://i.imgur.com/AOEHv7s.jpg";
    //Image 2
    var myImageURL2 = "https://i.imgur.com/iGOj0Sd.jpg"; 
    underlyingImage = loadImage(myImageURL);
    underlyingImage2 = loadImage(myImageURL2);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    underlyingImage.loadPixels();
    underlyingImage2.loadPixels();
    frameRate(60);
    pict = random(1,2);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    //"gets" the pixels color in each image
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    //Draws Randomly sized, randomly located rectangles reflecting the colors in image 1
    noStroke();
    fill(theColorAtLocationXY);
    rect(px, py, random(1, 10), random(1, 10));

    //Draws a line the follows the mouses location that reflects the colors in image 2
    var theColorAtTheMouse = underlyingImage2.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    strokeWeight(10);
    line(pmouseX, pmouseY, mouseX, mouseY);
}

I chose to have different photos in my portrait, each revealed and shown in different ways. One image is revealed with random varying sized rectangles and the other with the mouse with ellipses. One appears cubist-like, and the other more expressionist.

Both shown finished:

I chose to look at Jihee Kim’s Looking Outwards focused on randomness. She talks about a collaboration project between visual artists Memo Akten and Quayola. i agree with Jihee in that the project looks at the motions of the human body as it performs, in this case, extreme physical movements. I, however, don’t see the link of the randomness to the forces exerted on or by the human, as Jihee states. I see the randomness controlled by the motions of the human body, depicting a trail of motion that gives further context to their movements.

I also agree with the success of the artists to give life to this piece, purely made of basic, unnatural geometries. Through the randomness, I can see a human. Their success in beautifully depicting motion gives the audience enough to see a normal person carrying out the movement.

I looked at the 2012 lecture given by Fernada Viegas and Martin Wattenberg. Viegas is a Brazilian scientist who focuses on information visualization, she attended MIT. Wattenberg is an American scientist who is known for his data visualizations for companies like IBM and Google, he attended Brown, Stanford, and UC Berkeley.

I find what they do incredibly interesting and important. It isn’t to obvious how imperative data visualization is, but if data is not shown in a way that people can understand or are attracted to, they will not look at it. What I admire about how they work it that they account for the attractiveness of the visualizations, they go beyond just making the data legible. For example, with their visualization of wind speed and direction, they chose to depict the invisible force of wind in a way that actually makes they viewer “see” it, I knew that i was looking at wind, even though I, nor anyone, have never seen wind before. What I like most about their presentation is that they show the process work, the steps to their final product.

I specifically like the Wind Case Study (around minute: 17:30)

Martin Wattenberg: http://www.bewitched.com/

Fernada Viegas: http://fernandaviegas.com/