Month: August 2019

Mari Kubota- Project 01- Face

In this project I learned shape commands to draw ellipses, triangles, rectangles, lines, and quads. Being organized was important in this project because of the many shapes and the affect the order of the code had on the result.

sketch

function setup() {
    createCanvas (400,400);
    background (255,234,242);

//body
      fill(225,184,123);
      noStroke();
    ellipse (200,400,150,300);
//head
        fill (255);
        noStroke();
    ellipse (200,200,150,170);
//hair bun
        fill (87, 79, 56);
        noStroke();
    ellipse (200,125, 125,45);
//blush
        fill (218,97,139);
        noStroke();
    ellipse (160,225,30,20);
    ellipse (240,225,30,20);
//eyes
        fill (0);
    ellipse (170, 205, 20,20);
    ellipse (230, 205, 20,20);
//mouth
        stroke(0);
        strokeWeight(4);
    line(185,250,215,250);
//eyebrows
        fill(0);
    triangle (185, 180, 160, 175, 155, 180);
    triangle (245, 180, 240, 175, 215, 180);
//hair
        noStroke ();
        fill (87, 79, 56);
    quad(137, 125, 186, 120, 140, 250, 100, 276);
    quad(186, 120, 262, 120, 269, 163, 230, 176);
    quad(220, 150, 269, 163, 290, 280, 260, 250);
    quad(260, 245, 290, 280, 240, 320, 230, 300);
    quad(135, 243, 100, 276, 160, 320, 170, 300);
    ellipse(200,90,55,55);
//ribbon
        noStroke ();
        fill (255,0,0);
    quad(220,85,220,115,180,85,180,115);
        stroke(0);
        strokeWeight(1);
    ellipse(200,100,10,10);
        
  }

Ellan Suder-LookingOutwards-01

Gameplay summary of from Engadget.

One of my current favorite video games is Breath of the Wild from Nintendo’s Legend of Zelda series, a nonlinear and open world action-adventure game. It’s the first game of its kind in the series and inspired by other open-worlds such as Skyrim. Besides the beautiful visuals, it’s just a really fun game to play.

I can’t claim to know much about game systems, but I’ve heard how BOTW’s physics system has impressed many. The game was built in a modified version of the Havok Physics Engine. The game developers had to work to create a new physics engine that was consistent across the game world and worked logically without negatively affecting gameplay. (One of the game developers recounts a time where during testing, he entered an area only to find that all the objects normally there had been blown away by the wind.) The engine rewards exploration and experimentation. ‘For instance, in Breath of the Wild you might have a puzzle where making use of the physics, there’ll be various ways you can solve that puzzle’ (Aonuma, series producer).

As well as being a new direction for Zelda, the game is a popular innovation on the open-world genre because it simplifies the needless complexity of similar games in its genre and introduces new ways to interact with the environment. Instead of following a list of to-do list of quests, the players are allowed to focus on the expansive world and direct themselves. I really admire how they were able to create a game that encourages the players to move all across the map and gives them almost complete freedom. BOTW’s greatest success was in capturing the spirit of adventuring into the wild.

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);
}

Charmaine Qiu – Project 01 – Face


sketch

Creating an illustration for the first time through coding was an unique experience.

  /*
  Charmaine Qiu
  Section E
  charmaiq@andrew.cmu.edu
  Assignment 1 Self-portrait
  */


function setup() {
    createCanvas(300, 300);
    background(42, 57, 98);

//hair
    fill(47, 20, 20);
    noStroke();
    ellipse(150, 100, 170, 170);
    rect(65, 110, 169, 90);

//shirt
    fill(163, 144, 202);
    noStroke();
    ellipse(150, 305, 175, 150);

//face
    fill(255, 222, 222);
    noStroke();
    ellipse(150, 130, 130, 170);
    rect(135, 200, 30, 30);
    ellipse(100, 140, 50, 50);
    arc(150, 230, 30, 30, 0, PI, OPEN);
    ellipse(210, 290, 45, 45);
    
//Bangs
    fill(47, 20, 20);
    arc(185, 70, 120, 100, QUARTER_PI, PI + QUARTER_PI, OPEN);
    bezier(140, 40, 160, 30, 200, 30, 220, 137);

//features
    fill(0);
    arc(120, 130, 12, 12, 0, PI, OPEN);
    arc(180, 130, 12, 12, 0, PI, OPEN);
    arc(150, 170, 40, 40, 0, PI, OPEN);
    stroke(90);
    strokeWeight(4);
    line(115, 100, 125, 100);

    fill(255, 153, 153);
    noStroke();
    triangle(150, 140, 155, 150, 145, 150);
    ellipse(110, 160, 30, 30);
    ellipse(190, 160, 30, 30);
    arc(150, 185, 20, 20, PI, 0, OPEN);
    fill(150);
    rect(80, 150, 5, 13);

//hand
    stroke(255, 222, 222);
    strokeWeight(10);
    line(200, 250, 205, 270);
    line(220, 250, 215, 270);

}

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);
}

Min Ji Kim Kim – Project 01 – Face

sketch

/*
Min Ji Kim Kim
Section A
mkimkim@andrew.cmu.edu
Project-01
*/

function setup() {
    createCanvas(600,600);
    background(103,186,178);
}

function draw() {
    noStroke();
    //hair
    fill(60,36,36);
    rect(152,90,285,400,150,150,0,0);
    
    //shirt
    fill(255);
    rect(170,470,250,107,50,50,0,0);

    //neck
    fill(225,175,160);
    rect(266,400,65,105,30);

    //head
    fill(235,190,180);
    rect(170,130,250,315,200);

    //nose
    fill(190,130,120);
    ellipse(300,320,4,20);

    //mouth
    fill(250,137,143);
    arc(310,350,100,135,0,HALF_PI+QUARTER_PI,CHORD);

    //glasses
    fill(90,0,24);
    ellipse(250,260,75,70);
    ellipse(350,260,75,70);

    fill(235,190,180);
    ellipse(250,260,65,60);
    ellipse(350,260,65,60);

    //glasses bridge
    fill(90,0,24);
    rect(287,255,26,8);

    //eyes
    fill(0);
    ellipse(255,260,10,18);
    fill(0);
    ellipse(345,260,10,18);

    //eyebrows
    fill(60,36,36);
    triangle(210,215,225,205,287,215);
    triangle(312,215,375,205,390,215);

    //bangs
    fill(60,36,36);
    arc(320,151,170,70,0,PI+QUARTER_PI,OPEN);
    arc(154,119,180,220,0,HALF_PI,OPEN);
    }

This was my first time coding anything and although it was challenging at first, I had fun discovering how different shapes and colors came together to make this self portrait. I particularly learned about the importance of layering elements in the right order. 

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

Min Ji Kim Kim – Looking Outwards – 01

A video by creator Ken Kawamoto introducing the tempescope and its functionality.

A few years ago, I discovered this video while scrolling through my Facebook feed. I was fascinated by the idea that this object could not only serve an aesthetic purpose as house decor but also a functional one to remind one, for example, to take their umbrella because it’s raining.

Tempescope is essentially a clear case that visually displays weather conditions using a custom app. You can either set your location or manually choose whatever effect you want. Creator Ken Kawamoto built the first prototype in 2012 using the Objective-C and C++ programs after wanting to experience the Okinawa weather from his living room. In 2013, he created an open source version (available on GitHub) so other people could reproduce the tempescope at home.

After receiving a lot of attention from multiple media outlets, Kawamoto recruited a team of five people to create a retail version of the prototype and a funding campaign was initiated on Indiegogo. Although it received substantial attention, the campaign ultimately did not reach its funding goal and as of now, the project seems to be at a halt with no further development plans.

You can learn more about the tempescope here.

Mari Kubota – Looking Outwards – 01

The Hayden Planetarium at the American Museum of Natural History in New York City is run using a software the museum developed over almost 20 years called the Digital Universe Atlas. The Digital Universe Atlas was created with the collaboration of a Swedish Company, SCISS, who developed a similar software called Uniview. The software was programmed using the Partiview data visualization engine designed by Stuart Levy. Using data from national and international organizations, the Digital Universe visually conveys information about Earth, every known star, satellite, and planet all the way to the known universe to scale.

Hayden Planetarium by the American Museum of Natural History

This allows the user to understand the astronomical distance and scale of the universe and everything inside it. Though the software is mainly used for planetariums for show, you can also download the software and navigate through the solar system, the milky-way galaxy, and the constellations yourself. This interactive and educational software brings the universe into perspective and where we stand in the universe.  


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);
}