August 2017 – Page 4 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

alchan-Project 01-face

function setup() {
    createCanvas(500, 500);
    background(195, 240, 244);
    angleMode(DEGREES);
    smooth();
}

function draw() {
  //hair back
  noStroke();
  fill(31, 51, 68);
  arc(310, 260, 270, 280, 160, 380, CHORD);
  rect(175, 270, 270, 80);

  //neck
  fill(237, 217, 168);
  stroke(224, 179, 134);
  strokeWeight(5);
  rect(285, 300, 50, 130);

  noStroke();
  fill(224, 179, 134);
  rect(285, 300, 50, 75);

  //face
  fill(237, 217, 168);
  stroke(224, 179, 134);
  arc(310, 260, 190, 200, -90, 200, CHORD);

  //eyes
  noStroke();
  fill(0);
  ellipse(260, 246, 10, 10);
  ellipse(370, 246, 10, 10);

  //eyebrows
  stroke(31, 51, 68);
  strokeWeight(5);
  line(350, 225, 372, 225);

  //mouth
  stroke(224, 179, 134);
  line(280, 310, 340, 310);

  //hair front
  noStroke();
  fill(31, 51, 68);
  arc(200, 120, 270, 280, 2, 100, CHORD);

  stroke(31, 51, 68);
  noFill();
  arc(197, 135, 270, 280, 2, 70, OPEN);

  //shirt
  noStroke();
  fill(256);
  ellipse(310, 515, 300, 250);
}

I started off by figuring out how I wanted to represent the face and ended up with a highly simplified version made of more basic shapes. Once I had a rough layout of what I wanted to accomplish I essentially just used trial and error to put the face together. I found that the hardest part was calculating the position & other variables for each shape, and will probably try to find a more efficient way of figuring those factors out.

katieche – project 01 face

katieche-01

function setup (){
	createCanvas (600, 600);
	rectMode(CENTER);
}

function draw (){
	background (229, 185, 185);

	fill (0);
	ellipse (300, 335, 250, 330);

// head
	strokeWeight (0);
	stroke (229, 213, 199);
	fill (255, 243, 219);
	ellipse (300, 300, 200, 220);
	rect (300, 400, 50, 70);

// hair
	fill (0);
	ellipse (315, 230, 150, 90);
	fill (0);
	ellipse (230, 250, 60, 30);
	fill (0);
	ellipse (300, 210, 150, 60);
	fill (0);
	ellipse (240, 235, 70, 40);

// nose
	noStroke();
	fill (229, 213, 199);
	triangle (287, 350, 300, 357, 312, 350);

// eyebrows
	noStroke();
	fill (0, 0, 0);
	rect (250, 290, 60, 7);	

	noStroke();
	fill (0, 0, 0);
	rect (350, 290, 60, 7);

//cheeks
	fill (247, 215, 215);
	ellipse (245, 340, 30, 30);

	fill (247, 215, 215);
	ellipse (355, 340, 30, 30);


// eyes
	fill (0);
	ellipse (250, 320, 30, 30);
	strokeWeight (3);
	stroke (0);
	line (230, 310, 250, 320);

	fill (0);
	ellipse (350, 320, 30, 30);
	strokeWeight (3);
	stroke (0);
	line (330, 310, 350, 320);

//shine
	noStroke();
	fill (250);
	ellipse (245, 315, 7, 7);

	noStroke();
	fill (250);
	ellipse (345, 315, 7, 7);



}

I started with a blank circle for the head, and made the features from the center out: from the nose to eyes, eyebrows, cheeks, and lastly, hair. There was a lot of guess and check involved with figuring out the location of the features. Wanted to include arcs or rotate objects, but had trouble figuring both of these out.

yoonyouk-project01-face

//Yoon Young Kim 
//Section E
//Yoonyouk@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(500, 500);
    background(255, 204, 204);
    angleMode(DEGREES);


    //background strip
    noStroke();
    fill(153, 204, 255);
    rect(0, 125, 600, 225);

    //shoulder
    noStroke();
    fill(255, 153, 153);
    ellipseMode(CENTER);
    arc(230, 500, 150, 325, 180, 0);


   //headshape
    noStroke();
    fill(255, 229, 204);
    ellipseMode(CENTER);
    ellipse(200, 250, 200, 210);
    

    //nose
    noStroke();
    fill(255, 229, 204);
    triangle(110, 230, 115, 300, 85, 300);

    //eye
    noStroke();
    fill(256);
    ellipseMode(CENTER);
    ellipse(135, 248, 25, 25);

    //pupil
    noStroke();
    fill(102, 51, 0);
    ellipseMode(CENTER);
    ellipse(128, 253, 10, 10);

    //hair
    noStroke();
    fill(153, 76, 0);
    ellipseMode(CENTER);
    arc(210, 235, 220, 230, 200, 60, PIE);

    //ponytail
    noStroke();
    fill(153, 76, 0);
    ellipseMode(CENTER);
    arc(320, 235, 100, 230, 195, 90, PIE);    

    //eyebrow
    stroke(153, 76, 0);
    strokeWeight(3);
    noFill();
    arc(135, 228, 40, 25, 270, 360);

    //smile
    stroke(255, 153, 153);
    strokeWeight(5);
    noFill();
    arc(127, 300, 50, 50, 15, 90);


    //glasses
    stroke(120);
    strokeWeight(6);
    noFill();
    ellipseMode(CENTER);
    ellipse(125, 250, 25, 40);


    stroke(120);
    strokeWeight(6);
    noFill();
    arc(138, 263, 190, 30, 270, 360);

    stroke(120);
    strokeWeight(6);
    noFill();
    arc(100, 250, 30, 13, 270, 360);

    //ear
    noStroke();
    fill(255, 204, 153);
    arc(220, 265, 30, 40, 250, 90, CHORD);




}

function draw() {
}

yoonyouk-LookingOutwards-01

Official BMO200 Fountain site

Blog post about the work

Example of one of the BMO200 fountains.

This project is the BMO200 Fountain, a creation that celebrates the 200th anniversary of BMO, a bank in Montreal.

The creative director of this project is Jess Willis of Mosaic. This project involved not only people of the design firm and the production company, but also members and employees under BMO. BMO’s CMO, Connie Stefankiewicz. Jennifer Marman and Daniel Borins were also artists involved with the project.

In order to celebrate BMO’s bicentennial anniversary, the company wanted to grant wishes to their customers through an interactive installation. Thus, the idea for the BMO200 Fountain came to be. The project is a sculpture that depicts water pouring into a pond. The image of water is created through mosaic tiles that flip between white and blue in order to form the appropriate imagery and icons. Users can type in a “wish” with their mobile device and then toss the coin into the fountain. This piece particularly caught my eye because I enjoy how the project is a successful combination of art, interaction and software.

I believe this project required the development of custom scripts because the artists and developers of the project wanted to created an interactive interaction that didn’t involve the cliche projections or screens. They thus created a software involving a “flip side” where many discs along the fountain water form would easily flip between white and blue in order to create the appropriate images. The project designers had to configure different ways that the coin would fall into the fountain waters.

The BMO200 Fountain demonstrates that interaction design is not limited to screens. Although today we see a lot of interactions involving these components, I think it is endearing to see the mosaic tiles moving to create different shapes. However, when not with the fountain, the experience is definitely not has sublime.

DooWonNam-LookingOutwards-1

Millions of people come together to watch the annual League of Legends World Championship. While League of Legends is a current meta game that may seem too ‘pop’, the game has always been a great inspiration for me as a student. Starting with a small group and C++, Merc Merrill decided to tap into the video game market with League of Legends, a MOBA-style game. The most impressive aspect of the whole project is how prevalent it became in today’s eSports. Following up Starcraft, League of Legends has become an overwhelming favorite for eSports fans. Stadiums sell out, viewership stumps other ‘real sports’, and the game has found successful even after 7 years of release. To me, League of Legends demonstrates how technology is further expanding to the sports scene. In fact, the United States has started to give work Visa to professional eSports players because of how big the scene has become.

Fans Fill Up the Stadium to Watch the Game

How League of Legends Started

Statistics of League of Legends World Championships

Cora Hickoff Self Portrait

Cora Self Portrait

//Cora Hickoff
//Section C 9:30AM-10:20AM
//chickoff@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(500,600);
    background(167,171,198);
}

function draw() {

    //face
    fill(255,255,255)
    noStroke(0)
    rect(175,120,160,240,50);

    //nose
    fill(247,216,180)
    noStroke(0)
    ellipse(225,250,15,40);

    //top of nose
    fill(255,255,255)
    noStroke(0)
    ellipse(225,237,15,40);

    //freckle blush
    fill(255,227,225)
    ellipse(230,230,60,20);

    //freckle 1
    fill(185,149,108)
    ellipse(215,230,4,4);

    //freckle 2
    fill(185,149,108)
    ellipse(230,225,3,3);

    //freckle 3
    fill(185,149,108)
    ellipse(240,234,3,3);

    //freckle 4
    fill(185,149,108)
    ellipse(250,234,4,4);

    //gold stripe 1
    fill(255,196,66)
    rect(220,360,70,20);

    //white stripe 1
    fill(255,255,255)
    rect(220,380,70,20);

    //gold stripe 2
    fill(255,196,66)
    rect(160,400,200,20,10);

    //white stripe 2
    fill(255,255,255)
    rect(140,415,235,20,10);

    //gold stripe 3
    fill(255,196,66)
    rect(135,435,245,20,10);

    //left gold sleeve stripe 1
    fill(255,196,66)
    rect(125,440,20,180,10);

    //left white sleeve stripe 1
    fill(255,255,255)
    rect(140,440,20,180,10);

    //left gold sleeve stripe 2
    fill(255,196,66)
    rect(160,440,20,180,10);

    //right gold sleeve stripe 1
    fill(255,196,66)
    rect(330,440,20,180,10);

    //right white sleeve stripe 1
    fill(255,255,255)
    rect(350,440,20,180,10);

    //right gold sleeve stripe 2
    fill(255,196,66)
    rect(370,440,20,180,10);

    //gold shirt square
    fill(255,173,10)
    rect(180,440,160,160);

    //mouth
    fill(0,0,0)
    ellipse(250,320,40,12);

    //tooth
    fill(255,255,255)
    noStroke(0)
    rect(241,313,6,7,1);

    //left eye
    fill(255,255,255)
    stroke(0)
    strokeWeight(2)
    translate(width/2,height/2)
    rotate(PI/4.0)
    ellipse(-136,-70,15,30);

    //right eye
    fill(255,255,255)
    stroke(0)
    strokeWeight(2)
    translate(width/150,height/8)
    rotate(HALF_PI/1.0)
    ellipse(-179,-2,15,20);

}

I started this project by first drawing a sketch of what I wanted to create. I then simplified it into the shapes that I’d program. Even though my original plans changed as once I started, I learned to adapt with the process and realize that it’s okay for things to go wrong. Sometimes the unexpected happens and the work is better than it would have been had everything gone to plan.

mjeong1-LookingOutwards-01

Workers That Live In The Mirrors by Dave Colangelo

This is a architectural projection which is located in United Steelworkers Hall. Toronto, Canada. The artist created this project based on his belief in public art being interactive with viewers.

“we want public art that can talk and listen, public art that we can click on, swipe, share, capture, and converse with and about. Public art that tell us something about the place it is in, about ourselves and others as we engage with it, and that connects us to other people and times, both near and far.” – Dave Colangelo

This art project can interact with people by introducing multiple, projection-mapped scenes of work and resistance in contemporary economies. It created connection between people by giving them a platform to share their thoughts and everyday life. It was a successful project that illustrates the situation of our society through series of projection. Also, the artist chose a red-brick masonry wall of “steelworkers” building for the projection instead of white wall inside of exhibition hall. To me, it successfully drew intention from pedestrians walking by the street and it effectively depict his belief in art being engaging and interactive to public .

However,it could be more effective if it can be responsive to reaction of the viewers. Perhaps, images in projection change based on various social data we put in or the projection has sensor that detects physical reaction of people and responds to it visually.

Workers that Live in the Mirrors

JackieChou-LookingOutwards-1

eCloud

eCloud is an art installation in Terminal B at San Jose International Airport in San Jose, CA. I know this exhibit well because SJC is my home airport, and I flew through it fairly often.

According to the piece’s official website, eCloud was created by Dan Goods, Nik Hafermaas, and Aaron Koblin. It is composed of hundreds of polycarbonate planes that are suspended from the terminal’s ceiling in the rough shape of a cloud. The panels can change transparency, based on real-time weather data from cities around the globe. The effect is of a digital cloud that changes subtly based on each panel’s transparency level.

The installation also includes a large LCD panel installed in the adjacent wall, that shows the weather of the city being represented at the moment, as well as a simulated preview of the cloud itself. This project really inspired me because its innovative use of technology truly represented Silicon Valley and it was a beautiful representation of how technology could contribute to something simple and beautiful. These days, a lot of thinkers are concerned about technology’s harmful impact on our generation, but we should be reminded that technology isn’t bad in itself, but we have to be be careful in how we choose to use it.

The artwork was essentially commissioned by the city of San Jose. While the terminal was being built, the city called for applicants to propose their own ideas, and eCloud was eventually selected. It seems that the applicants started prototyping their piece in 2007, but the final terminal with the installation did not open until 2010.

The team was led by three main artists/designers, who also worked with some professionals who had some more specific expertise.

The team who created the piece had plenty of previous experience in environmental design. They had designed various spaces and environments and many settings such as airports and museums. And why a cloud? According to a VICE article, the art world at the time was heavily relying on clouds for inspiration.

Here is a video of the installation:

According to the official website, the project utilized a lot of custom software so that the panels could communicate with each other and utilize the proper transparency.

Could the project have been effective? I don’t know! After all, it’s a piece of modern art, not quite a product so it doesn’t feel right to critique it. However, I think it works incredibly well in its setting. Perhaps I wish the panels were darker in default, so the more transparent “white” panels would be more visible with greater contrast.

jknip-LookingOutwards-01

Generative Typography (GT by Q)

This project was developed by a professor in the School of Design, Kyuha Shim. I really enjoy his project as he creates an algorithm that bridges designers’ logic with computation through software generated typography. The algorithm establishes systematic patterns from type iterations, and can create different combinations of typographic forms. The resulting forms are not only pleasing to look at, but can also be taken further, becoming responsive to external inputs such as sound and motion. I think Shim has always been involved in data visualization, typography, and code work for some time, and this series of work were created between 2011 and 2014. The project required custom software I believe, that toggled different inputs and iterations. Shim may have been inspired by other forms of existing parametric design. Generative Typography provides a new paradigm of metadesign, where designers can push boundaries of creation beyond traditional type rules and guides.

http://generativetypography.com/

jknip-Project-01-Face

sketch.js

function setup() {
    createCanvas(600,600);
    //background(256,256,256);
    background(42,134,191);
}

function draw() {
	var a = color(253,233,53);  
	fill(a);  
	noStroke(); 
	rect(300, 0, 300, 600);
	var bc = color(31,50,101);  
	fill(bc);  
	noStroke(); 
	rect(160, 130, 285, 400, 140, 140, 15, 15);
	var c = color(243,197,192);  
	fill(c);  
	noStroke();  
	ellipse(300,300,250); 
	var cd = color(255,255,255);  
	fill(cd);  
	noStroke(); 
	arc(300, 300, 250, 250, -HALF_PI, HALF_PI, CHORD);
	noFill();
	var d = color(200,45,52);  
	stroke(d);
	strokeWeight(6);
	arc(260, 250, 50, 40, PI+QUARTER_PI, TWO_PI);
	arc(355, 250, 50, 40, PI+QUARTER_PI, TWO_PI);
	arc(300, 365, 30, 15, QUARTER_PI, PI+TWO_PI);
	noStroke();
	fill(d);  
	ellipse(250, 280, 20, 20);
	ellipse(345, 280, 20, 20);
	ellipse(290, 330, 10, 10);
	var e = color(163,144,129);
	stroke(e);  
	strokeWeight(3);
	line(365, 330, 375, 322);
	line(355, 330, 365, 322);
	line(345, 330, 355, 322);
	line(235, 330, 245, 322);
	line(225, 330, 235, 322);
	line(215, 330, 225, 322);
}

To develop this sketch, I played with a series of symmetrical components within the larger shapes that makes up the majority of the background. I wanted to create a more expressive, asymmetrical face within the smaller components of the face, using simple arcs, lines and circles.