SectionD – Page 34 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Stefanie Suk – Looking Outwards – 01

Bit.Fall Installation in Incheon Airport

Bit.Fall, designed by an artist Julius Popp, is a computerized art installation that releases water droplets at specific intervals to create words extracted from the internet’s current stream of trending topics. In this installation, computer program plays a key role in filtering keywords based on a statistical algorithm from the current newsfeed, then transferring the information to the control unit to create droplets at specific times. This installation caught my attention as it combines both nature (through gravity to make the water drops fall) and culture (through news feed for social attention) into a single piece of artwork. What I admire the most about Bit.Fall is the strange correlation between water, a natural medium, and word, a cultural information, combined together to create a single collaborative installation. This project can further inspire the art and values of combination between nature and men.

Bit.Fall Installation in MONA

Sammie Kim_Project01_Face

sketch-Sammie

//Sammie Kim
//section D
//sammiek@andrew.cmu.edu
//Self Portrait

function setup() {
  createCanvas(600, 600);
  background(185,209,158);

//body
  noStroke();
  fill(171 ,220,237);
  ellipse(320,560,265,270);
//neck
  fill(204 ,178,151);
  rect(287,395,64,47);
  ellipse(319,437,64,37);
//leftear
  fill(204 ,178,151);
  arc(225,313,40,55,1/2*PI,PI+1/2*PI,CHORD);
//ponytail
  fill(130,101,56);
  ellipse(400,320,80,240);
//face
  noStroke();
  fill(239 ,224,199);
  ellipse(320,294,202,235);
//blush
  fill(237,192,230);
  ellipse(263,324,24,14);
  ellipse(364,325,24,14);
//right ear
  fill(204 ,178,151);
  arc(414,313,40,55,PI+1/2*PI,1/2*PI,CHORD);
//side hair
  fill(130,101,56);
  rect(408,230,15,124);
//Eyes
  fill(130,101,56);
  ellipse(354,300,18,13); //right eye
  ellipse(273,299,18,13);
  stroke(130,101,56);
  line(360,296,370,293);
  line(264,296,254,293);
  bezier(360,275,363,270,365,275);
//nose
  fill(130,101,56);
  arc(312,330,20,20,PI,2*PI);
//mouth
  fill(161,101,64);
  arc(313, 360, 60, 40, 0, PI, CHORD);
//arms
  noFill();
  stroke(130,101,56);
  stroke(100);
  strokeWeight(1);
  bezier(260, 290, 270, 280, 275, 280, 285, 290);
  bezier(343, 290, 355, 280, 360, 280, 368, 290);
  bezier(405, 525, 410, 535, 415, 567, 408, 600);
  bezier(240, 525, 235, 542, 231, 567, 238, 600);
//Front Hair
  fill(130,101,56);
  angleMode(DEGREES);
  rotate(20);
  ellipse(395,90,175,82);
  rotate(6);
  ellipse(330,110,60,115);
}

This self portrait assignment allowed me to be more experimental with coding, and compile various shapes to create my face. As I had a hard time figuring out curved shapes, this was a good practice to recall my basic geometry knowledge.

Lanna Lang-Looking Outwards-01

David Bowen’s “Cloud Piano” / 2014

This project was an installation that played the keys of a piano based on the movements and shapes of clouds. Bowen recorded the clouds in real-time with a camera pointed at the sky, and then used custom software to convert the video to program a robotic device that pressed the corresponding piano keys. David Bowen’s works really inspire and interest me because of his ability to think so out of the box with his interactive art and using his creativeness to intertwine computer science and art in unique ways.

I loved that composition of sounds such as tempo, rhythm, mood, and dynamics were all determined by factors of the sky at that moment; for example, the mood of the music was determined by the direction the clouds moved: if they moved north to south, the piano plays a cheery tone, and if it was the other direction, the sound becomes dark and moody.

This project’s chain of influences first stems from one of his earlier works called “Cloud Tweet” where he used MaxMSP to take videos of clouds and sent Twitter messages based on the movements and shapes of the clouds. The chain extends deeper through his initial interest in the interaction between machines and the natural world, as well as many artists for their use of kinetics and others working with technology, such as Jean Tinguely, Edwardo Kac, Simon Penny, and more.

David Bowen’s “Cloud Piano” – an overview that shows the grandeur of the installation’s mechanics.

David Bowen’s “Cloud Piano” – a close-up shot that shows all the details he put into his work.

A video Bowen produced about this work that shows the installation at work, allowing viewers to listen to the clouds playing the piano.

Shannon Ha- LookingOutwards-01

Image of Poster maker in use by Deeplocal

Image of Poster Maker’s hardware by Deeplocal

Google Poster Maker is a project developed by small creative agency, Deeplocal, and it is able to create unique posters based of off voice commands. It was featured in the annual Google I/O event. The creative team and Deeplocal collaborated with Google to showcase the versatility of the Google Assistant SDK function which allows you to embed Google Assistant in projects and customize them through something called ‘Actions’. The best thing about the Poster Maker is that the software was developed in Github, and since it is open-sourced, it gives anyone an opportunity to develop their own version. As for the hardware of this project, the developers have also considered the accessibility of all the parts which include a Raspberry Pi, a machined aluminium marker changer and a Corian Drawing Surface, to create the frame of the machine.

The inspiration behind this piece of design technology was to find a balance between the precision of a robot and the creativity of a human, which is established by the how the Google Assistant SDK receives the voice request of the user and creates a poster that is generated through the users customization of the API. This project is only one of many that showcases the potential of how Google Assistant’s voice control API can be used to create, build and share based off individuality.

https://www.deeplocal.com/google-poster-maker

Lanna Lang- Project 01-Face

sketchP1 – lanna

function setup() {
    createCanvas(350, 420);
    background(200, 200, 225);
    
    strokeWeight(4);
    stroke(51);
    fill(255, 204, 0);
    textSize(50);
    textAlign(CENTER);
    textStyle(BOLDITALIC);
    text('SHH KEEP', 170, 45);
    
    strokeWeight(4);
    stroke(51);
    fill(255, 204, 0);
    textSize(80);
    textAlign(CENTER);
    textStyle(BOLDITALIC);
    text('IT A', 170, 110);
    strokeWeight(4);
    stroke(51);
    fill(255, 204, 0);
    textSize(80);
    textAlign(CENTER);
    textStyle(BOLDITALIC);
    text('SECRET', 170, 175);
}

function draw() {
/* BLUSH */
    stroke(255, 200, 200);
    fill(255, 200, 200);
    circle(130, 230, 20);

/* FACE */
    strokeWeight(4);
    stroke(51);
    noFill();
    ellipse(175, 230, 130, 130);

/* NOSE */
    strokeWeight(4);
    stroke(51);
    arc(160, 230, 20, 20, 0, PI + QUARTER_PI, TWO_PI);

/*BODY */
    stroke(51);
    line(135, 285, 100, 420);
    line(210, 287, 250, 420);

/* MOUTH */
    strokeWeight(4);
    stroke(51);
    noFill();
    arc(180, 250, 40, 40, 0, HALF_PI);

/* LEFT EYE */
    line(135, 205, 148, 205);

/* RIGHT EYE */  
    fill(0);
    circle(190, 205, 10);

/* ARM */
    strokeWeight(6);
    line(117, 350, 70, 280);
    line(70, 280, 90, 240);
    line(90, 240, 103, 223);
    line(90, 245, 130, 243);
    line(92, 240, 125, 238);

   
}

I wanted to make my self-portrait funny and light-hearted so I recreated a meme with this project. The process wasn’t that difficult as I decided to stick with basic shapes and lines. Overall, this was a great experience for me to familiarize myself with basic coding and using Sublime.

Sammie Kim- Looking Outwards-01

Rafael Rozendaal is a Dutch artist who utilizes the internet as his canvas, creating websites that allow digital interaction with the viewers. A mixture of abstract patterns and geometric images, his brightly colored graphics are animated to produce a variety of interesting, quirky movements across the screen. Rozendaal’s “looking outwards” derive from simple daily life experiences that most of us would disregard, which are then newly coded into lively, interactive artworks. For example, the audience can unravel toilet paper in virtual space or even poke a gigantic mass of jello.

One of Rozendaal’s interactive site for users (http://www.jellotime.com)

Roll of toilet paper responds to the viewer’s mouse click (http://www.papertoilet.com)

Websites

Conversely, his physical art works take in more conceptual themes of digital media, visually expressing the overwhelming digital information and randomness of code. For instance, he would take archives of popular webpages like Google or Twitter to curate them into unique compositions for tapestries. The Abstract Browsing tapestries express how our browser reads codes for us, where information is translated in a multi-colored structure. But something that personally inspired me was how his works also emphasize accessibility, as he sells his websites as artworks in exchange for letting them remain public for viewers worldwide.

CJ Walsh Portrait – Project 01

sketch

function setup() {
    createCanvas(600, 600);
    background('#A596E2');
    noStroke ();
    fill ('#9FFFF5');
    rect(0, 286, 600, 162.98);

    fill ('#E5CFC3');
    rect (259, 371, 80.231, 66.118);
    ellipse (300, 284.5, 198.281, 220.094);
    ellipse (300, 260, 192.479, 181.644);
    ellipse (195, 290, 40.059, 54.693);
    ellipse (404, 290, 40.059, 54.693);
    fill ('#6F5C40');
    ellipse (259, 269, 23.682, 23.682);
    ellipse (336, 269, 23.682, 23.682);
    ellipse (210, 252, 43.217, 43.217);
    ellipse (389, 252, 43.217, 43.217);
    ellipse (218, 216.5, 53.026, 53.026);
	ellipse (380, 216.5, 53.026, 53.026);
	ellipse (241, 194, 57.097, 57.097);
	ellipse (358, 194, 57.097, 57.097);
	ellipse (282, 181, 74.301, 74.301);
	ellipse (317, 181, 74.301, 74.301);
	rect (247, 244, 27.915, 7.562);
	rect (322, 244, 27.915, 7.562);
	fill ('#D0BAAB');
	arc(300, 317, 170.641, 145.641, 0, PI, CHORD);
	fill ('#a3917d');
	arc(300, 327, 105.331, 105.331, 0, PI, CHORD);
	fill ('#D6BFAE');
	ellipse (300, 366, 45.802, 23.332);
	fill ('white');
	rect (256, 327, 88.326, 9.965);
	fill ('#C1B4AA');
	ellipse (300, 301, 28.596, 12.596);
	fill ('#94E09A');
	ellipse (300, 498, 218.357, 170.905);
	rect (192, 500, 218.569, 132.986);
}

This was a super fun image to make. I used Illustrator to sketch the shapes I wanted to use and plot the coordinates so I could translate that into the code I wanted. The most difficult part was figuring out how to create and place arcs, but I eventually worked it out.

Shannon Ha-Project 01-Face

Project 01-Self Portrait

//Shannon Ha
//Section D
//sha2@andrew.cmu.edu
//Project 01: Self-Portrait

function setup() {
    createCanvas(600, 600);
    background(209,177,212);

}

  function draw() {
    //hair
    fill('black');
    noStroke();
    ellipse(304,238,330,297);

    fill('black');
    noStroke();
    rect(139,225,330,252);

    //Neck
    fill(193,147,101);
    noStroke();
    rect(275,395,58,54);
    ellipse(304,450,57,22);

    //face
    fill(219,173,125);
    noStroke();
    ellipse(304,256,231,288);

    //brows
    fill('black');
    noStroke();
    quad(274,213,224,216,240,207,274,204);
    quad(330,203,362,205,380,215,331,212);

    //eyes
    fill('black');
    noStroke();
    ellipse(253,254,27,14);
    ellipse(350,254,27,14);

    fill(219,173,125);
    noStroke();
    ellipse(352,259,12,8);
    ellipse(255,259,12,8);

    //glasses
    stroke(247,207,45);
    strokeWeight(3);
    noFill();
    ellipse(249,254,68,68);
    ellipse(353,254,68,68);
    arc(301,265,39,39,PI,TWO_PI);

    //nose
    fill(175,137,88);
    noStroke();
    ellipse(304,310,31,14);
    fill(219,173,125);
    ellipse(304,305,26,14);

    //mouth
    fill(137,69,70);
    noStroke();
    ellipse(303,347,60,32);
    fill(219,173,125);
    ellipse(303,338,67,19);

    //earrings
    stroke(128,130,133);
    strokeWeight(5);
    noFill();
    ellipse(189,301,16,27);
    ellipse(417,309,16,27);

    //clothing
    fill(182,122,43);
    noStroke();
    rect(275,448,58,49);
    triangle(172,497,275,448,275,497);
    triangle(432,497,333,497,333,448);
    triangle(172,497,172,600,143,600);
    triangle(432,497,432,600,463,600);
    rect(172,497,260,121);

    //clothing shade
    fill(153,101,39);
    noStroke();
    triangle(230,533,230,600,215,600);
    triangle(379,533,379,600,394,600);

    fill(193,147,101);
    noStroke();
    ellipse(304,450,57,22);

    //front hair
    fill('black');
    noStroke();
    arc(219,117,160,119,270,360);
    arc(393,117,190,119,-275,-380);

  }

I started out by hand drawing the self-portrait I would like to create using basic shapes that could easily be found using the 2D primitive shapes. I then translated my drawing into illustrator, and added color and line weight in doing so. Planning the drawing in illustrator helped me efficiently locate the coordinates needed for some commands which was very useful when it came to drawing the shapes. I tried exploring more complex shapes by using the ‘arc’ command, even though it was used in my code, a lot of the point plotting was done through trial and error as I still don’t really understand how the function works. Overall it’s been an eye-opening experience for something I have never done before!

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() {
}

Mari Kubota- Project 01- Face

In this project I learned shape commands to draw ellipses, triangles, rectangles, lines, and quads. Being organized was important in this project because of the many shapes and the affect the order of the code had on the result.

sketch

function setup() {
    createCanvas (400,400);
    background (255,234,242);

//body
      fill(225,184,123);
      noStroke();
    ellipse (200,400,150,300);
//head
        fill (255);
        noStroke();
    ellipse (200,200,150,170);
//hair bun
        fill (87, 79, 56);
        noStroke();
    ellipse (200,125, 125,45);
//blush
        fill (218,97,139);
        noStroke();
    ellipse (160,225,30,20);
    ellipse (240,225,30,20);
//eyes
        fill (0);
    ellipse (170, 205, 20,20);
    ellipse (230, 205, 20,20);
//mouth
        stroke(0);
        strokeWeight(4);
    line(185,250,215,250);
//eyebrows
        fill(0);
    triangle (185, 180, 160, 175, 155, 180);
    triangle (245, 180, 240, 175, 215, 180);
//hair
        noStroke ();
        fill (87, 79, 56);
    quad(137, 125, 186, 120, 140, 250, 100, 276);
    quad(186, 120, 262, 120, 269, 163, 230, 176);
    quad(220, 150, 269, 163, 290, 280, 260, 250);
    quad(260, 245, 290, 280, 240, 320, 230, 300);
    quad(135, 243, 100, 276, 160, 320, 170, 300);
    ellipse(200,90,55,55);
//ribbon
        noStroke ();
        fill (255,0,0);
    quad(220,85,220,115,180,85,180,115);
        stroke(0);
        strokeWeight(1);
    ellipse(200,100,10,10);
        
  }