Category: SectionE

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.

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



}

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.

Charmaine Qiu – Project 01 – Face


sketch

Creating an illustration for the first time through coding was an unique experience.

  /*
  Charmaine Qiu
  Section E
  charmaiq@andrew.cmu.edu
  Assignment 1 Self-portrait
  */


function setup() {
    createCanvas(300, 300);
    background(42, 57, 98);

//hair
    fill(47, 20, 20);
    noStroke();
    ellipse(150, 100, 170, 170);
    rect(65, 110, 169, 90);

//shirt
    fill(163, 144, 202);
    noStroke();
    ellipse(150, 305, 175, 150);

//face
    fill(255, 222, 222);
    noStroke();
    ellipse(150, 130, 130, 170);
    rect(135, 200, 30, 30);
    ellipse(100, 140, 50, 50);
    arc(150, 230, 30, 30, 0, PI, OPEN);
    ellipse(210, 290, 45, 45);
    
//Bangs
    fill(47, 20, 20);
    arc(185, 70, 120, 100, QUARTER_PI, PI + QUARTER_PI, OPEN);
    bezier(140, 40, 160, 30, 200, 30, 220, 137);

//features
    fill(0);
    arc(120, 130, 12, 12, 0, PI, OPEN);
    arc(180, 130, 12, 12, 0, PI, OPEN);
    arc(150, 170, 40, 40, 0, PI, OPEN);
    stroke(90);
    strokeWeight(4);
    line(115, 100, 125, 100);

    fill(255, 153, 153);
    noStroke();
    triangle(150, 140, 155, 150, 145, 150);
    ellipse(110, 160, 30, 30);
    ellipse(190, 160, 30, 30);
    arc(150, 185, 20, 20, PI, 0, OPEN);
    fill(150);
    rect(80, 150, 5, 13);

//hand
    stroke(255, 222, 222);
    strokeWeight(10);
    line(200, 250, 205, 270);
    line(220, 250, 215, 270);

}

Claire Yoon- Project 01- Self Portrait


Claire-face

I really enjoyed creating a self portrait despite it being my first time properly coding something. It was a challenge to create the shapes at first but after a while I gained more familiarity with coding shapes.

//Claire Yoon Section E
//claireyo@andrew.cmu.edu
//Assignment-01*/

function setup() {
    createCanvas(600, 600);
    background( 255, 249, 235)
    noStroke();

    //back hair
    fill(21, 21, 53);
    ellipse(300, 300, 250, 250);

    fill(21, 21, 53);
    ellipse(300, 400, 280, 300);

    //clothes

    fill(174,223,229);
    ellipse(300, 547, 280, 150);

    fill(174,223,229);
    rect(160, 543, 280, 250);

    //ears
    fill(245, 219, 214);
    ellipse(200, 355, 30, 40);

    fill(245, 219, 214);
    ellipse(395, 355, 30, 40);

    //neck
    fill(245, 219, 214);
    rect(270, 440, 60, 50);

    fill(245, 219, 214);
    ellipse(300, 490, 61, 47);

    //skin
    fill(252, 227, 222);
    rect(200, 270, 200, 80);

    fill(252, 227, 222);
    ellipse(300, 350, 200, 200);

    //hair
    translate (265,250);
    fill(21, 21, 53);
    rotate (2.65);
    ellipse (0, 0, 200, 110);
    rotate (-2.65);
  	translate (-265,-250);

    translate (373,280);
    fill(21, 21, 53);
    rotate (-2.1);
    ellipse (0, 0, 170, 70);
    rotate (2.1);
    translate (-373,-280);

    //eyebrows
    fill(34, 34, 86);
    ellipse(260, 320, 30, 5);

    fill(34, 34, 86);
    ellipse(335, 320, 30, 5);

    //eyes
    //white part
    fill(255,255,245);
    ellipse(260, 337, 17, 17);

    //iris
    fill(255,255,245);
    ellipse(335, 337, 17, 17);

    fill(0);
    ellipse(260, 340, 15, 15);

    fill(0);
    ellipse(335, 340, 15, 15);

    //nose
    fill(251,214,205);
    ellipse(300, 375, 20, 20);

    fill(251,214,205);
    ellipse(300, 375, 20, 20);

    //skin
    fill(252, 227, 222);
    ellipse(300, 370, 24, 20);

    //lips
    fill(248,136,119);
    ellipse(300, 406, 33, 20);

    fill(252, 227, 222);
    rect(283, 394, 60, 10);

    noLoop();
    }

Jamie Park – Project – 01

sketch

//Jamie Park           jiminp@andrew.cmu.edu
//15-104        Section E         Project #1

function setup(){
    createCanvas(400,500);
    background(50,53,74);
    noStroke();

    fill(217,240,255);
    rect(100,360,200,170,50);

    fill(238,204,186);
    rect(177,300,50,100,50);
    fill(255,229,202);
    ellipse(200,230,200,230);
    fill(255,229,202);
    ellipse(105,265,25,40);
    ellipse(297,265,25,40);

    fill(57,24,9);
    arc(200, 230, 210, 232, PI, TWO_PI);
    ellipse(200,107,70,60);
    triangle(134,245,143,235,178,245);
    triangle(225,245,260,235,269,245);

    fill(247,215,216);
    ellipse(258,285,33,30);
    ellipse(143,285,33,30);

    fill(242,111,63);
    arc(200, 290, 70, 70, TWO_PI, PI);

    fill(250);
    ellipse(160,260,25,25);
    ellipse(240,260,25,25);
    fill(0);
    ellipse(160,260,15,15);
    ellipse(240,260,15,15);

    fill(36,201,152);
    rect(102,280,7,9,10);
    rect(292,280,7,9,10)
}

This was my first time creating a visual via coding, and it was so much harder than I anticipated. Although it would be lying to say that I was not frustrated with the process, I still had a lot of fun. I also got to appreciate the programmers of Photoshop and Illustrator.

Angela Lee – Project 01 – Face

angela-face

/* 
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Assignment 1 Self-Portrait
 */


function setup(){
    createCanvas (600, 600);
    background (249, 217, 217);
    noStroke();
    
    // hair behind the shoulders
    fill (40, 27, 5);
    rect (129, 216, 325, 361);

    // shirt
    fill (239, 223, 223);
    ellipse (287.5, 652, 413, 342);

    // hair at the top of the head
    fill (40, 27, 5);
    ellipse (290.5, 235, 329, 342);

    // neck
    fill (206, 162, 132);
    rect (215, 365, 151, 128);
    ellipse (144.864, 293.5, 46.271, 79);

    // left hoop earring
    noFill();
    stroke (186, 146, 56);
    strokeWeight (12);
    ellipse (144.5, 347.5, 51, 51);

    // left earing stud
    noStroke();
    fill (216, 176, 97);
    ellipse (144.5, 314.5, 13, 13);

    // right hoop earring
    noFill();
    stroke (186, 146, 56);
    strokeWeight (12);
    ellipse (423.5, 353.5, 51, 51);

    // face
    noStroke();
    fill (224, 186, 153);
    ellipse (291.5, 280.5, 295, 333);

    // right eye
    fill ("black")
    ellipse (362.571, 284.571, 33.143, 33.143);
    triangle (378, 278.286, 363.143, 268, 386, 268);

    // right eyebrow
    rectMode (CENTER);
    translate (351.346, 237.903);
    rotate (6.21);
    fill (58, 45, 32);
    rect (0, 0, 53, 9);
    rotate (-6.21);
    translate (-351.346, -237.903);

    // hair surrounding the upper left area of the face
    translate (202.207, 163.026);
    fill (40, 27, 5);
    rotate (2.4);
    ellipse (0, 0, 176.657, 32.935);
    rotate (-2.4);
    translate (-202.207, -163.026);

    // hair on the right area of the face
    quad (256.801, 118.331, 454, 365, 453, 206, 335, 85);

    // left eye
    fill ("black")
    ellipse (217.429, 280.571, 33.143, 33.143);
    triangle (202, 274.286, 216.857, 264, 194, 264);

    // left eyebrow
    rectMode (CENTER);
    translate (220.483, 237.903);
    rotate (-6.21);
    fill (58, 45, 32);
    rect (0, 0, 53, 9);
    rotate (6.21);
    translate (-220.483, -237.903);
    triangle (194.364, 231.555, 196.263, 240.371, 172.596, 244.129);

    // nose
    fill (214, 171, 139);
    triangle (288.7, 278, 306, 341.9, 271.4, 341.9);
    ellipse (288.692, 343.42, 34.615, 19.16);

    // mouth
    rectMode (CORNER);
    fill (124, 53, 53);
    ellipse (288.762, 384, 67.524, 42);
    fill (224, 186, 153);
    rect (246, 360, 89, 21);

    // hair in front of the shoulders
    fill (40, 27, 5);
    rect (129, 432, 86, 200);

    // rounded collar of the shirt
    fill (206, 162, 132);
    ellipse (290.5, 493, 151, 80);
}

I really enjoyed playing with some of the details in this self-portrait; for example, I always put half of my hair in front of my shoulders and the other half behind my back. While the process was a bit tedious because I had some coding errors, doing it one shape at a time definitely allowed me to fix those mistakes efficiently.

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.

Joseph Zhang – Looking Outwards – 01

https://codepen.io/murasaki/pen/BmOzMP

As I browsed projects online, I couldn’t help but stop and admire Murasaki Uma’s Impressionist Blobs – Starry Night. Murasaki Uma is a freelance artist based in Japan who specializes in Computational Design. This digital installation is an individual project by Uma that showcases flowing particles made up of Vincent van Gogh’s Starry Night. When in motion the visuals flow in an organic fashion that mimics the wind patterns in Starry Night. As seen when clicking the link, Impressionist Blobs is built with HTML, CSS, and Javascript.

Project’s Title, Uma’s Twitter Handle, and a few functionality options

Uma implements a “Start” and “Restart” functionality that allows the viewer some control over the animation. Clicking anywhere on the interface shifts the camera perspective to an arbitrary angle. If I were to iterate on Uma’s project, I would offer more control to the user with the ability to fully control camera shifts and movement.

Despite scouring the web, I failed to find any biographies or summaries about his background. However, I did find the few sites he is active on: Github, Twitter, CodePen, and his personal site. Impressionist Blobs really reflects his other pieces of work, that is, its sense of unity and order whole that holds together chaotically random pieces. This project really points to the future of visual design, that is creating generated graphics through coded algorithms.

Jamie Park-Looking Outwards-01

Photo image of Matt Copson’s Blorange

Link to the website

I am inspired by Matt Copson’s Blorange (2018), a laser-projection art displayed at Foundation Louis Vuitton. The art piece consisted of three different laser projections of a bird: one perfectly well, one on a skewer, and the other in its deconstructed or abstract state. The video work constantly moves the birds with a recital in the background, capturing the attention of the viewer. Copson’s work alludes to British pop culture and comments on the way people perceive society.

Although Copson is the listed artist of this piece, the coding for this laser work is done by Pieterjan Ruysch, a laser programmer based in Netherlands. Since he is a professional, I suspect that the coding did not take long for Ruysch. He, unfortunately, does not list on his website whether he uses custom script or “off-the-shelf” software.

I find Blorange to be a First World Art, as I have never seen a laser-projection video art with a narrative before. Copson’s unique ability to combine technology, art, and story telling has inspired me to create something similar. I am excited to learn how to code through 15-104 and utilize those skills in my future design classes.

The video of Copson’s Blorange is unfortunately unavailable online.