Category: Section B

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

jiaxinw-LookingOutwards-02

Concentric Squares, Frank Stella, 2015

This is a piece of installation arts created by Montreal-based digital art studio Iregular, and It was inspired by Concentric Squares of Frank Stella, an American painter. This project was projected on a rounded curved wall to allow the audience to look at the animation from different aspects. But wherever they stood, they could always see a square shape on the wall. The animation looked like a tunnel floating in the air with a black background, and somebody called it an “infinite digital wormhole”.   The whole visual content was fully generative, random and infinite.

This installation inspired me as of how we could create the infinity of visual effects by using a computer program. I particularly admired that it combined the physical environment with the visual content to strengthen the immersion of the arts, and because of the non-repetitive animation, the audience can stay in the immersion even longer.

I guess the creator wrote a specific program to generate random moving lines along the four sides of a square. At the same time, these lines follow a “deep space” rule on the surface, so that to create a feeling of a tunnel.

Iregular created the animation following the one point perspective rule to fulfill the need of making a digital aisle. The random movements and changes of lines had its own rhythm to make the animation look comfortable.  The original painting has been completely transformed into a futuristic and mesmerizing visual content.

 

jiaxinw-Project02-Variable Faces

sketch

//body
var bodyWidth = 350;
var bodyHieght = 400;
var bodyColor = 170;

//face
var faceWidth = 250;
var faceHeight = 300;

//ear
var eyeSize = 30;
var earWidth = 50;
var earHeight = 70;

//the two middle points of eyebrows
var eyebrowPoint1 = 180;
var eyebrowPoint2 = 180;

//mouth left side
var mouthCornerL = 300;

//mouth right side
var mouthCornerR= 340;

var mouthHeight = 350;

//skin color
var skinR = 250;
var skinG = 230;
var skinB = 220;

//background begin color
var BackLR = 255;
var BackLG = 249;
var BackLB = 223;

//background end color 
var BackRR = 211;
var BackRG = 248;
var BackRB = 238;


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

}

function draw() {
	//background colors
	noStroke();
    from = color(BackLR, BackLG, BackLB);
    to = color (BackRR, BackRG, BackRB);
    colorMode(RGB);
    interA = lerpColor(from, to, .25);
	interB = lerpColor(from, to, .65);
	fill(from);
	rect(0, 0, 160, 480);
	fill(interA);
	rect(160, 0, 160, 480);
	fill(interB);
	rect(320, 0, 160, 480);
	fill(to);
	rect(480, 0, 160, 480);

    //body
    fill(bodyColor);
    rect(width/2 - bodyWidth/2, height/2 + bodyHieght*0.25 , bodyWidth, bodyHieght, 100);

	//face
	fill(skinR, skinG, skinB);
	ellipse(width/2, height/2, faceWidth, faceHeight);

    //ears
    fill(skinR, skinG, skinB);
    ellipse(width/2 - faceWidth/2, height/2, earWidth, earHeight);
    ellipse(width/2 + faceWidth/2, height/2, earWidth, earHeight)

	//eyes
	fill(31, 28, 27);
	var eyeLX = width/2 - faceWidth*0.25;
	var eyeRX = width/2 + faceWidth*0.25;
	var eyeHeight = height/2
	ellipse(eyeLX, eyeHeight, eyeSize, eyeSize);
	ellipse(eyeRX, eyeHeight, eyeSize, eyeSize);

    //left eyebrow
    noFill();
    stroke(70);
    strokeWeight(2);
    beginShape();
    curveVertex(width/2 - faceWidth*0.375,  height/2 - faceHeight*0.125);
    curveVertex(width/2 - faceWidth*0.375,  height/2 - faceHeight*0.125);
    curveVertex(width/2 - faceWidth*0.3, eyebrowPoint1);
    curveVertex(width/2 - faceWidth*0.2, eyebrowPoint2);
    curveVertex(width/2 - faceWidth*0.125,  height/2 - faceHeight*0.125);
    curveVertex(width/2 - faceWidth*0.125,  height/2 - faceHeight*0.125);
    endShape();

    //right eyebrow
    noFill();
    stroke(70);
    strokeWeight(2);
    beginShape();
    curveVertex(width/2 + faceWidth*0.375,  height/2 - faceHeight*0.125);
    curveVertex(width/2 + faceWidth*0.375,  height/2 - faceHeight*0.125);
    curveVertex(width/2 + faceWidth*0.3,  eyebrowPoint1);
    curveVertex(width/2 + faceWidth*0.2,  eyebrowPoint2);
    curveVertex(width/2 + faceWidth*0.125,  height/2 - faceHeight*0.125);
    curveVertex(width/2 + faceWidth*0.125,  height/2 - faceHeight*0.125);
    endShape();

    //mouth   
    fill(236, 39, 70);
    noStroke();
    beginShape();
    curveVertex(mouthCornerL, height/2 +70);
    curveVertex(mouthCornerL, height/2 +70);
    curveVertex(width/2 - 10, mouthHeight);
    curveVertex(width/2 + 10, mouthHeight);
    curveVertex(mouthCornerR, height/2 +70);
    curveVertex(mouthCornerR, height/2 +70);
    endShape();
    

}

    //when the user clicks, variables are assigned to random values within specifid ranges
function mousePressed(){

    //face size change
    faceWidth = random(150, 300);
    faceHeight = random(200, 350);
    
    //eye size change
    eyeSize = random (10, 50);
    
    //ear size change
    earHeight = random(60, 80);
    earWidth = random(40, 60);
    
    //eyebrow change
    eyebrowPoint1 = random(200, 220);
    eyebrowPoint2 = random(180, 220);

    //mouth change
    mouthCornerL = random(280, 300);
    mouthCornerR = random(340, 360);
    mouthHeight = random(300, 350);

    //skin color change
    skinR = random(240, 260);
    skinG = random(220, 240);
    skinB = random(210, 230);

    //background color change
    BackLR = random(220, 256);
    BackLG = random(180, 280);
    backLB = random(200, 250);
    BackRR = random(210, 256);
    BackRG = random(170, 248);
    BackRB = random(50, 238);

    //body change
    bodyWidth = random(350, 400);
    bodyHieght = random(400, 450);
    bodyColor = random(70, 170)
}

To start this project, I thought about what parts of a face can affect the appearance of it obviously. I came up with the size of the face, size of eyes, shapes of eyebrows and the shape of the mouth. Therefore, I set up different variables for these different part to be changed. Later, I realized the color of skin is also a good point, and I also made it changeable. For the background, I wanted to do something different, I wanted to make it changeable too. I found the function of lerpcolor() in reference, and I thought it would be a fun to make a background that generates gradual colors randomly.

dnam – Looking Outwards – 02

“Forest Friends at Osu Wexner Medical Center”
2014-2015

In the medical center, Forest Friends was installed to help doctors cure cancer patients. Focusing on helping alleviate stress and pain for children suffering from cancer, Forest Friends is an interactive touch screen set in the waiting room. Patients can come in and check in their hospital wristbands, which would then summon a forest animal. The forest background reacts to the patients; for example, when a patient presses long enough on to a screen, a tree grows. The background changes due to such elements, and the constant change of background helps patients not get bored of the game. However, to give a sense of familiarity, a specific animal is assigned to patient. Therefore, when a patient logs in, the animal from last time appears once again.

mjanco – Section B- Project 2

generativefaces

//Michelle Janco
//mjanco@andrew.cmu.edu
//15-104 Section B
//Project - 2

var eyeSize = 40;
var faceWidth = 200;
var faceHeight = 230;
var mouthWidth = 60;
var mouthHeight = 30;
var faceColor = 255;
var noseWidth = 50;
var noseHeight = 15;
var pupilSize = 15;

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

function draw() {
    background(250,253,169);
    noStroke();
    fill(faceColor);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    //eyes
    fill(160,175,179);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    //pupils
    fill(0);
    ellipse(eyeLX, height / 2, pupilSize, pupilSize);
    ellipse(eyeRX, height / 2, pupilSize, pupilSize);
    //mouth
    fill(112,2,51);
    ellipse(width / 2, height / 1.55, mouthWidth, mouthHeight);
    //nose
    fill(0);
    rotate(PI/5.0);
    rect(width / 1.55, height / 20.75, noseWidth, noseHeight, 40);

  }

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges.
    faceWidth = random(75, 200);
    faceHeight = random(180, 230);
    eyeSize = random(20, 40);
    mouthWidth = random(15, 60);
    mouthHeight = random(5, 30);
    faceColor = random(100, 255);
    noseWidth = random(30, 50);
    noseHeight = random(5, 15);
    pupilSize = random(5, 15);
  
}

I was inspired by Edvard Munch’s The Scream, and decided to make a piece that generated different styles and stages of shock or surprise. I chose the off-putting color scheme to reflect the weird expressions. It was hard to figure out the change in color initially, but I figured it out quickly.

Sarah Kim- Looking Outwards 2

One of the projects that I found very intriguing was Beautiful Chaos which was an artwork created by an app made for leap motion control. The app, which existed previously before the artist’s decision to create this artwork, became a medium for the artist to explore in and create a beautiful work of nebulous lights. I chose this specific artwork because my main source of interest in artistic mediums were lights and color combination. Because I believe that enticement in art mainly comes from its visual presentation, I liked to study aesthetics through the use of many different color combos and understand the use of mood through the usage of lightings especially with neon and natural light. Because the majority of my interest in art comes from its aesthetic beauty more than the content, I tend to choose works that visually entice me which I find mysterious and interesting.

Beautiful Chaos

 

Yoonseo1 -Looking outwards 02 :Generative Art

City Icon developed by Marcin Ignac

It is a generative animation on the panels based on the mix of the intersecting system within the city. Recently, in my architecture studio project, I have been working on site analysis. This project just gave me more perspective on how to express and illustrate mundane conditions such as traffic, water flows, and etc. On the website he describes that bespoke application was develop to run and test the generative animation. The amount the data research went in is impressive, but what I admire the most is the beauty of the expression on the exhibit. the lights are contrasting amazingly well with the background. Not only the simple lines are animated but also the water flow, radius of data, and other interesting features are displayed. In order for this to be generated, I think there needs to be a basic knowledge on the animation program and lots of practice in visualization of data, which is one of the hardest part of my site analysis in architecture studio.

Yoonseo1 – Variable Faces -Project 2

Face Dave

//Yoonseo(Dave) Choi
//Section B 
//yoonseo1@andrew.cmu.edu
//Project-Variable Face
function setup() {
    
    createCanvas(640,480);
    background(100);
}
var val = 0; //define for the face rotation factor
var colorV = 0;// color variable define
var d = 1; // dividing factor define
var St = 0; // Stroke color factor define
function draw() {

}
function mouseClicked() {
    colorV = random(100,230);// change of background color
    division = random(1,16);//change of dividing factor
    St = random(0,255);// change of stroke color 
    if (val <= 0){
        background(colorV/d,colorV/d,colorV/2*d)
        push(new Face1);
        val += 1;
    } else {
    if (val == 1) {
        background(colorV/3*d,colorV/d,colorV);
        push(new Face2);
       val += 1;
    } else
    if (val == 2){
        background(colorV,colorV/d,colorV/d*4);
        push(new Face3);
       val += 1;;
    }else {
        if (val == 3){
        background(colorV/d,colorV,colorV/d*2);
        push(new Face4);
       val =0;
        }
        
    }
    }
 
  
 
}
//Face 1 
function Face1() {

    //left Face 
    //facial shape
    stroke(St/d*2,St,St/d*9) //stroke color for the faces

    strokeWeight(1);
    noFill();
    beginShape();
    vertex(177.91,184.25);
    quadraticVertex(155.28,181.5,139.25,182.41);
    quadraticVertex(129.75,184.5,121.5,186.58);
    endShape();
    line(121.5,186.58,107.08,201.16);
    line(107.08,201.16,100.91,220.91);
    line(100.91,220.91,102.58,225.91);
    line(102.58,225.91,90.58,241.41);
    //tip of nose
    beginShape();
    vertex(89.75,243.08);
    quadraticVertex(93.41,247.25,92,246);
    endShape();
    beginShape();
    vertex(93.41,243.08,);
    quadraticVertex(96.75,243,99.58,243.08);
    vertex(99.58,243.08);
    endShape();
    //starting lip and chin
    line(97.75,248.91,95.58,253.08);
    //lips
    beginShape();
    vertex(96.5,257.41);
    quadraticVertex(103.08,254.91,105.5,255.25);
    vertex(108.41,255.91);
    endShape();
    //chin
    beginShape();
    vertex(96.5,260.08);
    quadraticVertex(99.58,266.91,100.58,266.91);
    quadraticVertex(98.06,271.75,97.75,272.5);
    vertex(101.25,278.08);
    endShape();
    //neckand chin
    beginShape();
    vertex(120.08,284.08);
    quadraticVertex(103.66,279.33,103.66,279.33);
    quadraticVertex(126.25,259,135.25,255.76);
    vertex(148.58,252.08);
    endShape();
    line(126.75,284.08,143.91,295.75);
    //back of head and ears
    line(180.25,184.91,197.58,208.41);
    beginShape();
    vertex(196.75,223.91);
    quadraticVertex(189.25,234.25,184.75,248.5);
    vertex(192.41,261.58);
    endShape();
    //ears
    beginShape();
    vertex(167.91,208.41);
    quadraticVertex(174.25,213.75,171.25,223.25);
    quadraticVertex(167,234.5,158.91,230.41);
    vertex(160.75,221.5);
    endShape();
    //eyes
    beginShape();
    vertex(106.08,222.91);
    quadraticVertex(109.5,223.5,114.25,223.08);
    quadraticVertex(114.25,223.08,117.5,221);
    vertex(120.41,218.75);
    endShape();
}
function Face2(){
   strokeWeight(1);
    noFill();
    //head shape
    beginShape();
    vertex(296.25,253.08)
    quadraticVertex(296.25,237.25,300,220.25);
    quadraticVertex(300,220.25,289.25,192.25);
    quadraticVertex(289.25,192.25,258,184.91);
    quadraticVertex(237,190.25,212,204.25);
    quadraticVertex(204.25,216,199.5,234.49);
    quadraticVertex(199.5,234.49,199.25,243.25);
    vertex(202.25,251);
    endShape();
    //nose and eyes
    beginShape();
    vertex(201.75,253.25);
    quadraticVertex(202.75,252.25,209,262.75);
    quadraticVertex(209,262.75,211,266);
    endShape();
    //eyes
    beginShape();
    vertex(209.41,257.41);
    quadraticVertex(209.41,257.41,212.75,257.41);
    endShape();
    beginShape();
    vertex(226.41,261.58);
    quadraticVertex(226.41,261.58,230.25,262.5);
    vertex(238.91,259.08);
    endShape();
    //top of nose
    beginShape();
    vertex(218.5,246);
    quadraticVertex(218.5,246,214,271);
    quadraticVertex(214,271,198.5,294.5)
    endShape();
    beginShape();
    vertex(202,295.5);
    quadraticVertex(202,295.75,214.5,288);
    quadraticVertex(214.5,286,220.5,280);
    vertex(224.75,275.13);
    endShape();
    //lips
    beginShape();
    vertex(218.58,281.75); 
    quadraticVertex(218.58,281.75,221.58,285.91);
    quadraticVertex(221.58,285.91,231.5,281.5);
    vertex(241.08,284.33);
    endShape();
    beginShape();
    vertex(226.41,289.08);
    quadraticVertex(229,288.75,233.58,286.75);
    endShape();
    beginShape();
    vertex(224.75,289.91);
    quadraticVertex(226.75,293.5,228.5,297);
    quadraticVertex(228.5,297,237.75,298.25);
    quadraticVertex(237.75,298.25,247,296);
    vertex(278.41,274.08);
    endShape();
    //neck
    line(233.58,298.78,238,308);
    beginShape();
    vertex(296.25,241.41);
    quadraticVertex(302,253.5,313.25,263.5);
    endShape();
    //ears
    beginShape();
    vertex(272.75,252.25);
    quadraticVertex(276.5,263,282,263.5);
    quadraticVertex(282,263.5,287.5,242.25);
    quadraticVertex(287,235.5,280.75,234.25);
    vertex(271.5,238.5);
    endShape();

}
function Face3() {
    noFill();
    //hair
    beginShape();
    vertex(336,262);
    quadraticVertex(336,262,326.25,252.08);
    quadraticVertex(325.273,218,336.25,205.58);
    quadraticVertex(335.258,204.027,338.25,200.58);
    quadraticVertex(338.25,200.58,356,187.5);
    quadraticVertex(356,187.5,386.5,184);
    quadraticVertex(386.5,184,401.41,193.08);
    quadraticVertex(401.41,193.08,412.58,209.75);
    quadraticVertex(412.58,209.75,421.91,225.41);
    quadraticVertex(421.91,225.41,420.75,244);
    vertex(409.33,260.33);
    endShape();
    beginShape();
    vertex(335,221);
    quadraticVertex(343,204.667,354.667,202);
    quadraticVertex(362.667,202.333,376.91,200.5);
    quadraticVertex(380.667,200.667,403.5,208.41);
    quadraticVertex(407,212.667,413.44,223.91);
    quadraticVertex(413.667,241.667,409.667,254);
    quadraticVertex(408,262,400.91,277.91);
    quadraticVertex(389.3,275.66,375.3,271.3);
    quadraticVertex(368,271.33,344.41,277.91);
    quadraticVertex(340,269,332,251);
    quadraticVertex(331,244.33,333.41,226.75);
    endShape();
    //neck
    beginShape();
    vertex(346.75,278.08);
    quadraticVertex(348.667,279,349.833,279.75);
    vertex(353.55,292.08);
    endShape();
    beginShape();
    vertex(396.667,278);
    quadraticVertex(395.33,282.5,394.08,295.58);
    endShape();
    //eyes
    beginShape();
    vertex(344.87,213);
    quadraticVertex(353.24,213.25,366.25,210.25);
    endShape();
    beginShape();
    vertex(381,209.75);
    quadraticVertex(387.5,212.5,400.9,213.96);
    endShape();
    //nose
    line(371.25,206.91,371.25,226.75);

    beginShape(); 
    vertex(375.08,210.4);
    quadraticVertex(375.5,218.167,377,226.5);
    vertex(378.75,230.75);
    endShape();
    beginShape();
    vertex(363.75,233.58);
    quadraticVertex(369,230.58,375.667,230.667);
    vertex(378.75,233.667);
    endShape();
    //mouth
    beginShape();
    vertex(368.833,245.167);
    quadraticVertex(380.667,243.833,390.97,242.41);
    quadraticVertex(387.33,246.5,382.08,250.75);
    quadraticVertex(363.667,250,354.66,245.32);
    quadraticVertex(353.667,243.167,361.33,244.667);
    vertex(370.25,245.25);
    endShape();
}
function Face4(){
    noFill();
    //head shape
    beginShape();
    vertex(426.91,239.2);
    quadraticVertex(434,208,445.91,191.58);
    endShape();
    beginShape();
    vertex(453.75,189.08);
    quadraticVertex(472.75,186.25,483.5,187.25);
    quadraticVertex(501.75,194,513.08,200.5);
    endShape();
    beginShape();
    vertex(513.08,202.41);
    quadraticVertex(515,211,520,215);
    vertex(525.75,218);
    endShape();
    beginShape();
    vertex(523.91,220.57);
    quadraticVertex(523.5,222.5,522.75,224.91);
    endShape();
    beginShape();
    vertex(518.41,224.91);
    quadraticVertex(521.25,227.5,524.01,230.02);
    endShape();
    //chin
    beginShape();
    vertex(526.25,239.2);
    quadraticVertex(527.25,244.5,528.41,248.75);
    quadraticVertex(530.41,251.75,530.41,259.08);
    quadraticVertex(515.75,258.25,493.25,259.75);
    vertex(475.08,263.5);
    endShape();
    beginShape();
    vertex(468.58,258.08);
    quadraticVertex(459.75,254,453.75,246.65);
    endShape();
    //neck
    beginShape()
    vertex(529.08,261.41);
    quadraticVertex(513,267.5,502.78,273.08);
    quadraticVertex(502.25,275,500.41,289.75);
    endShape();
    //eyes
    beginShape();
    vertex(477.37,208.37);
    quadraticVertex(485,208,489.5,209.75);
    quadraticVertex(491.25,209.25,493.5,208.47);
    endShape();
    beginShape();
    vertex(511.41,209.13);
    vertex(514.54,209.13);
    endShape();
    //nose
    beginShape();
    vertex(504.87,208.2);
    quadraticVertex(519.35,218.84,516.75,219.25);
    quadraticVertex(514.75,220.5,511.08,222.17);
    endShape();
    //mouth
    beginShape();
    vertex(504.87,233.81);
    quadraticVertex(509.25,236.5,518.25,237);
    vertex(525.62,235.41);
    endShape();

}

For this project I wanted to show the 4 different variable faces with emotions and change of colors as effect to provoke the viewers. I have set variable for the stroke line and background so when the mouse is pressed, color of whole thing changes as face rotates.

Atraylor – Project 02 – Variable Faces

When making this project, I was thinking of all the proportional measurements I use to make human faces, especially the relationship between the eyes and the rest of the face. Starting out, I noticed that my random faces were just scaling up and down because the ratios were all established on one variable: the eye size. The end result is more interesting and resembles some of the steps I would make to draw a face.

sketch


//Allison Traylor, atraylor,
//section B, Project 02


var eyeSize = 30; //eye size
var eyeSpaceL = 0.25; //eye space left
var eyeSpaceR = 0.25; //eye space right
var faceWidth = (eyeSize * 5); //face oval width (relative to eye size)
var faceHeight = 210; // face oval height
var craniumWidth = 150;
var craniumHeight = 150;
var mouthWidth = 25; // corner locations for mouth

var colorL = (200,200,200,200); // color of left eye
var colorR = (200,200,200,200); // color of right eye
var mColor = (200,200,200,200); // color of mouth


function setup() {
    createCanvas(480, 640);
    background(220);

}


function draw() {

    background(222);
    var noiseVal = random(0.001, .6); // flickering lines
    //chin height is proportional to faceHeight, tring to make it right below the mouth
    var chinHeight =  height/2 + faceHeight/4 + faceHeight/8 + faceHeight/16;

    // Cranium
    noFill();
    ellipse(width/2, height/2 - eyeSize, craniumWidth, craniumHeight);

    //bounding box
    push();
    noFill();
    stroke(noiseVal * 255); // lines flicker
    rect(width/2 - craniumWidth/2, height/2 - eyeSize - craniumHeight/2, craniumWidth, craniumHeight);
    pop();

    //face ellipse
    noFill();
    ellipse(width/2, height/2, faceWidth, faceHeight);


    // nose line proportional to eyes
    line(width/2 - eyeSize/2, height/2 + faceHeight/4,
         width/2 + eyeSize/2, height/2 + faceHeight/4);

    //eyes
    fill(colorL);
    ellipse((width/2) - faceWidth*eyeSpaceL, height/2, eyeSize, eyeSize); // Left eye (to viewer)
    fill(colorR);
    ellipse((width/2) + faceWidth*eyeSpaceR, height/2, eyeSize, eyeSize); // right eye

    //eye line
    line(width/2 - faceWidth/2, height/2, width/2 + faceWidth/2, height/2);


    // mouth
    fill(mColor);
    //I'm trying to isolate the mouth in a certain area between nose and chin
    triangle((width/2) - mouthWidth, height/2 + faceHeight/4 + faceHeight/8,
        width/2, height/2 + faceHeight/4 + faceHeight/12,
        (width/2) + mouthWidth,  height/2 + faceHeight/4 + faceHeight/8);

    //chin
    push();
    noFill();
    stroke(noiseVal * 255);
    ellipse(width/2, chinHeight, mouthWidth, mouthWidth);
    pop();

    // plumbline
    line(width/2, height/4, width/2, (height - height/4));


}

function mousePressed(){

    // generating random values
    eyeSize = random(20, 50);
    eyeSpaceR = random(0.20, 0.30);
    eyeSpaceL = random(0.20, 0.30);
    faceHeight = random(190, 250);
    craniumWidth = random(150, 200);
    craniumHeight = random(150, 200);
    mouthWidth = random(10, 30);

    var from = color(200,200,200,200); //interpolate from this color
    var to = color(0,0,0,200); // to this color

    // random numbers to be used in lerpColor
    var lerpNumber = random(0,1);
    var lerpNumber2 = random(0,1);
    var lerpNumber3 = random(0,1);

    mColor = lerpColor(from, to, lerpNumber); // random shade for mouth

    colorR = lerpColor(from, to, lerpNumber2); //random shade for right eye
    colorL = lerpColor(from, to, lerpNumber3); // random shade for left eye
}

kyungak-lookingoutwards-02

Artists: French contemporary digital artists and multimedia choreographers Adrien M & Claire B (2015)

“XYZT: Abstract Landscapes” is a combination of 10 different works, each consisted of its own mathematical algorithm that responds to the movement of visitors. Once contact is made to the touch screen either by hand or foot, the sensors trigger the cloud of pixels to form certain shapes. For instance, the pixels might mimic the person that is standing in front of it.

One of the most famous work from the XYZT series is called the “Letter Tree.” The algorithms form a letter tree that drift its letters across the touch panel as the algorithmically formulated wind blows on them. The artists tried to recreate the question of whether wind can compose poems or not into an artwork.

The most fascinating aspect about XYZT is the interactivity of the piece. The artist’s aim to express distortion of shapes and meanings really came alive through the digital medium. Now that the mathematical algorithms could respond to the thousands of distortions viewers touch to make, it was a matter of time for the artists and the viewers to understand the different ways the shapes got distorted and most importantly have fun.