hayoon – Page 3 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

This is what I look like in the morning

function setup() {
    createCanvas(500, 600);
    background(251, 242, 255);
}

function draw() {
    //Hair 1
    noStroke();
    fill(80)
    ellipse(215, 140, 190, 170);
    beginShape();
        vertex(131, 100);
        vertex(75, 245);
        vertex(80, 240);
        vertex(88, 255);
        vertex(93, 260);
        vertex(100, 255);
        vertex(105, 265);
        vertex(140, 270);
        vertex(190, 100);
    endShape();

    //Body
    fill(142, 133, 160);
    rect(95, 260, 390, 500, 140)
  
    //Head
    noStroke();
    fill(255, 237, 225);
    ellipse(240, 210, 260, 240);
  
    //Shadow
    fill(235, 184, 146)
    ellipse(170, 205, 27, 14);
    ellipse(280, 205, 30, 14);
    triangle(215, 210, 208, 220, 200, 240);
    triangle(250, 210, 260, 225, 265, 240);
    fill(252, 218, 192);
    beginShape();
        vertex(200, 296);
        bezierVertex(200, 295, 240, 320, 260, 295);
    endShape();
  
    //eyes
    strokeWeight(1);
    stroke(0);
    fill(254, 246, 246);
    ellipse(170, 200, 27, 12);
    ellipse(280, 200, 30, 10);

    //Pupils 
    fill(0);
    ellipse(172, 200, 7, 7);
    ellipse(282, 200, 5, 6)

    //nose
    noFill();
    arc(240, 220, 15, 10, 175, 70);
    arc(220, 220, 13, 11, 90, 180);
    push();
        translate(230,223);
        rotate(125.9);
        arc(0, 0, 15, 10, 170, 90);
    pop();
    arc(220, 220, 14, 10, 20, 360);
    arc(240, 220, 14, 10, 20, 360);

    //Mouth
    fill(249,134, 128);
    arc(220, 242, 13, 13, PI, 0);
    arc(233, 242, 13, 13, PI, 0);
    arc(227, 242, 26, 15, 0, PI);
    stroke(0);
    strokeWeight(0.8);
    line(214, 243, 238, 243);

    //Hair 2
    noStroke();
    fill(80);
    push();
        translate(125,90);
        rotate(-0.25);
        rect(0, 0, 160, 70, 140)
    pop();
    triangle(170, 150, 100, 250, 123, 127);
    push();
    translate(320, 110);
    rotate(0.5);
    ellipse(0, 0, 160, 70)
    pop();
    beginShape();
        vertex(300, 100);
        vertex(360, 289);
        vertex(370, 285);
        vertex(375, 280);
        vertex(380, 285);
        vertex(388, 277);
        vertex(395, 280);
        vertex(405, 272);
        vertex(410, 277);
        vertex(417, 265);
        vertex(425, 272);
        vertex(435, 265);
        vertex(445, 270);
        vertex(393, 140);
    endShape();
  
    //Eyebrows
    ellipse(170, 180, 15, 5);
    ellipse(275, 180, 17, 5);
  
    //Flower
    noFill();
    stroke(125, 206, 160);
    strokeWeight(5);
    beginShape();
        vertex(230, 550);
        bezierVertex(260, 450, 230, 305, 180, 400);
    endShape();
    noStroke();
    fill(255, 230, 69);
    ellipse(160, 360, 30, 50);
    push();
        translate(195,370)
        rotate(0.8);
        ellipse(0, 0, 30, 50)
    pop();  
    push();
        translate(210,400)
        rotate(1.5);
        ellipse(0, 0, 30, 50)
    pop();  
    push();
        translate(200,430)
        rotate(1.9);
        ellipse(0, 0, 30, 50)
    pop();  
    push();
        translate(155,435)
        rotate(3.7);
        ellipse(0, 0, 35, 50)
    pop();  
    ellipse(130, 400, 50, 35);
    fill(216, 162, 98);
    ellipse(170, 400, 60, 60)

  
  //Arm
    strokeWeight(0);
    fill(255, 237, 225);
    ellipse(410, 360, 120, 110);
    push();
        translate(470, 370);
        rotate(2);
        rect(0, 0, 160, 100, 140)
    pop();
    push();
        translate(220, 450);
        rotate(-0.2);
        rect(0, 0, 200, 80, 170);
    pop();
      rect(195, 428, 85, 100, 100);
      rect(180, 428, 60, 30, 70);
      rect(175, 455, 60, 30, 70);
      rect(183, 482, 60, 30, 70);
      rect(193, 505, 50, 25, 70);
  
    //Flower face
    strokeWeight(1);
    stroke(0);
    fill(254, 246, 246);
    ellipse(150, 400, 12, 7);
    ellipse(180, 400, 11, 7);
    line(160, 400, 157, 410);
    line(157, 410, 159, 412);
    noStroke();
    fill(247, 84, 84);
    ellipse(162, 417, 10, 3);
    ellipse(162, 420, 10, 3);
    fill(0);
    ellipse(150.5, 398, 4, 4)
    ellipse(180.5, 398, 4, 4)
  
  //Blush
    if (mouseIsPressed) {
        fill(255, 186, 186);
    } else {
        fill(255, 237, 225);
    }
    ellipse(160, 227, 40, 20);
    ellipse(295, 227, 40, 20);
}

Two people were involved in making an app called Looom, which is available on iPads. Eran Hilleli worked as an animator-designer and is currently an animation director at Hornet, Art director at Klang games and lecturer at Bezalel academy of art and design. Finn Ericson took the role of an engineer. They worked remotely and took them about a year and a half to complete this project. They were first inspired by the animation technique “weaving loops” and realized how the software stopped the flow of the animators. Then they looked at classic toys like the View-Master discs, Etch A Sketch knobs or Game Boy, which exemplified creative solutions to technological constraints. I wasn’t able to find what exact software or scripts were used to make this app. However, I did find a picture of Eran Hillenli using a software to develop Looom (here). I really admire this work since I was always interested in animating but was left frustrated working with Adobe CC softwares. Although this program isn’t for professional use, this app found a way for people at any age to animate easily. This digital flip book will allow people to approach animating without any prior experiences and release their creativity.

Video of Looom explanation

Author: hayoon

Project 01 – Self Portrait

LO1 – My Inspiration