Month: August 2019

Alice Cai- Looking Outwards

Flow

Flow is a project by artist Tim Roden Broeker. Tim does “creative coding”, what he defines as the arts and experimental software development. He believes code is a powerful skill; Tim aims to explore the world of art and technology. He works with Processing and p5.js.

His project flow is an abstract, experimental short-film written with Processing. It was created for the PSD-Medienfassade, a large LED display mounted on the PSD- bank in Munster. The piece shows a flowing snake-like configuration floating in a three-dimensional space. The head of the figure twists and turns on the screen like a long, infinitely growing rope. The subject also rotates on an axis in space. Along with the visual, Tim has composed music to accompany the piece. The music is meant to be streamed from a special application from a smartphone. Tim decided to push the project to the next step and made it interactive. To do this, he had to switch from Processing to Javascript.

Gretchen Kupferschmid-Face-Project 01

I was inspired by illustrative print art that is simplistic in its style, yet also has a fashion/editorial style to it. In the piece, instead of creating parts of my face with just shapes, I used the shapes to foster an illustrative aspect to “draw” features with multiple smaller shapes overlapped and next to each other.

sketch

function setup() {
    createCanvas(315.118,312.695);
}
 function draw (){
//background design
    fill (249,217,237);
    noStroke();
    triangle(0,0,0,312.69,312.69,0);
    fill(224,175,206);
    noStroke();
    triangle(0,312.69,312.69,0,312.69,312.69);
    //hair
    fill(114,89,56);
    noStroke();
    ellipse(145.623,158.176,114.047,153.626);
    fill(114,89,56);
    noStroke();
    ellipse(168.704,159.258,114.047,153.626);
    fill(114,89,56);
    noStroke();
    ellipse(200.801,214.075,57.429,104.974);
    fill(114,89,56);
    noStroke();
    ellipse(113.627,212.272,53.319,104.974);
    fill(114,89,56);
    noStroke();
    rect(94.643,230.531,37.243,46.651);
    fill(114,89,56);
    noStroke();
    rect(180.327,231.17,40.114,46.651);
    //shirt
    noStroke();
    fill(191,157,90);
    arc(154.92,318.69,241.767,104.508,PI, TWO_PI);
    //neck
    fill(168,139,108);
    noStroke();
    ellipse(157.75,268.37,66.643,18.908);
    fill(168,139,108);
    noStroke();
    rect(124.169,209.923,67.155,58.445);
    //face
    fill(193,162,122);
    noStroke(); 
    ellipse(156.229,146.79,102.858,86.443);
    fill(193,162,122);
    noStroke();
    ellipse(155.864,170.581,103.955,133.584);
    fill(193,162,122);
    noStroke();
    ellipse(157.71,179.004,103.955,144.584);
    //eyebrows
    fill(96,70,43);
    noStroke();
    triangle(116.86,146.91,122.06,141.19,127.87,142.37);
    fill(96,70,43);
    noStroke();
    rect(121.363,140.923,13.053,1.699);
    fill(96,70,43);
    noStroke();
    triangle(122,141.19,127.48,138.1,136.36,140.13);
    fill(96,70,43);
    noStroke();
    ellipse(131.298,141.25,10.35,3.468);
    fill(96,70,43);
    noStroke();
    ellipse(135.577,141.944,10.35,3.468);
    fill(96,70,43);
    noStroke();
    ellipse(139.69,142.31,10.35,3.468);
    fill(96,70,43);
    noStroke();
    ellipse(144.87,143.05,10.35,3.468);
    fill(96,70,43);
    noStroke();
    ellipse(171.67,144.05,10.35,3.468);
    fill(96,70,43);
    noStroke();
    ellipse(175.051,143.135,10.35,3.468);
    fill(96,70,43);
    noStroke();
    ellipse(178.779,142.603,10.35,3.468);
    fill(96,70,43);
    noStroke();
    ellipse(183.196,141.988,10.35,3.468);
    fill(96,70,43);
    noStroke();
    rect(179.29,141.656,12.702,1.699);
    fill(96,70,43);
    noStroke();
    triangle(178.11,140.86,187.01,138.84,192.35,141.92);
    fill(96,70,43);
    noStroke();
    triangle(186.64,143.11,192.29,141.92,197.35,147.64);
    //eyes
    fill(0);
    noStroke();
    ellipse(131.283,156.773,25.879,12.286);
    fill(193,162,122);
    noStroke();
    ellipse(131.34,154.69,27.329,11.923);
    fill(0);
    noStroke();
    ellipse(181.203,158.605,25.879,12.286);
    fill(193,162,122);
    noStroke();
    ellipse(181.23,156.36,27.329,11.923);
    //nose
    fill(168,139,108);
    noStroke();
    triangle(147.52,185.12,157.75,140.08,167.97,185.12);
    fill(168,139,108);
    noStroke();
    ellipse(157.729,185.246,20.456,17.444);
    fill(193,162,122);
    noStroke();
    triangle(144.28,180.48,154.51,135.45,164.74,180.48);
    fill(193,162,122);
    noStroke();
    ellipse(156.66,183.98,22.698,16.009);
    fill(142,117,95);
    noStroke();
    ellipse(153.31,192.49,3.852,1.86);
    fill(142,117,95);
    noStroke();
    ellipse(160.7,192.49,3.852,1.86);
    //lips
    fill(155,101,104);
    noStroke();
    triangle(132.92,211.95,154.3,204.4,156.38,210.67);
    fill(155,101,104);
    noStroke();
    ellipse(155.988,207.234,8.63,6.824);
    fill(155,101,104);
    noStroke();
    ellipse(160.71,207.06,8.116,7.106);
    fill(155,101,104);
    noStroke();
    triangle(162.85,204.07,161.57,210.53,176.71,212.59);
    fill(155,101,104);
    noStroke();
    triangle(132.92,212.24,145.16,218.32,151.58,214.25);
    fill(155,101,104);
    noStroke();
    ellipse(158.229,217.127,28.404,6.484);
    fill(155,101,104);
    noStroke();
    ellipse(158.64,218.32,22.805,7.554);
    fill(155,101,104);
    noStroke();
    triangle(164.13,214.11,171.94,218.32,176.71,212.85);
    //ears
    fill(193,162,122);
    noStroke();
    ellipse(212.341,167.176,14.55,35.307);
    fill(193,162,122);
    noStroke();
    ellipse(214.46,181.4,8.049,10.859);
    fill(193,162,122);
    noStroke();
    ellipse(100.61,167.33,12.812,31.732);
    fill(193,162,122);
    noStroke();
    ellipse(101.40,181.523,8.21,10.859);
    //earrings
    fill(255);
    noStroke();
    ellipse(101.40,185.12,5.534,5.534);
    fill(255);
    noStroke();
    ellipse(215.46,185.12,5.534,5.534);
    stroke(255);
    strokeWeight(4);
    noFill();
    rect(94.694,188.49,12.266,17.568);
    stroke(255);
    strokeWeight(4);
    noFill();
    rect(209.327,189.49,12.266,17.568);
     
     
 }

Hyejo Seo – Looking Outward 01

A picture of the “Portals” shipping container to which people would walk in to have a conversation with another person from different country.

I had an opportunity to learn about an interactive art project called “Portals”, created by a creative studio, Shared Studios, through my friend over the summer. How Portals work is that a person walks into a shipping container in which they talk to complete strangers from different backgrounds such as from Iraqi refugee camps, Afghan universities, Mexican public parks and German libraries through live feed. People are given with some ice breaker questions such as “What would make today a good day for you?” before walking in, but the rest of the conversation is up to them.  This project was launched in December 2014 by a former Washington Post reporter, Amar Bakshi, after traveling to 12 countries to report. His most memorable moments from his time visiting different countries were talking to complete strangers in each country. On his way back home, he brainstormed ways of connecting people from all over the world in more personal ways, and Portals was created. With a team of 16 people, the shipping container have been traveling to different cities in the US.

This project has struck out to me as it provides meaningful experiences between people separated by distance and differences and will further encourage them to be more open-minded and expose themselves to different cultures – resonating with my personal values. As a person who has been studying abroad – New Zealand, Canada, Singapore, now, America – since a young age, I have been pushed to step out of my comfort zones, which led me to learn and appreciate different cultures. Since I am aware that everybody’s experiences are unique, I hope to create creative and more fun ways to encourage people to learn about other cultures such as the Portals. 

A video on Shared_Studios Youtube page in which Amar Bakshi explains the story and purpose of his project, Portals.

Gretchen Kupferschmid-Looking Outward-01

the metro displaying calmness as a reaction to stress on the Clear Channel screens

The Emotional Art Gallery

In Stockholm, a project called “The Emotional Art Gallery” was created by the company Clear Channel and the design studio Affairs. The main intention of the project is to improve human emotional as they interact with responsive digital billboards. The project utilizes real-time emotions by gathering data from things like google searches, news stories, and social media in order to decipher the general moods of commuters across the city. From this info, the screen displays six different artworks from different artists to counter the negative feelings, each with the goal of depicting a different feeling. I appreciate the focus of this project on its human-center focus, as its not just artwork, but something instead that has the power to enhance the human experience and creative a more positive impact on a society.

Though this project is original in many aspects, the concept and tech is not completely new. In 2017, a digital billboard was installed in London that used recognition tech to display targeted advertisements based off things like the types of cars passing by and other visual cues. Though Clear Channel’s project analyzes different cues with different code behind it, the general idea of responding with targeted billboards is similar.

This project is the largest scale exhibition showcasing digital art, but its impact doesn’t just stop in Stockholm. The creators of the project are allowing their algorithm to become available to other brands to use for their billboard in order to spread more positivity in a stressed world. I even see opportunity for this project to be implemented in places like colleges where there are also a high number of stressed people.

Jesper Lindborg created an animation to portray the feeling of being safe
A sample of a billboard by Clear Channel displaying calmness

A case study video of the project and process by Clear Channel

Mihika Bansal-Project 01- Face

sketch

function setup() {
    createCanvas(645, 800);
    background(214, 214, 245); 
  }

function draw() {
    
    //hair 
    fill("black"); 
    arc(300, 350, 300, 550, 0, PI,OPEN);
  
    //neck
    fill(111, 111, 220)
    fill(210, 166, 121); 
    rect(245, 420, 110, 80);
    arc(300, 500, 110, 45, 0, PI,OPEN);
    

    //hair behind ear
    fill("black");
    arc(410, 375, 120, 450, 3*PI/2, PI/2);
    arc(190, 375, 120, 450, PI/2, 3*PI/2); 
	
    //face and ears 
    fill(210, 166, 121); 
    ellipse (300, 300, 250, 300);
    arc(435, 320, 30, 50, 3*PI/2, PI/2);
    arc(166, 320, 30, 50, PI/2, 3*PI/2);

    //eyebrows + eyes
    fill("black");
    rect(227, 275, 42, 7); 
    rect(330, 275, 42, 7); 
    ellipse(250, 305, 40, 25); 
    ellipse(350, 305, 40, 25);
    triangle(228, 276, 218, 283, 228, 282);
    triangle(373, 276, 383, 283, 373, 282); 

    fill("white"); 
    ellipse(255, 300, 15, 15);
    ellipse(347, 300, 15, 15);

    //earrings 
    fill(230, 211, 152); 
    ellipse(438, 337, 10, 10);
    ellipse(164, 337, 10, 10);
    fill(112, 112, 219);
    rect(432, 343, 7, 55);
    rect(160, 343, 7, 55);
     
    //hair
    fill("black");
    arc(300, 235, 300, 300, PI-0.40, QUARTER_PI-0.45 , PIE);
    rect(425, 300, 9, 150);
    
    //nose 
    fill(204, 153, 102); 
    strokeWeight(0);
    rect(295, 300, 14, 45); 
    ellipse(302, 350, 28, 13);
    stroke("black");
    strokeWeight(1);

    //lips 
    fill(123, 30, 30); 
    arc(300, 398, 50, 25, 0, PI,OPEN);
    arc(300, 397, 45, 15, PI, 0,OPEN);












    
   
   
}

It was interesting trying to simplify my face using simple graphic shapes. This project was helpful in solidifying my understanding of basic drawing functions in coding, and overall a very enjoyable process.

Taisei Manheim – Project 01 – Face

sketch

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-01

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

function draw() {
    background('pink');

    stroke('black');
    fill('tan')
    rect(270, 270, 60, 60)
    //neck

    fill('tan');
    ellipse(300, 200, 150, 200);
    //head

    fill('black');
    rect(270, 500, 20, 80)
    rect(310, 500, 20, 80)
    //legs

    fill('black');
    ellipse(300, 420, mouseX, 200);
    ellipse(300, 420, 150, 200);
    //body

    fill('tan');
    curve(260, 240, 280, 260, 320, 260, 340, 240);
    //mouth

    fill('black');
    triangle(290, 240, 300, 200, 310, 240);
    fill('tan');
    noStroke();
    triangle(292, 238, 302, 198, 310, 238);
    //nose

    fill('white');
    arc(270, 190, 25, 10, 0, PI, CHORD);
    arc(270, 192, 25, 10, PI, PI + PI, OPEN);
    arc(330, 190, 25, 10, 0, PI);
    arc(330, 192, 25, 10, PI, PI + PI, OPEN);
    //eyes

    fill('black');
    ellipse(270, 191, 8, 8)
    ellipse(330, 191, 8, 8)
    //pupils

    fill('black');
    rect(255, 165, 30, 8);
    rect(315, 165, 30, 8);

    fill ('black');
    translate (285, 140);
    rotate (2.8);
    arc(0, 0, 120, 70, 0, PI, CHORD);
    arc(0, 2, 120, 30, PI, PI + PI, OPEN);
    //left hair

    rotate (4.2);
    translate(37,-35)
    arc(0, 0, 80, 10, 0, PI, CHORD);
    arc(0, 2, 80, 50, PI, PI + PI, OPEN);
    //right hair
}

With this project I wanted to use a variety of shapes and commands such as rectangles, ellipses, arcs, curves, and triangles in order to get myself used to coding. It was interesting thinking about myself solely based on simple geometries and I created a moving image to depict how I imagine myself changing over the course of my life.

Alice Cai_Project01_Face


sketch

function setup() {
 createCanvas(600, 600);
 background("white");

}

function draw() {
	fill("tan");
	ellipse(300,300,280,350);

	fill("black");
	arc(300, 230, 283, 280, PI, TWO_PI);

	fill("black");
	rect(160,200,30,300);

	fill("black");
	rect(410,200,30,300);
	
	fill("black");
	rect(225,250,40,10);

	fill("black");
	rect(330,250,40,10);

	fill("black");
	ellipse(250,300,30,20);

	fill("black");
	ellipse(350,300,30,20);

	fill("white");
	ellipse(255,295,10,10);

	fill("white");
	ellipse(355,295,10,10);
	

	//fill("pink");
	//rect(250,400,100,10);

	fill("black");
	ellipse(300,80,100,100);

	fill("pink");
	ellipse(300,405,100,40);

	fill("tan");
	strokeWeight(0);
	ellipse(300,395,140,35);

	fill("pink");
	ellipse(240,335,50,20);

	fill("pink");
	ellipse(360,335,50,20);
	//arc(300, 400, 283, 280, -PI, TWO_PI);

	fill("tan");
	strokeWeight(1);
	triangle(300, 380, 300, 270, 330, 380);


	fill("black");
	arc(300, 620, 283, 280, PI, TWO_PI);



}

Danny Cho-LookingOutwards-01

A screenshot from the movie “Oblivion”

When I see interfaces from sources such as sci-fi movies like Iron Man, or Oblivion, it always excites me and makes me want to create something similar. My favorite designer regarding this topic is Gmunk (Bradley G Munkowitz). He uses mixture of Cinema 4D, After Effects, and other softwares to create mind blowing animations. Such graphics really catch the attention of the audience by generating futuristic atmosphere as well as help us imagine ourselves in the position of the characters that are using the interface.

Above is the UI of Bubbleship. Bubbleship is a paramount vehicle in the movie. Gmunk’s stated that it was the most researched graphic task, trying to imitate the actual functional data that currently exists in the combat aircraft interfaces as well as modernizing its aesthetics. I genuinely appreciate the works that someone put in much considerations to crafting it to very details, though it’s not required to do so. 

Such as HUD above, I have been using softwares such as After Effects myself to replicate such interfaces, but have not been able to create an actual interaction. I look forward to learn how to create digital interactions that reacts to the user’s movement and actions, with a behavior more than just a pre-directed script.

Yoshi Torralva-Looking Outwards-01

ID Tags

Pentagram’s newest design partner, Giorgia Lupi, is at the forefront of furthering data-driven design as an essential pillar to design methods. Throughout Lupi’s career, she has used data as the foundation to nurture empathy towards important issues surrounding politics, technology, health, and above all, forging impactful human interactions.

TED conferences are renowned for showcasing inspiring speakers that span all over the world. When one is privileged with the opportunity to attend an event, it lends itself numerous networking opportunities. For many, the process of becoming comfortable with networking is often a hurdle. What Giorgia Lupi accomplishes is making the barrier to transgress from surface-level introduction to meaningful conversations easier through generative conference ID tags. This project included Giorgia Lupi and David Stark Design for Targets interaction space at the 2017 TED Conference in Vancouver. A timespan of the development process is not provided, but I would predict it took a couple of months.

App developed to generate ID tags instead of hand drawing them.

Giorgia Lupi creates a system of different hand-drawn symbols, colors, and accents that identified someone’s personality or interests. Although these ID’s provide personability to a tag, it would be lengthy to replicate. Lupi decided to implement her hand-drawn style into an app that auto-generated the ID after filling out a survey. The app itself uses a stock Google Material design to input the person’s data. However, visual elements are of separate layers to that morph at the end of the survey. It would have been nice for these visual elements to be computer-generated as it could be replicated at other conferences. These data-driven ID tags are inspired by physical ID labels and added fabric ribbons that might supply information like location and name. What this tag does is employ visualized data to allow for more interactions among participants. Giorgia Lupi sets the framework for ID’s to become more diverse in information through an auto-generative ID system. An intervention like this sets the standard for other conferences and corporate companies to create ID systems that nurture insightful relationships right after the first hello.

Ellan Suder-Project01-Face

I had a bit of trouble sorting out which values corresponded with which points, especially with the quadrilaterals, but I eventually worked it out!

ellansuderface

function setup() {
    createCanvas(500, 500);
	background(93, 203, 255);

    stroke(250, 50, 56); 
    strokeWeight(20);
    line(60, 360, 67, 345); //thumb
    line(160, 475, 40, 340); //leftarm
    line(450, 360, 435, 345); //thumb
    line(440, 475, 460, 340); //rightarm

    stroke(0, 0, 255)//flag
    strokeWeight(5)   
    line(60,420,60,70)
    fill(255);
    rect(60, 70, 400, 100, 20);

    noStroke(); //face
    fill(250, 50, 56); 
    ellipse(250,350,200,170);

    let s = 'hello! nice to meet you.';
    fill(255, 0, 10);
    textSize(35)
    text(s, 80, 85, 400, 100)
  
    noStroke(); //face
    fill(250, 41, 56); 
    ellipse(300,500,300,260);

    stroke(255, 0, 10); //nose
    strokeWeight(5);
    fill(0, 240, 205); 
    triangle(40+270, 75+300, 58+270, 20+300, 86+270, 65+300);

    fill(0, 255, 0); //eyebrows
    quad(38+180, 31+240, 86+180, 20+240, 90+180, 40+240, 30+180, 76+240);
    fill(0, 255, 0); 
    quad(38+270, 21+240, 86+270, 20+240, 90+270, 40+240, 20+270, 30+240);

	stroke(0, 0, 255); //left eye
	strokeWeight(5);
	fill(255);
    ellipse(250, 340, 30, 50);  

    stroke(10, 10, 255); //right eye
    strokeWeight(5);
    fill(255);
    ellipse(300, 340, 50, 30);  

    arc(300, 400, 60, 20, 0, PI + QUARTER_PI, PIE); //mouth
    strokeWeight(5);
    fill(255);
    ellipse(300, 340, 50, 30);  
}

function draw() {
}