Designed and created by LU JIA.

Critical Computation Project #4: Exquisite Corpse.

Illustration collaborated with: Wenwen(Erin) Qiu, Sarita Sun.

*/

​

/*

SOUND TRACK:

'Why The Future Doesn't Need Us' by Deathwave International.

https://freemusicarchive.org/music/Deathwave_International/NORTH/Deathwave_International_-_NORTH_-_13_Why_The_Future_Doesnt_Need_Us

*/

​

/*

INSTRUCTION:

The cursor is turned into sparkles.

Click to play the soundtrack.

Click again to stop the soundtrack.

/*

​

/*

DESCRIPTION:

The head of the portrait came from my figure; the upper body was picked from Wenwen's figure; the lower body was designed by Sarita.

/*

​

/*

REFLECTION:

Each of us has a totally different illustration style, which makes the final figure very interesting and unexpected. However, none like previous projects, this time there is a specific image given, with a lot of details. I find it to be hard to reproduce the exact image in code. But p5 sketch "forces" me to modify certain details, which also result in some unexpected outputs. My original figure is a girl, who is born with pinky eyes and hair. Loves dancing. The collabrative figure has a different background story. The girl is named R325. She is from the future, the year of 3020. She comes to 2020 by accident. Now she is wondering around trying to find her way back home.

*/

​

​

​

let i = 0;

let soundTrack;

let shadow;

let play = true;

​

​

​

function preload() {

  shadow = loadImage('shadow.png');

  R325 = loadFont('TenaliRamakrishna-Regular.ttf');

  soundTrack = loadSound('WhyTheFutureDoesntNeedUs_.m4a');

}

​

​

​

function setup() {

  createCanvas(400, 600);

  noCursor();

​

  soundTrack.setVolume(2, 50);

  // soundTrack.play();

}

​

​

​

function draw() {

  background(0, 25);

​

  // darkHair();

  lowerBodyRight();

  lowerBodyLeft();

  upperBody();

  head();

​

  image(shadow, 0, 0);

​

  sparkle(random(width), random(height), random(1000), random(1000));

  sparkle(random(500), random(700), random(450), random(610));

}

​

​

​

function sparkle(locationX, locationY, locationX2, locationY2) {

  let sparkleSize = random(1, 5);

  let sparkleSize2 = random(1, 3);

  let sparkleSize3 = random(1, 7);

​

  push();

  textFont(R325);

  textSize(random(2, 70));

  stroke(227, 209, 195);

  // strokeWeight(0.5);

  text('R325', locationX2, locationY2);

  pop();

​

  push();

  fill(255);

  noStroke();

  ellipse(locationX, locationY, sparkleSize, sparkleSize);

  ellipse(locationY, locationX, sparkleSize2, sparkleSize2);

  ellipse(mouseX, mouseY, sparkleSize3, sparkleSize3);

  pop();

}

​

​

​

function darkHair() {

  noStroke();

  fill(97, 3, 17);

​

  beginShape();

  curveVertex(195, 132);

  curveVertex(195, 132);

  curveVertex(230, 118);

  curveVertex(270, 119);

  curveVertex(262, 154);

  curveVertex(258, 184);

  curveVertex(260, 219);

  curveVertex(261, 267);

  curveVertex(200, 319);

  curveVertex(60, 324);

  curveVertex(150, 174);

  curveVertex(195, 132);

  curveVertex(195, 132);

  endShape();

}

​

​

​

function head() {

​

  //face

  fill(251, 218, 227);

  rectMode(CENTER);

  rect(220, 153, 65, 65, 20);

​

  // fill(255);

  ellipse(204, 169.5, 36);

  ellipse(235.5, 169.5, 36);

  ellipse(234.5, 143.5, 38);

​

  // fill(255);

  ellipse(213, 181.5, 15);

  ellipse(227, 181.5, 15);

​

​

  eyes();

  hair();

  hairOutline();

}

​

​

​

function eyes() {

  i = i + 1

​

  if (i % 30 === 0) {

    // blinking

    fill(155, 7, 29);

    noStroke();

    ellipse(201, 165, 10, 3);

    ellipse(239, 165, 10, 3);

  } else {

    // eyes

    fill(155, 7, 29);

    noStroke();

    ellipse(201, 167, 9, 9);

    ellipse(239, 167, 9, 9);

    //outlines

    noFill();

    stroke(30);

    strokeWeight(0.5);

    ellipse(202, 166.5, 9, 9);

    // ellipse(201.5, 159.5, 9, 9);

    ellipse(240, 166.5, 9, 9);

    // ellipse(239.5, 159.5, 9, 9);

  }

​

  frameRate(15);

}

​

​

​

function hair() {

  //hairLight

  noStroke();

  fill(155, 7, 29);

​

  beginShape();

  curveVertex(165, 114);

  curveVertex(165, 114);

  curveVertex(200, 90);

  curveVertex(255, 85);

  curveVertex(285, 105);

  curveVertex(280, 137);

  curveVertex(250, 144);

  curveVertex(220, 143);

  curveVertex(192, 157);

  curveVertex(175, 183);

  curveVertex(166, 210);

  curveVertex(160, 250);

  curveVertex(145, 305);

  curveVertex(105, 335);

  curveVertex(60, 332);

  curveVertex(35, 310);

  curveVertex(30, 280);

  curveVertex(38, 250);

  curveVertex(59, 230);

  curveVertex(90, 210);

  curveVertex(120, 185);

  curveVertex(141, 147);

  curveVertex(165, 114);

  curveVertex(165, 114);

  endShape();

}

​

​

​

​

function hairOutline() {

  noFill();

  stroke(15);

  strokeWeight(0.5);

​

  beginShape();

  curveVertex(163, 114);

  curveVertex(163, 114);

  curveVertex(198, 90);

  curveVertex(253, 85);

  curveVertex(283, 105);

  curveVertex(278, 137);

  curveVertex(248, 144);

  curveVertex(218, 143);

  curveVertex(190, 157);

  curveVertex(173, 183);

  curveVertex(164, 210);

  curveVertex(158, 250);

  curveVertex(143, 305);

  curveVertex(103, 335);

  curveVertex(58, 332);

  curveVertex(33, 310);

  curveVertex(28, 280);

  curveVertex(36, 250);

  curveVertex(57, 230);

  curveVertex(88, 210);

  curveVertex(118, 185);

  curveVertex(139, 147);

  curveVertex(163, 114);

  curveVertex(163, 114);

  endShape();

}

​

​

​

​

function upperBody() {

  rectMode(CENTER);

​

  //handRight

  fill(255, 215, 228);

  noStroke();

  ellipse(270, 355, 20);

​

  //armRight

  push();

  stroke(208, 167, 172);

  strokeWeight(30);

  curve(240, 190, 260, 220, 270, 340, 240, 400);

  pop();

​

  //sweatshirt

  fill(208, 167, 172);

  rect(220, 274, 110, 150, 46);

​

  fill(97, 3, 17);

  arc(220, 199, 35, 33, 0, PI, CHORD);

​

  stroke(97, 3, 17);

  strokeWeight(9);

  noFill();

  arc(219, 323, 90, 45, 0, PI);

​

  //shoulder

  push();

  fill(208, 167, 172);

  noStroke()

  rect(180, 213, 35, 20, 20);

  rect(255, 213, 35, 20, 20);

  pop();

​

  //neck

  fill(251, 218, 227);

  noStroke();

  rect(220, 187, 20, 45, 9);

​

  //handLeft

  fill(255, 215, 228);

  noStroke();

  ellipse(167, 356, 20);

​

  //armLeft

  push();

  stroke(208, 167, 172);

  strokeWeight(30);

  curve(215, 190, 170, 220, 165, 340, 195, 400);

  pop();

​

  push();

  fill(208, 167, 172);

  // fill(0);

  noStroke()

  rect(264, 325, 10, 30);

  pop();

​

  //brooch

  fill(6);

  arc(201, 252, 18, 23, 0, PI - QUARTER_PI, CHORD);

  fill(155, 7, 29);

  arc(200, 250, 18, 23, 0, PI - QUARTER_PI, CHORD);

​

  //lines

  push();

  stroke(97, 3, 17);

  strokeWeight(0.7);

  noFill();

  beginShape();

  curveVertex(183, 240);

  curveVertex(183, 240);

  curveVertex(180, 260);

  curveVertex(182, 290);

  curveVertex(179, 328);

  curveVertex(179, 328);

  endShape();

​

  beginShape();

  curveVertex(255, 245);

  curveVertex(255, 245);

  curveVertex(254, 260);

  curveVertex(257, 300);

  curveVertex(258.5, 327);

  curveVertex(258.5, 327);

  endShape();

  pop();

}

​

​

​

function lowerBodyLeft() {

  //shoesBack

  push();

  stroke(124, 0, 41);

  strokeWeight(0.5);

  fill(155, 7, 29);

  beginShape();

  curveVertex(179, 410);

  curveVertex(179, 410);

  curveVertex(202, 400);

  curveVertex(218, 405);

  curveVertex(213, 430);

  curveVertex(210, 455);

  curveVertex(209, 475);

  curveVertex(190, 475);

  curveVertex(191, 450);

  curveVertex(179, 410);

  curveVertex(179, 410);

  endShape();

  pop();

​

  //shoesMiddle

  push();

  fill(97, 3, 17);

  beginShape();

  curveVertex(175, 410);

  curveVertex(175, 410);

  curveVertex(198, 400);

  curveVertex(214, 405);

  curveVertex(209, 430);

  curveVertex(206, 455);

  curveVertex(206, 475);

  curveVertex(186, 475);

  curveVertex(187, 450);

  curveVertex(175, 410);

  curveVertex(175, 410);

  endShape();

  pop();

​

  //legs

  push();

  noFill();

  stroke(255, 215, 228);

  strokeWeight(9);

  curve(170, 320, 200, 340, 195, 420, 170, 480);

  pop();

​

  //shoesFront

  push();

  stroke(97, 3, 17);

  strokeWeight(0.5);

  fill(155, 7, 29)

  beginShape();

  curveVertex(169, 405);

  curveVertex(169, 405);

  curveVertex(192, 395);

  curveVertex(207, 400);

  curveVertex(203, 420);

  curveVertex(200, 440);

  curveVertex(201, 470);

  curveVertex(203, 468);

  curveVertex(215, 463);

  curveVertex(232, 468);

  curveVertex(240, 480);

  curveVertex(238, 490);

  curveVertex(215, 495);

  curveVertex(180, 490);

  curveVertex(180, 470);

  curveVertex(181, 442);

  curveVertex(169, 405);

  curveVertex(169, 405);

  endShape();

  pop();

​

  //sole

  push();

  stroke(97, 3, 17);

  strokeWeight(5.5);

  noFill();

  beginShape();

  curveVertex(240, 484);

  curveVertex(240, 484);

  curveVertex(236, 490);

  curveVertex(213, 495);

  curveVertex(180, 490);

  curveVertex(180, 490);

  endShape();

  pop();

​

  //circle

  push();

  fill(209, 204, 197);

  noStroke();

  ellipse(201, 471, 13);

  pop();

}

​

​

​

function lowerBodyRight() {

  //shoesBack

  push();

  fill(155, 7, 29);

  beginShape();

  curveVertex(219, 405);

  curveVertex(219, 405);

  curveVertex(240, 395);

  curveVertex(255, 400);

  curveVertex(250, 425);

  curveVertex(248, 450);

  curveVertex(249, 470);

  curveVertex(230, 470);

  curveVertex(231, 445);

  curveVertex(219, 405);

  curveVertex(219, 405);

  endShape();

  pop();

​

  //shoesMiddle

  push();

  fill(97, 3, 17);

  beginShape();

  curveVertex(215, 405);

  curveVertex(215, 405);

  curveVertex(235, 395);

  curveVertex(251, 400);

  curveVertex(246, 425);

  curveVertex(245, 450);

  curveVertex(246, 470);

  curveVertex(226, 470);

  curveVertex(227, 445);

  curveVertex(215, 405);

  curveVertex(215, 405);

  endShape();

  pop();

​

  //legs

  push();

  noFill();

  stroke(255, 215, 228);

  strokeWeight(9);

  curve(205, 330, 235, 350, 230, 420, 205, 480);

  pop();

​

  //shoesFront

  push();

  stroke(124, 0, 41);

  strokeWeight(0.5);

  fill(155, 7, 29)

  beginShape();

  curveVertex(209, 400);

  curveVertex(209, 400);

  curveVertex(230, 392);

  curveVertex(245, 396);

  curveVertex(241, 415);

  curveVertex(238, 435);

  curveVertex(240, 465);

  curveVertex(243, 463);

  curveVertex(252, 457);

  curveVertex(268, 463);

  curveVertex(276, 475);

  curveVertex(275, 485);

  curveVertex(253, 490);

  curveVertex(220, 485);

  curveVertex(220, 465);

  curveVertex(221, 437);

  curveVertex(209, 400);

  curveVertex(209, 400);

  endShape();

  pop();

​

  //sole

  push();

  stroke(97, 3, 17);

  strokeWeight(4.5);

  noFill();

  beginShape();

  curveVertex(277, 478);

  curveVertex(277, 478);

  curveVertex(274, 484);

  curveVertex(252, 490);

  curveVertex(220, 485);

  curveVertex(220, 485);

  endShape();

  pop();

​

  //circle

  push();

  fill(209, 204, 197);

  noStroke();

  ellipse(238, 468, 11);

  pop();

}

​

​

function mousePressed() {

  //trigger sound track

​

  if (play == true) {

    soundTrack.loop();

  } else if (play == false) {

    soundTrack.stop();

  }

​

  play = !play

}