Month: September 2017

Nayeon_LookingOutwards01

I saw this video few weeks ago and it was most interesting project I’ve seen recently. It’s simple, but it has technology and design principle that I love ‘Time and space’. This project created movement in space with only water using lights and time.

Sports drink brand Gatorade made a advertisement for G Active promotion using 3D technology and motion capture created by Unit 9. It had a real-size running water athlete, animated it in mid air, and caught it on camera. They used motion caption technology to capture the real person’s movement like running, jumping and kick boxing. And using 3D liquid which has liquid drop into specific small halls and express each frames very precisely, they filmed each frames like stop motion animation. They created physical 3D animation with interaction between lights and time. Since water drops are usually invisible to human eyes, they need to come up with new idea to hold very short time frame. Using flash and strobe light, they had succeed to capture the each moment of frame. The director of this project said during the interview that he got inspired by his formal work experience as a photographer. He used to tell the story out of image using unusual way into photography and this leads him to capture something new.

A running movement only created by water drops

Here is the website of the production. You can check more detailed description about their project.

Unit 9 website

 

LookingOutwards-1-sjahania

Anne Cleary and Denis Connolly are artists that focus on perception and the relationship between the world and its inhabitants. They created the “Meta-Perceptual Helmets,” which allow humans to see the world from the point of view of different animals.

I find this interesting because humans have never truly been able to experience the perspective of another animal. The artists questioned why our eyes are positioned the way they are, and what kind of limitations or advantages we have over other creatures. The project was intended to be an interactive art exhibit, but I think it could be used for science as well. Seeing from the perspective of animals can help us understand more about the creatures themselves and can allow scientists to develop tools that allow us to see differently.

Website link: http://www.connolly-cleary.com/Home/helmets.html?utm_source=DesignTAXI&utm_medium=DesignTAXI&utm_term=DesignTAXI&utm_content=DesignTAXI&utm_campaign=DesignTAXI

Hanna Jang-Looking Outwards-01

‘Paris” in David Hoe’s Modern Map Art Prints’

I explored some of the suggested blogs and stumbled upon modern map art that was created by David Hoe (Mini Cloud Studios). What struck me the most about his art was that they were made up of various simple elements such as rectangles and squares. This also reminded me of our first project assignment for 15-104.

Although the small individual elements were rather simple, they made up to produce a very intricate and detailed masterpiece. David Hoe’s modern map art was compared to jigsaw puzzles. The artist himself deconstructed the puzzle to individually color each piece before assembling altogether again with his own custom designed software. The art is made using tools such as Node.js, Google Maps API and node-canvas package.

I had only seen such similar patterns found in modern map art from actual printed maps in my Geology class before. David Hoe’s works made me appreciate maps as a form of art for the first time, since I had only seen it as a tool for navigating purposes before. The additional care to color and shapes in the modern map art compared to regular maps is crucial. However, maybe using a wider variety of patterns could increase the art’s individuality. Overall, I really enjoyed the sense of harmony that the art seems to express.

monicah1-project-01

my-sketch.js

function setup() {
    createCanvas(600, 600);
    background(7,1,247);
}

function draw() {
    
    

    var skin = color(240,220,167);
    fill (skin);
    //ellipseMode(center);
    ellipse(300,196,270,270);

    var white = color(255,255,255);
    fill (white);
    ellipse(250,150,50,10);
    ellipse(350,150,50,10);
    var pink = color(240,138,177);
    fill (pink);
    ellipse(200,200,100,100);
    ellipse(400,200,100,100); 
    //line(280,170,310,190);

    line(320,250,290,180);


    //ellipsemode(center);
    var skin = color(240,220,167);
    fill (skin);
    ellipse(300,260,50,10);
    ellipse(300,255,50,10);


    //fill(233,93,74);
    ellipseMode(center);
    ellipse(250,600,70,70);
    ellipse(350,300,70,70);
   
}

It is interesting to see how compositions of simple shapes can form variety of images. I enjoyed seeing the transition from numbers to shapes.

Project-1-Face-sjahania

sketch

function setup() {
    createCanvas(200, 200);
    background(0,83,124);
}
function setGradient(x, y, w, h, c1, c2) {

  noFill();

  // Top to bottom gradient
for (var i = y; i <= y+h; i++) {
  var inter = map(i, y, y+h, 0, 1);
  var c = lerpColor(c1, c2, inter);
  stroke(c);
  line(x, i, x+w, i);
 }
}

function draw() {
	//bow
	fill(255,95,60);
	stroke(0);
	strokeWeight(0.5);
	triangle(80,85,85,55,110,75);
	triangle(120,85,115,55,90,75);
	ellipse(100,65,8,10);

	//hair
	noStroke();
	fill(55,22,0);
	rect(75,90,50,80);

	//highlights
	c2 = color(255,206,69);
	c1 = color(55,22,0);
	setGradient(75,120,50,30,c1,c2)

	//neck
	fill(255,213,161);
	rect(88,120,24,20);
	arc(100,140,24,29,0,PI);

	//jawline
	noFill();
	strokeWeight(.5);
	stroke(0);
	arc(100,103,40,60,0,PI);

	//face
	noStroke();
	fill(255,213,161);
	ellipse(100,100,50,60);

	//bangs
	fill(55,22,0);
	arc(90,90,45,50,PI-QUARTER_PI,TWO_PI-QUARTER_PI);
	arc(110,90,45,50,PI+QUARTER_PI,QUARTER_PI);
	fill(255,213,161);
	arc(100,100,45,50,QUARTER_PI,TWO_PI-QUARTER_PI);
	arc(100,100,45,50,PI+QUARTER_PI,PI-QUARTER_PI)


	//whites of eyes
	fill(255);
	ellipse(90,100,10,7);
	ellipse(110,100,10,7);

	//eye color
	fill(55,22,0);
	ellipse(90,100,7,7);
	ellipse(110,100,7,7);

	//eyebrows
	noFill();
	stroke(55,22,0);
	strokeWeight(1.75);
	arc(89,94,15,4,PI,TWO_PI-QUARTER_PI);
	arc(111,94,15,4,PI+QUARTER_PI,TWO_PI);

	//nose
	noFill();
	stroke(55,22,0);
	strokeWeight(1);
	arc(100,110,8,8,PI,TWO_PI);

	//mouth
	noStroke();
	fill(0);
	arc(100,118,12,9,0,PI);

	//tongue
	fill(255,133,159);
	arc(100,120,8,5,0,PI);

	//shirt
	fill(255,95,60);
	noStroke();
	rect(60,145,80,60,25,25,0,0);

	//shirt collar
	stroke(0);
	strokeWeight(.5);
	arc(93,152,20,20,QUARTER_PI,PI+QUARTER_PI);
	arc(107,152,20,20,TWO_PI-QUARTER_PI,PI-QUARTER_PI);

	//arm holes
	fill(0,83,124);
	triangle(75,200,75,170,78,200);
	triangle(122,200,125,170,125,200);
	noStroke();
	fill(255,213,161);
	triangle(88,145,100,159,112,145);



}

I had a lot of trouble at first, especially since I have no eye for aesthetic, but eventually I got the hang of figuring out where things should go. I also added something from the p5.js website that allowed me to put a gradient in my hair.

LookingOutwards-01

Taking inspiration from old De Stijl works, Kyuha Shim is able to input images as well as type into code to create “RASTER” (2017). Shim is a computational designer and researcher at CMU and his work “RASTER” has been funded by CMU. By utilizing p5 Shim has been able to create images ranging from literal to more abstract interpretations. I admire this work as Shim is able to combine both an advanced knowledge of De Stijl work both technically but visually. She is able to balance both of their contexts and combine them creating this work that can applied to our world. Other works by Shim also relate to “RASTER” as manipulating images and type through generative code is common through his work. Users who utilize “RASTER” and range in understanding of De Stijil work will be able to understand at a deeper level their proportions as well as aesthetic that is apparent through the amount of work.

dahyec-Project 01

sketch

function setup() {
    createCanvas(500,600);
    background(226,82,98);
}

function draw() {

//background
strokeWeight(0);
fill (182,68,81);
rect (0,0,700,80);
rect (0,150,700,80);
rect (0,300,700,80);
rect (0,450,700,80);

//hair
strokeWeight(0);
fill(137,54,73);
ellipse(250,230,300,270);
rect(100,240,300,500);


//ears
fill(226,110,112);
ellipse(135,300,40,70);
fill(226,110,112);
ellipse(365,300,40,70);
fill(85,33,64,80);
ellipse(135,300,20,40);
fill(85,33,64,80);
ellipse(365,300,20,40);

//face
strokeWeight(0);
fill(82,36,67,90);
ellipse(242,310,220,260);
strokeWeight(0);
fill(226,110,112);
ellipse(250,300,220,260);


//body
strokeWeight(0);
fill(233,202,163);
ellipse(250,580,355,240);
fill(233,202,163);
rect(73,565,354,240);


//eyes 
strokeWeight(0);
fill(85,33,64);
ellipse(205,290,26,40);
ellipse(310,290,26,40);


//nose
strokeWeight(0);
ellipse(258,325,10,10);

//mouth
fill(85,33,64,80);
arc(255, 380,33,30,0,PI);
fill(85,33,64);
arc(255, 365, 60,13,PI,0,PI);

//bang
fill(82,36,67,60);
rect(178,163,180,100);
fill(137,54,73);
rect(185,155,180,100);

//eyelash
strokeWeight(3);
line(225,289,215,285);
line(330,289,320,285);

//hairpin
strokeWeight(5);
line(390,210,350,240);
strokeWeight(5);
line(390,230,360,253);

}

In processing my self-portrait, I created simplified and 2D styled design.
Before starting with this project, I sketched my idea and then illustrated with illustrator so I can see what it would look like. In order to make it more 2D looking, I added some shadow under my front hair and face. Also, I only used 2 toned colors to look more simplified. I had a lot of fun learning and utilizing p5.js geometric elements.

danakim-Project-01-face

danakim_project01

//Dana Kim
//danakim@andrew.cmu.edu
//Section D
//Self Portrait

function setup() {
    createCanvas(400, 400);
    background(170, 200, 192);
}

function draw() {
    //Background grid stroke properties
    stroke(244, 205, 44);
    strokeWeight(5);

    //Background grid
    line(100, 0, 100, 400);
    line(200, 0, 200, 400);
    line(300, 0, 300, 400);
    line(0, 100, 400, 100);
    line(0, 200, 400, 200);
    line(0, 300, 400, 300);

    //Hair
    noStroke();
    fill(33, 23, 12);
    ellipse(216, 147, 105, 71);
    ellipse(157, 168, 54, 61);
    ellipse(146, 250, 47, 212);
    ellipse(250, 250, 52, 200);
    ellipse(200, 250, 30, 200);
    ellipse(190, 250, 35, 200);
    ellipse(175, 250, 42, 205);
    ellipse(215, 250, 25, 203);
    ellipse(225, 250, 30, 206);

    //Face
    noStroke();
    fill(228, 195, 173);
    ellipse(200, 210, 130, 137);

    //eyes
    fill(265);
    ellipse(230, 200, 25, 23);
    ellipse(168, 200, 25, 23);

    fill(114, 67, 6);
    ellipse(234, 200, 16, 18);
    ellipse(172, 200, 16, 18);

    //eyebrows
    noFill();
    stroke(33, 23, 12);
    strokeWeight(5.0);
    strokeJoin(ROUND);
    beginShape();
    vertex(217, 172);
    vertex(243, 165);
    vertex(251, 174);
    endShape();

    line(149, 174, 185, 174);

    //Nose
    stroke(33, 23, 12);
    strokeWeight(1);
    line(200, 205, 196, 230);
    line(196, 230, 200, 230);

    //Lips
    noStroke();
    fill(227, 157, 143);
    triangle(189, 247, 197, 240, 209, 247);
    triangle(199, 247, 209, 240, 216, 247);

    fill(211, 132, 116);
    arc(200, 247, 27, 15, 0, PI, CHORD);

    //neck
    fill(228, 195, 173);
    rect(185, 270, 30, 50);

    //body
    fill(44, 59, 134);
    rect(150 ,320, 100, 20);

    fill(90, 100, 149);
    quad(160, 340, 240, 340, 235, 400, 165, 400);
}

I can barely draw people by hand let alone coding. However, the coding aspect of the project was not difficult. If anything it was a bit time consuming figuring out coordinates.

rgroves – project01 – face

becky – face

function setup() {
    createCanvas(600, 750);
    background(235);
}

function draw() {
	angleMode(DEGREES);
	strokeWeight(0);


	//light hair
	fill(250, 230, 150);
	beginShape();
	vertex(125, 225);
	vertex(120,380);
	vertex(55, 475);
	vertex(55, 590);
	vertex(40, 620);
	vertex(150, 600);
	vertex(175, 625);
	vertex(220, 600);
	vertex(290, 290);
	vertex(125, 225);
	endShape();
	triangle(360, 630, 410, 350, 510, 550);
	triangle(510, 550, 490, 615, 380, 600);

	//darkhair
    fill(168, 128, 120);
    ellipse(350, 254, 450);

    //light hair
	fill(250, 230, 150);

    triangle(150, 500, 175, 300, 280, 500);

	//face shape
	fill(250 ,235 ,195);
	ellipse(378, 242, 345);
	//chin
	beginShape();
	curveVertex(235, 160);
	curveVertex(235, 160);
	curveVertex(193, 355);
	curveVertex(215, 510);
	curveVertex(270, 568);
	curveVertex(347, 550);
	curveVertex(475, 420);
	curveVertex(538, 306);
	curveVertex(538, 306);
	endShape();	

	//ear
	ellipse(450, 425, 150, 70);

	//eye1
	push();
	translate(300,303);
	rotate(25);
	fill(240,240,230);
	ellipse(0, 0, 70, 30);
	fill(105, 130, 170);
	ellipse(0,-5,40);
	fill(250, 220, 195);
	arc(0, 0, 70, 70, 180, 360, CHORD);
	pop();

    //hair 
    push();
    fill(168, 128, 120);
    translate(340, 175);
    rotate(75);
    ellipse(0, 0, 200, 420);
    pop();
    

    //shadow
	fill(260, 212, 170)

	beginShape();
	curveVertex(550, 257);
	curveVertex(550, 257);
	curveVertex(422, 287);
	curveVertex(350, 465);
	curveVertex(363, 530);
	curveVertex(363, 530);
	endShape();

	curveTightness(1.5);
	beginShape();
	curveVertex(367, 464);
	curveVertex(367, 464);
	curveVertex(338, 467);
	curveVertex(330, 465);
	curveVertex(320, 460);
	curveVertex(316, 478);
	curveVertex(315, 480);
	curveVertex(308, 478);
	curveVertex(304, 473);
	curveVertex(274, 478);
	curveVertex(306, 487);
	curveVertex(334, 505);
	curveVertex(350, 520);
	curveVertex(350, 520);
	endShape();

    curveTightness(0);
	beginShape();
	curveVertex(350, 520);
	curveVertex(350, 520);
	curveVertex(335, 505);
	curveVertex(318, 515);
	curveVertex(297, 506);
	curveVertex(290, 510);
	curveVertex(288, 519);
	curveVertex(290, 534);
	curveVertex(287, 553);
	curveVertex(274, 569);
	curveVertex(274, 569);
	endShape();
   
    beginShape();
	curveVertex(215, 510);
	curveVertex(274, 569);
	curveVertex(347, 550);
	curveVertex(475, 420);
	curveVertex(538, 306);
	curveVertex(550, 257);
	curveVertex(550, 257);
	endShape();

	//eye1

	push();
	translate(440, 360);
	rotate(25);
	fill(240,240,230);
	ellipse(0, 0, 70, 30);
	fill(95, 120, 150);
	ellipse(0,-5,40);
	fill(230, 200, 185);
	arc(0, 0, 70, 70, 180, 360, CHORD);
	pop();
}

Rebecca Groves
Section B

Reflection:
For my portrait, I wanted to maintain elements of my drawing style, which is generally not very geometric. As a compromise, I represented the nose and mouth in as organic a style as I could in this medium, and the rest of the face – the hair, eyes, and ear – are geometric.

hschung-Looking Outwards-1

I saw a very interesting project a few weeks ago in Jersey City at an exhibition featuring a range of arts, including interactive art, paintings, etc. In this project, there is a camera that picks up people’s faces and recreates them using squiggly, long, noodle-like shapes, and projects them on a wall.

At first, I didn’t know what the piece was doing, but after stepping back a bit I could see that the camera was picking up faces and recreating them in a fun, creative way. I appreciated it because it made people curious and gave them a laugh after looking at their silly, distorted reflections.

I’ve seen interactive art that has similar principles of using camera recognition and distorting or changing the information it picks up. I knew it involved code, and I was in a state of awe, wondering how it did that, how the artist made this happen.

Something that might have been cool would be if the distorted image stayed put together for a bit longer; once the face(s) in front of the camera moved, the squiggly noodle-faces would fall apart almost instantly. That encouraged people to stay still and watch the squiggly portrait appear, however, so I think the fact that the art was so ephemeral was also a point of interest that gathered an audience.

I think the artist’s inspiration probably came from their ability to make creatively with code, and to encourage their audience to explore, interact, and question.
IMG_3103.MP4

IMG_3105.MP4