Category: Uncategorized

Claire Lee – Project 01 – Face

This project was definitely a learning experience for me. I realized that it’s a lot more difficult for me to translate the image I want to create to the canvas when I’m using code as a medium instead of a program like Photoshop or Illustrator. It took a lot of little adjustments, but I’m happy with how it came out and I think I learned a lot.

project01_face

function setup() {
    createCanvas(600, 600);
    background(255, 208, 223);

    noStroke();
    fill(50,30,30);
    rect(150,300,300,250,0,0,50,50); 
    //hair base

    noStroke();
    fill(50,30,30);
    ellipse(300,300,300,300);
    //top of hair

    stroke(150);
    strokeWeight(2);
    fill(200);
    ellipse(300,600,300,350);
    //body

    stroke(246, 193, 161);
    strokeWeight(2);
    fill(255,229,196);
    rect(260,380,80,100,0,0,40,40);
    //neck

    stroke(246, 193, 161);
    strokeWeight(2);
    fill(255,229,196);
    ellipse(430,330,38,38);
    //right ear

    stroke(246, 193, 161);
    strokeWeight(2);
    fill(255,229,196);
    ellipse(170,330,38,38);
    //left ear

    stroke(246, 193, 161);
    strokeWeight(2);
    fill(255,229,196); 
    ellipse(300,300,250,250);
    //base for face
  
    noStroke();
    fill(0);
    ellipse(360,320,20,20);
    //left eye

    noStroke();
    fill(0);
    ellipse(240,320,20,20);
    //right eye

    noStroke();
    fill(238,125,77);
    triangle(300,330,280,350,320,350);
    //nose
    
    noStroke();
    fill(215, 59, 62);
    ellipse(300,380,75,50);
    //mouth (part one) 
    //I tried to draw an arc but that didn't work

    noStroke();
    fill(255,229,196);
    rect(250,355,90,25);
    //mouth (part two), improvised

    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(230,320,95,90);
    //glasses (right)

    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(370,320,95,90);
    //glasses (left)

    line(280,318,320,318); 
    //glasses(middle)

    line(174,298,184,308);
    //glasses(frame left)

    line(416,308,426,298);
    //glasses(frame right)

    noStroke();
    fill(50,30,30);
    rotate(PI/5); 
    //question: why does ellipse move locations when being rotated?
    ellipse(420,-20,200,90); 
    //right side bangs

    noStroke();
    fill(50,30,30);
    rotate(46);
    ellipse(-105,-302,130,50);
    //left side bangs

}

Fanjie Jin – Project 01 – Self Portrait

Sketch

//Fanjie Jin
//Section C
//Fjin@andrew.cmu.edu
//Project-01-Face

function setup(){
  createCanvas(600,600);
  background(167,226,235)}
// computer
function draw(){
//chair
  noStroke();
  fill(149,70,41);
  quad(362,343,545,354,535,600,337,600);

//cloth
  noStroke();
  fill(78,101,111);
  ellipse(329,600,280,220);

  noStroke();
  fill(72,75,75);
  quad(0,250,62,233,155,600,0,600);

  noStroke();
  fill(132,132,132);
  quad(62,233,108,244,203,600,155,600);

//neck
  noStroke();
  fill(255,223,203);
  rect(302,430,50,69);

  noStroke();
  fill(255,223,203);
  ellipse(329,335,195,230);

  noStroke();
  fill(255,223,203);
  ellipse(327,496,50,30);

//face
  noStroke();
  fill(230,202,184);
  ellipse(327,449,50,20);

  noStroke();
  fill(255,223,203);
  ellipse(329,350,195,210);

//ears
  noStroke();
  fill(255,223,203);
  ellipse(238,380,35,35);

  noStroke();
  fill(255,223,203);
  ellipse(418,380,35,35);

//hair
  fill(0);
  stroke(255);
  strokeWeight();
  beginShape();
  vertex(239, 340);
  quadraticVertex(304, 345, 359, 315);
  quadraticVertex(361, 324, 358, 330);
  quadraticVertex(400, 300, 400, 290);
  quadraticVertex(420, 320, 427, 357);
  quadraticVertex(450, 250, 340, 210);
  quadraticVertex(210, 210, 230, 360);
  endShape();

//hand
  fill(167,226,235);
  stroke(255);
  strokeWeight();
  beginShape();
  vertex(260, 600);
  quadraticVertex(260, 590, 260, 560);
  quadraticVertex(255, 590, 255, 600);
  endShape()

  fill(149,70,41);
  stroke(255);
  strokeWeight();
  beginShape();
  vertex(403, 600);
  quadraticVertex(403, 590, 403, 560);
  quadraticVertex(408, 590, 408, 600);
  endShape()

//eye left
  noStroke();
  fill(0);
  ellipse(283,370,13,13);

  noStroke();
  fill(255);
  ellipse(285,368,3,3);

//eyes right
  noStroke();
  fill(0);
  ellipse(373,370,13,13);

  noStroke();
  fill(255);
  ellipse(374,368,3,3);

//glasses
  noFill()
  stroke(87, 22, 22);
  strokeWeight(7);
  ellipse(374,378,50,50);

  noFill();
  stroke(87, 22, 22);
  strokeWeight(7);
  ellipse(285,378,50,50);

  noFill();
  strokeWeight(7);
  beginShape();
  vertex(310, 378);
  quadraticVertex(330, 365, 349, 378);
  endShape();

  noFill();
  stroke(87, 22, 22);
  strokeWeight(7);
  line(399,378,424,360);

  noFill();
  stroke(87, 22, 22);
  strokeWeight(7);
  line(260,378,230,360);

  noFill();
  strokeWeight(3);
  beginShape();
  vertex(310, 425);
  quadraticVertex(330, 435, 349, 425);
  endShape();

//ear
  noFill();
  strokeWeight(7);
  beginShape();
  vertex(310, 378);
  quadraticVertex(330, 365, 349, 378);
  endShape();

//eyebrow
  noFill();
  strokeWeight(2);
  beginShape();
  vertex(270, 350);
  quadraticVertex(284, 340, 298, 350);
  endShape();

  noFill();
  strokeWeight(2);
  beginShape();
  vertex(360, 350);
  quadraticVertex(374, 340, 388, 350);
  endShape();}

Throughout the process, I have begun to gain more familiarity with this new workflow and I am looking forward to learning how to develop the code I wrote in much cleaner, more efficient ways.

Monica Chang- Project 1 – Face

sketch

/* 
 * Monica Chang
 * Section E
 * mjchang@andrew.cmu.edu
 * Assignment 1 Self-Portrait
 */
 
function setup() {
	
    createCanvas(600, 600);
    background(220);
    //background
    fill("yellow");
    noStroke(0);
   	rect(0,0,600,600);

   	//hair
   	fill("brown")
   	rect(180,150,240,300)
   	//head	+ neck
   	fill("tan");
   	noStroke(0);
   	ellipse(300,200,200,210);

   	fill("tan");
   	rect(280,300,40,50)
   	//hat
   	fill("black");
   	quad(150,150,230,100,370,100,450,150);
   	fill("black");
   	rect(230,10,140,100);
   	//eyes
   	fill("black");
   	triangle(240,200,260,180,280,200);
   	fill("black");
   	triangle(320,200,340,180,360,200);

   	fill("white");
   	ellipse(260,200,10,10);
   	fill("white");
   	ellipse(340,200,10,10);
   	//nose
   	fill("brown");
   	ellipse(300,230,20,10);
   	//mouth
   	fill("pink");
   	stroke(10);
   	ellipse(300,275,40,30);
   	//blush
   	fill("orange")
   	noStroke(0);
   	ellipse(250,230,40,30);
   	fill("orange")
   	noStroke(0);
   	ellipse(350,230,40,30);
   	//shirt
   	fill("purple");
   	quad(0,600,140,350,470,350,600,600);
   	//vneck
   	fill("tan");
   	triangle(250,350,300,450,350,350);

}

function draw() {
}

I had fun playing around with the sizes and shapes that we were able to utilize in this project. As an artist, I also wanted to incorporate the color scheme I would always gravitate towards through the struggle of trying to calculate how the shapes would be computed. The face was what I had the most fun with as I tried to draw the famous “pikachu meme” I love very much onto my face. Also, I added a bucket hat I have been wearing recently.

Caroline Song – Project 01-Face

sketch

/* Caroline Song
    chsong@andrew.cmu.edu
    Section E
    Assignment 1
    */

function setup (){
    createCanvas(600,600);
    background(220);
}

function draw(){
    background(235,194,237); // background lilac
    //hair
    fill("black");
    rect(185,210,230,250); 
    ellipse(300,210,232,250);

    //face and body
    fill(255, 219, 172); // skin tone color
    rect(253,350,90,45); // neck
    ellipse(300,250,205,250); // face
    
    //shirt
    fill(135,206,250); // makes cardigan blue
    quad(165,396, 435, 396, 550, 600, 50, 600);
    fill("white");
    rect(200,395.5,200,254); // shirt

    //eyes
    ellipse(350,250,55,40); //eyes
    ellipse(250,250,55,40);
    fill("black");
    ellipse(350,255,30,30); // pupils
    ellipse(250,255,30,30);
    fill("white")
    ellipse(350,260,10,10); //pupils highlight
    ellipse(250,260,10,10);

    //eyebrows
    fill("black")
    rect(320,210,55,5);
    rect(220,210,55,5);

    //nose
    fill(241, 194, 125);
    triangle(287, 300, 300, 275, 312, 300);

    //mouth
    ellipse(300,335,30,15);

}

The hardest part of the assignment for me was realizing that I would not be able to make the self-portrait as detailed as I would like, simply because I do not have the tools or the means yet to do so. However, this first project was very interesting in terms of being able to see what I was able to create with my limited knowledge.

Nawon Choi— Looking Outward 01



“The Smithsonian’s design museum goes high tech” by The Verge

The New Cooper Hewitt Experience

The Cooper Hewitt Smithsonian Design Museum’s interactive pen and tabletop experience left a deep impression on me when I first experienced it.

I was inspired by the way it augmented a typical museum experience by personalizing each visitor’s journey throughout the galleries. While there are many features of this unique project, one of the key computational/interactive art moments is the Immersion Room. This room takes inspiration from the museum’s own permanent wallpaper collection, and transforms the way people experience it. In the Immersion Room, visitors can not only digitally project wallpapers from the Museum’s collection, but also draw and display their own creations on the wall. When visitors draw on the tabletop interface using their pen, their drawing is projected on the walls in real-time.


Demo of the Immersion Room

Many different teams were involved in ideating, designing, and developing this experience. It integrates existing products, such as Sistelnetworks’ “vWand”, which have been re-engineered to fit the specific needs of the museum. I admire the way this project not only challenges the traditional museum experience, but also opens up the possibility for other industries/organizations, such as schools, to utilize these interactive technologies to enhance or radically change the way people experience and learn new things.

Monica Chang – Looking Outwards 01

Eclipse is a “Creative Digital Agency” formed by a team of 6 individuals based in Benevento, Italy who explore the processes and development of new UI/UX, Web and Graphic design.

This website is composed of many different computational designs that allow the viewer to really interact with the website and the information that is provided in a very playful and creative way. For instance, the very first page within the website introduces the viewer by inviting them to use his/her mouse to draw across the screen causing words to flow behind the moving mouse. What is also interesting about this front page is that the size of the words also vary based on the pressure put on the mousepad of a laptop. With this, it shows the amount of thought and effort put into the composition of this website.

Drawing intro page.

My favorite section of this website is their navigation page.

Navigation page.

What really drew to this website was the various designs and interactive art planted within it that not only attracted me towards traveling further into the website but also really absorbing the information as to their purpose and their goals. They encourage people to look for opportunities to create new designs and ideas to share with the world around us. It inspires me to look into more ways to developing my own ideas towards web design and explore my own senses towards programming.

Sewon Park – Project01 – Face

I felt that a portrait of my face should also encompass my golden cross earrings that I have been wearing since freshman year which is basically a part of my face now. I used the gold cross design to also enhance the background.

selfportrait

/* Sewon Park
Section 1B
sewonp
*/

function setup() {
    createCanvas(600, 600);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(0);
    
    fill(241,194,125)
	ellipse (300,300,400,400)

    fill(255,255,255)
	ellipse (200,230,30,50)
	ellipse (400,230,30,50);

	fill(0,0,0)
	ellipse (200,230,15,20)
	ellipse(400,230,15,20);
	
	fill(241,194,125)
	arc(100,270,40,40,0,PI,CHORD);
	arc(500,270,40,40,0,PI,CHORD);
    
    fill(249,249,40)
    rect(90,285,5,30);
    rect(85,290,14,5)
    rect(505,285,5,30)
    rect(500,290,14,5)
  
  	rect(280,30,40,10)
  	rect(295,10,10,60)
    
    rect(50,500,40,10)
    rect(65,480,10,60)
    rect(510,500,40,10)
    rect(525,480,10,60)

    fill(0,0,0)
    triangle(300,300,310,330,290,330)


    
    fill(255,0,0)
    arc(300,400,20,40,0,PI,CHORD)

    fill(0,0,0)
    arc(300,190,290,180,PI,0);

    stroke(255)
    line(300,100,300,190);
    line(280,103,280,190)
    line(260,106,260,190)
    line(240,109,240,190)
    line(220,115,220,190)
    line(200,125,200,190)

    line(320,103,320,190)
    line(340,106,340,190)
    line(360,109,360,190)
    line(380,115,380,190)
    line(400,125,400,190)





 }

Taisei Manheim- Looking Outward – 01

The Teletroscope as seen from the New York City side.

The interactive project that I chose was The Teletroscope, an installation during the summer of 2008 in London and New York City by Paul St. George, an artist that is based in London.  Near Tower Bridge in London and similarly positioned by the Brooklyn Bridge in New York were identical telescopes that allowed people to watch those on the other side in real time. These giant telescopes were huge and angled into the ground as to almost give the impression that there was a literal tunnel from London to New York City in which you could see those on the other side.  It was based on a Victorian engineer’s idea of connecting London and New York through a series of lenses and mirrors. This illusion of a giant tunnel under the Atlantic Ocean was made possible by broadband internet cable that transmitted video images between the two venues at a high speed. Paul St. George couldn’t complete this project by himself so he got help from the British arts organization Artichoke.  They loved the project’s idea and thought it would be easy to make, but it ended up costing $787,000.  Historically, the idea of the teletroscope helped to fuel the ideas of technologies, such as TV and the internet and even when this installation was made in 2008, video calling people around the world was not nearly as common as it is now today.

Steven Fei-Looking Outwards-01

Maths and computations lend creative power to artistic and architectural designs.

Math Museum Interior Installation

Three years ago, I was amazed by Zaha Hadid’s design of the Mathematics Gallery at the Science Museum in London. Inspired by aircrafts, the interior membrane installation stands elegantly and shows a strong sense of movement and evolution. Such a practice indicates the strong influence of technology on the environment and the space that people experience. Designed by a team of more than ten people, the form was scripted and paramatrically controlled to achieve an ideally continuous and complex shape. Moreover, the design suggests an enlightening future for artistic creations aided by algorithms. Strongly influenced by such new technology, I use an algorithmic design tool called Grasshopper a lot in my architectural designs and formal explorations.

Article for more information from Archdaily



 

	


	





	

		
		
Fanjie Jin: Looking Outwards – 01
	


	
	
	

		

Pipilotti Rist is an installation artist from Switzerland. Her work is often described as surreal, intimate and abstract. 





Over the summer, I have gotten chance to visit the Louisiana Museum in Copenhagen, Denmark, in which the installation ‘Åbn min lysning (Open My Glade)’ by Pipilotti Rist was exhibited. There are two galleries and people interact with the technological art in different manners. The first installation took place in a living room setting where people can circulate in the space and sit on the couches and chairs. There are a number of projectors in the room and the projected videos almost have covered every corner in the room even on the moving audiences. The progressive videos have transferred the room into a very surreal environment in that it blurs the boundary of the objects in the room. The second installation takes place in a room full of lanterns. It has transform the architectural space into a massive dreamlike environment enhanced by the mysterious music.  When people entering into the space the light will change rhythmically according to the people that have passed by.