SectionC – Page 20 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 1: My Self Portrait

function setup() {
    createCanvas(500, 600);
    background(216,191,216);
}

function draw() {

    strokeWeight(0);
    fill(51,0,0);
    ellipse(250,219,233,165);

    strokeWeight(0);
    fill(51,0,0);
    rect(133,213,233,273);

    strokeWeight(0);
    fill(210,180,140);
    rect(208,375,84,45);

    strokeWeight(0);
    fill(210,180,140);
    ellipse(251,465,280,110); //shoulders

    strokeWeight(0);
    fill(210,180,140);
    rect(112,465,280,144);

    strokeWeight(0);
    fill(222,184,135);
    ellipse(250,285,188,226); //face

    strokeWeight(0);
    fill(0);
    rect(155,422,10,72)

    strokeWeight(0);
    fill(0);
    rect(334,422,10,72)

    strokeWeight(0);
    fill(0);
    rect(153,475,194,125)

    strokeWeight(0);
    fill(128,0,0);
    ellipse(251,340,83,43);

    strokeWeight(0);
    fill(222,184,135);
    ellipse(251,325,95,30);

    strokeWeight(0);
    fill(0);
    ellipse(209,270,28,28);

    strokeWeight(0);
    fill(0);
    ellipse(292,270,28,28);

    strokeWeight(0);
    fill(222,184,135);
    ellipse(209,280,24,29);

    strokeWeight(0);
    fill(222,184,135);
    ellipse(292,280,24,29);

    strokeWeight(0);
    fill(205,133,63);
    ellipse(250,310,32,22);

    strokeWeight(0);
    fill(222,184,135);
    ellipse(250,305,32,22);

    strokeWeight(0);
    fill(245,222,179);
    ellipse(250,301,29,22);

}

The most challenging part of this project was having to do a lot of trial and error because I had to keep reopening the index.html file to see whether or not my illustration was coming out correctly.

Project 1: My Self Portrait

sketch

function setup() {
    createCanvas(400,600);
    background(255);
}

function draw() {
    fill(166,196,255);
    rect(0,0,399,599);
    fill(255,238,189);
    rect(235,280,35,300);
    ellipse(250,280,200,270);
    fill(255,255,255);
    circle(200,220,50);
    circle(300,250,80);
    fill(0,0,0);
    circle(190,220,15);
    circle(280,250,15);
    fill(247,126,148);
    arc(250, 280, 80, 80, 0, PI + QUARTER_PI, CHORD);
    fill(0,0,0);
    triangle(160,140,180,190,250,145);
    triangle(200,150,220,100,275,155);
    triangle(250,150,280,120,300,165);
    triangle(290,160,310,140,330,200);
    fill(0,0,0);
    rect(225,500,80,199);
    noLoop();
    

}

Project 1: My Self Portrait

function setup() {
    createCanvas(800, 600);
}
function draw() {
    background(249,246,238);//face color
    fill(5,5,5); //black hair 
    rect(0,0,70,600);
    rect(100,0,40,600);
    rect(720,0,70,600);
    rect(650,0,40,600);
    fill(118,93,53);//highlights
    rect(70,0,30,600);
    rect(690,0,30,600);

    fill(5,5,5);//eyebrows
    strokeWeight(18);
    line(450,150,550,140);//right eyebrow
    line(550,140,590,155);
    line(350,150,250,140);//left eyebrow
    line(210,155,250,140);

    fill(255,255,255);//eyes
    ellipse(260,250,50,60);//left eye
    ellipse(530,250,50,60);//right eye
 
    fill(48,43,36);//lashes
    line(260,200,260,210);//left 1
    line(240,200,250,210);//left 2
    line(530,200,530,210);//right 1
    line(550,200,540,210);//right 2

    fill(48,43,36);//eyebags
    strokeWeight(13);
    line(275,290,240,330);//left 
    line(535,290,560,330);//right 

    fill(208,165,105);//nose
    triangle(400,250,360,350,440,350);

    fill(179,78,50);//lips
    strokeWeight(7);
    arc(350,400,200,90,0,HALF_PI,CHORD);

    noLoop();
}

My project is a very zoomed in version of my face and emphasizes my highlights, and is mostly symmetrical other than my mouth.

Project 1: Sukonrat Self Portrait


function setup() {
    createCanvas(700, 700);
    background(212, 246, 232);
}

function draw() {
    fill(246, 212, 226)     
    stroke(246, 212, 226)
    triangle(400,160,585,123,573,582)    // pastel pink
    fill(246, 212, 226)
    stroke(246, 212, 226)
    triangle(205,383,290,383,250,552)    // pastel pink
    fill(224, 213, 246)
    stroke(224, 213, 246)
    triangle(391,356,200,700,500,700)       // pastel purple
    fill(246, 232, 212)     
    stroke(246, 232, 212)
    ellipse(391,356,342,407)     // pastel orange
    fill(246, 212, 226)
    stroke(246, 212, 226)
    triangle(253,123,500,100,185,423)    // pastel pink
    fill(232, 212, 246)     
    stroke(232, 212, 255)
    ellipse(301,336,42,107)     // pastel purple
    fill(209, 170, 237)     
    stroke(209, 170, 237)
    ellipse(321,346,22,57)     // pastel purple
    fill(232, 212, 246)     
    stroke(232, 212, 255)
    ellipse(481,356,52,147)     // pastel purple
    fill(209, 170, 237)   
    stroke(209, 170, 237)
    ellipse(491,376,22,67)     // pastel purple
    fill(213, 227, 246)
    stroke(213, 227, 246)
    ellipse(390,451,32,71)       // pastel blue
    fill(246, 232, 212)     
    stroke(246, 232, 212)
    ellipse(390,411,32,71)       // pastel blue

}

I found finding coordinates for many sided shapes or ellipses and figuring out where everything should go more difficult than I thought.

From my personal point of view, I do think that Siri is quite a good example of an interactive project. It is just amazing that the machine could accurately recognize people’s voice and conduct according commands. Capturing voices, recognizing words said, and processing this information into commands that guide Siri, this intelligent assistant, to perform actions expected by the commander. I really admire how much efforts developers have put into this, since each and every step of this process requires a great number of sophisticated scripts and codes. I believe that the reason why Siri is developed is because of people’s desire to more conveniently make technology do things by our wishes. Siri’s voice recognition capability and the ability to learn from users’ behaviors also point out that machine learning could be the future developing direction. Basically, technology exists to better help people get things done. Machine learning not only allow people to let machines do whatever we ask them to do, but also help them to have a machine that could learn from the past actions and “improve” itself for further convenience.

Project 1: Self Portrait

// at least 10 graphic elements -> quad, triangle, ellipse,
//square, arc, line, point

function setup() 
{
    createCanvas(200, 200);
    background(255, 0, 0);
}

function draw() 
{
    strokeWeight (0);

//lines in background
    strokeWeight (10);
    stroke (255, 255, 255); // white lines
    line (0, 200, 200, 0);
    line (30, 200, 200, 30);

    stroke (0, 0, 0); //black lines
    line (0, 0, 200, 200);
    line (30, 0, 200, 170);

    line (0, 150, 50, 200);
    line (0, 120, 80, 200);
    strokeWeight(0);

//earrings
    fill (0, 255, 255);
    triangle (45, 170, 65, 170, 55, 140);
    triangle (155, 170, 135, 170, 145, 140);
    fill (255, 255, 0);
    circle (55, 140, 7);
    circle (145, 140, 7);

//head
    fill (185, 255, 218);
    ellipse(100, 100, 100, 120);

    ellipse (100, 200, 200, 40);
    fill (0, 0, 102);
    arc (100, 100, 100, 120, PI + HALF_PI, HALF_PI, CHORD);
    arc (100, 200, 200, 40, PI, PI + HALF_PI);
    circle (80, 85, 15);
    fill (185, 255, 218);
    circle (120, 85, 15);
    fill (255, 255, 255);
    ellipse (100, 130, 50, 15);
    fill (210, 0, 0);
    circle (65, 110, 18);
    circle (135, 110, 18);

//hat
    fill (0, 0, 102);
    rect (55, 30, 90, 20);
    rect (75, 5, 50, 40);
    
    fill (185, 255, 218);
    rect (100, 30, 45, 20);
    rect (100, 5, 25, 40);

noLoop ();
}

LO: My Inspiration

This project is called The Event of a Thread, by main artist Ann Hamilton. This large scaled installation piece is a field of fourty-two swings on which the audience can sit and swing on. The body weight pulling the swing back and forth also affects the giant curtain’s turbulence, while record players play a chorus in the background. I admire the diversity of elements that the audience can be fascinated by in this piece, in that there are lots for the audience to hear, see, and feel. Through the interaction the audience has with the work, they can influence the piece and see how the piece changes.

Over twenty people including the artist, composer, advisor, producer and so on were involved in creating this piece.

Link to description & photos:

LO: My Inspiration

A technological project or piece of art that I really admire is the exhibit at the Cooper Hewitt Museum in New York City called “The Pen Experience”, in which they provide a pen that you can use to draw designs on a small screen in front of you that will then appear on giant screens on the walls surrounding you. I really like this project because it begins to allow us to collapse the walls between the real and digital world and engages people through an interaction with the piece itself, making them the artist. This piece may have been inspired by some teamLab works, which provide similar immersive experiences on large screens, but this makes it more interactive for the users and it creates a more immersive experience.

Turning Visitors Into Designers

Visitor at the Cooper Hewitt Museum at the pen design exhibit.

LO: My Inspiration

Pom Pom Mirror, Daniel Rozin

This piece, by Israeli artist Daniel Rozin, is an interactive artwork that mimics the movements of its viewer on a pom-pom “mirror”. A Microsoft Kinect sensor detects the movements of the viewer standing in front of the piece, and a computer translates the data to move the motors on the ‘mirror’, resulting in a black “shadow” rippling across the sea of white pom-poms to mirror the viewer’s position and movement. This project stood out to me because, while many other technological artworks utilize hard, rigid materials, these pom-poms bring in a softer, more organic aspect to the piece that demonstrates a reconciliation between mechanical machine to human interaction.

Project 1: My Self Portrait

beans-sketch

//Yeon Lee, Section C
//Project 01: Self-Portrait (Face)

function setup() {
    createCanvas(600, 500);
    background(255, 192, 203);
}

function draw() {
    noStroke();

    //hair
    fill(32, 20, 7);     
    rect(165, 210, 270, 300);
    ellipse(300, 220, 270, 270);

    //shoulder
    fill(251, 206, 158);    
    rect(150, 450, 300, 140);
    ellipse(300, 450, 320, 50);

    //cloth
    fill(63, 146, 208);    
    rect(140, 470, 320, 100);
    ellipse(150, 475, 40, 100);
    ellipse(450, 475, 40, 100);

    //neck
	fill(251, 206, 158);    
    rect(270, 380, 60, 60);

    //ear
    ellipse(207, 280, 50, 50); 

    //side hair
    fill(32, 20, 7);   
    ellipse(200, 270, 10, 80); 

    //neck shadow
    fill(238, 189, 138);    
    ellipse(300, 380, 60, 40);

    //face
    fill(251, 206, 158);    
    ellipse(300, 260, 202, 250);

    //eyebrow
    fill(26, 15, 3);    
    arc(250, 250, 35, 13, PI, 0);
    arc(350, 250, 35, 13, PI, 0);
    
    //left eye
    fill(26, 15, 3);    
    ellipse(250, 280, 27, 32);
    fill(255, 255, 255);
    ellipse(255, 275, 7, 7);
    fill(238, 189, 138);
    arc(248, 298, 27, 10, PI, 0);

    //right eye
    fill(26, 15, 3);    
    ellipse(350, 280, 27, 32);
    fill(255, 255, 255);
    ellipse(355, 275, 7, 7);
    fill(238, 189, 138);
    arc(348, 298, 27, 10, PI, 0);
    
    //nose
    fill(238, 189, 138);    
    arc(300, 315, 20, 10, PI, 30);

    //mouth
    fill(216, 100, 100);    
	arc(300, 335, 50, 45, 0, PI, CHORD);

    //tongue
	fill(193, 66, 66);     
	ellipse(300, 348, 20, 10);

    //teeth
	fill(255, 255, 255);    
	ellipse(300, 335, 40, 5);

    //earring
    fill(255, 255, 255);    
    rect(199.5, 310, 1, 25);
    ellipse(200, 340, 10, 10);
    ellipse(200, 330, 7, 7);

    //front hair
    fill(32, 20, 7);     
    rect(168, 400, 35, 180);
    rect(395, 245, 40, 260);
    arc(190, 150, 270, 220, -0.2, HALF_PI);
    rotate(.80);
    translate(-180, -145)
    ellipse(580, 10, 150, 60);

    noLoop();
}

For this first project, it was quite challenging to work with arc(), PI/CHORD, rotate(), and translate() functions but it was really fun to explore with the codes. I had fun playing around with different colors and changing the sizes of the image I wanted to create.