Month: August 2018

Robert Oh Project 01- Laughing Face

face

/*
Robert Oh
Section C
rhoh@andrew.cmu.edu
Project-01
*/

function setup() {
  createCanvas(600, 600);
  background(68, 149, 255);
}

function draw() {
  // face
  strokeWeight(0);
  fill(0, 0, 0);
  ellipse(300, 300, 200, 240);
  fill(255, 230, 189);
  rect(288, 400, 25, 40)
  ellipse(300, 312, 200, 220);

  // hair
  fill(0,0,0);
  arc(312, 212, 105, 70, PI, 0)
  arc(301, 210, 60, 10, 0, PI)

  // eyes
  strokeWeight(0);
  fill(255, 255, 255);
  ellipse(260, 270, 35, 6);
  ellipse(330, 270, 35, 6);
  fill(0, 0, 0);
  ellipse(265, 268, 18, 8);
  ellipse(335, 268, 18, 8);
  ellipse(240, 285, 2, 2);
  arc(260, 275, 30, 1, 7*PI/4, PI);
  arc(331, 275, 30, 1, 7*PI/4, PI);
  fill(255,255,255);
  ellipse(268, 266, 6, 4);
  ellipse(338, 266, 6, 4);

  // eyebrows
  fill(0, 0, 0)
  quad(237, 254, 250, 240, 250, 246, 237, 255);
  quad(250, 240, 274, 242, 272, 245, 250, 246);
  quad(353, 254, 338, 240, 338, 246, 353, 255);
  quad(338, 240, 314, 242, 316, 245, 340, 246);

  // mouth
  arc(299, 360, 85, 70, -PI/32, PI - PI/32);
  fill(244, 66, 86);
  ellipse(300, 388, 40, 15);
  fill(0, 0, 0)
  arc(348, 360, 3, 10, 3*PI/2, PI/2);
  arc(250, 368, 3, 10, PI/2, 3*PI/2);
  fill(255, 255, 255);

  // teeth
  strokeWeight(0);
  arc(334, 356, 10, 15, -PI/32, PI - PI/32);
  arc(324, 357, 10, 15, -PI/32, PI - PI/32);
  arc(314, 358, 10, 15, -PI/32, PI - PI/32);
  arc(304, 359, 10, 16, -PI/32, PI - PI/32);
  arc(294, 360, 10, 15, -PI/32, PI - PI/32);
  arc(284, 361, 10, 15, -PI/32, PI - PI/32);
  arc(274, 362, 10, 15, -PI/32, PI - PI/32);
  arc(264, 363, 10, 15, -PI/32, PI - PI/32);

  // nose
  fill(255, 210, 96);
  quad(300, 305, 310, 315, 310, 320, 300, 320)
  //arc(300, 315, 20, 20, PI, 0)

  //body
  strokeWeight(0);
  fill(10, 15, 114);
  arc(300, 610, 200, 350, PI, 0);
  strokeWeight(1);
  fill(255, 255, 255);
  rect(258, 500, 85, 6)
  rect(258, 520, 85, 6)
  rect(258, 540, 85, 6)
  rect(258, 560, 85, 6)
  rect(258, 580, 85, 6)
  fill(68, 149, 255)
  noStroke();
  quad(258, 500, 240, 550, 230, 600, 258, 600)
  quad(343, 500, 361, 550, 371, 600, 343, 600)
  quad(258, 500, 260, 520, 262, 555, 258, 600)
  quad(343, 500, 341, 520, 339, 555, 343, 600)
}

When I first sat down and started thinking of ideas for this project, I wanted to be straight-forward and focus on my most prominent features. I’d say that one of my most unique traits is my laughing smile, since I love telling jokes and having fun. I was able to recreate this by adding in my wide, slightly-crooked smile, my squinched-up eyes, and my dimples.

Looking Outward 01: Issho is my Inspiration

I have always been interested in creative computation in the context of wearables, but I feel like so often that means just putting rope leds or sensors on the body. Thus after some extensive some research I found this project by Pauline Van Dongen where she takes a much more sensitive and thoughtful approach to the entire concept of wearable technology.

This was a collaboration between her studio and ItalDenim where the two created a more intimate computational interaction. This was very interesting to me because it requires no interface or phone app for it to be considered wearable tech.

In fact, it does the opposite and keeps the tech within the closed system of the jacket.  Conductive fibres are woven into the fabric of the Issho jacket, connecting a series of sensors with motorised parts. When the sensors register touch on various parts of the garment, an integrated component reacts to give the wearer a “gentle stroke” on their upper back. It’s controlled by a microcontroller that senses the jacket is being worn.

The Denim Jacket embraces denim’s characteristics to hold a unique dialogue with its wearer. Based on the wearer’s behaviour, the jacket responds to intimate touches to become a mediator of revived experiences in daily life.

I like this project alot because even though it is rather complex when it comes to it’s included tech, the focus is very much on the physical interaction and its relationship with the wearer.

Through bodily sensations, this jacket encourages you to be present in an increasing accelerating world in which our mind is often focused on future events.

Studio Van Dongen’s past work includes some rather futuristic looking generated clothing so adding a computational element to this denim garment wasn’t too far off from the brand.

 

Issho | An Intelligent Denim Jacket by Pauline van Dongen from Pauline van Dongen on Vimeo.

Katherine Hua – Project01- Face

khua-project01

function setup() {
    createCanvas(600,600);
    background(237, 176, 176);
}

function draw() {
    noStroke();
    //background
    fill(209, 52, 126);
    rect(25, 25, 550, 550);
    fill(246, 192, 66);
    rect(50, 50, 500, 500);
    fill(237, 176, 176);
    rect(75, 75, 450, 450);
    fill(209, 52, 126);
    rect(100, 100, 400, 400);
    //hair
    fill(30, 22, 18);
    ellipse(300,250, 450, 450);
    rect(75, 250, 450, 500);
    //body
    fill(247, 197, 82);
    ellipse(325, 700, 375, 500);
    //face shape
    fill(251, 227, 167);
    quad(150, 300, 400, 150, 500, 250, 250, 400);
    arc(325, 300, 350, 400, 0, PI, CHORD);
    rect(400, 250, 100, 50);
    //hairline
    ellipse(337.5, 200, 170, 150);
    quad(260, 170, 150, 300, 250, 350, 300, 300);
    ellipse(405, 200, 100, 100);
    quad(450, 180, 500, 250, 450, 300, 400, 290);
    //eyes
    //undereye
    fill(236, 198, 179);
    ellipse(260, 310, 40, 50);
    ellipse(420, 310, 40, 50);
    fill(251, 227, 167);
    ellipse(265, 305, 50, 50);
    ellipse(425, 305, 50, 50);
    //white part
    fill(255, 255, 255);
    ellipse(265, 300, 40, 50);
    ellipse(425, 300, 40, 50);
    //pupil
    fill(40, 24, 23);
    ellipse(270, 295, 25, 35);
    ellipse(430, 295, 25, 35);
    fill(255, 255, 255)
    ellipse(260, 300, 10, 10);
    ellipse(420, 300, 10, 10);
    //eyelash
    fill(40, 24, 23);
    ellipse(285, 275, 15, 15);
    ellipse(445, 275, 15, 15);
    fill(251, 227, 167);
    ellipse(282, 270, 18, 15);
    ellipse(442, 270, 18, 15);
    fill(40, 24, 23);
    ellipse(265, 280, 50, 10);
    ellipse(425, 280, 50, 10);
    //eyebrows
    ellipse(265, 250, 50, 10);
    ellipse(425, 250, 50, 10);
    //mouth
    fill(240, 178, 151);
    ellipse(325, 415, 80, 80);
    fill(251, 227, 167);
    ellipse(330, 380, 80, 50);
    //nose
    fill(240, 178, 151);
    ellipse(365, 360, 30, 40);
    fill(251, 227, 167);
    ellipse(361, 363, 27, 32);
}

Doing this project made me look at my face in terms of the shapes that make it up. I first sketched out my self character on paper, and then looked for what shapes could create this drawing.

Sara Frankel Project 1 Face

Face sketch

//Sara Frankel
//9:30
//sfrankel@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(600, 600);
    background(165,212,157);
}

function draw() {

	//head
	fill(77,47,23);
	arc(300, 500, 460, 770, PI, TWO_PI);
	fill('tan');
	ellipse(300,300,300,350);
	fill(77,47,23)
	arc(300, 180, 230, 110, PI, TWO_PI);
	
	//eyebrows
	fill(77,47,23);
	ellipse(230,220,90,10);
	ellipse(370,220,90,10);

	//glasses
	noFill();
	arc(300, 280, 20, 20, PI + QUARTER_PI, TWO_PI);
	fill('red');
	ellipse(235,280,120,120);
	fill('red');
	ellipse(365,280,120,120);

	fill('tan');
	ellipse(235,280,100,100);
	fill('tan');
	ellipse(365,280,100,100);

	//left eye
	fill('white')
	ellipse(235,270,60,40)

	//right eye
	fill('white');
	ellipse(365,270,60,40);
	//ellipse(mouseX,300,mouseX,395)

	//nose
	line(300,300,320,350);
	line(300,350,320,350); 

	//left eyeball
	fill('blue');
	ellipse(245,270,30,30);
	fill(51);
	ellipse(250,270,20,20);
	fill('white');
	ellipse(243,260,5,5);

	//right eyeball
	fill('blue');
	ellipse(375,270,30,30);
	fill(51);
	ellipse(380,270,20,20);
	fill('white');
	ellipse(373,260,5,5);

	//mouth
	noFill();
	arc(300,390,60,60,0,PI);





}

My process for this project was to first figure out what kind of aesthetic I wanted my portrait to be (i.e. more bubble character vs. a more lined out character).  I also had to figure out which shapes and coordinates I predominately wanted to use to replicate my face.

Kevin Riordan Project-01

kzr-project01

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_01*/
function setup() {
    createCanvas(500, 525);
    background(50,50,50);
}

function draw() {
    //ears
    fill(183,128,100);
    arc(395,260,40,80,PI+HALF_PI,HALF_PI,PIE);
    arc(105,260,40,80,HALF_PI,PI+HALF_PI,PIE);
    //face
    fill(219,182,156);
    strokeWeight(1);
    quad(100,150,400,150,390,430,110,430);
    //neck and body
    rect(200,430,100,95);
    stroke(0);
    line(200,430,300,430);
    //hair
    fill(79,48,35);
    noStroke();
    quad(100,150, 250,90,440,78,420,150);
    triangle(100,150,420,150,100,170);
    stroke(0);
    //nose
    noStroke();
    fill(183,128,100);
    triangle(250,240,275,320,225,320);
    arc(250,320,60,50,PI,2*PI,PIE);
    //mouth
    stroke(0);
    strokeWeight(1);
    fill(255);
    arc(250, 350, 160, 80, 0, PI, PIE);
    line(170,350,330,350);
    //eyebrows
    stroke(79,48,35);
    strokeWeight(3);
    line(150,200,200,205);
    line(300,205,350,200);
    //eyes
    stroke(0);
    strokeWeight(2);
    ellipse(175,230,50,20);
    ellipse(325,230,50,20);
    noStroke();
    fill(0);
    ellipse(175,230,20,20);
    ellipse(325,230,20,20);
}

I have never written code before, so this was pretty hard for me, but by the time I finished I felt much more comfortable with how to add shapes, and what order to write stuff in.

Adam He – Project 01- Self Portrait

sketch-169.js

/* Adam He
Section A
xiaotiah@andrew.cmu.edu
Project-01 */

function setup() {
    createCanvas(500, 600);
    background(1,92,180);
}

function draw() {
    noStroke();
    // face and neck
    fill(217,174,90);
    rect(58,400,100,50);
    ellipse(110,260,240,310);
    // eyes (white)
    fill(244,242,230);
    arc(60,250,80,80,0,PI,OPEN);
    arc(160,250,80,80,0,PI,OPEN);
    // eyes (black)
    fill(10,10,10);
    arc(66,250,40,40,0,PI,OPEN);
    arc(155,250,40,40,0,PI,OPEN);
    // eyes (small dots)
    fill(150);
    ellipse(68,255,10,10);
    ellipse(160,255,10,10);
    // mouth
    fill(219,37,26);
    ellipse(110,367,97,20);
    // nose
    fill(166,127,44);
    rect(115,280,4,50);
    // hair
    fill(223,195,114);
    arc(50,130,250,250,0,PI);
    ellipse(110,130,240,120);
    arc(180,130,200,200,0,PI+QUARTER_PI,PIE);
    // shirt
    fill(129,204,235);
    quad(58,450,158,450,230,500,-20,500);
    rect(-10,560,238,50);
    fill(220,220,220);
    rect(-10,500,238,60);
}

It was my first time programming and I thought it was impossible to draw a face using codes. Figuring out the coordinates and color parameters, I slowly understood how programming works, and the portrait turned out better than I expected.

LO – 1 Sara Frankel

http://
Caption: Music and technology has been advancing and merging recently to the point where robots can perform music live now.

 

“The robot that can play the violin” is essentially a machine that has been built and programmed  to play all, if not most, of the notes on the violin.  Being a music major with a love for the sciences, being in the know of the advancements of music is a must. I admire this project a lot as music is a way of expression from many mediums.  But also, this project inspires me to work harder to achieve my musical goals.  What I mean by this is that nowadays, anyone can just hit the correct notes in any order or time, but the ability to play with meaning and humanity is still something that a robot cannot do and is hard to achieve.

Self-Portrait

sketch

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

function draw() {
	createCanvas(600, 600);
	background(245);
    

   
    //background
   strokeWeight(0);
    fill(0,42,178);
    ellipse(300,200,500,500);
    



    //hair
    stroke(244,176,163);
    line(264,212,264,230);
    noSmooth();
    fill(10);
    stroke(10);
    rect(225,210,110,155,150,40,10,10);
    noSmooth();
    fill(10);
    rect(235,200,140,165,150,150,10,10);
  


    
    //Ears
    fill(244,176,163);
    strokeWeight(0);
    ellipse(235,305,18,23);
    ellipse(365,305,18,23);
    fill(231,98,83);
    ellipse(235,305,13,18);
    ellipse(365,305,13,18);


   //arms
   fill(244,176,163);
   strokeWeight(0);
   rect(220,507,165,200);


   //body
   noSmooth();
   strokeWeight(0);
   fill(255);
   rect(233,365,140,300,55,55,130,130);
   triangle(236,400,202,507,235,507);
   triangle(370,400,406,507,372,507);
  
    
   
    //face
    noSmooth();
    strokeWeight(0);
    fill(244,176,163);
    rect(235,220,130,135,90,90,130,130);
    rect(290,350,20,20);
    arc(300,370,20,20,0,PI,OPEN);
    fill(10);
    triangle(265,230,240,231,236,278);
    fill(10);
    arc(267,287,22,22,0,PI,OPEN);
    strokeWeight(4)
    stroke(10);
   strokeWeight(0);
    arc(335,287,22,22,0,PI,OPEN);
    fill(270);
    arc(267,287,10,10,0,PI,OPEN);
    arc(335,287,10,10,0,PI,OPEN);



    //Mouth
    fill(231,98,83);
    ellipse(300,320,15,7);







    
    





}

I have never coded before in my life and as a architecture student my understandings for coding was always just the skeleton beneath the software we use to create art and design, not like something that can be the tool itself to create art pieces. Creating my self portrait helped me look at coding from a complete different angle.

Looking outward- 01

GPS BeatMap
https://vimeo.com/6402527

In my concepts systems and processes class our teacher showed us the project GPS BeatMap. GPS BeatMap was a collaborative work by Rich Pell and Jesse Stiles created in 2006. It is a GPS music instrument that acts as a DJ booth for the whole planet. This can be accessed on foot, by plane, boat, car or train. They have musical phrases that are represented on a map as overlapping circular territories and where the territories overlap the BeatMap creates mash ups. Although I am interested in more visual topics rather than audio, I admire the fact that through computing an artist can create a dynamic interactive work where the possibilities are endless.

Noni Shelton-LookingOutwards-01

Aperture is a facade installation with interactive and narrative display modes. Composed of single-aperture modules with receptor and actuator, Aperture acts like an autonomous skin. Capable of precise external control. Visual information is transmitted from the inside of the building to the outside.

Pinterest shows an example of a man walking and how the aperture holes reflect his movement.

This Aperture project was created by interactive designers, Gunner Green and Frederic Eyl. It is essentially the visual aftermath of having tiny light sensitive holes become larger with less light and smaller with more. Thus, it is an interactive piece as silhouettes and shapes form from those who pass by. Although this particular design is very unique, the programming and technology behind the light exposure itself is easily accessible. Practical uses of aperture are extremely popular in photography and could have easily served as inspiration for the creators of the project. I really appreciate this project as a whole. This was an extremely laborious project to create, and I thought the dedication to this type of medium was impressive. They took one function of something and then gave it a completely different and interactive use as modern art. I also think it is admirable to use a more science based tool and turn it into an exhibit. This could also point to a new artistic idea of using aperture as a medium, which could change the face of contemporary art.

 

A video of their project can be found here.