Month: September 2017

dnam-Project02-Variable-Face

dnam-Project-02-Variable-Face

// Doo Won Nam
// 15-104 :: 1 Section B
// dnam@andrew.cmu.edu
// Project-02-Variable-Face

var faceWidth = 258
var faceHeight = 216
var eyebrowWidth = 78
var eyebrowHeight = 13
var maskHeight = 63
var mouthHeight = 24
var eyeWidth = 43
var eyeHeight = 30
var noseWeight = 18
var noseHeight = 74
var toothWidth = 19
var toothHeight = 14
var x = 640;
var dir = 1;
var speed = 10;

function setup() {
    createCanvas(640, 489);
}

function draw() {
  background(200, 147, 188);
  noStroke();
//hat
  fill(142, 79, 46);
  rect(144, 111, 362, 43);
  ellipse(325, 95, 340, 80);
//face
  fill(209, 158, 131);
  rect(190, 155, faceWidth, faceHeight);
  fill(248, 173, 133);
  rect(200, 155, faceWidth - 20, faceHeight - 10);
//eyebrows left then right
  fill("black");
  rect(209, 153, eyebrowWidth, eyebrowHeight);
  rect(335, 153, eyebrowWidth, eyebrowHeight);
//mask
  fill(95, 83, 76);
  rect(190, 166, faceWidth, maskHeight);
//mouth
  fill(185, 79, 79);
  rect(270, 318, 130, mouthHeight);
  ellipse(335, 317, 130, 24);
//teeth
  fill("white");
  rect(300, 305, toothWidth, toothHeight);

  rect(330, 305, toothWidth, toothHeight);
//left eye
  fill("white");
  ellipse(248, 190, eyeWidth, eyeHeight);
  fill("black");
  ellipse(245, 190, eyeWidth - 24, eyeHeight - 12);
  fill("white");
  ellipse(240, 185, eyeWidth - 30, eyeHeight - 20);
//right eye
  fill("white");
  ellipse(366, 197, eyeWidth * 1.5, eyeHeight * 1.5);
  fill(0);
  ellipse(363, 197, eyeWidth * 1.5 - 32, eyeHeight * 1.5 - 20);
  fill("white");
  ellipse(358, 192, eyeWidth * 1.5 - 45, eyeHeight * 1.5 - 30);
//nose
  fill(209, 158, 131);
  rect(285, 212, noseWeight, noseHeight);
  ellipse(284, 276, noseWeight + 2, noseHeight - 54);

}
//random change in width/height everytime mouse is pressed
function mousePressed() {
      eyebrowWidth = random(50, 78);
      eyebrowHeight = random(1, 30);
      maskHeight = random(20, 80);
      mouthHeight = random(24, 50);
      eyeWidth = random(23, 63);
      eyeHeight = random(20, 40);
      noseWeight = random(9, 21);
      noseHeight = random(50, 90);
      toothWidth = random(15, 24);
      toothHeight = random(10, 20);
}

Basing the face on classic cartoon image of a thief (with the line mask) and toast, I wanted to use the mousePress function to make it almost seem like the thief is surprised after being caught by the police. Using variables to make the placements and size of the facial parts easier, I was able to produce an efficient code for a interactive face.

mjnewman Project-02 Variable Faces, Section A

project-02-variable

//Meredith Newman
//Section A
//mjnewman@andrew.cmu.edu
//Project-02-Variable Face

//snout components
var nostril = 50;
var snoutWidth = 200;
var snoutHeight = 150;

//eye components
var eyeSize = 50;
var white = 70;
var eyeDist = 300;

//ear components
var earX = 90;
var earY = 35;

//colors
var colorR = 232;
var colorG = 103;
var colorB = 183;


function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(colorR, colorG, colorB);
    noStroke();

    //snout 
    fill(colorB, colorG, colorR);
    ellipse(width / 2, height * 0.60, snoutWidth,  snoutHeight);

    //nose holes
    var noseLX = width / 2 - snoutWidth * 0.25;
    var noseRX = width / 2 + snoutWidth * 0.25;
    fill(colorG, colorR, colorG);
    ellipse(noseLX, height * 0.60, nostril, nostril);
    ellipse(noseRX, height * 0.60, nostril, nostril);

    //whites behind eyes
    var eyeLX = width / 2 - eyeDist / 2;
    var eyeRX = width / 2 + eyeDist / 2;
    fill(255);
    ellipse(eyeLX, height * 0.30, white, white);
    ellipse(eyeRX, height * 0.30, white, white);

    //eyes
    var eyeLX = width / 2 - eyeDist / 2;
    var eyeRX = width / 2 + eyeDist / 2;
    fill(colorG, colorR, colorG);
    ellipse(eyeLX, height * 0.30, eyeSize, eyeSize);
    ellipse(eyeRX, height * 0.30, eyeSize, eyeSize);

    //ears
    fill(colorR - 30, colorG - 30, colorB - 30);
    //left
    triangle(earX, earY, earX + 60, earY + 40, earX - 20, earY + 80);
    //right
    triangle(earX + 460, earY, earX + 400, earY + 40, earX + 480, earY + 80);

    //oink text
    textSize(60);
    text("oink", 50, 450);
    fill(0, 102, 153);
}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    colorR = random(1,255);
    colorG = random(1,255);
    colorB = random(1,255);
    eyeSize = random(30,50);
    eyeDist = random(250,300);
    earX = random(90,110)
    earY = random(25,35);
    snoutWidth = random(75, 150);
    snoutHeight = random(75, 100);
    nostril = random(10, 30);
}

 

For the project this week, I could definitely tell the prompts are becoming much more complicated. The random functions required a lot more trial and error than the previous assignments. But the recurrent theme across the two projects is that it’s hard to determine what to do creatively. I want it to be interesting enough for me to make as well as for people to use, but still keep in mind the constraints I have as a novice coder.

I chose to approach this project with the principle of gestalt in mind. I wanted to try to use as few elements as possible to suggest the face of a pig. I drew inspiration from some sketches Henri Matisse did that show the general visual of a face (below).

sunmink-project2-VariableFace

sketch


//Sun Min (Chloe) Kim 
//Section E
//sunmink@andrew.cmu.edu
//Project-02

var eyeSize = 20; 
var faceWidth = 120; 
var faceHeight = 140; 
var noseSize = 15; 
var mouthSize = 30; 
var background1 = (203); 
var background2 = (228);
var background3 = (248); 

function setup() {
    createCanvas(480, 640);
    
}

function draw() {
    background(background1, background2, background3);
    //face
    noStroke(0); 
    fill(246, 217, 188);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.3; 
    var eyeRX = width / 2 + faceWidth * 0.3; 

    //eyes
    fill(255, 255, 255); 
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //pupil 
    fill(64, 60, 58); 
    ellipse(eyeLX, height / 2, eyeSize / 2.5, eyeSize / 2.5);
    ellipse(eyeRX, height / 2, eyeSize / 2.5, eyeSize / 2.5);

    //nose 
    stroke(64, 60, 58);
    strokeWeight(1);
    arc(width / 2, height / 1.9, noseSize, noseSize, 180, 11.7, PI);

    //mouth 
    fill(217, 134, 138);
    noStroke(0);
    ellipse(width / 2, height / 2 + 40, mouthSize * 1.2, mouthSize / 2);
    


}

    function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 100 and 150.
    faceWidth = random(100, 150);
    faceHeight = random(120, 150);
    eyeSize = random(10, 30);
    noseSize = random(20, 10); 
    mouthSize = random(30, 10); 
    background1 = random(0, 255); 
    background2 = random(0, 255); 
    background3 = random(0, 255); 

}

For this project, I chose a simple face structure to emphasize the change in background color and change in the elements of the face when “mousePressed” function is activated. It was interesting to use this new function and create an interactive graphics for the first time, and I look forward to experimenting more variables to build more complex designs in the future.

 

hqq-secE-project02-variable-faces

hamza

//hamza qureshi
//section e
//project 02
//hqq@andrew.cmu.edu

//here's carl, y'all!

//background color variables
var R_bg = 20;
var G_bg = 225;
var B_bg = 255;
//arm variables
var y_armleft = 400;
var y_armright = 380;
//head variables
var width_head = 280;
var height_head = 90;
var color_head = 120;
//mouth variables
var width_mouth = 200;
var height_mouth = 40;
var color_mouth = 190;
var strokeColor_mouth = 235;
//eyes variables
var rad_eyes = 15;
var rad_pupil = 7;
var x_eye1 = 23

function setup(){
    createCanvas(640,480);
    rectMode(RADIUS);
    ellipseMode(RADIUS);
    angleMode(DEGREES);
}

function draw(){
    //background
    background(R_bg,G_bg,B_bg);
    //arms
    strokeWeight(20);
    stroke(0,0,color_head - 50);
    line(160,445,100,y_armleft + 5);
    stroke(0,0,color_head);
    line(160,440,100,y_armleft);
    line(485,440,545,y_armright);
    //body
    fill(0,0,color_head - 50);
    strokeWeight(0);
    rect(width/2-30,height/2+150,150,150,20);
    fill(210,180,180);
    stroke(0,0,color_head);
    strokeWeight(40);
    rect(width/2,height/2+150,150,150,20);
    //head
    strokeWeight(0);
    fill(0,0,color_head-50);
    rect(width/2-30,height/2+5,width_head+30,height_head+5,20);
    fill(0,0,color_head);
    rect(width/2,height/2,width_head,height_head,20);
    //mouth
    fill(color_mouth,20,86);
    strokeWeight(10);
    stroke(strokeColor_mouth,30,100);
    rect(width/2,height/2+40,width_mouth,height_mouth,20);
    if (width_head >= 0){
      width_mouth = width_head-20;
    }
    //eyes
    fill(255,255,255);
    strokeWeight(3);
    stroke(0,0,0);
    var left_eye = width/3-height_head*0.5
    var right_eye = left_eye + width/2
    ellipse(left_eye,height/2-30,rad_eyes,rad_eyes);
    ellipse(right_eye,height/2-30,rad_eyes,rad_eyes);
    fill(0,0,0);
    strokeWeight(0);
    ellipse(left_eye,height/2-30,rad_pupil,rad_pupil);
    ellipse(right_eye,height/2-30,rad_pupil,rad_pupil);
    if (rad_eyes >= 0){
      rad_eyes > rad_pupil
    }


}

function mousePressed(){
    R_bg = random(0,40);
    G_bg = random(200,245);
    B_bg = random(245,255);
    width_head = random(200,250);
    height_head = random(110,140);
    color_head = random(120,210);
    width_mouth = random(210,290);
    height_mouth = random(10,30);
    color_mouth = random(180,220);
    strokeColor_mouth = random(235,255);
    rad_eyes = random(10,20);
    rad_pupil = random(2,8);
    y_armleft = random(390,460);
    y_armright = random(390,460);



}

For my variable face project, I made Carl, a frantic little buddy who’s a bit nervous about Picture Day. The photographer keeps snapping photographs, and in each one, he expresses his anxiety by how agape his mouth his, h0w dilated his eyes are, and the way he waves his hands.

Ziningy1 – Section C – Looking Outwards – 02

Supercodex – Ryoji Ikeda

Japan’s leading electronic composer and visual artist Ryoji Ikeda has adopted a way to produce music using raw datas and mathematic models. Ikeda’s music is concerned primarily with sound in a variety of “raw” states, such as sine tones and noise, often using frequencies at the edges of the range of human hearing.  The Supercodex is live exhibition/performance by Ryoji Ikeda, which combines the auditory experience of his music with visual graphics that goes along with the music beats. I attend the Supercodex live performance last year in downtown Pittsburgh. The whole experience is 45 minutes, yet to me it does not seems to be intolerably long as I stand in the live room, listening to this “weird” highly electronic sound. However, it sounds less like music pieces that is fluent and harmonic, instead it was like some different frequency of noises composed meticulously together by the artist. The strong beat patterns and the fast changing black and white graphics brought me to a weird sensation state, where I become synchronize with the music and stop thinking about anything else. I am not sure whats the algorithm that Ikeda used to compose his music. I admired the aspect that Ikeda was able to integrate the mathematic precision and aesthetics into the world of music, and together with computed visuals he creates a incredible sensational experience for the viewers.

BrandonHyun-LookingOutwards-02

Marius Watz is an artist that uses generative software processes to create visual abstraction. Many of his digital artworks contain hard edged geometrical shapes and vivid colors. Some of his art works are in the public space and physical objects are produced through digital fabrication technology.

Project “UCracking” is a generative visual based on subdivision algorithms applied to 2D and 3D triangles. It was created in 2014 for Absolut Exchange show. In order to find the true beauty of his work, one needs to know the definition of Subdivision Algorithms.

 

The Subdivision is a technique in computer aided geometric design for the approximation of a smooth surface by a sequence of increasingly faceted polyhedra.

After knowing the definition of Subdivision it is astonishing how these shapes are created. However, this artwork could have been improved if the viewer can interact with the artwork itself. Giving movement to the artwork could have been more intriguing rather than being a static image. However, the artist definitely gave an intense feeling about hard edged geometrical shapes and vivid colors.

Since Marius Watz began his career by designing psychedelic computer renderings that could have influenced his work until today. He is also interested in dynamic geometric shape so he applies that to his work.

http://mariuswatz.com/

http://hakenberg.de/subdivision/subdivision.htm

http://mariuswatz.com/wp-content/uploads/2011/12/20110808-Artforum.com-critics-pick-Automatic-Writing.pdf

creyes1-Project-02-Variable-Face

creyes1 Project-02 Variable Faces

//Christopher Reyes
//Section D
//creyes1@andrew.cmu.edu
//Project-02 Variable Faces

var backgroundR = 255;
var backgroundG = 250;
var backgroundB = 221;
var modelNo = "24601";
var antennaHeight = 50;
var antennaWidth = 10;
var antennaColorR = 204;
var antennaColorG = 86;
var antennaColorB = 34;
var bodyWidth = 100;
var headWidth = 200;
var headHeight = 100;
var earWidth = 30
var earHeight = 50
var eyeWidth = 30;
var eyeHeight = 30;
var mouthWidth = headWidth*.75;


function setup() {

    createCanvas(480, 640);
    rectMode(CENTER);
    noStroke();

}

function draw() {

    background(backgroundR, backgroundG, backgroundB);

    //Creates a line of text with a randomized model number
    fill(119, 124, 130);
    textFont("Courier New", 16);
    textStyle(BOLD);
    text("Model No. " + modelNo, 25, 31);

    fill(220);

    //Antenna - draws a rectangle relative to head at a random length
    var antennaTop = height/2 - headHeight;
    var antennaHeight = headHeight*.75;
    push();
    rectMode(CORNER);
    rect(width/2 - antennaWidth/2, height/2 - headHeight,
         antennaWidth, antennaHeight);

    //Antenna Light - draws a circle on top of the antenna,
    //                with a randomly selected fill color
    fill(antennaColorR, antennaColorG, antennaColorB);
    ellipse(width/2, height/2 - headHeight, 50, 50);
    pop();

    fill(100, 104, 109); //Darker gray

    //Body - draws two overlapping rounded rectangles
    //       at a random size relative to the head
    push();
    rectMode(CORNER);
    rect(width/2 - bodyWidth/2, height/2 + headHeight*.75,
         bodyWidth, height/2, 20, 20, 20, 20);

    fill(119, 124, 130); //Lighter gray
    rect(width/2 - bodyWidth/2, height/2 + headHeight*.75,
         bodyWidth*.9, height/2, 20, 20, 20, 20);
    pop();

    //Head - draws two overlapping rounded rectangles at a random size
    fill(100, 104, 109);
    rect(width/2, height/2, headWidth, headHeight, 10, 10, 10, 10);

    push();
    rectMode(CORNER);
    fill(119, 124, 130);
    rect(width/2 - headWidth/2, height/2 - headHeight/2,
         headWidth*.95, headHeight, 10, 10, 10, 10);
    pop();

    //Ears - draws two rounded rectangles at a random size,
    //       relative to head
    var earLX = width/2 - headWidth*.65;
    var earRX = width/2 + headWidth*.65;
    fill(119, 124, 130);
    rect(earLX, height/2, earWidth, earHeight, 10, 10, 10, 10);
    fill(100, 104, 109);
    rect(earRX, height/2, earWidth, earHeight, 10, 10, 10, 10);

    //Eyes - draws two ellipses at a random size, position relative to head
    var eyeLX = width/2 - headWidth/4;
    var eyeRX = width/2 + headWidth/4;
    var eyeY = height/2 - headHeight/4;
    fill(240);
    ellipse(eyeLX, eyeY, eyeWidth, eyeHeight);
    ellipse(eyeRX, eyeY, eyeWidth, eyeHeight);

    //Mouth - draws a rounded rectangle at a random size,
    //        position relative to head
    var mouthY = height/2 + headHeight/4;
    var mouthHeight = headHeight*.15
    rect(width/2, mouthY, mouthWidth, mouthHeight, 20, 20, 20, 20);

}

//Generates a random string of 6 numbers to create a model number for each robot
function makeid() {

    var modelNo = "";
    var possible = "0123456789";

    for (var i = 0; i < 5; i++)
        modelNo += possible.charAt(Math.floor(Math.random() * possible.length));

    return modelNo;
//Credit: https://stackoverflow.com/a/1349426 - user csharptest.net

}

function mousePressed() {

    //Selects a random background color within certain parameters on mouse-click
    backgroundR = random(221, 255);
    backgroundG = random(221, 255);
    backgroundB = random(221, 255);

    modelNo = makeid(); //Creates a new model number

    antennaHeight = random(headHeight/2, headHeight*1.5);

    //Antenna Light Colors, generates a random color on mouse-click
    antennaColorR = random(0, 256);
    antennaColorG = random(0, 256);
    antennaColorB = random(0, 256);

    bodyWidth = random(headWidth/3, headWidth*2);

    headWidth = random(150, 250);
    headHeight = random(70, 200);

    earWidth = random(headWidth*.1, headWidth/4);
    earHeight = random(headHeight/4, headHeight*.75);

    eyeWidth = random(25, 60);
    eyeHeight = random(25, 60);

    mouthWidth = random(headWidth/4, headWidth*.75);

}

My previous project involved a lot of pixel-perfect arc alignments, so I wanted to just work with simple shapes this time around to really focus on the code. A lot of the process was trial-and-error, basing the rest of the body around the robot’s head. Additionally, most of the randomization is set to be a certain proportion relative to the head so that the randomized elements don’t get too out of control and start forming a gray blob instead of communicating a robot.

mjeong1-Project02-Variable Faces-SectionA

sketch

//Min Young Jeong
//Section A 9:30am
//mjeong1@andrew.cmu.edu
//Project-02-Variable Faces


var facewidth = 150;
var faceheight = 170;
var eyesize = 10;
var a = 100;
var b = 45;
var c = 74;
//color rgb
var earwidth = 50;
var earheight = 40;
var hairx = 200;
var hairy = 400;
//hair
var line = 2;
//eyes stroke weight
var beardlengthx = 0;
var beardlengthy = 0;
var bright = 0;
//background brightness


function setup() {
    createCanvas(640,480);
 }

function draw() {
	if (mouseIsPressed) {bright = 0;}
	background(bright);
	bright = bright + 1;
	//background

    noStroke();
    fill(a,b,c);
	quad(width/2,hairy,width/2+hairx,200,width/2+100,100,width/2-100,100);
	triangle(width/2-100,100,width/2-hairx,200,width/2,hairy);
	//hair

    fill(248,170,35);
    ellipse(width/2,height/2-20,facewidth,faceheight);
    //facefoundation

    arc(width/2-facewidth*0.35,height/2-120,earwidth,earheight,PI,0,CHORD);
    arc(width/2+facewidth*0.35,height/2-120,earwidth,earheight,PI,0,CHORD);
    //ear

    fill(253,108,1);
    arc(width/2-facewidth*0.35,height/2-120,earwidth/2,earheight/2,PI,0,CHORD);
    arc(width/2+facewidth*0.35,height/2-120,earwidth/2,earheight/2,PI,0,CHORD);

    fill(a,b,c);
    ellipse(width/2-65,height/2+50,65,65);
    ellipse(width/2+65,height/2+50,65,65);
	//hair2
	
	noStroke();
	fill(253,108,1);
	rectMode(CORNER);
	fill(248,134,35);
	quad(width/2-33,height/2+50,width/2-15,height/2,width/2+15,height/2,width/2+33,height/2+50);
	fill(241,87,1);
	rect(width/2-15,height/2-105,30,155);
	//inside face

	noFill();
	strokeWeight(4);
	stroke(a,b,c);
	ellipse(width/2,height/2-20,facewidth,faceheight);
	//outerfaceline

	noFill();
	strokeWeight(2);
	stroke(b,a,c);
	beginShape();
	curveVertex(width/2,height/2+50);
	curveVertex(width/2,height/2+52);
	curveVertex(width/2+30+beardlengthx,height/2+38+beardlengthy);
	curveVertex(width/2+70+beardlengthx,height/2+40+beardlengthy);
	curveVertex(width/2+80+beardlengthx,height/2+50+beardlengthy);
	endShape();
	beginShape();
	curveVertex(width/2,height/2+50);
	curveVertex(width/2,height/2+52);
	curveVertex(width/2+30+beardlengthx,height/2+48+beardlengthy);
	curveVertex(width/2+70+beardlengthx,height/2+50+beardlengthy);
	curveVertex(width/2+80+beardlengthx,height/2+60+beardlengthy);
	endShape();
	beginShape();
	curveVertex(width/2,height/2+50);
	curveVertex(width/2,height/2+52);
	curveVertex(width/2-30-beardlengthx,height/2+38+beardlengthy);
	curveVertex(width/2-70-beardlengthx,height/2+40+beardlengthy);
	curveVertex(width/2-80-beardlengthx,height/2+50+beardlengthy);
	endShape();
	beginShape();
	curveVertex(width/2,height/2+50);
	curveVertex(width/2,height/2+52);
	curveVertex(width/2-30-beardlengthx,height/2+48+beardlengthy);
	curveVertex(width/2-70-beardlengthx,height/2+50+beardlengthy);
	curveVertex(width/2-80-beardlengthx,height/2+60+beardlengthy);
	endShape();
	//beard

	noStroke();
	fill(253,108,1);
	arc(width/2,height/2+50,70,70,0,PI,CHORD);
	fill(a,b,c);
	arc(width/2,height/2+50,30,30,0,PI,CHORD);
	//nose

	strokeWeight(line);
	stroke(250);
    fill(0);
    ellipse(width/2-facewidth*0.25,height/2-20,eyesize,eyesize);
    ellipse(width/2+faceheight*0.25,height/2-20,eyesize,eyesize);
    //eyes

}
function mousePressed(){
    eyesize = random(0,20);
    earwidth = random(10,60);
    earheight = random(10,80);
    hairx = random(200,240);
    hairy = random(400,440);
    a = random(0,15);
    b = random(50,200);
    c = random(50,100);
    line = random(1,7);
    beardlengthx = random(0,30);
    beardlengthy = random(0,20);

}

For this assignment, I drew lion’s face with variables for eye size, ear size, hair style, hair color, and length of beard. Background also fades alway as soon as a person presses the mouse and it reappears for each mouse click, which I wanted to highlight each variable face of the lion. For this assignment I challenged to use curveVertex to depict the smooth curve for lion’s beard.

dchikows – Section C – Looking Outward – 02

Bio-Inspired Reaction Diffusion Print
Bio-Inspired Reaction Diffusion Print
Bio-Inspired Reaction Diffusion Print

Karl Sims is a generative artist who has worked for industry and himself creating special effects software. Sims’ website is understated, but his two ARS Electronica Golden Nicas and a MacArthur Fellowship Award stand for themselves along with his work. When looking through his bio-inspired prints attention to detail is paramount. Sim’s created the pieces by the use of the Gray-Scott reaction-diffusion simulations. There is a kean distinction of his color pallets between light and dark tones, which seems to create a build up and almost zenith effect when looking at the images. In essence, to create the image a chemical reaction is simulated across a grid. From this grid once thousands cells is simulated patterns can emerge creating Sim’s images. Just as we are using variables in p5.js to create animations Sim’s aso uses variables in the software. One of which is the feed rate of the simulated chemicals being added to a reaction.

Find more of Sim’s work here

Looking Outward-02

Beautiful chaos is an interactive app created by Nathan Selikoff that displays abstract shapes and imagery as a reaction to 3D motion. The app was created and initially exhibited in 2013 for the Leap Motion controller, a virtual reality device. Based on certain hand motions, the app calculates new algorithms and moves swiftly and gracefully on the screen.

I find this specific piece really interesting because of the interactive aspect of it. The app relies on the movements of a user in order to morph. I find it very inspiring how physical movements can be converted into digital actions on screen.

Also, there’s an interesting juxtaposition between the calming, elegant visuals and the constant recalculating and thinking of the programming. While the display is seemingly soft and smooth, behind the scenes, the app is actually continuously calculating the movements and interaction of the user in order to project the video.

Beautiful Chaos