Section C – Page 17 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

ablackbu-Looking-Outwards-07

The geography of Tweets

https://blog.twitter.com/official/en_us/a/2013/the-geography-of-tweets.html

in 2013, Twitter’s team for Visual Insights created a project that gave every twitter user a virtual brush that they could mark the location of every tweet they made. Twitter was able to track billions of tweets, since 2009, and place them on a map to track tweet geographic patterns.

Above is Europe, Istanbul, and Tokyo. Every place is incredibly unique and varied. This gave Twitter a lot of helpful data surrounding who and where uses their service.

My favorite part of this experience is that it is so simple. But at the same time it is so complex. There are billions of points that have to be mapped and this is no small feat.

Something else I noticed is not on the land but in the sea. there are dots all over the ocean. This means that they were even able to trace off-coast tweets from maritime traffic.

karinac-LookingOutwards-07

This is the On Broadway Project presented by Moritz Stefaner. He created this visualization project from activities of ordinary people in order to show the busy life of those who live and visit Broadway, Manhattan in New York. To do so, he monitored data such as number of twitter posts and taxi rides per day, and well as colors in the instagram posts. After gathering that data, he compressed his findings into the data layers that you see below:

What I love about Moritz’s project was that he essentially took the normal lives of people living on Broadway and compiled it into a visual product using his own algorithms or ones given to him by organizations that he had worked for. I was taken aback at how relevant the data was to ordinary people who may not necessarily be into statistics, but can enjoy this visual and even learn something from it.

Here is the link to the On Broadway Project:
http://truth-and-beauty.net/projects/on-broadway

eeryan-LookingOutwards-07

I find data visualization to be an interesting intersection between programming and graphic design/art as the better it is executed, the more likely people are to try to absorb the information given.

I chose to look at Fernanda Viegas’ chromogram, a data visualization piece that tracks what Wikipedia users (editors, not readers) search for. The algorithm tracks the first three letters of Wikipedia searches, and assigns a color to the string, resulting in a series of lines of blocked color that allows viewers to pick out repeated trends in editor activity.

The above photo is an example of this, tracking the searches of a single editor who focused on naval centric articles. The purple is the string “USS”.

Link to the project

ashleyc1-Section C-Looking Outwards-07

history flow for “Abortion” page, versions equally spaced.

history flow for “Chocolate” page, versions equally spaced.

History Flow (2003) is a project by Fernanda Viegas in collaboration with Kushal Dave and Johnathan Feinberg which calculates and visualizes the changes of wikipedia articles. They calculated the changes by using tokens, or html tags in their program sentences to compare and capture changes in the articles. Although I don’t have access to the details, the Fernanda Viegas collaborated with IBM researchers. Their software was also able to determine who and at what age the author of the changes was and visualized these variants with different colors and sizes. Any time there is a black space, this indicates the article was vandalized or parts were blacked out which brings a lot of political undertones when seeing it in the context of a abortion wiki article.

This project is interesting because it brings up questions about censorship and the freedom to alter and edit text on a platform that is often referenced for the general public. From a visual standpoint, it’s also interesting to see the designs change and deviate significantly from the initial pattern and makes you think about what sort of conflict was going on and at what point can two (or more) authors of different opinions on a topic come together and agree what information is a determined fact to include in the article.

Artist Page:

http://bewitched.com/historyflow.html

Papers Written About Process:

http://alumni.media.mit.edu/~fviegas/papers/history_flow.pdf

http://hint.fm/papers/wikipedia_coordination_final.pdf

Bettina-LookingOutwards-07

Screenshot of a person interacting with the project, “We Feel Fine”. Find the project page here, and the site itself here.

This interactive site, We Feel Fine, was made in 2005 and searches the internet every 10 minutes for expressions of human emotion on blogs and then displays the results these dynamic representations. Not only is the result beautiful, but this piece also helps connect people around the world by seeing others who share similar feelings as we are right now. I’d imagine to implement this, one would need to parse content from sites (perhaps use API’s?) but perhaps the logic would be similar to the concept of strings, and searching through each word in a string and matching them to words in emotion dictionaries. There could also be work with the d3.js library which is made for data visualization.

I also admire how this digital piece was also turned into a print piece. As a designer, I am always searching for how we bridge the gap between print and digital mediums, and this system seems to have either piece suit the medium quite well: the digital piece serves to collect and display data in real time, where as the print piece memorializes moments and interesting findings.

afukuda-LookingOutwards-07

eCLOUD

eCloud by Aaron Koblin is a dynamic sculpture inspired by clouds and its behavior, displayed in the San Jose International Airport. The installation, made from polycarbonate tiles, can fade between transparent and opaque states, with its pattern transforming periodically according to real-time weather data from around the world. I find this work intriguing, as it takes an ambiguous natural phenomenon and attempts to abstract its behavior into a pixelated paneling system. From the example of different “states” of the installation, there seems to be an algorithmic system where the opaqueness (or lack of) of the panels are calculated according to the fogginess of the current weather. And the location of said opaque panels indicate the wind motion. It is an interesting idea to bring the outside into interior spaces; I can imagine it conveying a relaxing, pleasant mood in the San Jose airport.

Cloud conditions of San Jose & Berlin (respectively)

ikrsek-Looking Outwards-07

Around the time of the most recent election, the wall street journal released a webpage that displayed examples of conservative and liberal facebook feeds side by side using programming to find such article/data that would apply to either category. To look at the information on each side and compare it brings to mind the power of the news that we find ourselves surrounded by – as well as the delicacy of words and the ability to completely warp our perception of events, or to manipulate an audience into feeling a certain way about a topic of discussion. In a sense it also brings about a sobering realization of the power of corporations like facebook, which are in control of the news that we see. Facebook itself has an immense amount of control and power in filtering the news on our timelines and in that regard also has a frightening amount of control over us and tend to keep us confined in an echo chamber with regards to the idea that the posts our friends or family make or share will tend to retain familiar values/morals. Projects like this, which give you access and understanding to different perspectives are necessity if we ever hope to overcome our differences to work together for the good of ourselves and fellow peers.

Here is a link to the website and a screenshot of the page:

http://graphics.wsj.com/blue-feed-red-feed/

ikrsek-SectionC-Project-06-Abstract Clock

The idea for this project was to try and represent the time of day by paralleling it with the subsequent way someone feels during the day, and match the way they look as a day progresses. The result was a person who looks tired in the morning, starts to liven up around noon and in the afternoon, and then gradually gets tired again and falls asleep. The background also matches the color of the sky as time passes by.

Here are photos of all the different stages:

dawn morning

noon afternoon

evening dusk

sketch

//Isadora Krsek 
//Ikrsek@andrew.cmu.edu
//Section C
//Project 06: Abstract clock

var r = (0);
var g = (0);
var b = (0);

var dawn = (5);
var morning = (7);
var noon = (12);
var afternoon  = (13);
var evening = (18);
var dusk = (22);

skinbaseR = (243);
skinbaseG = (213);
skinbaseB = (202);


function setup() {
    createCanvas(480,415);

}

function draw() {
    var h = hour();
    var m = minute();
    var s = second();
    
    background(r,g,b);
    
    //draw dawn image if it is dawn
    if (dawn <= h  & h < morning){
    dawnImage();
    }
    //draw morning image if it is morning    
    else if (morning <= h & h < noon){
    morningImage();
    }
    
    //draw noon image if it is noon   
    else if (noon <= h & h < afternoon){
    noonImage();
    }

    //draw afternoon image if it is afternoon   
    else if (afternoon <= h & h < evening){
    afternoonImage();
    }
    
    //draw evening image if it is evening  
    else if (evening <= h & h < dusk){
    eveningImage();
    }
    
    //draw dusk image if it is dusk but before midnight 
    else if (dusk <= h & h < 24 ){
    duskImage();
    }
    //draw dusk after midnight before dawn(separated because p5 tracks hours using military time)
    else if (0 <= h < dawn){
    duskImage(); 
    }

}

//dawn 
function dawnImage() {
    r = (159);
    g = (182);
    b = (205);
    
    var m = minute();
    var s = second();
    var ms = millis();
    
      //shirt
    fill(179,179,191);
    rect(70,445,360,80);
    ellipse(255,419,370,150);
  //hair
    fill(226,164,140,90); //brown hair   34,20,15
    ellipse(250, 170, 285, 300);
    rect(104,180,292,154);
  //hairline
    stroke(skinbaseR,skinbaseG,skinbaseB);
    strokeWeight(3.5);
    line(253,40,253,100);
  //NECK
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    rect(188,320,128,28)
    ellipse(252,350,128,75)
   //neck shadow
    fill(239,186,168)
    ellipse(252,318,129,75)
  //HEAD
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(250, 205, 260, 280);
   //right ear
    ellipse(384, 210, 50, 80);
   //left ear
    ellipse(116, 210, 50, 80); 
  //BROWS 
   //right eyebrow
    fill(226,164,140)
    ellipse(310,155,45,30)
   //left eyebrow
    ellipse(185,155,45,30)
   //right eyebrow light
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(310,165,55,30)
   //left eyebrow light 
    ellipse(185,165,55,30)
  //EYES
   //eyebag left
    fill(239,186,168,100);
    ellipse(185,185,60,40);
   //eyebag right
    ellipse(310,185,60,40);
   //left eyelid
    fill(239,186,168)
    stroke(207,159,143);
    ellipse(185,183,58,32);
    noStroke();
    ellipse(185,180,58,30);
   //right eyelid
    stroke(207,159,143)
    ellipse(310,183,58,32);
    noStroke();
    ellipse(310,180,58,32);
   //left eye
    fill(255)
    ellipse(185,185,60,0)
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(185,185,27,0)
   //right eye
    fill(255)
    ellipse(310,185,60,0)
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(310,185,27,0)
  //NOSE
   //nose ball shadow 
    fill(239,186,168)
    ellipse(251,236,30,25)
   //left nostril shadow
    ellipse(238,230,35,20)
   //right nostril shadow
    ellipse(266,230,35,20)
   //left nostril
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(242,228,35,20)
   //right nostril
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(262,228,35,20)
   //nose ball 
    ellipse(251,230,30,29)
  //CHIN
   //chin dark line
    fill(239,186,168)
    ellipse(250,330,34,23);
   //chin
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(250,333,36,23);
  //LIPS
   //lower lip
    push();
    translate(-52,50)
    scale(1.2,1.2);
    beginShape();
    fill(238,191,173);
    noStroke();
    curveVertex(226,190);
    vertex(276,189);
    curveVertex(262,202);
    curveVertex(241,202);
    endShape(CLOSE);
      beginShape();
   //upper lip 
     fill(226,164,140);
     noStroke();
     strokeWeight(1);
     curveVertex(224,190);
     curveVertex(242,180);
     curveVertex(251,183);
     curveVertex(261,180);
     vertex(278,190);
    endShape(CLOSE);
    pop();
  //BLINK
    push();
    noStroke();
    scale(.65,.65);
    translate(27,-10);
    //blink
     if (ms%3===0) {
     fill(239,186,168);
     ellipse(258,290,90,50);
     ellipse(450,290,90,50);
     stroke(207,159,143);
     strokeWeight(4);
     arc(258,290,90,60,0,PI);
     arc(450,290,90,60,0,PI);
     }
    pop();
    noStroke();
}

//morning
function morningImage() {
    r = (185);
    g = (211);
    b = (238);
    
    m = minute();
    s = second();
  
  //shirt
    fill(179,179,191);
    rect(70,445,360,80);
    ellipse(255,419,370,150);
  //hair
    fill(226,164,140,90); //brown hair   34,20,15
    ellipse(250, 170, 285, 300);
    rect(104,180,292,154);
  //hairline
    stroke(skinbaseR,skinbaseG,skinbaseB);
    strokeWeight(3.5);
    line(253,40,253,100);
  //NECK
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    rect(188,320,128,28)
    ellipse(252,350,128,75)
   //neck shadow
    fill(239,186,168)
    ellipse(252,318,129,75)
  //HEAD
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(250, 205, 260, 280);
   //right ear
    ellipse(384, 210, 50, 80);
   //left ear
    ellipse(116, 210, 50, 80); 
  //BROWS 
   //right eyebrow
    fill(226,164,140)
    ellipse(310,155,45,30)
   //left eyebrow
    ellipse(185,155,45,30)
   //right eyebrow light
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(310,165,55,30)
   //left eyebrow light 
    ellipse(185,165,55,30)
  //EYES
    //eyebag left
    fill(239,186,168,100);
    ellipse(185,185,60,50);
    //eyebag right
    ellipse(310,185,60,50);
   //left eyelid
    fill(239,186,168)
    ellipse(185,183,58,32);
   //right eyelid
    ellipse(310,183,58,32);
   //left eye
    fill(255)
    ellipse(185,185,60,20)
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(185,185,27,20)
   //right eye
    fill(255)
    ellipse(310,185,60,20)
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(310,185,27,20)
  //NOSE
   //nose ball shadow 
    fill(239,186,168)
    ellipse(251,236,30,25)
   //left nostril shadow
    ellipse(238,230,35,20)
   //right nostril shadow
    ellipse(266,230,35,20)
   //left nostril
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(242,228,35,20)
   //right nostril
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(262,228,35,20)
   //nose ball 
    ellipse(251,230,30,29)
  //CHIN
   //chin dark line
    fill(239,186,168)
    ellipse(250,330,34,23);
   //chin
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(250,333,36,23);
  //LIPS
   //lower lip
    push();
    translate(-52,50)
    scale(1.2,1.2);
    beginShape();
    fill(238,191,173);
    noStroke();
    curveVertex(226,190);
    vertex(276,189);
    curveVertex(262,202);
    curveVertex(241,202);
    endShape(CLOSE);
      beginShape();
   //upper lip 
     fill(226,164,140);
     noStroke();
     strokeWeight(1);
     curveVertex(224,190);
     curveVertex(242,180);
     curveVertex(251,183);
     curveVertex(261,180);
     vertex(278,190);
    endShape(CLOSE);
    pop();
  //BLINK
    push();
    noStroke();
    scale(.65,.65);
    translate(27,-10);
    //sec blink
     if (s%4 === 0) {
     fill(239,186,168);
     ellipse(258,290,90,50);
     ellipse(450,290,90,50);
     stroke(207,159,143);
     strokeWeight(4);
     arc(258,290,90,60,0,PI);
     arc(450,290,90,60,0,PI);
     }
    pop();
    noStroke();
}


//noon
function noonImage() {
  r = (198);
  g = (226);
  b = (255);
  
  m = minute();
  s = second();
  
    //shirt
    fill(179,179,191);
    rect(70,445,360,80);
    ellipse(255,419,370,150);
  //hair
    fill(226,164,140,90); //brown hair   34,20,15
    ellipse(250, 170, 285, 300);
    rect(104,180,292,154);
  //hairline
    stroke(skinbaseR,skinbaseG,skinbaseB);
    strokeWeight(3.5);
    line(253,40,253,100);
  //NECK
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    rect(188,320,128,28);
    ellipse(252,350,128,75);
   //neck shadow
    fill(239,186,168);
    ellipse(252,318,129,75);
  //HEAD
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(250, 205, 260, 280);
   //right ear
    ellipse(384, 210, 50, 80);
   //left ear
    ellipse(116, 210, 50, 80); 
  //BROWS 
   //right eyebrow
    fill(226,164,140);
    ellipse(310,155,45,30);
   //left eyebrow
    ellipse(185,155,45,30);
   //right eyebrow light
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(310,165,55,30);
   //left eyebrow light 
    ellipse(185,165,55,30);
  //EYES
  
   //eyebag left
    fill(239,186,168,100);
    ellipse(185,185,60,50);
   //eyebag right
    ellipse(310,185,60,50);

   //left eyelid
    fill(239,186,168);
    ellipse(185,183,58,32);
   //right eyelid
    ellipse(310,183,58,32);
   //left eye
    fill(255);
    ellipse(185,185,60,30);
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(185,185,27,27);
   //right eye
    fill(255);
    ellipse(310,185,60,30);
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(310,185,27,27);
  //NOSE
   //nose ball shadow 
    fill(239,186,168);
    ellipse(251,236,30,25);
   //left nostril shadow
    ellipse(238,230,35,20);
   //right nostril shadow
    ellipse(266,230,35,20);
   //left nostril
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(242,228,35,20);
   //right nostril
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(262,228,35,20);
   //nose ball 
    ellipse(251,230,30,29);
  //CHIN
   //chin dark line
    fill(239,186,168);
    ellipse(250,330,34,23);
   //chin
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(250,333,36,23);
  //LIPS
   //lower lip
    push();
    translate(-52,50);
    scale(1.2,1.2);
    beginShape();
    fill(238,191,173);
    noStroke();
    curveVertex(226,190);
    vertex(276,189);
    curveVertex(262,202);
    curveVertex(241,202);
    endShape(CLOSE);
      beginShape();
   //upper lip 
     fill(226,164,140);
     noStroke();
     strokeWeight(1);
     curveVertex(224,190);
     curveVertex(242,180);
     curveVertex(251,183);
     curveVertex(261,180);
     vertex(278,190);
    endShape(CLOSE);
    pop();
    
    push();
    noStroke();
    scale(0.65,0.65);
    translate(27,-10);
    //sec blink
     if (s%4 === 0) {
     fill(239,186,168);
     ellipse(258,290,90,50);
     ellipse(450,290,90,50);
     stroke(207,159,143);
     strokeWeight(4);
     arc(258,290,90,60,0,PI);
     arc(450,290,90,60,0,PI);
     }
    pop(); 
    noStroke();  
}


//afternoon
function afternoonImage() {
  r = (176);
  g = (226);
  b = (255);
  
  m = minute();
  s = second();
  
    //shirt
    fill(179,179,191);
    rect(70,445,360,80);
    ellipse(255,419,370,150);
  //hair
    fill(226,164,140,90); //brown hair   34,20,15
    ellipse(250, 170, 285, 300);
    rect(104,180,292,154);
  //hairline
    stroke(skinbaseR,skinbaseG,skinbaseB);
    strokeWeight(3.5);
    line(253,40,253,100);
  //NECK
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    rect(188,320,128,28);
    ellipse(252,350,128,75);
   //neck shadow
    fill(239,186,168);
    ellipse(252,318,129,75);
  //HEAD
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(250, 205, 260, 280);
   //right ear
    ellipse(384, 210, 50, 80);
   //left ear
    ellipse(116, 210, 50, 80); 
  //BROWS 
   //right eyebrow
    fill(226,164,140);
    ellipse(310,155,45,30);
   //left eyebrow
    ellipse(185,155,45,30);
   //right eyebrow light
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(310,165,55,30);
   //left eyebrow light 
    ellipse(185,165,55,30);
  //EYES
   //left eyelid
    fill(239,186,168);
    ellipse(185,183,58,32);
   //right eyelid
    ellipse(310,183,58,32);
   //left eye
    fill(255);
    ellipse(185,185,60,30);
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(185,185,27,27);
   //right eye
    fill(255);
    ellipse(310,185,60,30);
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(310,185,27,27);
  //NOSE
   //nose ball shadow 
    fill(239,186,168);
    ellipse(251,236,30,25);
   //left nostril shadow
    ellipse(238,230,35,20);
   //right nostril shadow
    ellipse(266,230,35,20);
   //left nostril
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(242,228,35,20);
   //right nostril
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(262,228,35,20);
   //nose ball 
    ellipse(251,230,30,29);
  //CHIN
   //chin dark line
    fill(239,186,168);
    ellipse(250,330,34,23);
   //chin
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(250,333,36,23);
  //LIPS
   //lower lip
    push();
    translate(-52,50);
    scale(1.2,1.2);
    beginShape();
    fill(238,191,173);
    noStroke();
    curveVertex(226,190);
    vertex(276,189);
    curveVertex(262,202);
    curveVertex(241,202);
    endShape(CLOSE);
      beginShape();
   //upper lip 
     fill(226,164,140);
     noStroke();
     strokeWeight(1);
     curveVertex(224,190);
     curveVertex(242,180);
     curveVertex(251,183);
     curveVertex(261,180);
     vertex(278,190);
    endShape(CLOSE);
    pop();
    
    push();
    noStroke();
    scale(0.65,0.65);
    translate(27,-10);
    //sec blink
     if (s%4 === 0) {
     fill(239,186,168);
     ellipse(258,290,90,50);
     ellipse(450,290,90,50);
     stroke(207,159,143);
     strokeWeight(4);
     arc(258,290,90,60,0,PI);
     arc(450,290,90,60,0,PI);
     }
    pop();
    noStroke();
}


//evening
function eveningImage() {
  r = (102);
  g = (153);
  b = (204);
  
  m = minute();
  s = second();
  
    //shirt
    fill(179,179,191);
    rect(70,445,360,80);
    ellipse(255,419,370,150);
  //hair
    fill(226,164,140,90); //brown hair   34,20,15
    ellipse(250, 170, 285, 300);
    rect(104,180,292,154);
  //hairline
    stroke(skinbaseR,skinbaseG,skinbaseB);
    strokeWeight(3.5);
    line(253,40,253,100);
  //NECK
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    rect(188,320,128,28);
    ellipse(252,350,128,75);
   //neck shadow
    fill(239,186,168);
    ellipse(252,318,129,75);
  //HEAD
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(250, 205, 260, 280);
   //right ear
    ellipse(384, 210, 50, 80);
   //left ear
    ellipse(116, 210, 50, 80); 
  //BROWS 
   //right eyebrow
    fill(226,164,140);
    ellipse(310,155,45,30);
   //left eyebrow
    ellipse(185,155,45,30);
   //right eyebrow light
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(310,165,55,30);
   //left eyebrow light 
    ellipse(185,165,55,30);
  //EYES
  //eyebag left
    fill(239,186,168,100);
    ellipse(185,185,60,40);
    //eyebag right
    ellipse(310,185,60,40);
   //left eyelid
    fill(239,186,168);
    ellipse(185,183,58,32);
   //right eyelid
    ellipse(310,183,58,32);
   //left eye
    fill(255);
    ellipse(185,185,60,30);
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(185,185,27,27);
   //right eye
    fill(255);
    ellipse(310,185,60,30);
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(310,185,27,27);
  //NOSE
   //nose ball shadow 
    fill(239,186,168);
    ellipse(251,236,30,25);
   //left nostril shadow
    ellipse(238,230,35,20);
   //right nostril shadow
    ellipse(266,230,35,20);
   //left nostril
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(242,228,35,20);
   //right nostril
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(262,228,35,20);
   //nose ball 
    ellipse(251,230,30,29);
  //CHIN
   //chin dark line
    fill(239,186,168);
    ellipse(250,330,34,23);
   //chin
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(250,333,36,23);
  //LIPS
   //lower lip
    push();
    translate(-52,50);
    scale(1.2,1.2);
    beginShape();
    fill(238,191,173);
    noStroke();
    curveVertex(226,190);
    vertex(276,189);
    curveVertex(262,202);
    curveVertex(241,202);
    endShape(CLOSE);
      beginShape();
   //upper lip 
     fill(226,164,140);
     noStroke();
     strokeWeight(1);
     curveVertex(224,190);
     curveVertex(242,180);
     curveVertex(251,183);
     curveVertex(261,180);
     vertex(278,190);
    endShape(CLOSE);
    pop();
    
    
    push();
    noStroke();
    scale(.65,.65);
    translate(27,-10);
    //sec blink
     if (s%4 === 0) {
     fill(239,186,168);
     ellipse(258,290,90,50);
     ellipse(450,290,90,50);
     stroke(207,159,143);
     strokeWeight(4);
     arc(258,290,90,60,0,PI);
     arc(450,290,90,60,0,PI);
     }
    pop();
    noStroke();
    
    
}


//dusk
function duskImage() {
  r = (21);
  g = (44);
  b = (69);
  
    //shirt
    fill(179,179,191);
    rect(70,445,360,80);
    ellipse(255,419,370,150);
  //hair
    fill(226,164,140,90); //brown hair   34,20,15
    ellipse(250, 170, 285, 300);
    rect(104,180,292,154);
  //hairline
    stroke(skinbaseR,skinbaseG,skinbaseB);
    strokeWeight(3.5);
    line(253,40,253,100);
  //NECK
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    rect(188,320,128,28);
    ellipse(252,350,128,75);
   //neck shadow
    fill(239,186,168);
    ellipse(252,318,129,75);
  //HEAD
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(250, 205, 260, 280);
   //right ear
    ellipse(384, 210, 50, 80);
   //left ear
    ellipse(116, 210, 50, 80); 
  //BROWS 
   //right eyebrow
    fill(226,164,140);
    ellipse(310,155,45,30);
   //left eyebrow
    ellipse(185,155,45,30);
   //right eyebrow light
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(310,165,55,30);
   //left eyebrow light 
    ellipse(185,165,55,30);
  //EYES
//eyebag left
    fill(239,186,168,100);
    ellipse(185,190,60,45);
    //eyebag right
    ellipse(310,190,60,45);
  
   //left eyelid
    fill(239,186,168);
    stroke(207,159,143);
    ellipse(185,183,58,32);
    noStroke();
    ellipse(185,180,58,30);
    
   //right eyelid
    stroke(207,159,143);
    ellipse(310,183,58,32);
    noStroke();
    ellipse(310,180,58,32);
    
   //left eye
    fill(255)
    ellipse(185,185,60,0);
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(185,185,27,0);
   //right eye
    fill(255);
    ellipse(310,185,60,0);
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(310,185,27,0);
    
    
    
  //NOSE
   //nose ball shadow 
    fill(239,186,168);
    ellipse(251,236,30,25);
   //left nostril shadow
    ellipse(238,230,35,20);
   //right nostril shadow
    ellipse(266,230,35,20);
   //left nostril
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(242,228,35,20);
   //right nostril
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(262,228,35,20);
   //nose ball 
    ellipse(251,230,30,29);
  //CHIN
   //chin dark line
    fill(239,186,168);
    ellipse(250,330,34,23);
   //chin
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(250,333,36,23);
  //LIPS
   //lower lip
    push();
    translate(-52,50);
    scale(1.2,1.2);
    beginShape();
    fill(238,191,173);
    noStroke();
    curveVertex(226,190);
    vertex(276,189);
    curveVertex(262,202);
    curveVertex(241,202);
    endShape(CLOSE);
      beginShape();
   //upper lip 
     fill(226,164,140);
     noStroke();
     strokeWeight(1);
     curveVertex(224,190);
     curveVertex(242,180);
     curveVertex(251,183);
     curveVertex(261,180);
     vertex(278,190);
    endShape(CLOSE);
    pop();
    push();
    noStroke();
    scale(.65,.65);
    translate(27,-10);
}

Jdbrown – Looking Outwards 7 – Data Visualization

Here is a piece that I found a while ago – it’s a progressive visualization of all nuclear detonations since 1945 on the world map. It’s a very stark piece of work, especially given the accompanying soundtrack. While most of these detonations are tests, there’s something unsettling about the “co-ordinate-like visuals,” as if you’re in the room where they’re deciding whether or not to drop the bombs.

From what I can tell, the data set is comprised of dates and locations, with the geographic co-ordinates mapped onto a flat surface, then the algorithm goes through the timeline, and each time it hits a node corresponding to a bomb’s explosion, it draws a little reticle on the location of the explosion.

http://digg.com/video/nuclear-bomb-data-visualization

Looking Outward 6: Random

Randomness in music is becoming increasingly “in vogue” recently. There is an entire genre of music called “aleatoric” music” wherin some or all parts of the music-making process are left to chance.
One of the principle issues with this type of music is deciding how to notate it. Standard music notation creates a shared language for all practitioners of the artform, but in the world of aleatory, much of the symbolic representations of “sound over time,” become more literal. Rather than a quarter note, a composer may just write “continue for about twenty seconds.” Abstract and unconventional notation is rising in popularity, as composers attempt to find new territories of sonic expression, and aleatory is a composer’s playground in this realm of exploration.

Attached is a piece by one of the most famous contemporary compositional explorers in the modern era: Karlheinz Stockhausen.