Author: lingfanj@andrew.cmu.edu

Lingfan Jiang – Looking Outward – 02

(Installation Named “Visual Sound of the Amazon” done by Andy Thomas)

This installation is done by an Australian artist named Andy Thomas. It is a responsive artwork that visualized an audio collected from the Amazon rainforest.

The most fascinating part of this project is the idea of visualizing sound. Although it is super cool to look at the animation sequence, in the end, this project just had a cool look. However, the idea behind it could be used in so many ways in the future.

For example, this project could relate to helping the deaf people picture all kinds of sound, and let them be able to understand sound in a different way. Also, on the contrast, can picture or animation be transformed back into sound? If sound could be transformed into animation, could smell also do that? There are so many opportunities. Thus, I believe this project is just the beginning of the path!

Lingfan Jiang – Project 02- Variable Face

sketch

// Lingfan Jiang
// Section B
// lingfanj@andrew.cmu.edu
// Project-02-Variable-Face


var eyeWidth = 50;
var eyeHeight = 80;
var angle = 0;
var eyeSize = 1
var eyeBall = 50;
var eyeBrow = 75;
var eyeBrow2 = 65;


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

}

function draw(){
    background(255);
    translate(width/2,height/3);

    stroke(0);
    strokeWeight(8);
    //eyebrow on the left
    beginShape();
    curveVertex(-100, -50);
    curveVertex(-75, -eyeBrow);
    curveVertex(-50, -eyeBrow);
    curveVertex(-25, -50);
    endShape();

    //eyebrow on the right
    beginShape();
    curveVertex(100, -50);
    curveVertex(75, -eyeBrow-20);
    curveVertex(50, -eyeBrow2-30);
    curveVertex(25, -50);
    endShape();

    strokeWeight(2);
    angleMode(DEGREES);
    ellipseMode(CENTER);

    //left eye
    push();
    rotate(angle);
    fill(255);
    ellipse(-50,0,eyeWidth,eyeHeight);
    fill(0);
    ellipse(-eyeBall,0,7,10);
    pop();

    //right eye
    push();
    scale(eyeSize);
    fill(255);
    ellipse(50,0,eyeWidth,eyeHeight);
    fill(0);
    ellipse(eyeBall,0,7,10);
    pop();

    // mouse (using eyebrow to draw the mouse)
    stroke(0);
    strokeWeight(3);
    scale(eyeSize);
    beginShape();
    curveVertex(-75, 1.5 * eyeBrow2);
    curveVertex(-25, 1.7 * eyeBrow);
    curveVertex(25, 1.7 * eyeBrow);
    curveVertex(75, 1.5 * eyeBrow2);
    endShape();

    //nose
    fill(0);
    ellipse (0,40,15,5);
    
}

function mousePressed(){
    eyeWidth = random(30,50);
    eyeHeight = random(50,80);
    angle = random(-45,0);
    eyeSize = random(0.5, 1.5);
    eyeBall = random(35,60)
    eyeBrow = random(25,85);
    eyeBrow2 = random(35,65);
}

In this project, I am inspired by those cartoon faces online. Therefore, I decided to go with this kind of style without the shape of face or color. One thing I found pretty interesting is that the random syntax in javascript is not completely random. Before starting this project, I assumed that I could use the same random variable to do different values on different objects. As it turns out, it is a bit different. In the end, I am satisfied with the final result, but it does have some problems when certain parts grow too big and intersect with other shapes.

 

reference: http://www.yim778.com/group/facial-expressions-pictures-cartoons/

Lingfan Jiang – Project 01 – Face

sketch

//Lingfan Jiang
//Section B
//lingfanj@andrew.cmu.edu
//Project-01


function setup() {
    createCanvas(600, 600);
    
}

function draw() {
    scale(0.6);
    background(35);


    fill(255);
    beginShape();
    vertex(433,43.9);
    vertex(423,80.9);
    vertex(411,121);
    vertex(409,167);
    vertex(449,201);
    vertex(443,216);
    vertex(401,244);
    vertex(417,288);
    vertex(392,321);
    vertex(434,344);
    vertex(416,362);
    vertex(387,358);
    vertex(367,355);
    vertex(348,394);
    vertex(367,396);
    vertex(337,441);
    vertex(322,497);
    vertex(302,552);
    vertex(320,590);
    vertex(344,604);
    vertex(368,616);
    vertex(407,626);
    vertex(445,629);
    vertex(436,637);
    vertex(408,647);
    vertex(362,629);
    vertex(331,610);
    vertex(312,613);
    vertex(286,628);
    vertex(297,599);
    vertex(258,587);
    vertex(239,617);
    vertex(248,642);
    vertex(204,658);
    vertex(178,698);
    vertex(204,733);
    vertex(236,756);
    vertex(283,773);
    vertex(313,793);
    vertex(353,789);
    vertex(398,788);
    vertex(425,764);
    vertex(451,739);
    vertex(458,718);
    vertex(484,684);
    vertex(499,666);
    vertex(507,642);
    vertex(525,617);
    vertex(514,625);
    vertex(526,606);
    vertex(534,591);
    vertex(540,634);
    vertex(530,683);
    vertex(518,724);
    vertex(488,768);
    vertex(469,792);
    vertex(436,815);
    vertex(431,850);
    vertex(419,866);
    vertex(387,910);
    vertex(368,914);
    vertex(364,910);
    vertex(325,930);
    vertex(268,941);
    vertex(217,926);
    vertex(161,912);
    vertex(114,883);
    vertex(82.4,851);
    vertex(48,804);
    vertex(20.3,764);
    vertex(1.22,726);
    vertex(0.476,695);
    vertex(2.12,647);
    vertex(8.55,603);
    vertex(23.4,572);
    vertex(37,544);
    vertex(51.7,503);
    vertex(81.7,458);
    vertex(73.5,435);
    vertex(70.4,383);
    vertex(94.4,330);
    vertex(133,286);
    vertex(182,290);
    vertex(215,241);
    vertex(239,190);
    vertex(236,137);
    vertex(183,115);
    vertex(135,82.8);
    vertex(86.8,49.9);
    vertex(36.5,20.8);
    vertex(20.1,1.46);
    vertex(78.3,1.46);
    vertex(137,1.46);
    vertex(195,1.46);
    vertex(254,1.46);
    vertex(312,2.74);
    vertex(371,2.53);
    vertex(429,1.46);
    vertex(488,1.46);
    vertex(483,32.9);
    vertex(433,43.9);
    endShape(); //main head

    beginShape();
    vertex(441,567);
    vertex(459,572);
    vertex(442,584);
    vertex(421,588);
    vertex(402,590);
    vertex(394,603);
    vertex(383,587);
    vertex(369,571);
    vertex(349,565);
    vertex(351,546);
    vertex(362,561);
    vertex(362,548);
    vertex(364,530);
    vertex(382,521);
    vertex(391,523);
    vertex(411,529);
    vertex(399,541);
    vertex(417,551);
    vertex(420,558);
    vertex(426,577);
    vertex(441,567);
    endShape(); //left eye

    beginShape();
    vertex(667,1.46);
    vertex(713,1.46);
    vertex(747,14.6);
    vertex(753,57.8);
    vertex(758,97.7);
    vertex(762,112);
    vertex(774,109);
    vertex(773,71.6);
    vertex(780,31.5);
    vertex(778,4.74);
    vertex(809,2.63);
    vertex(856,2.43);
    vertex(901,9.2);
    vertex(915,5.3);
    vertex(948,9.72);
    vertex(923,30.5);
    vertex(915,35.8);
    vertex(889,55.6);
    vertex(930,33.1);
    vertex(958,6.15);
    vertex(987,2.46);
    vertex(966,21.8);
    vertex(924,43.7);
    vertex(882,64.7);
    vertex(839,84.2);
    vertex(798,106);
    vertex(758,130);
    vertex(750,129);
    vertex(748,86.5);
    vertex(735,66.2);
    vertex(741,87);
    vertex(747,112);
    vertex(731,148);
    vertex(717,148);
    vertex(686,169);
    vertex(640,177);
    vertex(681,157);
    vertex(714,125);
    vertex(704,81.6);
    vertex(691,36.4);
    vertex(667,1.46);
    endShape(); //clothing detail

    beginShape();
    vertex(566,469);
    vertex(574,469);
    vertex(582,481);
    vertex(593,491);
    vertex(591,507);
    vertex(581,519);
    vertex(566,522);
    vertex(558,514);
    vertex(566,500);
    vertex(570,485);
    vertex(566,469);
    endShape(); //ear detail

    beginShape();
    vertex(380,437);
    vertex(373,435);
    vertex(366,431);
    vertex(361,426);
    vertex(368,422);
    vertex(376,419);
    vertex(383,421);
    vertex(391,423);
    vertex(394,429);
    vertex(388,435);
    vertex(380,437);
    endShape(); //nose detail

    var c = color(99, 99, 99); 
    fill(c); 
    noStroke();
    beginShape();
    vertex(165,477);
    vertex(148,468);
    vertex(152,489);
    vertex(165,505);
    vertex(178,519);
    vertex(176,535);
    vertex(195,530);
    vertex(216,526);
    vertex(235,535);
    vertex(246,520);
    vertex(228,524);
    vertex(236,514);
    vertex(246,499);
    vertex(239,481);
    vertex(231,476);
    vertex(212,468);
    vertex(214,485);
    vertex(193,480);
    vertex(186,483);
    vertex(169,494);
    vertex(165,477);
    endShape(); // right eye

    //details
    var c = color(255, 204, 0); 
    fill(c); 
    noStroke();
    triangle(375,560,380,555,380,548);

    var c = color(255, 150, 0); 
    fill(c); 
    noStroke();
    triangle(385,560,380,555,380,548);

    noFill();
    stroke(255, 108, 0);
    arc(385, 557, 10, 10, 0, PI);

    fill(255, 255, 255);
    noStroke();
    quad(200,510,205,516,210,510,205,504);

    stroke(0,0,0);
    strokeWeight(2);
    line(875,35,800,75);

    point(825,42);

    fill(255, 255, 255);
    noStroke();
    ellipse(220,500,5,5);

    fill(0, 0, 0);
    noStroke();
    rect(810,25,3,3);

    noLoop();
    

}

In this project, I decided to incorporate my knowledge from some architecture software. It is quite satisfying to see it worked in the end. However, the only problem is that different from Mathematica axis, the Y axis goes in different directions in Java script. In the end, my face is upside-down, but I guess it makes it special too. Overall, it is very interesting to finish this project cross-discipline!

Lingfan Jiang-LookingOutwards-1

“Rain Room”

This is an interactive artwork exhibited in the Museum of Modern Art called “Rain Room”. When visitors walk through the raining room, the rain would not fall on you. It even gives you the illusion that you are able to control the rain.

I find it admirable because the artwork does not have a certain cultural background to it. The installation could be exhibited anywhere around the world and since it is very cool, it attracts people going to the museum. Consequently, it is given great commercial values.

I believe the fundamentals behind the technology is not very complicated. The sensors just understand the locations of those who entered the room. It is a common technology with a lot of precedents. However, the best idea of the room is that it not only creates a unique experience by adding the rain element but also satisfies people’s desire to share their unusual experience.

If this project proceeds, I hope the visitor would be able to stop the rain using a hand gesture, just like what happens in “Now You See Me”.