October 2017 – Page 46 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

Brandonhyun- Project-06-Clock

//Brandon Hyun
//bhyun1@andrew.cmu.edu
//15104 SectionB
//Project06-Clock

var fryingPan;
var innerFryingpan;
var value;
var c;
var yolk;
var limit;
var changeeggwhiteColor;
var rpos1;
var rpos2;
var changePositionegg;
var prevSec;
var millisRolloverTime;



function setup() {
  createCanvas(400, 400);
	fryingPan = 0;
	limit = 120;
	innerFryingpan = 40;
	yolk = color(255, 204, 0);
  millisRolloverTime = 0;

}

function draw() {
  var H = hour();
  var M = minute();
  var S = second();
  var areaCircle = ellipse(width/2,height/2,280,280);
  var rcircle = random(areaCircle);

background(220);
	changeeggwhiteColor = map(S, 0, 60, 40, 255, true);
  changePositionegg = map(S, 0, 60, 100, 400, true);
  //print(changePositionegg);

	c = color(200, 200, 200, changeeggwhiteColor);

  value = alpha(c);

  if (prevSec != S) {
       millisRolloverTime = millis();
   }
   prevSec = S;
   var mils = floor(millis() - millisRolloverTime);

   fill(128,100,100);
   text("Hour: "   + H, 10, 22);
   text("Minute: " + M, 10, 42);
   text("Second: " + S, 10, 62);
   text("Millis: " + mils, 10, 82);

   var hourBarWidth   = map(H, 0, 23, 0, width);
   var minuteBarWidth = map(M, 0, 59, 0, width);
   var secondBarWidth = map(S, 0, 59, 0, width);

	fill(fryingPan);
	ellipse (width/2,height/2,300,300);
	fill(innerFryingpan);
	ellipse (width/2,height/2,280,280);



  var i = map(S, 0, 60, 200, 400, true);
  if (i > 300) i = 600 - i;
  var j = width - sqrt(90000 - i*i);
  print(i);
  print(j);






  fill(value);
	noStroke();
	ellipse (i,j-100,100,100);
	ellipse (i-40,j-100,50,50);
	ellipse (i-30,j-70,40,50);
	ellipse (i+30,j-80,60,60);
	ellipse (i-10,j-130,60,60);
	ellipse (i+20,j-120,60,60);
  // ellipse (i,j,100,100);
	// ellipse (i-40,j,50,50);
	// ellipse (i-30,j+30,40,50);
	// ellipse (i+30,j+20,60,60);
	// ellipse (i-10,j-30,60,60);
	// ellipse (i+20,j-20,60,60);
//yolk
	fill(yolk);
	ellipse (i+10,j-110,50,50);




}

For this Assignment, I tried to emulate egg cooking on a frying pan. As minute passes, the egg gets fried and the egg yolk becomes whiter.

I had some difficulty getting the entire egg in a random position every time a minute passes. However, it was really nice working with the time variable and pitch my interest of cooking into this project.

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)

hschung-LookingOutwards-06

When I read that the topic was “randomness,” I instantly thought of Pisarro’s paintings that use pointillism. Although he placed every dot of paint in each pointillism painting, they weren’t calculated to their own rigid, specific positions. The placement of those dots are also random to an extent, because when people “randomly” generate things, it is not wholly random. So then I wondered about computer-generated “fine art” and I came across a project called “Grow Your Own Picture” by Chris Cummins, that generates the Mona Lisa painting using polygons of different shapes and colors, which can be manipulated by the website user. Chris gives credit for the idea of genetic algorithms to Roger Johansson, who was able to regenerate the painting using polygons of different colors, transparencies, and shapes. I was really intrigued that he was able to take so many sharp shapes and blend them to mimic the original painting so convincingly. I have also never heard of the term genetic programming or genetic algorithms before. It was so interesting to hear about programming that generates a “gene pool” of shapes and then does its best to sift out the “most fit” shapes to the Mona Lisa image. Cummin’s and Johansson’s approaches to this replication of fine art vary in level of randomness, in that with Cummin’s project, someone can interact with it and manipulate the content, so it has more opportunities to be different or random. They are also random in a similar sense, in the code that generates the art.

Chris Cummin’s interactive Grow Your Own Picture https://chriscummins.cc/s/genetics/#

Roger Johansson’s Mona Lisa replication via code

Genetic Programming: Evolution of Mona Lisa

yunzhous-LookingOutward-06

(example shown by the author)

(my work)

After some research online, I found an algorithm named “HTML5 Canvas Fractal Flame Generator” that generates random fractals. The users are free to change the type of lines, colors, scales, rotation, etc. This algorithm is a simplified version of the “Fractal Flame algorithm” invented by Scott Draves. According to the author, “The algorithm is based on iterating a set of affine transformations to move a point around the plane a very large number of times, then rendering an image which records all of the positions the point visited.” I attached two images in the post, one is an example made by other people, another is the one I generated using this algorithm.

Since this type of “art” can be created by anyone with just a couple of simple clicks, I started to question the definition of “art”. The results are for sure visually pleasing, but is this real art? Generated with some simple operation on computer?

I chose this algorithm to write in LookingOutward because it was fun to play with it. It’s nice that people who barely know about computer science(like me) have access to simple algorithm like this, and have fun with it. Maybe this isn’t real art, but the interesting interaction is real.

You can read more about the algorithm here.

NatalieKS-LookingOutwards-07

In a project lead by Boris Müller and one/one, Studio NAND developed a map that was a visual landscape of fictional and poetic illustrations for the 14th Poetry on the Road festival in Bremen, Germany. The works of 25 different authors spanning 4 different languages created the computational basis for several generated media projects. For example, the image above: this is a visual map in which all of the works in the festival were represented in this unique form of computational media. This particular visualization was based on a “Conic Equidistant Project” so the distances were proportionally correct, as well as visual mapping, natural language processing, “Jan Rybicki’s TransVis research for detecting author finger prints,” and Yahoo’s geocoding service, among other distributions to establish connections between the different works.

I really admire this project for its application; this design ended up being used for the promotional poster – as a form of publications-art. It’s a unique way or representing other forms of art, while also having a practical use. It’s very cool to see how even works of literature, like poetry, can be represented through code and visual mapping.

hschung-Project-06

sketch

//Heidi Chung
//Section A
//hschung@andrew.cmu.edu
//Project-06

var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(400, 400);
    millisRolloverTime = 0;
    angleMode(DEGREES);
}

function draw() {
    background(43, 58, 71);
    var H = hour(); // moon sinks down the sky
    var M = minute(); // tail moves to the right
    var S = second(); //cat's drool drips down
 
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);
    var hourMoon   = map(H, 0, 24, 0, height);
    var minuteTail = map(M, 0, 59, 0, height);
    var secondsWithFraction = S + (mils / 1000.0);
    var secondsDroolChunky = map(S, 0, 59, 253, height);

// MOON
    noStroke(); //moon and its little craters
    
    fill(234, 232, 150); //moon's glowing rings of light
    ellipse(300, hourMoon, 120, 120);
    fill(212, 214, 150, 95);
    ellipse(300, hourMoon, 220, 220);
    fill(234, 239, 175, 90);
    ellipse(300, hourMoon, 350, 350);
    fill(175, 175, 113, 70);
    ellipse(300, hourMoon, 550, 550);

    fill(255);
    ellipse(300, hourMoon, 80, 80);//moon
    fill(230, 230, 230);
    ellipse(317, hourMoon, 30, 30);//crater
    fill(230, 230, 230, 90);
    ellipse(290, hourMoon, 20, 20); //crater
    fill(80, 40);
    ellipse(300, hourMoon - 25, 10, 10);//crater
    fill(230, 230, 230, 90);
    ellipse(320, hourMoon - 20, 15, 15);//crater
    fill(230, 230, 230);
    ellipse(305, hourMoon + 30, 15, 10);//crater

// HILL
    push();
    fill(70, 100, 90);
    stroke(40, 94, 60);
    ellipse(width/2 -50, height, 800, 200);
    pop();
    fill(127, 160, 112, 99);
    ellipse(width/2 -50, height -5, 700, 180);

// BODY
    push();
    noFill(); //tail arc
    stroke(153, 125, 125);
    strokeWeight(30);
    arc(width/2 -30, height/2 + 75, minuteTail +50, 250,  -10, 120); //350, 250 = ellipse dimensions for tail
    pop();

    fill(153, 125, 125); //cat body
    ellipse(width/3 - 20, height/2 + 150, 170, 200);

    fill(181, 158, 151); //cat belly highlight
    ellipse(width/3 - 10, height/2 +150, 130, 150);

//FISH
    push();
    fill(110, 140, 151); //fish body
    stroke(127, 156, 167);
    strokeWeight(3);
    ellipse(width/3 -100, height/2 +180, 400, 120);
    pop();

    push();
    stroke(40, 58, 72);
    strokeWeight(4);
    line(143, 360, 173, 368); //fish eye
    line(151, 377, 168, 356); //fish eye
    strokeWeight(2);
    line(197, 387, 222, 391); //fish mouth
    strokeWeight(1);
    line(213, 377, 212, 372); //fish left nostril
    line(220, 377, 220, 373); //fish right nostril
    pop();
    push();
    fill(87, 115, 135); //fish's fin
    ellipse(width/3 - 50, height/2 +180, 90, 45);

    stroke(110, 140, 151, 99);
    strokeWeight(5);
    line(31, 371, 129, 370); //fin stripes thick and transparent
    line(32, 382, 129, 380);
    line(32, 393, 129, 390);
    pop();
    fill(110, 140, 151); //fish's fin eclipse
    ellipse(width/3 - 10, height/2 +180, 45, 55);

// EARS
	var earX = width/2 - 100;
    var earY = height/2 - 80;

    fill(200, 170, 170); // both ears
    //triangle(earX +10, earY+20, earX -35, earY+30, earX - 20, earY-20); //left ear
    //triangle(186, 171, 146, 138, 208, 128); //right ear
    //plotted right ear parts in Illustrator and used the info to get the points


    beginShape(); //left ear squishy
    curveVertex(earX +10, earY+20);
    curveVertex(earX -35, earY+30);
    curveVertex(earX - 20, earY-20);
    curveVertex(earX +10, earY+20);
    curveVertex(earX -35, earY+30);
    endShape();

    beginShape(); //right ear squishy
    curveVertex(186, 171);
    curveVertex(146, 138);
    curveVertex(208, 128);
    curveVertex(186, 171);
    curveVertex(146, 138);
    endShape();

    fill(255, 200, 200); // ear insides
    triangle(178, 167, 152, 145, 195, 138); //left inside ear
    triangle(100, 141, 72, 153, 82, 116); //right inside ear

// FACE
    noStroke();
    fill(220, 220, 200); //cat face
    ellipse(120, height/2, 155, 140);

    fill(200, 170, 170); //left eye spot
    ellipse(width/2 - 110, height/2, 70, 60);

    fill(100); //eyes         
    ellipse(width/2 - 100, height/2 + 10, 20, 15); //left eye
    ellipse(width/2 - 40, height/2, 20, 15); //right eye

    strokeWeight(2);
    fill(255, 150, 150); //nose
    ellipse(width/2 -65, height/2 + 10, 10, 8);
    
    var mBottomY = height/2 + 40; //base y position of bottom corners of mouth
    var mouthX = width/2 -50;
    fill(255, 180, 180); //mouth
    //triangle(mouthX, mBottomY -5, mouthX -30, mBottomY, mouthX -15, mBottomY - 20);

    push();
    stroke(255, 169, 163);
    strokeWeight(2);
    beginShape(); //mouth squishy
    curveVertex(mouthX, mBottomY -5);
    curveVertex(mouthX -30, mBottomY);
    curveVertex(mouthX -15, mBottomY -20);
    curveVertex(mouthX, mBottomY -5);
    curveVertex(mouthX -30, mBottomY);
    endShape();
    pop();

// DROOL
    fill(155, 187, 201);//bit of drool on cat's mouth
    ellipse(width/2 - 50, 235, 10, 10) 
    fill(195, 229, 244);//highlight for drool on mouth for more noticeablility
    ellipse(width/2 - 48, 232, 5, 5) 
    fill(155, 187, 201);//the cat's dripping drool from its mouth
    ellipse(width/2 - 50, secondsDroolChunky, 10, 40);
    fill(195, 229, 244); //dripping drool highlight
    ellipse(width/2 - 48, secondsDroolChunky-4, 5, 25);
}

Like my last project, I started off by doodling whatever came to mind. I doodled a cat, and then I added it drooling, and then I got the idea to have it drooling while looking at fish. At first I thought I’d have the cat’s drool drop by the second, the tail move by the minute, and a pile of fish grow with each passing hour. I did end up matching the drool to seconds and the tail to minutes, but I made a glowing moon sink down the sky for the passing hours.

I had fun trying to make this abstract clock cute and whimsical, but it took me a long time to understand what I needed to code and how to execute it. I popped a few screenshots of my project into Illustrator to help plot some points for triangles- like the ears and mouth. This was also my first time using curveVertex, and I also played with transparency. I feel like my code could have made use of for loops, but I wasn’t sure where to insert them. In the end, I was finally able to make it cute enough for my tastes.

(Also, when the cat’s drool gets close enough to the fish’s eye, it looks as though the fish is crying. This was intentional.)

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.