September 2021 – Page 32 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 1: My Self Portrait

function setup() {
    createCanvas(500, 400);
    background(0);
}

function draw() {
    noStroke();
    fill(255);
    ellipse(250,210,210,280);
    fill(252,192,210);
    ellipse(250,200,180,220);
    rect(225, 300, 50, 40);
    arc(250,320,100,100, 0, PI, CHORD);
    stroke(0);
    fill(255); 
    noStroke(); 
    arc(250, 250, 70, 40, 0, PI, CHORD); //mouth
    fill(0);
    stroke(0);
    circle(220, 200, 20);
    circle(280, 200, 20);
    noFill();
    arc(240, 200, 20, 50, 0, HALF_PI);
    arc(244, 230, 20, 10, 0, PI + QUARTER_PI); 
    noStroke();
    fill(184, 120, 138);
    ellipse(200, 230, 30, 20);
    ellipse(300 , 230, 30, 20);
    rect(200, 170, 40, 10);
    rect(260, 170, 40, 10);
    noFill();
    stroke(255);
    strokeWeight(5)
    line(250, 80, 250, 150);   
    line(230, 80, 230, 150);   
    line(210, 90, 210, 150);   
    line(270, 80, 270, 150);   
    line(290, 90, 290, 150);   


    noLoop();


}

Project 01: Self Portrait

jiyeonch_selfportrait Download

function setup() {
    createCanvas(300, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(118,148,115);
    noStroke();
    fill(246, 153, 138);
    ellipse(90,102,130,125);//leftheart
    noStroke();
    fill(246, 153, 138);
    ellipse(210,102,130,125);//rightheart
    noStroke();
    fill(246, 153, 138);
    triangle(38,140,width/2,270,262,140);//heartbottom
    noStroke();
    fill(0,0,0);
    ellipse(150,139,100,110);//hair
    noStroke();
    fill(0,0,0);
    quad(100,145,90,190,210,190,200,145);//hair2
    noStroke();
    fill(227,194,148);
    ellipse(150,150,90,100);//face
    noStroke();
    fill(0,0,0);
    ellipse(130,145,15,10); //left_eyelash
    noStroke();
    fill(227,194,148);
    ellipse(130,143,15,10); //left_eyelid
    noStroke();
    fill(0,0,0);
    ellipse(167,145,15,10); //right_eyelash
    noStroke();
    fill(227,194,148);
    ellipse(167,143,15,10); //right_eyelid
    noStroke();
    fill(246, 153, 138);
    ellipse(175,157,15,10); //right_cheek
    noStroke();
    fill(246, 153, 138);
    ellipse(123,157,15,10); //left_cheek
    noStroke();
    fill(0,0,0);
    ellipse(width/2,167,20,15); //mouth
    noStroke();
    fill(227,194,148);
    ellipse(width/2,165,20,15); //mouth2;
    noStroke();
    fill(0,0,0);
    triangle(100,160,width/2,100,115,100); //hairleft;
    noStroke();
    fill(0,0,0);
    triangle(200,160,width/2,100,185,100); //hairright;
    fill(185, 73, 217);
    triangle(161,120,170,137,185,120);//leftclip
    fill(185, 73, 217);
    triangle(195,103,205,120,185,120);//rightclip
    fill(248, 237, 104);
    quad(177,118,186,114,190,122,182,127);//clipmiddle
}

I found it challenging to have to keep guessing and checking where to code the corners of the triangles/quadrilaterals to go, that was probably the most tedious part of the process.

Project 1: My Self Portrait

sketch Download

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