Month: August 2018

self portrait

sketch.js

function setup() {
    createCanvas(350, 350);
    background(0);
}

function draw() {

	fill (45,34,30);//hair
	stroke(45,34,30);
	ellipse (200,230,310,400);


	fill (255,205,148); //face
	ellipse(200,200,230,300);

	stroke (255,205,148); //neck
	rect(148,290,98,90);
	
	stroke(255,205,148) //ear
	ellipse(80,200,60,80);

	ellipse(315,200,60,80); //ear

	fill (253,180,115);
	ellipse (320,200,30,60);//inner ear
	ellipse(70,200,30,60)

	noFill();
	stroke (209,119,0);//earrings
	ellipse (320,265,35,60);
	ellipse (80,265,35,60);
	strokeWeight(4);

	/*fill (139,0,0);//lips
	stroke (139,0,0);
	triangle(230,300,150,250,150,300);
	fill (255,20,147);//inside
	stroke (139,0,0);
	triangle(230,300,150,250,150,300);*/

	if (mouseIsPressed) {
		fill (139,0,0);
		stroke (139,0,0);
		ellipse (200,290,80,80);
		fill (255,20,147);
		ellipse (200,290,79,79);
	} else {fill (139,0,0);//lips
		stroke (139,0,0);
		triangle(230,300,150,250,150,300);
		fill (255,20,147);//inside
		stroke (139,0,0);
		triangle(230,300,150,250,150,300);
	}


	stroke(253,180,115); //hairpart
	line (200, 29, 200, 53);

//nose
	fill(253,180,115);
	ellipse (200,230,30,30);
	ellipse (212,230,20,20);
	ellipse (188,230,20,20);

	rect(190,150,20,80);

	stroke(255,205,148);
	line (195,230,195,60);


	//eyebrows
	stroke(253,180,115);
	rect (220,150,70,5);
	rect (110,150,70,5);


	//Eyes
	fill(255,255,255);
	rect (220,170,70,7);
	rect (110,170,70,7);

	fill (0,0,0);
	stroke(0,0,0);
	rect (222,172,3,3);
	rect (112,172,3,3);

	console.log("dsklhflasdh");




}

I had fun doing this assignment and seeing what I can create visually with code. I gave myself some attitude with a side eye look and I added an if mouse is pressed variable to show me talking.

Helen Reynolds – Project 01 – Self Portrait

To create this self portrait, I experimented with simple shapes in Illustrator and then entered them into p5.js. Because I was able to move things around quickly in Illustrator first, I found this process more accessible and effective than just going to p5.js right off the bat. I had a lot of fun with considering what aspects of my appearance and personality I wanted to portray and how I could create them using the little coding knowledge I have.
hreynold-face 

/* Helen Reynolds
Section E
hreynold@andrew.cmu.edu
hreynold-01
*/

function setup() {
    createCanvas(400, 400);
    background(140, 110, 114);
    angleMode(DEGREES);
 }

function draw() {
	noStroke();

	//hair rect
	rectMode (CENTER);
	fill(36, 31, 23);
	rect(195, 204, 283, 191); //(x, y, w, h, radius of every corner)

	//hair circle
	ellipseMode (CENTER);
	fill(36, 31, 23);
	ellipse(193, 103, 185, 185);

	//shirt rect
	fill(173, 152, 157);
	rect(194, 335, 269, 71);

	//shirt circle
	fill(173, 152, 157);
	ellipse(194, 303, 269, 121);

	//neck circle
	fill(229, 203, 190);
	ellipse(194, 245, 77, 52);

	//hair cover rect left
	fill(140, 110, 114);
	rect(55, 150, 90, 135);

	//hair cover circle left
	fill(140, 110, 114);
	ellipse(52, 213, 97, 97);

	//hair cover rect right
	fill(140, 110, 114);
	rect(330, 150, 90, 135);

	//hair cover circle right
	fill(140, 110, 114);
	ellipse(334, 214, 97, 97);

	//neck rect
	fill(229, 203, 190);
	rect(194, 223, 78, 53);

	//shadow ellipse
	fill(201, 177, 167);
	ellipse(194, 204, 78, 52);

	//face rounded rect
	fill(229, 203, 190);
	rect(193, 125, 147, 176, 73);

	//bubblegum ellipse
	fill(234, 143, 188);
	ellipse(194, 193, 53, 53);	

	//bubblegum sparkle
	fill(255);
	ellipse(204, 178, 7, 7);

	//left eyebrow black ellipse
	noStroke ();
	fill(36, 31, 23);
	ellipse(165, 112, 33, 20);

	//left eyebrow beige ellipse
	fill(229, 203, 190);
	ellipse(165, 117, 36, 20);

	//left eyebrow beige rect
	fill(229, 203, 190);
	rect(180, 113, 14, 23);	

	//right eyebrow black ellipse
	noStroke ();
	fill(36, 31, 23);
	ellipse(221, 111, 33, 20);

	//right eyebrow beige ellipse
	fill(229, 203, 190);
	ellipse(222, 115, 36, 20);

	//right eyebrow beige rect
	fill(229, 203, 190);
	rect(205, 111, 14, 23);	

	//left eye
	fill(36, 31, 23);
	ellipse(163, 132, 17, 17);

	//left eye sparkle
	fill(255);
	ellipse(167, 129.5, 7, 7);

	//left eye top eyelash
	stroke (0);
	strokeWeight (2);
	line(157, 118, 160, 125);

	//left eye middle eyelash
	stroke (0);
	strokeWeight (2);
	line(153, 122, 157, 126);

	//left eye bottom eyelash
	stroke (0);
	strokeWeight (2);
	line(150, 127, 156, 129);

	//right eye
	noStroke ();
	fill(36, 31, 23);
	ellipse(220, 131, 17, 17);

	//right eye sparkle
	fill(255);
	ellipse(223, 129, 7, 7);

	//right eye top eyelash
	stroke (0);
	strokeWeight (2);
	line(226, 118, 224, 124);

	//right eye middle eyelash
	line(231, 122, 226, 126);

	//right eye bottom eyelash
	line(234, 126, 228, 128);

	//nose shadow rect
	noStroke ();
	fill(201, 177, 167);
	rect(192, 144, 18, 40, 9);

	//nose top rect
	fill(229, 203, 190);
	rect(189, 141, 18, 40, 9);

	//freckle 1, left to right
	stroke (195, 147, 121)
	strokeWeight (2);
	point(150, 145);

	//freckle 2
	stroke (195, 147, 121)
	strokeWeight (2);
	point(154, 150);

	//freckle 3
	stroke (195, 147, 121)
	strokeWeight (2);
	point(156, 154);

	//freckle 4
	stroke (195, 147, 121)
	strokeWeight (2);
	point(159, 148);

	//freckle 5
	stroke (195, 147, 121)
	strokeWeight (2);
	point(161, 153);

	//freckle 6
	stroke (195, 147, 121)
	strokeWeight (2);
	point(165, 157);

	//freckle 7
	stroke (195, 147, 121)
	strokeWeight (2);
	point(164, 149);

	//freckle 8
	stroke (195, 147, 121)
	strokeWeight (2);
	point(168, 152);

	//freckle 9
	stroke (195, 147, 121)
	strokeWeight (2);
	point(173, 148);

	//freckle 10
	stroke (195, 147, 121)
	strokeWeight (2);
	point(212, 148);

	//freckle 11
	stroke (195, 147, 121)
	strokeWeight (2);
	point(216, 151);

	//freckle 12
	stroke (195, 147, 121)
	strokeWeight (2);
	point(220, 156);

	//freckle 13
	stroke (195, 147, 121)
	strokeWeight (2);
	point(220, 148);

	//freckle 14
	stroke (195, 147, 121)
	strokeWeight (2);
	point(222, 152);

	//freckle 15
	stroke (195, 147, 121)
	strokeWeight (2);
	point(226, 148);

	//freckle 16
	stroke (195, 147, 121)
	strokeWeight (2);
	point(228, 154);

	//freckle 17
	stroke (195, 147, 121)
	strokeWeight (2);
	point(230, 150);

	//freckle 18
	stroke (195, 147, 121)
	strokeWeight (2);
	point(233, 144);

	//hair left ellipse
	noStroke();
	push();
	translate(167, 60);
	rotate(-25.5);
	fill(36, 31, 23);
	ellipse(0, 0, 121, 63);
	pop();

	//hair right ellipse
	noStroke();
	push();
	translate(245, 70);
	rotate(320);
	fill(36, 31, 23);
	ellipse(0, 0, 36, 75);
	pop();

}

Ean Grady-Project-01-Face

sketch

function setup() {
    createCanvas(500, 500)
    background(0, 0, 0)
    noStroke ();

    //background
    fill (120, 200, 400)
    rect(25, 25, 450, 450)
    fill (100, 100, 200)
    rect(50, 50, 400, 400)
    fill (120, 120, 200)
    rect (75, 75, 350, 350)
    fill (10, 200, 140)
    rect (100, 100, 300, 300)
    fill (20, 120, 240)
    rect (125, 125, 250, 250)

    //hair pt.1
    fill (0, 0, 0)
    ellipse (250, 170, 200, 200)

    //legs
    fill (80, 10, 100)
    ellipse (180, 400, 100, 250)
    ellipse (320, 400, 100, 250)

    //body
    fill (100, 10, 100)
    ellipse (250, 300, 250, 250)
    fill (150, 20, 50)
    ellipse (250, 300, 200, 200)
    fill (50, 50, 100)
    ellipse (250, 300, 150, 150)
    fill (0, 0, 0)
    ellipse (250, 300, 100, 100)

    //head
    fill (255, 228, 196)
    ellipse(250, 200, 200, 200)

    //eyes
    fill (255, 255, 255)
    ellipse (200, 200, 60, 50)
    ellipse (300, 200, 60, 50)
    fill (250, 128, 114)
    ellipse (200, 200, 40, 40)
    ellipse (300, 200, 40, 40)
    fill (0, 0, 0)
    ellipse (300, 200, 25, 25)
    ellipse (200, 200, 25, 25)

    //hair
    arc(260, 100, 50, 60, 0, HALF_PI);
    arc(240, 100, 50, 60, 0, HALF_PI);
    arc(220, 100, 50, 60, 0, HALF_PI);
    arc(200, 100, 50, 60, 0, HALF_PI);
    arc(180, 100, 50, 60, 0, HALF_PI);

    //mouth
    fill (250, 128, 114)
    ellipse (200, 280, 80, 60)
    fill (0, 0, 0)
    ellipse (200, 280, 70, 40)

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

    //eyebrows
    fill (0, 0, 0)
    rect (175, 150, 50, 20)
    rect (275, 150, 50, 20)
}

function draw() {
}

For this project, my main goal was to make a visually ‘popping’ piece by experimenting with colour and shape placement. I really enjoyed coding the piece because it was both an interesting creative exercise and very beneficial in helping me become more comfortable with p5.js.

Christine Chen- Looking Outwards-01

Above provides a quick glance of one of teamLab’s exhibitions in Tokyo
Source: Creators-TeamLab; Exhibition-TeamLab Planets TOKYO  https://www.youtube.com/watch?v=4UDi_2C04UY

TeamLab is a Japanese design and software collective.  The group consists of small group of around 30 various professionals, such as programmers, architects, engineers, artists, etc., from different fields who collaborate with each other to create forms that join art, science, nature, and technology together.  Creating the project required the group to write computer programs for digital creation and software applications that simulates forms of natures, such as waves. These digital creations are also interactive and reacts to people’s movements. The creators were motivated to create forms that go beyond the boundaries that divides up the nature and the artificial. Through this, they created a successful “first word art.”

What fascinates me most is how well teamLab portrays a “borderless world.” They show how digital forms dissolve the lines between technology and nature. Another boundary that was removed was the one between the artwork and the audiences as the installation pieces were interactive. While I was at the exhibition, I was astonished at how the simulated sounds, visual forms, and interactions made me feel as if I was standing among a natural environment. In there, nature and technology merged into one through the world created with teamLab’s creative output and exist harmoniously with each other.

 

Miranda Luong Project-01-Face

sketch

/*Miranda Luong
Section E
mluong
Project-01-Face
*/

function setup() {
    createCanvas(500, 525);
    background(9,0,255);
}

function draw() {
	//hair
	fill(20);
	noStroke();
	ellipse(250, 250, 380, 430);
	//body
	fill(60);
	noStroke();
	ellipse(250,500,420,500)
	//head
	fill(220);
	noStroke();
	ellipse(250, 250, 300, 320);
	//ears
	noStroke();
	fill(220);
	rect(370,230,50,60,30);
	noStroke();
	rect(80,230,50,60,30);
	//left eye
	fill(51);
	noStroke();
	ellipse(190, 245, 30, 30);
	//right eye
	fill(51);
	noStroke();
	ellipse(310, 245, 30, 30);
	//nose
	fill(51);
	noStroke();
	ellipse(250,280,40,40);
	fill(220);
	noStroke();
	ellipse(250,280,20,20);
	fill(220)
	noStroke();
	rect(230,260,40,22)
	//mouth
	fill(51);
	ellipse(250,350,40,40);
	//mouse
	fill(120);
	noStroke;
	ellipse(150,490,100,100)
	//left hand
	fill(220);
	noStroke();
	rect(100,450,20,20,30);
	rect(120,430,20,30,30);
	rect(140,430,20,30,30);
	rect(160,430,20,30,30);
	ellipse(200,470,20,20);
	//keyboard
	fill(120)
	rect(280,463,20,12)
	rect(310,470,20,5)
	rect(340,463,20,12)
	rect(370,463,20,12)
	rect(400,463,20,12)
	rect(270,480,160,15)
	//right hand
	fill(220);
	noStroke();
	rect(370,430,20,20,30);
	rect(350,420,20,30,30);
	rect(330,420,20,30,30);
	rect(310,440,20,30,30);
	ellipse(290,440,20,20);
	//desk
	fill(220)
	rect(0,495,500,30);
}

I thought it would be funny to create a self-portrait of myself hunched over a computer coding and clicking away on a keyboard and mouse. It was supposed to be very meta-I’m happy with the way it turned out.

Looking Outwards-01 Intr(e)Scapes light art exhibition-Veronica Wang

Intr(ə)Scapes @ Georgetown GLOW 2015 from SHO Architecture on Vimeo.

The Interscapes project is a landscape installation piece that senses people’s movement with an infrared sensor and signals the RGB LED system to react to visitors’ movements with a responsive lighting animation. The acrylic stalks mimic the movement and light-weightedness of swaying prairie grasses and embody “the kinetic energies and latent forces present within the environment”. I found it interesting how this piece was inspired by nature and is bridging technology with nature by mimicking/ recreating experiences. The responsive lighting also provides a playful, tangible and sensorial effect.

The team that designed this piece does a lot of interactive new media installations and parametric architectural design. On this project, they used custom software and hardware to achieve the infrared imaging system and responsive effect. They have previously designed similar installations at both the ACADIA exhibition and Harvard University.

Kai Zhang-Looking Outwards-01

An Interactive Respond in the Physical Form – Building Kinetics

http://www.architecturelist.com/wp-content/uploads/2011/04/Open-CIE-16.jpg

Project: Cafe-restaurant OPEN, Amsterdam

Architect: de Architedkten Cie

Year of Built: 2006

As an architecture student with technological enthusiasm. I’ve been seeking out when buildings, while usually being static, are able to react and respond to its environments. And one of the most signitured projects is the Cafe-restaurant OPEN building designed by CIE in Amsterdam. Though the number of people who worked on this project is not specified officially, something of this scale usually consists of a team of fewer than five people. However, the actual construction members certainly would reach beyond two figures.

This project took them over an year to finish, which is not too long for an architecture project. The main features of the installment is the pivoltal window panels that are controled by electric motors. However, it’s reasonable to make the assumption that the operating terminal is programed in analog transimission rather than digital, as the actual usage of the feature wouldn’t require very sophisticated I/O exchanges. Nevertheless, the designing of the prototypes will require some digital design tools. A very common one in the field is Rhinoceros with Grasshopper plug-in. It used programmable components to create building part simulations that act as expected, which will shorten the time for not having to create physical representations that does the same thing.

Though the interacting process is rather simple, it’s of a great significant importance for the practice of architecture to incorporate interactive ‘devices’. There are a handfull of kinetic precedents that would’ve inspired the creator of this project. Most of them had thinkings toward the active building components that can adapt its spatial and micro-climate conditions to the environmental changes. It’s adopted as both an expressive architectural language as well as a functional approach.

Cafe-restaurant OPEN, Amsterdam / by de Architekten Cie.

Looking Outwards rrandell01

This is a link to new media artist Angela Washko’s video trailer about her interactive art piece called The Game: The Game in which the viewer essentially plays a dating simulation video game.

This piece is a culmination of over three years of research on ‘dating coaches’ or ‘pick-up artists’ and vastly explores the world of female exploitation, sexism, and misogyny through an interactive video game. It is unclear what software Angela Washko used in creating this interactive program, but this piece is not just the program, it also included a physical exhibition in New York City. Angela Washko was inspired by a series of books by author Roosh V in which he instructs men on how to pursue sex with women. This project explores a future in which women can rebel against unwanted male attention and have more agency in a virtual world. I feel that this project is incredibly interesting and complex as it delves deep into controversial topics but explains them well with an accessible platform for all to understand the purpose of the project.

Austin Treu-LookingOutwards-01

I am fascinated by Elon Musk’s work with his teams at both SpaceX and Tesla, particularly the work of incorporating Autopilot into Tesla cars. The design of the car has to be perfectly optimized and armed with enough sensors so that the passengers and others around the car are safe. While it is still a work in progress, just the fact that the car has the ability to make such calculated decisions while driving is incredible. The future with this sort of technology is wide open. As it improves, people will gradually be able to take their focus off of the road and use their time during travel to work or relax, really the possibilities are endless! Another interesting design  element of Tesla cars is their battery pack and motors being located underneath the car, meaning that the passengers can have more space inside the car for themselves and their belongings. Every bit of software and hardware involved in these cars is built by Tesla from the ground up, to my knowledge.