Category: SectionB

Julia Nishizaki – Project-01-Face

When starting this project, I knew that I wanted to capture both my facial features as well as my personality, and to express a playful and friendly tone. However, as I started to sketch out some initial ideas, I realized that I really had to simplify my concept and make it more geometric, as I didn’t know how to create weird or irregular organic shapes. While I had some trouble trying to figure out p5.js and sublime, this project really helped me to learn some of the basics, and to explore what I could do.

julia_selfportrait

//Julia Nishizaki
//jnishiza@andrew.cmu.edu
//Section B, Project 01 Self-Portrait

function setup() {
    createCanvas(600,600);
    background(251,177,97);
    rectMode(CENTER);
    noStroke();

    //shirt
    c = color('rgb(34,40,92)');
    fill(c);
    rect(375,415,110,50,20,25,0,0);
    c = color('rgb(25,32,66)');
    fill(c);
    arc(340,600,200,415,PI,PI + HALF_PI);
    c = color('rgb(34,40,92)');
    fill(c);
    arc(340,600,370,415,PI + HALF_PI,0);
    arc(350,600,50,255,PI,PI + HALF_PI);

    //hair behind face
    fill('black');
    circle(280,195,190);

    //dark grey, side shave
    c=color('rgb(49,46,47)');
    fill(c);
    rect(350,170,250,180,55,80,0,0);

    //skin
    c = color('rgb(248,212,178)');
    fill(c);
    circle(455,275,90);
    circle(460,305,50);
    square(370,380,80);
    triangle(330,420,410,420,340,480);
    arc(350,275,250,255,0,PI,PIE);
    rect(340,210,230,150,0,80,0,0);

    //sideburns
    c=color('rgb(49,46,47)');
    fill(c);
    rect(465,220,20,120,0,0,10,5);

    //hair
    fill('black');   
    arc(340,115,110,110,PI,0,PIE);
    arc(285,150,175,175,HALF_PI + QUARTER_PI,PI + HALF_PI + QUARTER_PI,PIE);
    arc(340,81,130,130,0,PI,PIE);
    arc(280,110,130,130,0,PI,PIE);

    //highlight
    noFill();
    stroke('rgb(215,138,132)');
    strokeWeight(10);
    arc(285,150,175,175,HALF_PI + QUARTER_PI,PI + HALF_PI + QUARTER_PI,OPEN);
    arc(340,81,130,130,0 + QUARTER_PI,HALF_PI + QUARTER_PI,OPEN);

    //cheek
    noStroke();
    c = color('rgb(247,204,173)');
    fill(c);
    circle(405,300,85);

    //glasses
    noFill();
    stroke('rgb(178,79,74)');
    strokeWeight(10);
    strokeCap(ROUND);
    rect(385,255,90,60,15,15,15,15);
    rect(260,255,90,60,15,15,15,15);

    //nose
    stroke('rgb(232,183,141)');
    strokeWeight(10);
    c = color('rgb(248,212,178)');
    fill(c);
    bezier(305,210,355,260,250,285,320,310);

    //glasses bridge
    stroke('rgb(178,79,74)');
    strokeWeight(8);
    line(305,245,340,245);

    //eyes and eyebrows
    stroke('black');
    strokeWeight(15);
    line(350,210,420,210);
    line(220,210,290,200);
    noStroke();
    fill('black');
    circle(385,240,15);
    circle(275,240,15);

    //mouth
    c = color('rgb(215,138,132)');
    fill(c);
    arc(320,330,60,60,0,PI,PIE);

    //earring
    c = color('rgb(69,89,175)');
    fill(c);
    circle(472,315,5);
}

Crystal Xue- LookingOutwards-01

The Art of Feeling-turning brainwaves into paintings

This is an amazing project done by Random Quark for Saatchi & Saatchi Wellness showing an amazing form of art that reflects one’s feelings with the help of technology. Different colors represent different emotions, for example, the color red represents love, etc. Then the brainwaves are recorded by GEE headsets and processed to generate complex patterns.

I personally found this project very inspiring because it is a very creative approach to visualize something intangible and hard to depict like emotions. Even though this project was based on the need for promoting mental health wellbeings, there are definitely opportunities to draw the inspiration and turn something else into a creative art form. This is also a multi-disciplinary way to build bridges between scientists, programmers, and artists to work collectively and produce something that general public are able to understand.

Ghalya Alsanea LookingOutwards-01: OLD NAVY SELFIEBRATION

OLD NAVY SELFIEBRATION by Deeplocal

This video explains the mechanisms and inspiration behind the Selfiebration installation.

This project by Deeplocal, a firm based in Pittsburgh, helped Old Navy celebrate their birthday by rendering fans’ selfies on a massive display made of 1,000 balloon “pixels”. I specifically choose this project because of the way people interact with the display. It is really cool how your face gets to literally be part of the display, while using balloons to extenuate that this is, in fact, a celebration. In addition the size of the display makes it disruptive in a way that even if it’s not your face projected, you still interact with the display. Also, the idea of using “selfies” in to attract an audience is very smart due to the large presence of selfies in media today. All in all, they knew their audience, the message was clear, the interaction was easy, and most importantly it was pleasant and fun for all parties involved.

Adding to that, even though it seems like a simple idea in concept, the project is highly innovative in the sense that they invented custom-engineered balloons for this specific project. In my opinion, executing simplicity in a design is harder than complexity.

Close up of the engineered inflatable balloon display.

The balloons, divided among 16 identical “balloon boxes,” inflated simultaneously with each capture, thanks to almost five miles of wiring and a pneumatic valving system built by Deeplocal engineers, explains CEO Nathan Martin.

The device is capable of showing two selfies a minute. Concept through creation to going live took just eight weeks.

The team consisted of a mix of about 20 artists, engineers, and designers.

Links:

https://www.deeplocal.com/projects/selfiebration.html

DeepLocal machine turns selfies into 15-foot balloon portraits

 

 

Nadia Susanto – Project-01-Face

This was a challenging first project as I didn’t familiarize myself with all the attributes and primitives, but it was fun experimenting with it. There were a lot of times where I was confused with the coordinates, but I just had to keep testing it until the shapes were all in the right place.

sketch

/*  Nadia Susanto
	Section B
	nsusanto@andrew.cmu.edu
	Project-01: Self-Portrait (Face) */


function setup() {
    createCanvas(600, 600);
    background(0, 146, 150);
    noStroke();
}

function draw() {
//hair
	fill("black");
	ellipse(300, 200, 170, 170);
	ellipse(320, 120, 100, 100);
//ears
	stroke(50);
	fill(235, 160, 130);
	//left
	ellipse(155, 320, 50, 100);
	//right
	ellipse(445, 320, 50, 100);
//earrings
	fill(192, 192, 192);
	//left
	circle(145, 355, 10, 10);
	//right
	circle(455, 355, 10, 10);
//face color
	fill(245, 175, 130);
//neck
	rect(260, 450, 80, 175, 20);
//face
	ellipse(300, 350, 300, 350);
//eyes
	noStroke();
	fill("white");
	//left
	ellipse(230, 300, 50, 75);
	//right
	ellipse(370, 300, 50, 75);
//pupils	
	fill("black");
	//left
	ellipse(235, 300, 20, 20);
	//right
	ellipse(365, 300, 20, 20);
//nose
	noStroke();
	fill(235, 160, 130);
	triangle(275, 400, 300, 350, 325, 400);
	ellipse(300, 400, 50, 25);
//mouth
	fill("black");
	arc(300, 430, 100, 100, 0, 90, OPEN);
//eyebrows
	//left
	rect(205, 235, 50, 10, 20);
	//right
	rect(345, 235, 50, 10, 20);
//blush
	fill(250, 190, 200);
	circle(215, 420, 50, 50);
	circle(390, 420, 50, 50);
}

Xu Xu – Project 01 – Face

I was inspired by the de Stijl art style prior to coding this self portrait, so I incorporated the abstract, geometrical style into my work. I used various rectangles and ellipses to represent my facial features (such as my glasses and mole), and I also used arcs for my face shape and hair shape. It was hard for me to “paint” certain areas in one go, so I had to divide them into small pieces of geometries.

sketch

/*
Xu Xu
Section B
xux1@andrew.cmu.edu
Project-01
*/

function setup() {
    createCanvas(600, 750);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
//faceshape
    fill(239,239,239)
    noStroke();
    rect(0,0,300,800);
    fill("black")
    noStroke();
    rect(300,0,300,800);
//hair
    fill(50,0,1)
    arc(300,250,420,420,600,0);
    fill(50,0,1)
    noStroke();
    rect(90,250,220,150);
    fill(50,0,1)
    rect(90,500,220,300);
    fill(350,81,58)
    noStroke();
    rect(300,250,210,400);
    fill(350,81,58)
    rect(300,700,210,100);
//neck
    fill(95,26,55)
    rect(300,250,80,550);
    fill(89,248,232)
    rect(220,250,80,550);
//face
    fill(231,29,54)
    ellipse(300,250,350,350);
    fill(55,63,81)
    noStroke();
    arc(300,250,350,350,0,PI + QUARTER_PI + QUARTER_PI);
    fill(89,248,232)
    arc(300,250,350,650,0,PI);
    fill(210,207,218)
    arc(300,280,350,630,0,PI);
    fill("grey")
    rect(320,280,155,10);
    fill("white")
    rect(100,250,200,5);
    fill(252,220,77)
    rect(110,255,190,200);
//eyes
    fill("white")
    arc(400,280,150,20,0,PI);
    fill("black")
    ellipse(430,300,7,7);
    fill("black")
    rect(410,280,10,10);
//mouth
    fill("red")
    rect(260,510,80,10);
    fill(2199,129,175)
    arc(300,525,80,25,0,PI);
    
    fill("black")
    rect(130,270,150,10);
//glasses
    noFill();
    stroke(111,45,189)
    strokeWeight(10);
    rect(90,230,200,100);
    fill(111,45,189)
    rect(70,250,20,30);
}

Xiaoyu Kang – Looking Outward – 01


shiseido ginza

WOW inc. is a design studio based in Tokyo. One of their most astonishing project is an installation art series that is created in the Shiseido Ginza building in Tokyo as a part of the promotion for Shiseido’s new products. The installation was inspired by the concept of neuroscience and is created to be interactable. 

The installation itself is divided into two parts. The first installation combines technology with a newly developed fiber material to create rays of light that runs nine meters long vertically. Around 150 fibers with a 9 millimeter diameter was attached in total to create the installation. The light on fibers used are controllable by touch, thus creating a visual effect that mimics the transmission of sensory nerves.

The second part of the installation is a wall made by stretchable fibers that also responds to the touch of the visitors. By touching the wall, the visitors are suppose to feel connected to the activeness of the nerve cells.

shiseido ginza

Xiaoyu Kang – Project 01 – Face


I was trying to draw my face in a cartoon-like style, so I used a lot of vibrant and saturated colors. I also used a combination of circular shapes to represent my face and hair, and some other shapes to represent the other features on my face such as nose and lips.

 

 

sketch

//Xiaoyu Kang
//Section B
//xkang@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    fill(255,235,83);
    rect(0,0,600,600);
//background
    noStroke();
    fill(255,154,157);
    circle(300,290,530,530);
//hair
    noStroke();
    fill(74,38,0);
    ellipse(300,250,350,400);
    fill(74,38,0);
    rect(125,250,350,200);
//face
    noStroke();
    fill(255,206,157);
    ellipse(300,250,250,280);
//glasses
    noStroke();
    fill("grey");
    rect(200,210,70,50);
    fill("grey");
    rect(330,210,70,50);
    fill("grey");
    rect(280,230,40,5);
//face
    noStroke();
    fill(255,206,157);
    rect(205,215,60,40);
    fill(255,206,157);
    rect(335,215,60,40);
//eyes
    noStroke();
    fill("black");
    circle(240,235,20,20);
    fill("black");
    circle(360,235,20,20);
    fill("white");
    circle(245,235,5,5);
    fill("white");
    circle(365,235,5,5);
//ears
    noStroke();
    fill(255,206,157);
    ellipse(170,250,60,80);
    fill(255,206,157);
    ellipse(430,250,60,80);
//hair
    noStroke();
    fill(74,38,0);
    rect(210,190,60,10);
    fill(74,38,0);
    rect(330,190,60,10);
//nose
    noStroke();
    fill(255,175,107);
    triangle(285, 280, 315, 280, 300, 300);
//blush
    noStroke();
    fill(255,156,141);
    circle(230,310,55,55);
    fill(255,156,141);
    circle(370,310,55,55);
//lips
    noStroke();
    fill("brown");
    rect(270,330,60,15);
//neck
    noStroke();
    fill(255,206,157);
    rect(260,370,80,80);
//cloth
    noStroke();
    fill(134,51,43);
    rect(240,420,120,60);
    fill(134,51,43);
    ellipse(300,560,400,200);
    fill(134,51,43);
    rect(100,560,400,200);
    fill(74,0,0);
    rect(150,560,15,40);
    fill(74,0,0);
    rect(440,560,15,40);
//hair
    noStroke();
    fill(74,38,0);
    ellipse(220,130,80,100);
    fill(74,38,0);
    ellipse(170,180,61,80);
    fill(74,38,0);
    ellipse(260,100,60,80);
    fill(74,38,0);
    ellipse(380,130,80,100);
    fill(74,38,0);
    ellipse(430,180,61,80);
    fill(74,38,0);
    ellipse(340,100,60,80);
    fill(74,38,0);
    ellipse(130,370,80,160);
    fill(74,38,0);
    ellipse(470,370,80,160);
    fill(74,38,0);
    ellipse(125,280,30,70);
    fill(74,38,0);
    ellipse(475,280,30,70);
}

Claire Lee – Project 01 – Face

This project was definitely a learning experience for me. I realized that it’s a lot more difficult for me to translate the image I want to create to the canvas when I’m using code as a medium instead of a program like Photoshop or Illustrator. It took a lot of little adjustments, but I’m happy with how it came out and I think I learned a lot.

project01_face

function setup() {
    createCanvas(600, 600);
    background(255, 208, 223);

    noStroke();
    fill(50,30,30);
    rect(150,300,300,250,0,0,50,50); 
    //hair base

    noStroke();
    fill(50,30,30);
    ellipse(300,300,300,300);
    //top of hair

    stroke(150);
    strokeWeight(2);
    fill(200);
    ellipse(300,600,300,350);
    //body

    stroke(246, 193, 161);
    strokeWeight(2);
    fill(255,229,196);
    rect(260,380,80,100,0,0,40,40);
    //neck

    stroke(246, 193, 161);
    strokeWeight(2);
    fill(255,229,196);
    ellipse(430,330,38,38);
    //right ear

    stroke(246, 193, 161);
    strokeWeight(2);
    fill(255,229,196);
    ellipse(170,330,38,38);
    //left ear

    stroke(246, 193, 161);
    strokeWeight(2);
    fill(255,229,196); 
    ellipse(300,300,250,250);
    //base for face
  
    noStroke();
    fill(0);
    ellipse(360,320,20,20);
    //left eye

    noStroke();
    fill(0);
    ellipse(240,320,20,20);
    //right eye

    noStroke();
    fill(238,125,77);
    triangle(300,330,280,350,320,350);
    //nose
    
    noStroke();
    fill(215, 59, 62);
    ellipse(300,380,75,50);
    //mouth (part one) 
    //I tried to draw an arc but that didn't work

    noStroke();
    fill(255,229,196);
    rect(250,355,90,25);
    //mouth (part two), improvised

    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(230,320,95,90);
    //glasses (right)

    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(370,320,95,90);
    //glasses (left)

    line(280,318,320,318); 
    //glasses(middle)

    line(174,298,184,308);
    //glasses(frame left)

    line(416,308,426,298);
    //glasses(frame right)

    noStroke();
    fill(50,30,30);
    rotate(PI/5); 
    //question: why does ellipse move locations when being rotated?
    ellipse(420,-20,200,90); 
    //right side bangs

    noStroke();
    fill(50,30,30);
    rotate(46);
    ellipse(-105,-302,130,50);
    //left side bangs

}

Ankitha Vasudev – Project 01 – Self Portrait

(Press on portrait to change background)

sketch

// Ankitha Vasudev
// Section B 
// ankithav@andrew.cmu.edu
// Project-01-Face
 
function setup() {
    createCanvas(600, 600);
}

function draw() {
    noStroke();

    //background squares 
	background(255, 218, 255);
    fill(255, 180, 255);
    rect(10, 10, 580, 580);
    fill(213, 231, 255);
    rect(20, 20, 560, 560);
    rect(30, 30, 500, 500);

    //background color change 
  if (mouseIsPressed) {
    if (mouseButton === LEFT) {
      fill(172, 220, 255);
      rect(0, 0, 600, 600);
      fill(255, 220, 255);
      rect(10, 10, 580, 580);
      fill(182, 234, 255);
      rect(20, 20, 560, 560);
    }
}

    //hair
    fill(1);
    rect(210, 180, 212, 240, 200, 200, 15, 20);
    fill(60, 0, 0);
    rect(220, 190, 190, 215, 150, 150, 15, 20);

    //shoulders
    fill(255, 180, 255);
    rect(180, 428, 260, 185, 20);
    triangle(160, 600, 180, 450, 180, 600);
    triangle(440, 600, 440, 450, 460, 600);
    fill(189, 190, 255);
    arc(310, 428, 60, 60, 0, PI, OPEN);
    stroke(189, 190, 255);
    strokeWeight(3);
    line(220, 470, 200, 600);
    line(400, 470, 415, 600);

    //neck
    noStroke();
    fill(123, 77, 0);
    rect(290, 370, 40, 75, 100);

    //ears
    ellipse(231, 305, 18, 30);
    fill(96, 68, 0);
    ellipse(232, 305, 14, 18);
    fill(237, 239, 122);
    ellipse(231, 320, 7, 7);

    //face
    fill(123, 77, 0);
    rect(233, 205, 150, 200, 100);

    //eyes
    fill(255);
    arc(270, 290, 30, 30, PI, 0, OPEN);
    arc(343, 290, 30, 30, PI, 0, OPEN);
    fill(0);
    ellipse(270, 284, 15, 15);
    ellipse(343, 284, 15, 15);

    //left eyebrow 
    beginShape();
    vertex(252, 268);
    vertex(264, 265);
    vertex(290, 267);
    vertex(292, 263);
    vertex(262, 262);
    endShape(CLOSE);

    //right eyebrow 
    beginShape();
    vertex(323, 263);
    vertex(351, 262);
    vertex(363, 268);
    vertex(352, 265);
    vertex(325, 267);
    endShape(CLOSE);

    //glasses
    stroke(115, 0, 113);
    strokeWeight(3);
    noFill();
    rect(250, 270, 40, 30, 5, 5, 90, 90);
    rect(323, 270, 40, 30, 5, 5, 90, 90);
    line(290, 280, 323, 280);
    line(234, 272, 251, 272);
    line(361, 272, 382, 272);

    //nose
    stroke(0);
    strokeWeight(2);
    line(310, 310, 300, 335);
    line(300, 339, 310, 338);

    //mouth
    fill(60, 0, 0);
    quad(290, 365, 325, 365, 315, 372, 292, 374);
}

I tried to experiment with multiple shapes and commands using a very animated style of drawing. I wanted to include features that were specific to me; these include my purple-frame glasses and my brown and black hair. Lastly, I used a palette comprising of my favorite colors (pastel shades of blue and pink) for the background and used the mouseIsPressed command to alter the background color. 

Claire Lee – Looking Outwards – 01

Cell by Keiichi Matsuda and James Alliban is an interactive art installation that uses Xbox Kinect technology to trace viewers across the screen by adding tags taken from social media to their form, until their entire screen “self” is comprised of lines of text that seem to simultaneously represent everything and nothing at all. I found this project to be fascinating because of its technological advancement in the interactive art field and its piercing social commentary.

The piece provokes a lot of thought about how we construct our sense of self in the new digital world. It seems to be asking the question: do we put ourselves into social media, or does social media put itself into us?

Cell at Audi CIty Beijing in December 2013.

In collaboration with Microsoft and the openFrameworks community, the creators of this installation pioneered a new method of making interactive displays by building a new code library that supports Kinect for Windows. This code is on an open-source platform, so it is bound to inspire many future projects as well.

James Alliban & Keiichi Matsuda: Cell, Interactive Installation 2011