Author: Yingyang Zhou

YingyangZhou-LookingOutwards-2

Client: In collaboration with JAC studios & No Parking and supported by the Esbjerg Municipality

Location: Wadden Sea Visitor Centre, Vester Vedsted, Denmark

Year: 2017

In 2014 Jason Bruges Studio won the competition, in collaboration with JAC Studios, to create an immersive installation that represents the 12 million migratory birds and the unique landscape of the Nationalpark. Digital Ornithology is the last sequence of the exhibition, which follows a journey of exploration and discovery of the native birds, to being fully immersed in their unique habitat and behaviours. The space allows visitors to be at eye height and experience the take off and landings at close proximity, thereby amplifying the presence of the birds. The installation is comprised of 562 LCD screens suspended from the ceiling in a sequence that represents the migration of the birds. With an amalgamation of projection mapping of live footage and the light-modulating behaviour of the LCD’s, the result is an ephemeral and captivating acquaintance.

 

This is a very neat project which has no extra unnecessary information, but still you can immerse yourself in it by simple light, shadow and sound. It has strong intent of raising the awareness of  protecting creatures by looking into the way they live closer than we usually.

Yingyang Zhou-Project-02-Variable-Face

Variable Face

//Yingyang Zhou
//Section A
//yingyanz@andrew.cmu.edu
//Project-02-A



var faceWidth =235;
var eyebrow = 8;
var mouth = 20;
var nose = 30;
var eyeSize = 20;
var neck = 150;
var shoulder = 450;
var noseR = 200;
var noseG = 100;
var noseB = 100;
var hairR = 130;
var hairG = 120;
var hairB = 110;
var shoulderCurve = 50;

function setup() {
    createCanvas(600, 600);
    background(208, 142, 44);

}

function draw() {
    //face
    fill(255);
    noStroke();
    ellipse(width/2, width/3, faceWidth, 1.2*faceWidth);
    //neck
    rect(width/2 - neck/4, height/2, neck/2, neck);
    //shoulder
    fill(147, 91, 4);
    rect(width/2 - shoulder/2, width - shoulder/3, shoulder, shoulder/2, shoulderCurve);
    //eye
    fill(0);
    ellipse(225, 141, eyeSize, eyeSize);
    ellipse(290, 156, eyeSize, eyeSize);
    //nose
    noStroke();
    fill(noseR, noseG, noseB);
    triangle(217, 210, 217+nose/2, 210-nose, 210+nose/2, 210);
    //hair
    fill(hairR, hairG, hairB);
    noStroke();
    beginShape();
    curveVertex(270, 290);
    curveVertex(270, 370);
    curveVertex(196, 395);
    curveVertex(175, 220);
    curveVertex(220, 80);
    curveVertex(325, 25);
    curveVertex(438, 80);
    curveVertex(466, 421);
    curveVertex(317, 423);
    curveVertex(347, 131);
    curveVertex(301, 72);
    curveVertex(190, 198);
    curveVertex(208, 274);
    curveVertex(270, 290);
    curveVertex(270, 375);
    curveVertex(270, 377);
    endShape();
    //mouth
    ellipse(225, 250, mouth, mouth/3)
}

function mousePressed(){
    eyeSize = random(5, 20);
    noseR = random(0, 255);
    noseG = random(0, 255);
    noseB = random(0, 255);
    hairR = random(0, 255);
    hairG = random(0, 255);
    hairB = random(0, 255);
}

I started using CurveVertex in this project and turn out a very smooth curve.
Hair color, mouth color and size of eyes and nose are changing with every click. I had a lot of fun in this.

Yingyang Zhou-Project-01-Face

portrait

//Yingyang Zhou
//Section A
//yingyanz@andrew.cmu.edu
//project-01

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

function draw() {

    //background
    background(255, 106, 106);
    if (mouseX > (width / 2)) {
      background(104, 150, 255);
    }

    //eyes
    fill(244, 147, 10);
    stroke(0);
    strokeWeight(0);
    ellipse(150, 220, 120, 100);
    ellipse(450, 270, 130, 100);
    fill(270, 170, 30);
    stroke(0);
    strokeWeight(0);
    ellipse(150, 220, 90, 80);
    ellipse(450, 270, 98, 80);

    //mouth
    ellipse(250, 500, 100, 20);
    fill(216, 41, 49);
    strokeWeight(0);
    ellipse(250, 500, 90, 17);

    //eyeball
    fill("grey")
    ellipse(158, 203, 30, 30);
    ellipse(465, 255, 30, 30);

    //nose
    fill(180, 180, 0);
    stroke(0);
    strokeWeight(0);
    triangle(mouseX, mouseY, mouseX - 15, mouseY - 60, mouseX - 30, mouseY );
    stroke(0);
    strokeWeight(2);


    //hair
    line(200, 0, 200, 50);
    line(210, 0, 210, 48);
    line(220, 0, 220, 45);
    line(230, 0, 230, 40);
    line(240, 0, 240, 52);
    line(250, 0, 250, 47);
    line(260, 0, 260, 48);
    line(270, 0, 270, 49);
    line(280, 0, 280, 45);
    line(290, 0, 290, 51);
    line(300, 0, 300, 50);
    line(310, 0, 310, 48);
    line(320, 0, 320, 45);
    line(330, 0, 330, 40);
    line(340, 0, 340, 52);
    line(350, 0, 350, 47);
    line(360, 0, 360, 48);
    line(370, 0, 370, 49);
    line(380, 0, 380, 45);
    line(390, 0, 390, 51);
    fill(50, 0, 2);
    ellipse(0, 300, 40, 600);
    ellipse(600, 300, 55, 700);
    ellipse(20, 20, 50, 270);
    ellipse(30, 0, 200, 30);
    ellipse(470, 0, 170, 50);
    ellipse(580, 20, 250, 70);
    ellipse(300, 0 ,2000, 20);

    //eyebrow
    fill(50, 50, 50);
    quad(93, 47, 95, 22, 205, 64, 212, 89);
    quad(423, 120, 427, 100, 548, 77, 548, 95);

    //glasses
    rotate(PI/55);
    noFill();
    stroke(50, 0, 2);
    strokeWeight(0.5);
    rect(60, 200, 180, 170,20);
    rect(390, 220, 180, 170, 20);
    line(240, 280, 390, 290);

    //earrings
    arc(0, 520, 200, 200, PI, PI + QUARTER_PI);

}

Red embarrassed face means that you put my nose in WRONG place.

When you see a blue happy face, my nose is generally in the RIGHT place.

YingyangZhou-LookingOutwards-1

FOLK website

FOLK home page

 

FOLK is a strategy agency specializing in the development of solutions to connect with people and influence their behavior.

The website of FOLK is straightforward, interactive and impressive. By developing the key  design element ‘frame’ which stands for the concept of helping and surrounding their customers through the entire strategic process), the website enable user to interact with the frame.

FOLK team page

 

The secondary web page is also interactive has multiple hierarchy of motions.

The website is design by Phoenix The Creative Studio based in Quebec. According to the website of the studio, it constitutes of a crew of 6 people. The web design requires knowledge of  HTML5, CSS3, JavaScript and OOP (object-oriented programming), the ability to work with external JS libararian, animation library and PHP7 would help too.

PHOENIX home page