## Grace Cha – Final Project

For my final project, I created a looping coral reef animation that shows different colors and suttle delights of underwater imagination.  I focused on the use of simple shapes , use of fun, moving recursion seweed trees, different opacities, and similar color pallete.

There are many things moving: 4 moving recusion trees, fish, and bubbles.

``````//Grace Cha
//section C
//heajinc@andrew.cmu.edu
//FINAL PROJECT

var swordFish = [];
var Bubbless = [];
var SCALE = 0.01;

function setup() {
createCanvas(600, 600);
for (var i=0; i<5; i++) {                        //initial placement of swordFishs
var swordFishX = random(width);
var swordFishY = random(100, 500);
swordFish[i] = makeswordFish(swordFishX, swordFishY);
}

for (var i=0; i<3; i++) {                      //initial placement of Bubbless
var BubblesX = random(width);
var BubblesY = random(height);
Bubbless[i] = makeBubbless(BubblesX, BubblesY);
}
//frameRate(10)
}

function draw() {

angle = 10 * (noise(millis() / 2000) - 0.5);
angle1 = 20 * (noise(millis() / 3000) - 0.5);
angle2 = 30 * (noise(millis() / 5000) - 0.5);
angle3 = 10 * (noise(millis() / 7000) - 0.5);

background("#CAE0F4");
push();
fill("#E34E54")
rect(0, 0, width, height/3);
pop();

Sky(0, 0, width, height);

showBubbless();
deleteBubbless();
makeNewBubbless();

push();
translate(400,height + 170,100);
drawBranch3(0, 80);
pop();

beginShape();
fill("#5FAEB6");
curveVertex(240, 521);
curveVertex(240, 521);
curveVertex(305, 450);
curveVertex(400, 416);
curveVertex(502, 559);
curveVertex(468, 620);
curveVertex(263, 620);
curveVertex(240, 521);
curveVertex(240, 521);
endShape();

push();
translate(130,height + 50);
drawBranch2(0, 50);
pop();

beginShape();
noStroke();
fill("#51A0AA");
curveVertex(0,359);
curveVertex(0,359);
curveVertex(143,452);
curveVertex(552,614);
curveVertex(0, height);
curveVertex(0, height);
endShape();

beginShape();
fill("#368692");
curveVertex(0, 390);
curveVertex(0,390);
curveVertex(119,488);
curveVertex(346, 604);
curveVertex(0, height);
curveVertex(0, height);
endShape();

showswordFish();
deleteswordFish();
makeNewswordFish();

push();
translate(200, height + 50);
drawBranch(0, 20,90);
pop();

beginShape();
fill("#0D5D6D");
curveVertex(0,600);
curveVertex(0,600);
curveVertex(0, 219);
curveVertex(34,238);
curveVertex(96, 188);
curveVertex(109, 201);
curveVertex(54, 289);
curveVertex(66, 368);
curveVertex(127, 501);
curveVertex(114, 536);
curveVertex(121, 564);
curveVertex(148, 527);
curveVertex( 166, 600);
curveVertex(0,600);
curveVertex(0,600);
endShape();

push();
translate(470,height -35,100);
drawBranch1(0, 10,100);
pop();

beginShape();
fill("#0D5D6D");
curveVertex(397 +68,0);
curveVertex(397+68,0);
curveVertex(388+68,14);
curveVertex(403+68, 47);
curveVertex(383+68, 79);
curveVertex(403+68, 147);
curveVertex(443+68, 131);
curveVertex(474+68, 176);
curveVertex(449+68, 190);
curveVertex(513+68, 318);
curveVertex(481+68, 411);
curveVertex(502+68, 620);
curveVertex(551+68, 620);
curveVertex(535+68, -9);
curveVertex(397+68,0);
curveVertex(397+68,0);
endShape();

}

function drawBranch(depth, len, color) {
stroke(75, 194, color % 255);

strokeWeight(1);
fill("#11153D");
ellipse(70, 70,-len/4, -len/3);

push();
translate(0, -len);
drawTree(depth + 1, len, color);
pop();
}

function drawBranch1(depth, len, color) {
stroke(0, 81, color % 255, 60);
fill(227,78,84, 40);
ellipse(0, 50,-len , -len * 2);
ellipse(50, 50,-len , -len * 2);
push();
translate(0, -len);
drawTree1(depth + 1, len, color);
pop();
}

function drawBranch2(depth, len) {

stroke(76,90,39, 60);
fill(207,243,90,50);
ellipse(50, 0,-len/5, -len)
push();
translate(0, -len);
drawTree2(depth + 1, len);
pop();
}

function drawBranch3(depth, len, color) {
stroke(13, 93, 109, 80);
strokeWeight(1);
fill(13, 93, 109, 80);
ellipse(100, 100,-len/12, -len/12)
line(30, 0, 30, -len);
push();
translate(0, -len);
drawTree3(depth + 1, len, color);
pop();
}

function drawTree(depth, len, color) {
if (depth < 8) {
drawBranch(depth, len, color  + 50);
drawBranch(depth, len, color + 50);
}
}

function drawTree1(depth, len, color) {
if (depth < 8) {
drawBranch1(depth, len, color  + 50);
drawBranch1(depth, len, color + 50);
}
}

function drawTree2(depth, len) {
if (depth < 8) {
drawBranch2(depth, len);
drawBranch2(depth, len);
}
}

function drawTree3(depth, len) {
if (depth < 8) {
drawBranch3(depth, len);
drawBranch3(depth, len);
}
}

function Sky(x, y, w, h) {
var c1, c2;
// c1 = color("#8443FE");
// c2 = color("#03FCCA");
c1 = color("#4BE1C0");
c2 = color("#237B8E");
for (var i = y; i <= y + h; i++) {
var inter = map(i, y, y + h, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(x, i, x + w, i);
}
}

function showswordFish() {                                      //this makes the swordFish move left
for(var i=0; i<swordFish.length; i++) {
swordFish[i].fly();
swordFish[i].display();
}
}

function deleteswordFish() {                                    //deletes swordFish that disappear from sight
var swordFishToKeep = [];
for (var i=0; i< swordFish.length; i++) {
if(swordFish[i].x <0) {
swordFishToKeep.push(swordFish[i]);
}
}
}

function makeNewswordFish() {                                   //creates more swordFish coming from left
var newswordFishLiklihood =0.03
if (random(0,1) < newswordFishLiklihood) {
swordFish.push(makeswordFish(650, random(100, 500)));
}
}
function swordFishFly() {
this.x += this.speed;
}

function swordFishDisplay() {                       //makes graphic elements of the swordFish

push();
translate(this.x, this.y);
stroke(243, 239, 244);
// strokeWeight(1);
// fill(255, 220, 98);

strokeWeight(3);
fill("#F9F7CB");
stroke("#F9F7CB");  //makes swordswordFish nose
line(12,25,29,25);

fill("#83CFC8");
stroke("#83CFC8");

triangle(80,26,86,12,86,38);
fill("#83CFC8");
stroke("#83CFC8");
triangle(63,31,72,27,73,35);

beginShape();
curveVertex(41,20);
curveVertex(41,20);
curveVertex(41,11);
curveVertex(48,9);
curveVertex(54,10);
curveVertex(54, 14);
curveVertex(58, 12);
curveVertex(59, 17);
curveVertex(64, 14);
curveVertex(64, 22);
curveVertex(41,20);
curveVertex(41,20);
endShape();

beginShape();
fill("#D3CD24");
stroke("#D3CD24");
curveVertex(29,25);
curveVertex(29,25);
curveVertex(46,17);
curveVertex(83,26);
curveVertex(45,36);
curveVertex(29,25);
curveVertex(29,25);

endShape();

beginShape();
fill("#F9F7CB");
stroke("#F9F7CB");
curveVertex(46,17);
curveVertex(46,17);
curveVertex(46,25);
curveVertex(83,26);
curveVertex(46,17);
curveVertex(46,17);
endShape();

fill(0);
noStroke();
stroke(0);
ellipse(41,25,5,5);           //makes eyes
pop();
}

function makeswordFish(birthLocationX, birthLocationY) {
var swordFish = {x : birthLocationX,
y : birthLocationY,
speed : -random(2, 4),
fly : swordFishFly,
display : swordFishDisplay}
return swordFish;
}

function showBubbless() {                                      //this makes the Bubbless move up
for(var i=0; i<Bubbless.length; i++) {
Bubbless[i].move();
Bubbless[i].display();
}
}

function deleteBubbless() {                                    //deletes Bubbless that disappear from sight
var BubblessToKeep = [];
for (var i=0; i< Bubbless.length; i++) {
if(Bubbless[i].y >600) {
BubblessToKeep.push(Bubbless[i]);
}
}
}

function makeNewBubbless() {                                   //creates more Bubbless coming down
var newBubblesLiklihood =0.05
if (random(0,1) < newBubblesLiklihood) {
Bubbless.push(makeBubbless(random(width), 600));
}
}

function BubblesMove() {                                      //sets the move property of Ballons
this.y += this.speed;
}

function BubblesDisplay() {
push();
translate(this.x, this.y);
fill(255,50);
ellipse(0, 0, 10, 10);
pop();

}

function makeBubbless(birthLocationX, birthLocationY) {
var Bubbles = {x : birthLocationX,
y : birthLocationY,
speed : -random(1, 6),
move : BubblesMove,
display : BubblesDisplay}
return Bubbles;
}

``````

## Grace Cha – Project 12- Proposal

I grew up near a beach, and I really enjoy the ocean and the peacefulness of the waves, but I’m also really interested by the things under the water.  For this final project,  I want to create a looping coral reef that shows the different colors and delight of a underwater land that we are not exposed to.

I was to create a delightful moving animation with the use of simple shapes and forms.  I also want to limit myself to a few colors to avoid getting too complicated.

## Grace Cha-Looking Outwards-12

For my Final Project, I want to create a generative landscape that loops in a entertaining and delightful way perhaps some interactive features with the mouse.

Two projects that I got inspiration from is from Leander and Holger’s projects.

Leander ‘s project Basecamp (2014)

Leander’s Basecamp project is an ongoing loop of pyramids that show stripes of colors as the background changes.  I really like the very predictable nature of the colors and changes. I wish there was an element of people walking around to indicate that it was a Basecamp, but I do enjoy the simplicity of the program.

Holger Lippmann’s Project NoiseScape 4 (2016)

Holger’s NoiseScape is a rework of an ongoing script.  It morphs slowly into a kind of “romantic” landscape painting.  The technical basics are still very simple; rows of ellipses with some 2d noise and different color arrays.  I admire the simplicity and spontaneity of different random lines as the more structure loop of Leander’s Basecamp.

I hope to incorporate simple colors such at Leander’s Basecamp, while adding an element of spontaneity.

## Grace Cha – Project 11- Composition

Playing with “Paint” : a childhood memory….

Click and Dragg mouse to fill.

Click any key to send to back of drawing.

``````//Grace Cha
//section C
//heajinc
//Project 11 -Turtle Graphics

function setup() {
createCanvas(600, 600);
//background(255);

var step = 7; //forward

var goldenAngle = 137.507764;

//hexagon has 6 sides
var hexNumberofSide = 9;

//each side has a degree of 60 degrees
var hexDegrees = 10;

//Draw 400 little hexagons
var numHex = 500;

//each side has a length of 5 pixels.
var hexSideLength = 20;

var turtle1 = makeTurtle(width/2  , height/2 );
for( i = 0; i < numHex; i ++){ //loop for 400 hexagons
turtle1.setColor(color(i * 255/600, (i/goldenAngle), goldenAngle));
turtle1.setWeight(5);
turtle1.penDown();

for(j = 0; j < hexNumberofSide; j ++){ //draw an individual hexagon
step+=1;
turtle1.forward(150 + step); //number of sides
turtle1.left(40); //number of degrees

}

//lift the pen
turtle1.penUp();

//These control the amount of spreading between each hexagon

//turn each hexagon a golden angle
turtle1.left(goldenAngle);

//the space between each hexagon
turtle1.forward(i + 30 );

//the forward
turtle1.right(200);

turtle1.forward(10); //controls the amount of
}

}

function draw() {

if(mouseIsPressed){
noStroke();
fill("#6C028A");
ellipse(mouseX, mouseY, 80,80)
}

if(keyIsPressed){
var step = 7; //forward

var goldenAngle = 137.507764;

//hexagon has 6 sides
var hexNumberofSide = 9;

//each side has a degree of 60 degrees
var hexDegrees = 10;

//Draw 400 little hexagons
var numHex = 500;

//each side has a length of 5 pixels.
var hexSideLength = 20;

var turtle1 = makeTurtle(width/2  , height/2 );
for( i = 0; i < numHex; i ++){ //loop for 400 hexagons
turtle1.setColor(color(i * 255/600, (i/goldenAngle), goldenAngle));
turtle1.setWeight(5);
turtle1.penDown();

for(j = 0; j < hexNumberofSide; j ++){ //draw an individual hexagon
step+=1;
turtle1.forward(150 + step); //number of sides
turtle1.left(40); //number of degrees

}

//lift the pen
turtle1.penUp();

//These control the amount of spreading between each hexagon

//turn each hexagon a golden angle
turtle1.left(goldenAngle);

//the space between each hexagon
turtle1.forward(i + 30 );

//the forward
turtle1.right(200);

turtle1.forward(10); //controls the amount of
}
}

}

function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
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;}``````

When I was little my first encounter with digital drawing was with “Paint” on a windows computer, I always tried to fill in the white spaces of my drawing based on an outline.  In this stimulation, I wanted to recreate this childhood memory with the added touch of being able to see the process by “sending back the painted section to see the “holes” that I missed.

## Grace Cha-Looking Outwards-11

While looking at pages of really amazing videos, I was drawn to Amanda Ghasseai’s Ambient Synthesis designed 4 years ago, which is a interactive sound sculpture that responds to light stimuli to construct a unique, audiovisual interpretation of its environment.  From the vimeo video, the wide range of light intensity seems to affect the sound in different ways.  The data from the surroundings is interpreted by aMaxMSP application to produce abstract symmetrical patterns.

I enjoy the organic nature of this concept as it uses its surroundings to make sounds.  This is a interetsing mixture of madmade computer music controlled by nature, and I think it does a good job smoothly integrating both aspects into a coheretn piece.

I also have to point out Amanda’s videotography and the wide range of landscapes she chose to showcase her work to gather different light.  This really helped me to immidietly understand what was going on.

## Grace Cha-Looking Outwards-10

Kate Hollenbach describes herself as a programer and media artists, and she focuses on interactive systems and new technologies and physical space. She holds a BS in Computer Science & Engineering from MIT and is currently a graduate student at UCLA Design Media Arts and is the Director of Design and Computation at Oblong Industries.

Phonelovesyoutoo

Kate explores an interesting and very relevant topic in her Phonelovesyoutoo project.  Exploring the human relationship with the smartphone, she describes it as an “intimate display in a public space” which is exactly what this gallery wall describes–three walls of chaning video clips of Kate. Though the project might look ordinary, I appreciate the point she is making about how there exists an emotional connection between the user and the device no matter how “robotic” and it is.

She developed an android application to automatically record video from the front and back of the camera every time the phone was in use.

Vimeo

## Grace Cha – Project 10- Landscape

I’ve always thought that looking outside the widow on an airplane flight was a special moment of peace and aww. I wanted to capture this feeling with the use of soft plum colors, circular clouds and a starry night.  My process consisted of planning out the star nights to look as realistic as possible by picking really small points and adding a natural looking gradient to the back.

``````//Grace Cha
//Section C
//heajinc
//Project 10

var stars = [];
var clouds = [];

function setup() {
createCanvas(600,400);
for (var s = 0; s < 3000; s++) {
stars.push(new Star());
}

// create an initial collection of clouds
for (var i = 0; i < 10; i++){
var rx = random(width);
clouds[i] = makeCloud(rx);

}
frameRate(45);
}

function draw() {

Sky(0, 0, width, height);
DrawStar();

updateAndDisplayClouds();
removeCloudsThatHaveSlippedOutOfView();

airplaneInterior();

}

function Sky(x, y, w, h) {
var c1, c2;

c1 = color("#7B75C3");
c2 = color("#F8B09A");
for (var i = y; i <= y + h; i++) {
var inter = map(i, y, y + h, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(x, i, x + w, i);

}
}

function Star() {
//Draws the randomized stars

this.x = random(width);
this.y = random(height);
this.diameter = 0.005;
this.di = 0.005;
this.speed = 0.05;//virtually very small speed
this.border = random(0, 0.5);
this.vol = 0;

this.move = function() {
this.x += random(-this.speed, this.speed + this.vol);
this.di = this.di +this.vol;

var prob = random(0, 1);
if (this.di <= 0.16) {
this.vol = 0.001;
}else if(this.di>=0.16){
this.vol=0;
}

}

this.display = function() {
strokeWeight(this.border);
stroke(255);
fill(255);
ellipse(this.x, this.y,  this.di,  this.di);

}
}

function DrawStar() {
for (var i = 0; i < stars.length; i++) {
stars[i].move();
stars[i].display();
}
}

function airplaneInterior(){

beginShape();
noStroke();
fill("#5F4B92");
vertex(257,133);
vertex(283,110);
vertex(318,133);
endShape();

beginShape();
noStroke();
fill("#5F4B92");
vertex(158,171);
vertex(200,137);
vertex(252,166);
endShape();

//wing
beginShape();
noStroke();
fill("#715E92");
vertex(-30,276);
vertex(0,162);
vertex(335,92);
vertex(377,38);
vertex(362, 93);
vertex(126,183);
endShape();

//Red Airplane sign
beginShape();
fill("#A2567D");
vertex(345, 89);
vertex(373,54);
vertex(363,89);
endShape();

//Window
push();
strokeWeight(10);
fill("#303053");
stroke("#9E8DB3")
beginShape();
curveVertex(-5,146);
curveVertex(-5,146);
curveVertex(150,339);
curveVertex(369,392);
curveVertex(544,297);
curveVertex(600,200);
curveVertex(607,183);
curveVertex(600,400);
curveVertex(0,600);
curveVertex(0,600);
endShape();
pop();
push();

//inside Window panel
beginShape();
fill("#6B659C");
curveVertex(0,218);
curveVertex(0,218);
curveVertex(101,338);
curveVertex(316,460);
curveVertex(66,425);
curveVertex(0,365);
curveVertex(0,365);
endShape();
pop();

}

function updateAndDisplayClouds(){
for (var i = 0; i < clouds.length; i++){
clouds[i].move();
clouds[i].display();
}
}

function removeCloudsThatHaveSlippedOutOfView(){

var cloudsToKeep = [];
for (var i = 0; i < clouds.length; i++){
if (clouds[i].x + clouds[i].breadth > 0) {
cloudsToKeep.push(clouds[i]);
}
}
clouds = cloudsToKeep; // remember the surviving clouds
}

var newBuildingLikelihood = 0.007;
if (random(0,1) < newBuildingLikelihood) {
clouds.push(makeCloud(width));
}
}

function buildingMove() {
this.x += this.speed;
}

function buildingDisplay() {
var floorHeight = 10;
var bHeight = this.nFloors * floorHeight;

fill(255,90);
noStroke();
push();
translate(this.x, height - 40);
ellipse(120, -bHeight + 30, this.breadth, bHeight/2);
pop();

push();
fill(255,20)
translate(this.x, height - 40);
ellipse(30, - bHeight -200, this.breadth, bHeight);
pop();
}

function makeCloud(birthLocationX) {
var bldg = {x: birthLocationX,
speed: -random(1,3),
nFloors: round(random(2,10)),
move: buildingMove,
display: buildingDisplay}
return bldg;
}
``````

## Grace Cha – Project 09- Portrait

``````//Grace Cha
//Section C
//heajinc
//Project 9

var underlyingImage;

var myImageURL = "http://i.imgur.com/ntVrOBL.jpg?1";
}

function setup() {
createCanvas(400, 410);
background(252);

vertX = random(0, width); //Picks a point randomly on top
vertY = 0; //at the top
horizX = 0; //Starts randomly
horizY = random(0, height);//at the left side

}

function draw() {

verticalGrace();
horizontalC();
}
function verticalGrace() {
var ix = constrain(floor(vertX), 0, width + 100); //set max and min of ix
var iy = constrain(floor(vertY), 0, height + 100); //set max and min of iy
var theColorAtLocationXY = underlyingImage.get(ix, iy); //Obtains pixel

fill(theColorAtLocationXY); //Fill with pixel color at ix, iy

textSize(10);

noStroke();
text("CHA", vertX, vertY);

vertY += 10; // move at a rate of 10

if (vertY > height) { //If the GRACE hit bottom of canvas
vertY = 0; 	//resets the image back to the top
vertX = random(0, width ); //Relocate the x-coordinate of the rect
}
}

function horizontalC() {
var ix = constrain(floor(vertX), 0, width-1); //set max and min of ix
var iy = constrain(floor(vertY), 0, height-1); //set max and min of iy
var theColorAtLocationXY = underlyingImage.get(ix, iy); //Obtains pixel

fill(theColorAtLocationXY);
textSize(10);
textStyle(BOLD);
text("C",horizX, horizY );

horizX += 10;
if (horizX > width) {
horizX = 0;
horizY = random(0, height);
}
}

``````

I played around with the idea of spelling my name out to display my face.  I tried using “GRACE” but the word was too long that it distorted the image, so I used my last name “CHA”.  To add contrast to the longer word “CHA” I decided to use one letter “C” to represent the horizontal rows.

## Grace Cha-Looking Outwards-09

Turbulence: Watercolor + Magic

Peer’s Looking Outward Post

Going back to Looking Outwards Week 2’s Generative Art, I was drawn to Dr. Woohoo’s Turbulence which combines the use of watercolor (a spontaneous medium) and a robotic arm structure (a more mechanical precise medium) to create a piece that is both spontaneous and mechanical.  I applaud Dr. Woohoo’s approach to exploring the relationship between a robot and artist to display the strengths of each. This approach pushes the boundaries of both areas as it opens new doors to creative process that combine emerging technology and traditional forms of art.  I agree with vtavarez@andrew.cmu.edu that this “increases the amount of possibilities for which these mediums could be used.”  There seems to have been a lot of thinking behind the location of color, hexagonal size, angle of lines, and the overall communication between code and the robot.  With many factors, it’s impressive that he was able to choose and carry out his plan.

# James George & Jonathan Minard

James George is an artist using code to discover creative potential in emerging technology, and he is based in Brooklyn, New York. .  He has been using computational photography to display an interactive storytelling.  He has worked with Microsoft Research, Grank-Ratchye Studio for Creative Inquiry at CMU, and Yamaguchi Center for Arts and Media in Japan.

Jonathan Minard  is a new-media documentarian who approaches technological through an anthropological lens.  He is also based in Brooklyn, New York.  He has worked at the Carnegie Mellon Robotics Institute as a filmmaker competing in the Google Lunar X Prize to send a robot to the Moon. (His website has expired)

What I found interesting about James and Jonathan’s work on Clouds was their perspective on using code to make an interactive documentary of 40 + influential coders.    I admire the way that they merge both code hybrid and dynamic 3D graphics  to visualize their ideas and the connections among them.  Both of them mentioned that they enjoy storytelling and I was fascinated by the way that users could parse through a documentary film by using their mouse to click on different parts of the screen.

During their presentation they actually went through the interactive documentary on the spot.  I could see that their would be many different ways a viewer could navigate the story.  I like how they connect the act of storytelling and interactiveness to the film.  The presentation was very natural and informative, and their pacing of information telling was also good.

Eyeo 2014

source

James George and Jonathan Minard talk about computational documentary exploring art and code.