Author: rsjin@andrew.cmu.edu

Romi Jin – Project-02-Variable-Face-Section B

sketch

/*Romi Jin
Section B
rsjin@andrew.cmu.edu
Assignment-02-A
*/

var earWidth = 50
var earLength = 150
var earX = 150
var earY = 200

var faceWidth = 225
var faceX = 225
var faceY = 340

var eyeWidth = 35
var eyeX = 180
var eyeY = 350
var eyeColorR = 0
var eyeColorG = 0
var eyeColorB = 0

var noseWidth = 30
var noseLength = 15
var noseX = 225
var noseY = 385

var word = 0
var wordNumber = 0


function setup() {
    createCanvas(480, 640);
}

function draw() {
    background(245,215,215);

    //left ear
    noStroke();
    fill(255);
    ellipse(earX,earY,earWidth,earLength);

    noStroke();
    fill(253, 229, 255);
    ellipse(earX,earY+25,earWidth/2,earLength/2);

    //right ear
    noStroke();
    fill(255);
    ellipse(2*earX,earY,earWidth,earLength);

    noStroke();
    fill(253, 229, 255);
    ellipse(2*earX,earY+25,earWidth/2,earLength/2);

    //face
    noStroke();
    fill(255);
    ellipse(faceX,faceY,faceWidth,faceWidth);

    //left eye
    noStroke();
    fill(eyeColorR,eyeColorG,eyeColorB);
    ellipse(eyeX,eyeY,eyeWidth,eyeWidth);

    //right eye
    noStroke();
    fill(eyeColorR,eyeColorG,eyeColorB);
    ellipse(eyeX+85,eyeY,eyeWidth,eyeWidth);

    //nose
    noStroke();
    fill(0);
    ellipse(noseX,noseY,noseWidth,noseLength);

    //text
    var word = int(wordNumber);
    if (word == 1) {
        noStroke();
        textSize(20);
        fill(0);
        text("bunny", 205, 500);


    } else if (word == 2){
        noStroke();
        textSize(20);
        fill(0);
        text("rabbit", 205, 500);

    } else if (word == 3){
        noStroke();
        textSize(20);
        fill(0);
        text("bun", 215, 500);

    } else {
        noStroke();
        textSize(20);
        fill(0);
        text(":)", 225, 500);
    }
}



function mousePressed() {

    earWidth = random(40, 75);
    earLength = random(140,200);

   	eyeColorR = random(0,255);
   	eyeColorG = random(0,255);
   	eyeColor = random(0,255);

   	noseWidth = random(25,40);
   	noseLength = random(10,20);

   	word = random(0,4);
   	wordNumber = random(0,4);

 }

This was a very fun project and a great introduction to variables! Since we had already coded a human face for the previous project, I wanted to do something different this time and created a simple drawing of an animal. (a bunny – my favorite!) It took a lot less time than expected!

Romi Jin – Looking Outwards – 01

Japan’s first digital art museum, MORI Building Digital Art Museum by teamLab Borderless in Tokyo, combines human interaction with psychedelic wonder to fabricate an expansive, experiential exhibit. teamLab is a group of ultratechnologists who combine art, science, technology, design and the natural world through a team of designers, programmers, engineers, CG animators, mathematicians and architects from all around the world. This team produced this museum of digital artworks, which are powered by approximately 520 computers and 470 projectors that completely immerse the viewer into the surrounding physical space. There are five different spaces and fifty interactive displays, including “Borderless World,” “En Tea House,” “Athletics Forest,” and “Forest of Resonating Lamps,” pictured below.

Forest of Resonating Lamps

Technological art like this has inspired me to step into the world of technology and coding, working through a hybrid of mediums that interest me and that are changing the world at an exponential rate. To contribute to this progress would be life-changing, and I hope to do so one day!

Romi Jin – Project-01-Face

romi-selfportrait

/* Romi Jin 
Section B 
rsjin@andrew.cmu.edu 
Project-01 */

function setup() {
    createCanvas(500, 1000);
    background(252, 221, 215);
    //background(255, 240, 245);
}

function draw() {

    //right side of hair
    fill(106, 59, 51);
    noStroke();
    beginShape();

    curveVertex(380,219);
    curveVertex(371,200);
    curveVertex(352,172);
    curveVertex(336,153);
    curveVertex(323,141);
    curveVertex(311,136);
    curveVertex(324,128);
    curveVertex(338,119);
    curveVertex(350,102);
    curveVertex(353,105);
    curveVertex(366,118);
    curveVertex(391,157);
    curveVertex(411,195);
    curveVertex(417,213);
    curveVertex(421,229);
    curveVertex(422,247);
    curveVertex(422,261);
    curveVertex(423,283);
    curveVertex(425,309);
    curveVertex(427,331);
    curveVertex(429,349);
    curveVertex(423,368);
    curveVertex(415,387);
    curveVertex(405,399);
    curveVertex(391,413);
    curveVertex(384,418);
    endShape(CLOSE);


     //shirt
    fill(255,255,255);
    stroke(220,220,220);
    strokeWeight(1);
    beginShape();
    vertex(333,493);
    vertex(351,502);
    vertex(367,500);
    vertex(423,504);
    vertex(453,525);
    vertex(500,538);
    vertex(500,793);
    vertex(462,749);
    vertex(468,1000);
    vertex(0,1000);
    vertex(0,561);
    vertex(11,558);
    vertex(333,493);
    endShape(CLOSE);

    //shirt lines
    noFill();
    stroke(220,220,220);
    strokeWeight(1);
    triangle(333, 493, 308, 605, 383, 624);

    noFill();
    stroke(220,220,220);
    strokeWeight(1);
    beginShape();
    vertex(308,605);
    vertex(271,850);
    vertex(286,1000);
    vertex(237,1000);
    vertex(229,852);
    vertex(254,659);
    endShape(CLOSE);

    stroke(220,220,220);
    strokeWeight(1);
    line(199,713,241,758);

    stroke(220,220,220);
    strokeWeight(2);
    line(270,686,267,702);

    noFill();
    stroke(220,220,220);
    strokeWeight(1);
    ellipse(255,886,18,18);

    //neck
    fill(244, 224, 217);
    noStroke();
    beginShape();
    vertex(333,493);
    vertex(308,605);
    vertex(254,659);
    vertex(241,758);
    vertex(199,713);
    vertex(199,490);
    vertex(333,493);
    endShape(CLOSE);

    //neckshadow
    fill(221,205,202);
    noStroke();
    triangle(253,517,211,640,199,490);

    //face shape
    fill(255, 233, 224);
    noStroke();
    ellipse(271, 320, 260, 395);

    //facial features

    //beauty mark
    stroke(139,94,60);
    strokeWeight(4);
    point(200,334);

    //eyebrows
    //left
    fill(68,50,35);
    noStroke();
    beginShape();
    curveVertex(246,233);
    curveVertex(228,230);
    curveVertex(208,229);
    curveVertex(189,231);
    curveVertex(178,238);
    curveVertex(180,247);
    curveVertex(194,246);
    curveVertex(217,246);
    curveVertex(238,247);
    curveVertex(250,245);
    endShape(CLOSE);
    //right
    fill(68,50,35);
    noStroke();
    beginShape();
    curveVertex(317,234);
    curveVertex(338,232);
    curveVertex(356,233);
    curveVertex(376,237);
    curveVertex(387,243);
    curveVertex(391,251);
    curveVertex(393,256);
    curveVertex(386,255);
    curveVertex(371,249);
    curveVertex(355,247);
    curveVertex(335,247);
    curveVertex(320,248);
    curveVertex(312,250);
    curveVertex(308,242);
    endShape(CLOSE);

    //eyes

    //outline
    //left
    fill(255);
    stroke(0);
    strokeWeight(.75)
    beginShape();
    curveVertex(238,295);
    curveVertex(238,295);
    curveVertex(236,291);
    curveVertex(233,287);
    curveVertex(228,283);
    curveVertex(221,280);
    curveVertex(211,279);
    curveVertex(201,279);
    curveVertex(190,282);
    curveVertex(182,286);
    curveVertex(177,289);
    curveVertex(179,292);
    curveVertex(184,299);
    curveVertex(193,303);
    curveVertex(201,305);
    curveVertex(210,306);
    curveVertex(217,304);
    curveVertex(226,301);
    curveVertex(233,299);
    curveVertex(238,295);
    endShape(CLOSE);
    //right
    fill(255);
    stroke(0);
    strokeWeight(.75)
    beginShape();
    curveVertex(312,297);
    curveVertex(312,297);
    curveVertex(319,287);
    curveVertex(330,282);
    curveVertex(343,280);
    curveVertex(354,282);
    curveVertex(363,286);
    curveVertex(370,292);
    curveVertex(373,295);
    curveVertex(367,300);
    curveVertex(359,302);
    curveVertex(351,305);
    curveVertex(344,306);
    curveVertex(333,305);
    curveVertex(327,304);
    curveVertex(320,300);
    endShape(CLOSE);

    //left
    stroke(96,57,19);
    strokeWeight(27);
    point(209,293);

    stroke(0);
    strokeWeight(15);
    point(209,293);

    stroke(255);
    strokeWeight(6);
    point(215,290);

    //right
    stroke(96,57,19);
    strokeWeight(26);
    point(341,293);

    stroke(0);
    strokeWeight(14);
    point(341,293);

    stroke(255);
    strokeWeight(6);
    point(347,290);

    noFill();
    stroke(0);
    strokeWeight(.5);
    beginShape();
    curveVertex(179,281);
    curveVertex(179,281);
    curveVertex(197,274);
    curveVertex(210,273);
    curveVertex(223,276);
    curveVertex(232,282);
    curveVertex(238,288);
    curveVertex(238,288);
    endShape();

    noFill();
    stroke(0);
    strokeWeight(.5);
    beginShape();
    curveVertex(312,289);
    curveVertex(312,289);
    curveVertex(321,281);
    curveVertex(332,277);
    curveVertex(347,276);
    curveVertex(360,279);
    curveVertex(375,290);
    curveVertex(375,290);
    endShape();

    //nose
    noFill();
    stroke(0);
    strokeWeight(1);
    beginShape();
    curveVertex(253,342);
    curveVertex(253,342);
    curveVertex(244,355);
    curveVertex(241,367);
    curveVertex(248,383);
    curveVertex(260,379);
    curveVertex(261,372);
    curveVertex(270,375);
    curveVertex(279,383);
    curveVertex(289,378);
    curveVertex(301,373);
    curveVertex(301,383);
    curveVertex(312,380);
    curveVertex(314,369);
    curveVertex(309,353);
    curveVertex(304,342);
    curveVertex(304,342);
    endShape();

    //lips
    fill(232,163,163);
    noStroke();
    beginShape();
    curveVertex(228,427);
    curveVertex(228,427);
    curveVertex(238,422);
    curveVertex(257,407);
    curveVertex(268,409);
    curveVertex(276,412);
    curveVertex(283,411);
    curveVertex(293,408);
    curveVertex(306,417);
    curveVertex(319,431);
    curveVertex(308,441);
    curveVertex(290,454);
    curveVertex(275,455);
    curveVertex(260,454);
    curveVertex(250,449);
    curveVertex(242,442);
    curveVertex(234,435);
    endShape(CLOSE);

    noFill();
    stroke(183,132,132);
    strokeWeight(1.5);
    beginShape();
    curveVertex(228,427);
    curveVertex(238,427);
    curveVertex(251,425);
    curveVertex(263,426);
    curveVertex(276,428);
    curveVertex(295,427);
    curveVertex(309,431);
    curveVertex(319,431);
    endShape();

    stroke(0);
    strokeWeight(.25);
    line(264,387,261,401);

    stroke(0);
    strokeWeight(.25);
    line(290,389,293,403);

    fill(244,223,220);
    noStroke();
    quad(278,388,269,403,277,408,286,403);

    //hair
    fill(150, 82, 61);
    noStroke();
    beginShape();
    curveVertex(347,79);
    curveVertex(342,74);
    curveVertex(338,68);
    curveVertex(327,61);
    curveVertex(315,57);
    curveVertex(312,57);
    curveVertex(301,54);
    curveVertex(285,54);
    curveVertex(226,71);
    curveVertex(142,137);
    curveVertex(81,249);
    curveVertex(70,315);
    curveVertex(57,368);
    curveVertex(38,427);
    curveVertex(19,499);
    curveVertex(11,563);
    curveVertex(26,671);
    curveVertex(51,729);
    curveVertex(82,825);
    curveVertex(91,848);
    curveVertex(109,887);
    curveVertex(109,823);
    curveVertex(139,850);
    curveVertex(142,890);
    curveVertex(164,861);
    curveVertex(172,814);
    curveVertex(196,846);
    curveVertex(258,868);
    curveVertex(219,828);
    curveVertex(204,793);
    curveVertex(198,751);
    curveVertex(210,648);
    curveVertex(211,544);
    curveVertex(203,507);
    curveVertex(199,490);
    curveVertex(180,380);
    curveVertex(171,320);
    curveVertex(191,230);
    curveVertex(236,163);
    curveVertex(289,138);
    curveVertex(309,138);
    curveVertex(323,125);
    curveVertex(330,132);
    curveVertex(336,127);
    curveVertex(347,119);
    curveVertex(352,110);
    curveVertex(352,108);
    curveVertex(354,91);
    endShape(CLOSE);

}

For this project, I wanted to code a realistic cartoon of my face, using a photo, drawing a simple outline in Illustrator, and extracting coordinates from there to save time of randomly guessing the positions of each component. I also used a light, pastel color palette according to the photo this was based on. It took a lot less time than I had thought it would and was a lot of fun!