Month: September 2017

dnam-project01-face

sketch

// Doo Won Nam
// 15-104 :: 1 Section B
// dnam@andrew.cmu.edu
// Assignment-portrait

function setup() {
    createCanvas(268, 293);
    background(248, 173, 133);
    noStroke();
    fill("black");
    rect(0, 0, 268, 111);
    fill("black");
    rect(245, 111, 12, 70);
    fill("black");
    rect(2, 121, 86, 22);
    fill("black");
    rect(134, 121, 88, 22);
    fill("black");
    ellipse(40, 163, 20, 20);
    fill("black");
    ellipse(175, 163, 20, 20);
    fill(211, 149, 116);
    triangle(78, 210, 108, 150, 98, 210);
    fill("pink");
    triangle(98, 210, 108, 150, 127, 210);
    fill(240, 162, 150);
    rect(58, 240, 124, 10);
    fill(211, 149, 116);
    rect(58, 250, 124, 10);
}

function draw() {
    if (millis() > 2000) {
        osc.stop();
        noLoop();
    }
}

I wanted to create a pixel head portrait of myself using my limited knowledge of P5JS. I used the color schemes to show shadow and light.

amui1 – Looking Outwards-01

This short film, “The Wishgranter,” was created by 3 artists: Kal Athannassov, John McDonald, Echo Wu. They are all part of the Ringling College of Art and Design.

“The Wishgranter” is ultimately a love story created by an apathetic creature that lives under a fountain.

What I love about animated shorts is that it communicates a strong message through an entertaining and creative medium. I admire that a video of 5 minutes entails a long and thoroughly thought out development process, including thinking on script, characters, setting, music, action, and sounds. What I admire about “The Wishgranter” in particular is the emotion the artists communicate through their characters. For example, it was very clear that the wishgranter was uninterested and unmotivated with his job, but by the end of the short, you could see that the wishgranter became motivated again and invested in delivering love to these two strangers.

A few more videos that inspired me are: “Scarlett” and “Sweet Cocoon” .

egrady – project1 – face

sketch

function setup() {
    createCanvas(500, 500);
    background(120, 200, 400);
    text("p5.js vers 0.5.12 test.", 10, 15);
    noStroke ();

    //background
    fill (0, 0, 0)
    rect (0, 0, 500, 100)
    rect (0, 200, 500, 100)
    rect (0, 400, 500, 100)


    //body
    fill (100, 10, 100)
    triangle (100, 500, 250, 250, 400, 500)   

    //head
    fill (255, 228, 196)
    rect(200, 100, 100, 250);

    //eyes
    fill (255, 255, 255)
    ellipse (200, 200, 50, 50);
    ellipse (300, 200, 50, 50);
    fill (0, 0, 0);
    ellipse (300, 200, 25, 25);
    ellipse (200, 200, 25, 25);

    //mouth
    fill (250, 128, 114)
    rect (175, 270, 150, 60)
    fill (0, 0, 0)
    rect (180, 275, 140, 50);
    fill (255, 255, 255)
    rect (180, 275, 22, 22)
    rect (210, 275, 22, 22)
    rect (240, 275, 22, 22)
    rect (270, 275, 22, 22)
    rect (298, 275, 22, 22)
    rect (180, 303, 22, 22)
    rect (210, 303, 22, 22)
    rect (240, 303, 22, 22)
    rect (270, 303, 22, 22)
    rect (298, 303, 22, 22)

    //hair
    fill (139, 69, 19)
    rect (195, 75, 20, 50)
    rect (225, 75, 20, 50)
    rect (255, 75, 20, 50)
    rect (285, 75, 20, 50)

    //nose
    fill (222, 184, 135)
    triangle (220, 250, 240, 210, 340, 260);

    //eyebrows
    fill (80, 50, 50)
    rect (175, 145, 50, 25)
    rect (275, 145, 50, 25)

}

function draw() {
}

Although it may not look like it, considering the fairly simplistic result, I actually had a difficult time working on this project. My programming experience is extremely minimal, and my grasp of mathematics is limited at best. However, I did enjoy the whole process involved in the creation of this piece. I attempted to use some of the more difficult elements to program, such as utilizing curvature (with lines) and arcs, but my attempts were not so successful. So as a result, I hope to learn how to employ some of the more advanced elements in p5.js over the weekend, so that I can utilize them on the next project. I feel that for this project I wish I could’ve incorporated more exciting and original elements, as opposed to just constructing a piece out of mainly rectangles and simple shapes. Upon viewing some of the other fantastic student pieces, I hope to eventually achieve that level of proficiency with programming, and be able to create a more exciting and ‘innovative’ piece of work that better represents the ideas that I have in my head.

elizabew – looking outwards – 01 – SectionE

This interactive installation and multi-sensory experience, New Spring, is a collaboration between architect Azusa Murakami and artist Alexander Groves. The video showcases the installation’s beautiful design and artistic standing by using amazing filmography to demonstrate the way the installation works and how it is interacted with.

“Inspired by the famous cherry blossom festival in Japan, the installation is designed to create a special moment that brings people together. A fleeting shared experience that evokes a sense of the changing seasons.” — Studio Swine

What I love about this installation is the feeling of “out of this world”, almost like a fantasy. It is both incredibly pleasing to look and practically pulls you in to try and experience it. The mist-filled bubbles look both heavy and delicate at the same time (and can be held using special gloves according to the website).

I personally feel that if it was able to capture all five senses, it would be an even stronger piece (perhaps if the mist of each bubble smelled different and the bubbles themselves would taste different).

For further reading on this installation: New Spring

The overall design of this installation is inspiring (while only using minimal resources!), and the video itself is alluring as well. I hope to create designs that can capture the attention of both the visual and physical senses as well one day.

hannajan-Project01-Face

 

sketch.js

//Hanna Jang
//Section B 
//hannajan@andrew.cmu.edu
//Assignment-01

function setup() {
    createCanvas(600, 600);
    background(246, 184, 184);
}

function draw() {
    //Background Circles
    fill(255, 255, 255);
    ellipse(300, 260, 450, 450);
    fill(248, 218, 226);
    ellipse(300, 260, 410, 410);
	
    //Hair
	fill(187, 107, 48);
	ellipse(300, 250, 300, 300);
	noStroke();
	fill(187, 107, 48);
	ellipse(300, 300, 300, 300);
	triangle(315, 450, 400, 400, 430, 415);
	ellipse(320, 330, 200, 200);
	triangle(390, 400, 400, 410, 430, 415);
	
	//Face
	fill(255, 214, 187);
	ellipse(300, 250, 250, 200);
	noStroke();
	
	//Left Ear
	fill(255, 214, 187);
	ellipse(170, 260, 30, 40);
	noStroke();
	
	//Right Ear
	fill(255, 214, 187);
	ellipse(425, 260, 30, 40);
	noStroke();
	
	//Blush 
	fill(255, 176, 146);
	ellipse(243, 274, 30, 20);
	fill(255, 176, 146);
	ellipse(380, 274, 30, 20);
	
	//Eyes
	fill(255, 255, 255);
	ellipse(253, 250, 37, 37);
	fill(0);
	ellipse(250, 250, 20, 20);
	noStroke();
	fill(255, 255, 255);
	ellipse(373, 250, 37, 37);
	fill(0);
	ellipse(370, 250, 20, 20);
	noStroke();
	fill(255, 255, 255);
	ellipse(248, 245, 6, 6);
	noStroke();
	fill(255, 255, 255);
	ellipse(368, 245, 6, 6);
	noStroke();
	
	//Left Eyebrow
	fill(129, 70, 21);
	rect(220, 210, 55, 8);
	
	//Right Eyebrow
	fill(129, 70, 21);
	rect(350, 210, 55, 8);
	 
	//Nose
	fill(231, 185, 133);
	ellipse(320, 275, 30, 10);
	
	//Mouth
	fill(225, 81, 88);
	arc(300, 310, 50, 50, 0, PI+QUARTER_PI, OPEN);
	
	
}

Upon reading the instructions for this project, I imagined a face kind of similar to Nintendo Wii’s Mii avatars. I was especially inspired by the Mii avatars for the circular shape of the face I drew. I started with and focused a bit more on my hair, since I wanted a very specific shape for it. I sketched out the shape of the hair first on paper before deciding which shapes would best form the hairstyle in javascript. The gaze of the eyes were a bit time consuming and I moved around the different ellipses before I finally liked what I saw.

ClairS self-portrait

clair-self-portrait

//clair(sijing) sun
//session C
//sijings@andrew.cmu.edu
//Self-portrait-01


function setup() {
    createCanvas(640, 376);
    background(0,0,0);
}

function draw() {
    scale(0.8);
    noStroke();  
    fill(207,178,158); 
    ellipse(30, 30, 200, 200);  
    fill(228,186,162); 
    ellipse(130, 150, 200, 200);  
    fill(250,220,180); 
    ellipse(130, 300, 200, 200); 
    fill(218,170,136); 
    ellipse(210, 30, 200, 200); 
    fill(255,214,187); 
    ellipse(30, 430, 250, 260);
    fill(252,227,197);
    ellipse(290.2,152.2,100,100);
    
    // from here, most with transparency
    fill(241,213,187,100); 
    ellipse(100, 100, 180, 180);  
    fill(245,211,187,100); 
    ellipse(80, 160, 180, 180);  
    fill(241,213,187,10); 
    ellipse(200, 100, 180, 180);  
    fill(207,178,158);  
    ellipse(30, 30, 200, 200);  
    fill(250,219,180,30);
    ellipse(70,280,300,300);
    fill(255,224,188);
    ellipse(240,270,150,150);
    fill(255,196,160,50);
    ellipse(120,400,160,160);
    fill(255,223,204,50);
    ellipse(210,420,280,280);
    fill(252,225,182,50);
    ellipse(350,40,180,180);
    fill(255,222,204,50);
    ellipse(350,460,120,120);
    

    //left eye
    fill(255,223,204,50);
    ellipse(345,160,80,80);
    fill(248,189,142,50);
    ellipse(429.8,150,50,50);
    fill(251,206,169,80);
    ellipse(400.8,150,50,50);
    fill(251,206,169,80);
    ellipse(360.4,175.8,50,50);
    fill(216,167,126,120);
    ellipse(362.4,176.8,20,20);
    fill(177,111,57,120);
    ellipse(370,186,30,30);
    fill(156,83,24,120);
    ellipse(390,176,40,40);
    fill(189,89,6,120);
    ellipse(400,180,20,20);
    fill(208,97,5,100);
    ellipse(420,185,35,35);
    fill(208,97,5,150);
    ellipse(440,186,25,25);
    fill(187,85,1,120);
    ellipse(455,190,25,25);
    fill(109,49,0,120);
    ellipse(464,188,15,15);
    fill(177,111,57,200);
    ellipse(438.8,200,15,15);
    fill(119,69,28,200);
    ellipse(430,200,15,15);
    

    //left eyebrow
    fill(170,131,110,30);
    ellipse(310.2,140,60,60);
    fill(170,131,110,50);
    ellipse(352.6,128,40,40);
    fill(125,94,84,110);
    ellipse(386.8,122,40,40);
    fill(194,113,42,110);
    ellipse(386.8,122,40,40);
    fill(165,89,33,110);
    ellipse(414.4,125,60,60);
    fill(196,101,8,180);
    ellipse(433,127.8,35,35);

    //left cheak
    fill(236,189,163,20);
    ellipse(354,296.4,160,160);
    fill(255,219,176,60);
    ellipse(364,306.4,160,160);
    fill(243,187,152,60);
    ellipse(387.6,350.6,130,130);
    fill(251,180,95,60);
    ellipse(431.4,273.8,100,100);
    
    //nose
    fill(118,82,25,60);
    ellipse(459.2,326.2,35,35);
    fill(118,82,25,100);
    ellipse(462,315,25,25);
    fill(88,41,7,100);
    ellipse(462,345,10,10);
    fill(88,41,7,100);
    ellipse(468,355,15,15);
    fill(88,41,7,100);
    ellipse(475,357,15,15);
    fill(88,41,7,100);
    ellipse(487,357.5,15,15);
    fill(88,41,7,100);
    ellipse(493,350,15,15);
    fill(88,41,7,100);
    ellipse(491.5,348,15,15);
    fill(88,41,7,100);
    ellipse(493.5,346,15,15);
    fill(88,41,7,100);
    ellipse(497,342,15,15);
    fill(88,41,7,100);
    ellipse(502,346,20,20);
    fill(73,47,1,100);
    ellipse(478.8,225,20,20);
    fill(73,35,1,100);
    ellipse(450,210,20,20);
    fill(73,35,1,30);
    ellipse(465,225,30,30);

    //right blush
    fill(136,42,5);
    ellipse(680,420,250,250);

    //mouth
    fill(182,117,103);
    ellipse(432.8,425.6,15,15);
    fill(182,117,103);
    ellipse(443,420,25,25);
    fill(223,151,116,30);
    ellipse(440,405,35,35);
    fill(154,84,69,30);
    ellipse(450,415,35,35);
    fill(182,117,103);
    ellipse(474.6,400,25,25);
    fill(154,84,69,30);
    ellipse(501,396,30,30);
    fill(221,124,76,30);
    ellipse(528.8,392,28,28);
    fill(182,117,103,30);
    ellipse(462.4,438.6,28,28);
    fill(182,117,103,30);
    ellipse(477.4,434.6,28,28);
    fill(203,121,49,30);
    ellipse(506.4,444,25,25);
    fill(217,145,106,30);
    ellipse(499,443,30,30);
    fill(220,133,110,30);
    ellipse(506.2,438.8,50,50);
    fill(220,133,110,60);
    ellipse(540,438.8,50,50);

    //the blush
    fill(130,34,0);
    ellipse(380,280,50,50);

    
    //the right eye
    fill(89,48,0,100);
    ellipse(600,209,30,30);
    fill(158,71,32,100);
    ellipse(580,211,20,20);
    fill(57,13,0,100);
    ellipse(605.6,204.4,30,30);
    fill(124,78,29,100);
    ellipse(604.8,188.6,10,10);
    fill(172,112,40,100);
    ellipse(616,200,20,20);
    fill(211,128,51,100);
    ellipse(625,200,15,15);
    fill(211,128,51,100);
    ellipse(630,205,18,18);
    fill(160,94,14,100);
    ellipse(642,209.5,18,18);
    fill(121,67,2,100);
    ellipse(652,212,18,18);
    fill(79,43,0,100);
    ellipse(662,222,18,18);
    fill(58,42,0,100);
    ellipse(652,232,18,18);
    fill(32,17,0,100);
    ellipse(642,242,18,18);
    fill(254,207,151,100);
    ellipse(630,234,30,30);

    //right nose
    fill(178,115,40,100);
    ellipse(550,234,20,20);
    fill(203,141,68,100);
    ellipse(540,254,20,20);
    fill(203,141,68,100);
    ellipse(540,254,20,20);
    
    //bezier shape
    noFill();
    stroke(255, 102, 0);
    stroke(254, 207, 151);//color fill
    bezier(600, 200, 520, 220, 510, 320, 510, 320);
    noFill();
    strokeWeight(1.5);
    stroke(255, 102, 0);
    stroke(254, 207, 151);//color fill
    bezier(415, 130, 470, 140, 417, 400, 500, 360);

    
    //line shape
    line(580, 140, 675, 175);
    
    //curveVertex
    beginShape();
    curveVertex(110,  371);
    curveVertex(544,  401);
    curveVertex(556,  439);
    curveVertex(121,  417);
    endShape();

    //left eye
    fill(254,207,151,220);
    ellipse(438,217,30,30);

}

For this self-portrait, I approached it in a very abstract way. My concept was to convey the relationship between society and self. Therefore, I was trying to present my face as it was gradually appearing from the left. To pursue this idea, I used many ellipses with transparency to create a bubble-effect. After I first finished my work, I found the face was not obvious enough, so I tried to make it more apparent by creating lines and curves which outline some features on my face.

aboyle-Looking Outwards-01

“Dream Garden” is a phone project that invites people to decorate an urban space by submitting 7-word poems, which the project refers to as dreams. Participants can then use Layar, a free augmented reality app, to see a floating garden of dreams in the space around them.

Above: Video describing project

I think this project is super cool because it combines poetry and computer science, a combination that is relatively rare but definitely interesting. I admire both the interdisciplinary nature of the project and the inclusivity of it. Anyone can submit a dream and have it displayed, so the garden really represents the people who live near the urban space.

The artists behind this project are Matt Roberts, Terri Witek, and Michael Branton. Roberts is a new media artist, Witek is an author and creative writing teacher, and Branton helped design and found the Computer Science major at Stetson and still works there as a Computer science teacher. Their bios and a description of the project can be found at http://inthedreamgarden.com/.

I hope that this project can inspire others to use augmented reality in creative ways, as well as consider the place of poetry and other writing in technology.

thlai-LookingOutwards-01

Oskar & Gaspar is a collective team of visual artists and multimedia professionals (originally two Portuguese twins) who specialize in video mapping and 3D projection. I first saw them on America’s Got Talent and was intrigued by their work.

One of their projects involved video mapping projections on tattoos, which resulted in tattoos being beautifully brought to life. They were fascinated by tattoos and used the human body as a canvas in a unique way that could be demonstrated live and have a deeper impact that seeing it on a screen. The process involved scanning then animating the tattoos, then projecting the animations directly onto the original models. They first showcased their work at the first live tattoo video mapping event in Lisbon, Portugal.

In the video description, they emphasize that no post production was used, so all the effects seen were also seen live. Many have critiqued their performance, saying it isn’t interesting enough, and I agree that the performance would be improved with the actor moving, even if it is difficult to sync the projection.

There are tons of previous projects of projection mapping that may have inspired Oskar and Gaspar, so the concept is not new. They took the concept of projection art and put their own special twist on it. This sort of project opens up infinite opportunities of using the human body to portray artwork in a technologically advanced way, and I can see performance artists of any sort using it to enhance their stage presence in a more visual way.

haewanp – Project 01 – Self Portrait

haewanp_self_portrait

//Hae Wan Park
//15104-A
//haewanp@andrew.cmu.edu
//Assignment-01

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

function draw() {
    background (95, 197, 191);
    stroke (92, 52, 103);
    strokeWeight (2.5);
    //Ear
    fill (255, 239, 201);
    ellipse (200, 280, 50, 50);
    ellipse (400, 280, 50, 50);
    //Face
    ellipse (300, 280, 206, 250);
    //Eyebrows
    line (278, 235, 237, 225);
    line (316, 235, 359, 225);
    //Eyes
    fill (255);
    ellipse (255, 270, 40, 20);
    ellipse (345, 270, 40, 20);
    fill (92, 52, 103);
    ellipse (255, 270, 12, 12);
    ellipse (345, 270, 12, 12);
    //Eyelash
    line (260, 260, 264, 249);
    line (250, 260, 245, 249);
    line (350, 260, 354, 249);
    line (340, 260, 335, 249);
    //Nose
    noFill ();
    beginShape ();
    vertex (299, 288);
    vertex (295, 308);
    vertex (281, 315);
    vertex (298, 322);
    endShape ();
    //Mouth
    fill (239, 65, 54);
    strokeJoin (ROUND);
    beginShape ();
    vertex (280, 358);
    vertex (288, 344);
    vertex (295, 354);
    vertex (300, 347);
    vertex (313, 358);
    vertex (297, 374);
    vertex (280, 358);
    vertex (313, 358);
    endShape ();
    //Hair
    fill (255, 231, 102);
    beginShape ();
    vertex (295, 115);
    bezierVertex (340, 140, 300, 205, 250, 200);
    bezierVertex (220, 200, 210, 240, 210, 260);
    bezierVertex (210, 300, 160, 290, 140, 270);
    bezierVertex (170, 280, 160, 260, 155, 240);
    bezierVertex (140, 160, 200, 140, 220, 150);
    bezierVertex (210, 130, 255, 90, 295, 115);
    endShape ();
    beginShape ();
    vertex (315, 130);
    bezierVertex (280, 170, 320, 205, 350, 200);
    bezierVertex (380, 200, 390, 240, 390, 260);
    bezierVertex (390, 300, 440, 290, 450, 270);
    bezierVertex (420, 280, 425, 260, 430, 240);
    bezierVertex (450, 160, 400, 170, 390, 160);
    bezierVertex (390, 160, 385, 160, 375, 140);
    bezierVertex (370, 130, 345, 100, 315, 130);
    endShape ();
    //cheek
    fill (250, 188, 150);
    noStroke ();
    ellipse (245, 310, 40, 40);
    ellipse (355, 310, 40, 40);
    //glasses
    noFill ();
    stroke (92, 52, 103);
    strokeWeight (6);
    ellipse (255, 270, 70, 66);
    ellipse (345, 270, 70, 66);
    line (290, 270, 310, 270);
    //body
    strokeWeight (2.5);
    fill (236, 0, 240);
    beginShape ();
    vertex (171, height);
    vertex (178, 500);
    bezierVertex (179, 500, 180, 450, 235, 450);
    vertex (380, 450);
    bezierVertex (380, 450, 415, 450, 420, 490);
    vertex (425, height);
    endShape ();
    fill (255, 239, 201);
    beginShape ();
    vertex (295 ,490);
    vertex (260, 450)
    vertex (275, 450);
    vertex (285, 405);
    vertex (310, 405);
    vertex (315, 450);
    vertex (335, 450);
    vertex (295 ,490);
    endShape();
}

It was fun to explore various methods in drawing shape with p5.js. Certain shapes were more difficult to control. Those shapes has more complicated rules than other simpler ones. Also, in the process, I had to understand and utilize geometry to place graphic elements to the exact spot that I want.

 

 

mjnewman Project-01-Face

sketch

function setup() {
    createCanvas(600,600);
    background(199,75,155);
}

function draw() {

	//hair
	noStroke();
	fill(72,52,18);
	ellipse(295,286,275,275);
	rect(157,278,276,197);
	ellipse(297,442,303,169);

	//body
	noStroke();
	fill(91,114,182);
	rect(123,479,342,180,60);
	
	//neck
	noStroke();
	fill(221,212,161);
	ellipse(295,477,140,140);
	rect(225,430,140,53);

	//head
	noStroke();
	fill(238,232,184);
	ellipse(296,292,211,184);
	rect(191,280,210,90);
	ellipse(296,375,210,210);

	//undereye circles
	noStroke();
	fill(203,190,220);
	ellipse(243,317,45,45);
	ellipse(343,317,45,45);
	fill(238,232,184);
	rect(200,289,189,31);

	//eyes
	noStroke();
	fill(48,162,102);
	ellipse(250,312,35,35);
	ellipse(335,312,35,35);

	//mouth
	stroke(222,141,187);
	strokeWeight(9)
	line(254,415,335,415)

	//nose
	noFill();
	stroke(216,208,158);
	strokeWeight(5);
	arc(294,355,40,40,125,29);

	//earrings
	noStroke();
	fill(229,205,59);
	ellipse(186,357,21,21);
	ellipse(404,357,21,21);

	//hair part
	noStroke();
	fill(238,232,184);
	rect(289,172,12,43);

	//eyebrows
	stroke(72,52,18);
	strokeWeight(10);
	line(212,284,268,279);
	line(317,270,375,282);
}

In order to prepare for this first project, I made sure to do the Mondrian assignment first to get familiar with the language. I have previously taken an Intro to Web Design, where I learned HTML and CSS, so I was slightly surprised how closely related the three languages are.

My first step was to draw out a rough estimate of my face with primitive shapes that I knew I would be able to recreate in Javascript. I had some trouble designing and then recreating the nose, but I’m not mad at how it turned out. I also thought it would be more fun to do an expression that wasn’t happy because a majority of my day is not spent smiling (but in the best way possible).

Initial Sketch made on Illustrator