Category: SectionE

Yoshi Torralva-Project-01-Face

When approaching this project, I wanted to create my self-portrait that was angular with similarly toned hues. Using mostly quadrilaterals, I needed to make sure points lined up with each other to create a unified facial structure. Additionally, I added mouse tracking to a square in the background to add an extra element of depth.

sketch

//Yoshi Torralva
//Section E
//yrt@andrew.cmu.edu
//Project-01
function setup() {
    createCanvas(600,600);
}
function draw() {
    background(249,33,33);
//background with mouse tracking for added depth
    fill(234,24,24);
    rect(mouseX,mouseY,500,500);
//shirt
    fill(51,3,14);
    noStroke();
    quad(122,517,374,408,374,600,91,600);
    quad(374,408,507,432,579,600,292,600);
//right ear
    fill(160,2,18);
    noStroke();
    quad(384,267,392,277,377,318,340,326);
//hair behind ellipse
    fill(114,7,18);
    noStroke();
    ellipse(269,172,112,112);
//side hair
    fill(114,7,18);
    noStroke();
    quad(200,194,225,177,218,244,197,274);
//hair
    fill(114,7,18);
    noStroke();
    ellipse(290,163,112,112);
    ellipse(330,224,125,174);
//neck shadow
    fill(89,4,20);
    noStroke();
    quad(224,363,360,314,350,385,237,433);
//head
    fill(191,16,25);
    noStroke();
    quad(256,322,350,331,326,362,274,368);
    quad(207,346,257,322,274,368,224,363);
    quad(207,241,257,323,207,346);
    quad(197,273,207,241,207,346,199,323);
    quad(225,273,297,283,256,322);
    quad(250,323,353,227,357,270,324,329);
    quad(305,359,357,270,370,292,350,331);
//ellipse for head
    fill(191,16,25);
    noStroke();
    ellipse(281,229,146,135);
//neck
    fill(191,16,25);
    noStroke();
    quad(254,390,334,371,374,408,220,477);
    quad(334,371,357,328,351,387);
    quad(219,477,374,407,345,459,269,483);
//hair in front of head
    fill(114,7,18);
    noStroke();
    ellipse(324,172,106,76);
//nose shadow
    fill(160,2,8);
    noStroke();
    quad(276,237,283,245,286,279,278,269);
    quad(261,241,263,238,254,266,246,276);
//sunglasses
    fill(114,7,18)
    noStroke();
    quad(206,225,264,233,250,268,203,260);
    quad(279,235,338,240,334,275,284,273);
    quad(240,230,361,242,360,249,239,237);
//eyebrows
    fill(114,7,18)
    noStroke();
    quad(221,213,236,210,231,219,214,223);
    quad(236,210,261,217,260,226,231,219);
    quad(286,220,326,218,327,227,289,229);
    quad(326,218,342,233,327,227);
//nostrils
    fill(160,2,8);
    noStroke();
    ellipse(254,280,8,4);
    ellipse(274,282,8,4);
//upper lip
    fill(160,2,8)
    noStroke();
    quad(243,309,257,306,257,313,233,316);
    quad(257,306,260,307,260,314,257,313);
    quad(260,307,262,306,263,313,260,314);
    quad(262,306,279,310,288,319,263,313);
//lower lip
    fill(135,3,22);
    noStroke();
    quad(233,316,257,313,256,321,245,320);
    quad(257,313,260,314,259,321,256,321);
    quad(260,314,263,313,262,321,259,321);
    quad(263,313,288,319,262,321);
}

William Su-Looking Outwards-01

Pix2Pix is a creative application for artificial intelligence that takes a crude line drawing and tries to apply realistic textures to it.

Link to the web tool: https://affinelayer.com/pixsrv/

Christopher Hesse, the cofounder of pushbullet made an interactive tool using a Tensorflow port of pix2pix. The pix2pix model works by training on pairs of images with one set of them containing labels. It then attempts to generate the corresponding output image from any input image you give it.

I especially love the rewarding and quite hilarious aspect of it. It’s quite interesting to see how close the model can recreate what you’re trying to draw or how badly it failed at doing it.

Taken from the Verge’s article on pix2pix.

Obviously this points to the topics surrounding the uses of machine learning and AI. While having the potential to be used for interesting and quite useful ways, it also has the potential to be used in a nefarious manner.

References:

Christopher Hesse’s pix2pix tool: https://affinelayer.com/pixsrv/

Verge Article: https://www.theverge.com/tldr/2017/6/6/15749754/pix2pix-auto-fill-neural-network-images-portraits

Jina Lee – Looking Outwards 01


https://renaudrohlinger.com

Renaud ROHLINGER is a French developer that lives in Japan who made an interactive website portfolio to help depict his experience when he traveled to Japan. The main objective of his project is to show Japanese culture. He stated on his website that he wanted to create a “cool webgl design without using Distortion and Wave effects.”

When entering the website, you see a kitten that directs you to the title then sleeps. Everything is animated so you can see the background continuously moving. Once you scroll, the kitten wakes up and walks into the background.

As the cat leads you into the background, the setting changes from black and white to color. At first, it is difficult to see where the kitten is at, but the camera zooms out so you are able to see the “world” that the kitten is in.

I really enjoyed the transitions that the designer made. Every time you scrolled to move on, there were cool transitions that helped you get immersed into the work. In addition, the interaction was extremely fun to play around with. The designer gave a backstory in the beginning of how he started. While doing so, he talked about what kind of softwares he uses. He also added that he uses an old Mac and like everyone he hates lags. His writings were very relatable which I enjoyed. He used Phaser.io, Pixi with Canas/WebGL, HowlerJS, Es6 StandarJS, Webpack. In the end he talked more about how he was able to create his portfolio. He mentions architecture, 3D optimizations and three optimizations, animations. I really thought the animations and interactions were really were integrated with each others. I would like to do something like this in the future once I am more educated about coding. Through this portfolio, I was able to see what a long and tedious process it is to create cool and interactive projects.

Margot Gersing – Looking Outwards – 01

Project- LoFi Poster Machine by Tim Rodenbröker

Rodenbröker’s website

I was inspired by German artist/coder Tim Rodenbröker. The project that I was most interested in was a generative album cover interface and app. The app was commissioned by German record label Tonboutique Records. The idea behind the app is that the record label can produce infinite designs for their artist’s without starting from scratch every time. It also keeps all of the covers within the same visual style and brand. One of the reasons why I find this project so cool is that Rodenbröker not only makes generative art, but he also created an intuitive and simple interface that allows anyone to use it. 

LoFi Poster Machine interface

On his website, Rodenbröker speaks to the fact that in theory anyone could make art using his tool with an ensured successful and beautiful output. I am a design major and I really like the idea that this graphic design project puts the power to create into the hands of anyone, you don’t necessarily have to be an artist or designer to create something beautiful. 

Time lapse video of the image generator interface

Rodenbröker is really interested in exploring the relatively new world of creative coding. His process involves a lot of intense research and experimentation. He uses open source technologies like Processing and p5.js. Rodenbröker wants to share his work and make it readily available to people who want to learn. He has begun teaching and has resources and tutorials on his website. I really admire those who are trying to make art, design, and in this case computer science, accessible to the masses. In the future it will be interesting to see how computer generated art, like Rodenbröker’s work, will begin to change how art and artists are viewed. 


William-Su-Project-01

William Su – Project – 01

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Assignment-01-b



function setup() {
    createCanvas(600, 600);
    background(250,0,0);
}

function draw() {

	let skin = color('#FFD7AD');
	let w = color(255, 255, 255);
	let b = color(0, 0, 0);
	let g = color(100, 100, 100);
	let br = color('#654321');

	fill(w);
	ellipse(300, 600, 400, 500);

	fill(skin);
	ellipse(300, 300, 200, 250);

	fill(w);
	ellipse(260, 280, 40, 25);

	fill(w);
	ellipse(340, 280, 40, 25);

	fill(br);
	ellipse(340, 280, 20, 20);

	fill(b);
	ellipse(340, 280, 10, 10);

	fill(br);
	ellipse(260, 280, 20, 20);

	fill(b);
	ellipse(260, 280, 10, 10);

	fill(g);
	beginShape();
	vertex(200,280);
	vertex(220,190);
	vertex(260,190);
	endShape();

	beginShape();
	vertex(400,270);
	vertex(380,220);
	vertex(320,190);
	endShape();

	fill(b);
	beginShape();
	vertex(380,220);
	vertex(360,190);
	vertex(340,170);
	vertex(210,160);
	vertex(220,170);
	vertex(210,180);
	vertex(220,190);
	vertex(205,200);
	vertex(305,210);
	endShape();
}

With this project, I utilized ellipses and custom polygons. I set a couple variables for the colors to make it easier for myself to set fills.

YouieCho-LookingOutwards-01

Intel’s drone show in Pyeongchang, South Korea, illustrating the Olympic Rings

Drone shows at the Opening and Closing Ceremonies of Olympic Winter Games Pyeong Chang 2018 featured various images, including the Olympic rings and the mascot of the Olympic. The Intel drone light show team provided drone technology called “swarm,” which is controlling numerous drones at once. Their show with 1218 drones broke the Guiness World Record for flying the most drones simultaneously.

What inspires me is how innovative this was. It became the highlight of the Opening, especially, because it was something that had never been done, and that people couldn’t expect. I think this project was very successful and groundbreaking. The next step may be to develop this technology so that it can be used also in smaller scale events, perhaps at a smaller cost.

In the 2018 Superbowl, Lady Gaga also had drones in her performance also with Intel’s Shooting Star platform. Foot-long, eight ounce, plastic and foam quadcopters were flying in sync along the prescribed path. This much larger, unique drone show has grabbed the attention of the world, and will also encourage more varied and in-depth studies of drone technology.

Video by Intel

YouieCho-Project-01-Face

sketch

//Youie Cho minyounc Section E
function setup() {
    createCanvas(600, 600);
    background(255, 149, 0);
    //hair
    fill(0);
    bezier(120, 250, 116, 150, 150, 100, 218, 90);
    bezier(218, 90, 250, 20, 465, 30, 480, 250);
    rect(120, 250, 360, 300);
    triangle(120, 250, 218, 90, 480, 250);
    //neck
    noStroke();
    fill(245, 214, 179);
    rect(220, 300, 160, 300);
    //ears
    ellipse(170, 275, 40, 80);
    ellipse(430, 275, 40, 80);
    //face
    fill(255, 231, 204);
    bezier(165, 220, 170, 500, 430, 500, 435, 220);
    bezier(165, 220, 180, 35, 400, 120, 435, 220);
    //nose
    fill(245, 214, 179);
    quad(290, 230, 310, 230, 330, 300, 275, 300);
    bezier(275, 300, 290, 315, 315, 315, 330, 300);
    //under eyes and white
    fill(255);
    bezier(205, 240, 218, 250, 250, 250, 260, 240);
    bezier(340, 240, 350, 250, 382, 250, 395, 240);
    stroke(0);
    strokeWeight(2);
    fill(255);
    bezier(202, 240, 218, 220, 250, 220, 260, 240);
    bezier(340, 240, 350, 220, 382, 220, 397, 240);
    //pupils
    fill(20, 27, 8);
    noStroke();
    ellipse(235, 235, 23, 22);
    ellipse(365, 235, 23, 22);
    //eyes
    stroke(0);
    strokeWeight(2);
    noFill();
    bezier(202, 240, 218, 220, 250, 220, 260, 240);
    bezier(340, 240, 350, 220, 382, 220, 397, 240);
    //eyebrows
    noStroke();
    fill(71, 39, 32);
    quad(204, 205, 265, 205, 265, 211, 195, 211);
    quad(334, 205, 393, 205, 402, 211, 334, 211);
    //eyelids
    noFill();
    stroke(100);
    strokeWeight(1);
    bezier(200, 236, 218, 217, 250, 217, 261, 237);
    bezier(338, 238, 350, 217, 382, 217, 400, 236);
    //mouth
    noStroke();
    fill(186, 64, 50);
    bezier(250, 340, 270, 375, 330, 375, 350, 340);
    //clothes
    fill(108, 227, 102);
    arc(300, 530, 250, 250, -QUARTER_PI, PI + QUARTER_PI);
    fill(88, 180, 81);
    rect(50, 550, 500, 50);
    quad(50, 550, 180, 500, 420, 500, 550, 550);
}

It was very fun to be able to draw with code for the first time. There were some trials and errors, but I could eventually figure it out with the reference.

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);
     
     
 }

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