Author: Grace

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.

 

sketch

//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); 
    rotate(radians(300));
    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); 
    rotate(radians(300));
    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) {
        rotate(radians(-10 + angle));
        drawBranch(depth, len, color  + 50);
        rotate(radians(20));
        drawBranch(depth, len, color + 50);
    }
}

function drawTree1(depth, len, color) {
    if (depth < 8) {
        rotate(radians(-10 + angle1));
        drawBranch1(depth, len, color  + 50);
        rotate(radians(20));
        drawBranch1(depth, len, color + 50);
    }
}

function drawTree2(depth, len) {
    if (depth < 8) {
        rotate(radians(-10 + angle2));
        drawBranch2(depth, len);
        rotate(radians(20));
        drawBranch2(depth, len);
    }
}

function drawTree3(depth, len) {
    if (depth < 8) {
        rotate(radians(-10 + angle3));
        drawBranch3(depth, len);
        rotate(radians(20));
        drawBranch3(depth, len);
    }
}



function Sky(x, y, w, h) {
    //Draws the gradient sky
    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.

50122107001__65843618-7ba3-4f87-a71e-73f43ddd34f9

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)

screen-shot-2016-11-18-at-9-19-06-pm

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)

screen-shot-2016-11-18-at-9-17-14-pm

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….

screen-shot-2016-11-10-at-11-00-56-pmscreen-shot-2016-11-10-at-11-15-21-pmscreen-shot-2016-11-10-at-11-14-01-pm‘

Click and Dragg mouse to fill.

Click any key to send to back of drawing.

sketch

//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;}
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;}

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

Amanda Ghassaei on vimeo

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.

screen-shot-2016-11-04-at-12-02-34-am
Phonelovesyoutoo is an immersive video matrix that captures my cellphone usage over a period of one month

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.

screen-shot-2016-11-04-at-12-04-07-am
Over 1000 videos from the phone’s front facing camera are tiled across 3 walls

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.

screen-shot-2016-11-03-at-10-59-10-pm

img_2277

sketch

//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();
    addNewCloudsWithSomeRandomProbability();
    

    airplaneInterior();
    
    
}


function Sky(x, y, w, h) {
    //Draws the gradient sky
    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
}


function addNewCloudsWithSomeRandomProbability() {
    
    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,
                breadth: random(100, 300),
                speed: -random(1,3),
                nFloors: round(random(2,10)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

 

 

 

Grace Cha – Project 09- Portrait

sketc

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

var underlyingImage;

function preload() {
    var myImageURL = "http://i.imgur.com/ntVrOBL.jpg?1";
    underlyingImage = loadImage(myImageURL);
}

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


    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.

Dr. Woohoo on vimeo

 

 

Grace Cha-Looking Outwards-08

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.