Urena Kuang: Randomised Collections

.block

.

README.md

Final Design These faces represent the three main emotions, happiness, sadness and impatience. The style and colors were mainly inspired by some abstract illustrations on Pinterest. //https://www.pinterest.nz/pin/698128379742675263/

PROCESSING: When I first designed the draft of these faces, I drew a total of 18 faces. Because it mainly relies on the bezier curve to complete and does not have some basic flat graphics. This leads to the fact that when I use code to draw these graphics, the feasibility is not very high.(first sketch.jpg) Therefore, in the second graphic design, I added some manipulable color blocks as parameter variables.

PARAMETERS:

//first pink base foundation_size_1=size foundation_pos_x_1=position x foundation_pos_y_1=position y foundation_alphy_1=transparency foundation_angle_1=rotate angle

//second pink base (repeat) foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,

corner_type=corner decoration draw_neck_or_blush=line and ellipse mouth_type= changing between three type of mouth

arrangement.js

/*
 * This program draws your arrangement of faces on the canvas.
 */

const canvasWidth = 960;
const canvasHeight = 500;
let curRandomSeed = 0;

let lastSwapTime = 0;
const millisPerSwap = 3000;

function setup() {
  // create the drawing canvas, save the canvas element
  let main_canvas = createCanvas(canvasWidth, canvasHeight);
  main_canvas.parent('canvasContainer');

  curRandomSeed = int(random(0, 1000));

  // rotation in degrees
  angleMode(DEGREES);
}

function changeRandomSeed() {
  curRandomSeed = curRandomSeed + 1;
  lastSwapTime = millis();
}

// global variables for colors
const bg_color1 = [255];

function mouseClicked() {
  changeRandomSeed();
}

function draw() {
  if (millis() > lastSwapTime + millisPerSwap) {
    changeRandomSeed();
  }

  // reset the random number generator each time draw is called
  randomSeed(curRandomSeed);

  // clear screen
  background(20);
  strokeWeight(0.3);

  let cols = 8; // x
  let rows = 4; // y

  let w = canvasWidth / cols;
  let h = canvasHeight / rows;

  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
      let y = h / 2 + h * i;
      let x = w / 2 + w * j;

      let foundation_size_1 = random(8, 14);
      let foundation_pos_x_1 = random(-1, 1);
      let foundation_pos_y_1 = random(-1, 1);
      let foundation_alphy_1 = random(20, 180);
      let foundation_angle_1 = random(-0.5, 0.5);
      let foundation_size_2 = random(10, 16);
      let foundation_pos_x_2 = random(-5, 5);
      let foundation_pos_y_2 = random(-5, 5);
      let foundation_alphy_2 = random(50, 200);
      let foundation_angle_2 = random(-0.5, 0.5);

      let corner_type = floor(random(0, 8));
      let draw_neck_or_blush = floor(random(0, 2));
      let mouth_type = floor(random(0, 3));

      if (j == 0) {
        // center face
        push();
        translate(x, y);
        scale(w / 25, h / 25);
        drawFace3(
          foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
          foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
          corner_type, draw_neck_or_blush, mouth_type
        );
        pop();
      } else if (j > 0) {
        // all other faces
        push();
        translate(x, y);
        scale(w / 25, h / 25);
        if (random(2) < 1) {
          drawFace1(
            foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
            foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
            corner_type, draw_neck_or_blush, mouth_type
          );
        } else {
          drawFace2(
            foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
            foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
            corner_type, draw_neck_or_blush, mouth_type
          );
        }
        pop();
      }
    }
  }
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  } else if (key == '@') {
    saveBlocksImages(true);
  }
}

editor.html

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="face_code.js"></script>
    <script language="javascript" type="text/javascript" src="editor.js"></script>

    <style>
        body {
            padding: 0;
            margin: 0;
        }

        .inner {
            position: absolute;
        }

        #controls {
            font: 300 12px "Helvetica Neue";
            padding: 5;
            margin: 5;
            background: #f0f0f0;
            opacity: 0.0;
            -webkit-transition: opacity 0.2s ease;
            -moz-transition: opacity 0.2s ease;
            -o-transition: opacity 0.2s ease;
            -ms-transition: opacity 0.2s ease;
        }

        #controls:hover {
            opacity: 0.9;
        }
    </style>

</head>

<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
            <a href="index.html">arrangement</a>
            (<a href="arrangement.js">arrangement code</a>,
            <a href="face_code.js">face code</a>)<br>
            <a href="editor.html">editor</a>
            (<a href="editor.js">editor code</a>,
            <a href="face_code.js">face code</a>)<br>
            <a href="sketch.html">sketch</a>
        </div>
        <div class="inner" id="controls" height="500px">
            <table>
                <tr>
                    <td>foundation_size_1</td>
                    <td id="slider1Container"></td>
                </tr>
                <tr>
                    <td>foundation_pos_x_1</td>
                    <td id="slider2Container"></td>
                </tr>
                <tr>
                    <td>foundation_pos_y_1</td>
                    <td id="slider3Container"></td>
                </tr>
                <tr>
                    <td>foundation_alpha_1</td>
                    <td id="slider4Container"></td>
                </tr>
                <tr>
                    <td>foundation_angle_1</td>
                    <td id="slider5Container"></td>
                </tr>
                <tr>
                    <td>foundation_size_2</td>
                    <td id="slider6Container"></td>
                </tr>
                <tr>
                    <td>foundation_pos_x_2</td>
                    <td id="slider7Container"></td>
                </tr>
                <tr>
                    <td>foundation_pos_y_2</td>
                    <td id="slider8Container"></td>
                </tr>
                <tr>
                    <td>foundation_alpha_2</td>
                    <td id="slider9Container"></td>
                </tr>
                <tr>
                    <td>foundation_angle_2</td>
                    <td id="slider10Container"></td>
                </tr>
                <tr>
                    <td>corner_type</td>
                    <td id="slider11Container"></td>
                </tr>
                <tr>
                    <td>draw_neck_or_blush</td>
                    <td id="slider12Container"></td>
                </tr>
                <tr>
                    <td>mouth_type</td>
                    <td id="slider13Container"></td>
                </tr>
                <tr>
                    <td>Show Target</td>
                    <td id="checkbox1Container"></td>
                </tr>
                <tr>
                    <td>Face</td>
                    <td id="selector1Container"></td>
                </tr>
            </table>
        </div>
    </div>
    </table>
</body>

editor.js

/*
 * This editor shows the possible faces that can be created
 */

const canvasWidth = 960;
const canvasHeight = 500;
let slider1, slider2, slider3, slider4, slider5;
let slider6, slider7, slider8, slider9, slider10;
let slider11, slider12, slider13;
let faceSelector;
let faceGuideCheckbox;

function setup() {
  // create the drawing canvas, save the canvas element
  let main_canvas = createCanvas(canvasWidth, canvasHeight);
  main_canvas.parent('canvasContainer');

  // create sliders
  slider1 = createSlider(0, 100, 50);
  slider2 = createSlider(0, 100, 50);
  slider3 = createSlider(0, 100, 50);
  slider4 = createSlider(0, 100, 50);
  slider5 = createSlider(0, 100, 50);
  slider6 = createSlider(0, 100, 50);
  slider7 = createSlider(0, 100, 50);
  slider8 = createSlider(0, 100, 50);
  slider9 = createSlider(0, 100, 50);
  slider10 = createSlider(0, 100, 50);
  slider11 = createSlider(0, 100, 50);
  slider12 = createSlider(0, 100, 50);
  slider13 = createSlider(0, 100, 50);

  slider1.parent('slider1Container');
  slider2.parent('slider2Container');
  slider3.parent('slider3Container');
  slider4.parent('slider4Container');
  slider5.parent('slider5Container');
  slider6.parent('slider6Container');
  slider7.parent('slider7Container');
  slider8.parent('slider8Container');
  slider9.parent('slider9Container');
  slider10.parent('slider10Container');
  slider11.parent('slider11Container');
  slider12.parent('slider12Container');
  slider13.parent('slider13Container');

  faceGuideCheckbox = createCheckbox('', false);
  faceGuideCheckbox.parent('checkbox1Container');

  faceSelector = createSelect();
  faceSelector.option('1');
  faceSelector.option('2');
  faceSelector.option('3');
  faceSelector.value('3');
  faceSelector.parent('selector1Container');
}

const bg_color = [255];

function draw() {
  strokeWeight(0.2);

  let mode = faceSelector.value();

  background(bg_color);

  let s1 = slider1.value();
  let s2 = slider2.value();
  let s3 = slider3.value();
  let s4 = slider4.value();
  let s5 = slider5.value();
  let s6 = slider6.value();
  let s7 = slider7.value();
  let s8 = slider8.value();
  let s9 = slider9.value();
  let s10 = slider10.value();
  let s11 = slider11.value();
  let s12 = slider12.value();
  let s13 = slider13.value();

  let show_face_guide = faceGuideCheckbox.checked();

  // use same size / y_pos for all faces
  let face_size = canvasWidth / 5;
  let face_scale = face_size / 10;
  let face_y = height / 2;
  let face_x = width / 2;

  push();
  translate(face_x, face_y);
  scale(face_scale);

  // 粉底的 大小、位置、透明度、旋转角度
  let foundation_size_1 = map(s1, 0, 100, 10, 20);
  let foundation_pos_x_1 = map(s2, 0, 100, -5, 5);
  let foundation_pos_y_1 = map(s3, 0, 100, -5, 5);
  let foundation_alphy_1 = map(s4, 0, 100, 50, 255);
  let foundation_angle_1 = map(s5, 0, 100, 0, TWO_PI);

  let foundation_size_2 = map(s6, 0, 100, 10, 20);
  let foundation_pos_x_2 = map(s7, 0, 100, -5, 5);
  let foundation_pos_y_2 = map(s8, 0, 100, -5, 5);
  let foundation_alphy_2 = map(s9, 0, 100, 50, 255);
  let foundation_angle_2 = map(s10, 0, 100, 0, TWO_PI);

  // 边角装饰的类型
  let corner_type = floor(map(s11, 0, 100, 0, 8));
  // 是否绘制项链或腮红
  let draw_neck_or_blush = floor(map(s12, 0, 100, 0, 2));
  // 嘴巴类型
  let mouth_type = floor(map(s13, 0, 100, 0, 3));

  push();
  if (mode == '1') {
    drawFace1(
      foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
      foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
      corner_type, draw_neck_or_blush, mouth_type
    );
  }

  if (mode == '2') {
    drawFace2(
      foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
      foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
      corner_type, draw_neck_or_blush, mouth_type
    );
  }

  if (mode == '3') {
    drawFace3(
      foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
      foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
      corner_type, draw_neck_or_blush, mouth_type
    );
  }

  pop();

  if (show_face_guide) {
    strokeWeight(0.1);
    rectMode(CORNER);
    noFill()
    stroke(0, 0, 255);
    // ellipse(0, 0, 20, 20);
    rect(-10, -10, 20, 20);
    line(0, -11, 0, -10);
    line(0, 10, 0, 11);
    line(-11, 0, -10, 0);
    line(11, 0, 10, 0);
  }

  pop();
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  } else if (key == '@') {
    saveBlocksImages(true);
  }
}

face_code.js

/*
 * This file should contain code that draws your faces.
 *
 * Each function takes parameters and draws a face that is within
 * the bounding box (-10, -10) to (10, 10).
 *
 * These functions are used by your final arrangement of faces as well as the face editor.
 */


function drawFace1(

  foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
  foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
  corner_type, draw_neck_or_blush, mouse_type) {


  let palette = [
    color(247, 194, 163),
    color(244, 163, 160),
    color(246, 226, 215),
    color(246, 204, 180)
  ];


  let col_1 = color(244, 163, 160, foundation_alphy_1);
  drawFoundation(
    foundation_pos_x_1, foundation_pos_y_1,
    foundation_size_1, foundation_size_1 * 1.25,
    foundation_angle_1, col_1
  );

  let col_2 = color(245, 177, 140, foundation_alphy_2);
  drawFoundation(
    foundation_pos_x_2, foundation_pos_y_2,
    foundation_size_2, foundation_size_2 * 1.25,
    foundation_angle_2, col_2
  );

  if (draw_neck_or_blush) {
    drawNecklace(color(244, 146, 147));
  } else {
    drawBlush(color(240, 159, 157));
  }

  let col_corner = palette[3];
  drawCorner(col_corner, corner_type > 3, (corner_type % 4) * HALF_PI);

  push();
  if (mouse_type !== 0) {
    translate(0, 1.5);
  }
  drawMouth(mouse_type);
  pop();


  noFill();

  beginShape();
  curveVertex(-9.440000, -4.280000);
  curveVertex(-8.600000, -5.040000);
  curveVertex(-6.360000, -5.560000);
  curveVertex(-3.800000, -5.240000);
  curveVertex(-1.880000, -3.280000);
  curveVertex(-1.600000, 1.320000);
  curveVertex(-1.639999, 6.119999);
  curveVertex(-1.639999, 7.520000);
  endShape();

  line(-1.639999, 6.119999, 0.360001, 5.880001);

  beginShape();
  curveVertex(-0.480000, -2.240000);
  curveVertex(0.120000, -4.520000);
  curveVertex(2.400000, -5.800000);
  curveVertex(4.600000, -5.680000);
  curveVertex(6.400000, -4.680000);
  curveVertex(7.760000, -2.120000);
  endShape();

  // left eye
  beginShape();
  curveVertex(-3.480000, -1.040000);
  curveVertex(-3.960000, -2.480000);
  curveVertex(-5.040000, -3.280000);
  curveVertex(-5.960000, -3.320000);
  curveVertex(-6.880000, -3.120000);
  curveVertex(-7.560000, -2.760000);
  curveVertex(-7.160000, -1.880000);
  curveVertex(-5.920000, -1.240000);
  curveVertex(-4.680000, -1.560000);
  curveVertex(-4.000000, -2.400000);
  curveVertex(-3.240000, -2.440000);
  curveVertex(0.120000, -2.960000);
  endShape();

  beginShape();
  curveVertex(-5.760000, -1.880000);
  curveVertex(-6.960000, -3.280000);
  curveVertex(-7.520000, -3.800000);
  curveVertex(-8.360000, -4.559999);
  endShape();

  beginShape();
  curveVertex(-6.000000, -2.120000);
  curveVertex(-5.960000, -3.320000);
  curveVertex(-6.040000, -3.960000);
  curveVertex(-6.320000, -4.320000);
  curveVertex(-7.520000, -5.240000);
  endShape();

  beginShape();
  curveVertex(-5.640000, -2.240000);
  curveVertex(-5.120000, -3.280000);
  curveVertex(-3.880000, -4.000000);
  curveVertex(-2.440000, -3.920000);
  endShape();

  // left pupil
  push();
  beginShape();
  curveVertex(-8.800000, -2.000000);
  curveVertex(-7.040000, -3.000000);
  curveVertex(-5.960000, -3.360000);
  curveVertex(-4.559999, -2.960000);
  curveVertex(-5.280000, -2.280000);
  curveVertex(-6.400000, -2.360000);
  curveVertex(-7.040000, -2.960000);
  curveVertex(-8.400000, -4.920000);
  endShape();


  beginShape();

  curveVertex(-7.880000, -4.480000);
  curveVertex(-6.800000, -2.900000);
  curveVertex(-6.160000, -2.540000);
  curveVertex(-5.460000, -2.700000);
  curveVertex(-4.820000, -2.720000);
  curveVertex(-5.100000, -2.960000);
  curveVertex(-5.720000, -2.800000);
  curveVertex(-6.400000, -3.020000);
  curveVertex(-5.840000, -3.080000);
  curveVertex(-5.340000, -3.040000);
  curveVertex(-6.240000, -3.220000);
  curveVertex(-5.280000, -5.100000);
  endShape();

  pop();



  // right eye
  beginShape();
  curveVertex(0.280000, -1.880000);
  curveVertex(1.240000, -3.040000);
  curveVertex(3.040000, -3.720000);
  curveVertex(5.000000, -3.000000);
  curveVertex(5.679999, -1.320001);
  endShape();


  beginShape();
  curveVertex(2.320000, -6.040000);
  curveVertex(1.000000, -3.200000);
  curveVertex(2.960000, -1.960000);
  curveVertex(5.039999, -3.240000);
  curveVertex(5.880001, -6.920000);
  endShape();

  beginShape();
  curveVertex(0.360001, -2.240000);
  curveVertex(1.300000, -1.620000);
  curveVertex(1.760000, -2.300000);
  curveVertex(1.219999, -3.580000);
  endShape();

  beginShape();
  curveVertex(3.620000, -1.000000);
  curveVertex(3.099999, -1.360000);
  curveVertex(2.940001, -2.020000);
  curveVertex(3.760000, -2.960000);
  endShape();

  beginShape();
  curveVertex(5.820000, -1.780000);
  curveVertex(4.960001, -1.680000);
  curveVertex(4.119999, -2.460000);
  curveVertex(3.639999, -2.960000);
  endShape();

  // right pupil
  beginShape();
  curveVertex(4.119999, -4.800000);
  curveVertex(3.920000, -3.420000);
  curveVertex(2.960000, -2.860000);
  curveVertex(1.879999, -3.320000);
  curveVertex(1.320000, -4.240000);
  endShape();

  beginShape();
  curveVertex(2.400000, -4.360000);
  curveVertex(1.980000, -3.340000);
  curveVertex(3.059999, -2.960000);
  curveVertex(3.639999, -3.260000);
  curveVertex(3.099999, -3.500000);
  curveVertex(2.600000, -3.440000);
  curveVertex(2.560000, -3.220000);
  curveVertex(2.880000, -3.220000);
  curveVertex(3.340000, -3.320000);
  curveVertex(3.420000, -3.580000);
  endShape();
}

function drawFace2(

  foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
  foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
  corner_type, draw_neck_or_blush, mouse_type) {


  let palette = [
    color(247, 194, 163),
    color(244, 163, 160),
    color(246, 226, 215),
    color(246, 204, 180)
  ];


  let col_1 = color(244, 163, 160, foundation_alphy_1);
  drawFoundation(
    foundation_pos_x_1, foundation_pos_y_1,
    foundation_size_1, foundation_size_1 * 1.25,
    foundation_angle_1, col_1
  );

  let col_2 = color(245, 177, 140, foundation_alphy_2);
  drawFoundation(
    foundation_pos_x_2, foundation_pos_y_2,
    foundation_size_2, foundation_size_2 * 1.25,
    foundation_angle_2, col_2
  );

  if (draw_neck_or_blush) {
    drawNecklace(color(244, 146, 147));
  } else {
    drawBlush(color(240, 159, 157));
  }

  corner_type = (corner_type + 2) % 7;
  let col_corner = palette[3];
  drawCorner(col_corner, corner_type > 3, (corner_type % 4) * HALF_PI);

  drawMouth(mouse_type);

  noFill();

  // nose
  beginShape();
  curveVertex(-3.600000, -6.360000);
  curveVertex(-2.440000, -4.960000);
  curveVertex(-3.760000, -3.440000);
  curveVertex(-5.660000, -3.520000);
  curveVertex(-6.880000, -5.080000);
  curveVertex(-5.800000, -6.840000);
  curveVertex(-3.780000, -7.480000);
  curveVertex(-2.080000, -6.920000);
  curveVertex(-0.860001, -5.140000);
  curveVertex(-0.840000, -2.480000);
  curveVertex(-2.180000, 1.420000);
  curveVertex(-3.340000, 3.500000);
  curveVertex(-3.880000, 4.040001);
  endShape();

  line(-3.340000, 3.500000, -0.200000, 3.099999);
  line(-0.200000, 3.099999, -1.360000, -0.680000);

  push();
  fill(0);
  ellipse(-6.880000, -3.220000, 0.4);
  ellipse(-5.080000, -2.720000, 0.36);
  noFill();
  ellipse(-3.200000, -3.080000, 0.44);
  pop();


  // right eye

  beginShape();
  curveVertex(1.100000, -6.760000);
  curveVertex(1.200000, -4.860000);
  curveVertex(2.940001, -3.840000);
  curveVertex(4.559999, -4.200000);
  curveVertex(5.780000, -5.700000);
  curveVertex(5.120000, -6.980000);
  endShape();

  push();
  fill(0);
  ellipse(3.580000, -2.980000, 0.42, 0.35);

  noFill();
  ellipse(1.580000, -3.260000, 0.3, 0.4);
  strokeWeight(0.25);
  ellipse(5.440001, -3.380000, 0.4);
  pop();


}

function drawFace3(
  foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
  foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
  corner_type, draw_neck_or_blush, mouth_type) {

  let palette = [
    color(247, 194, 163),
    color(244, 163, 160),
    color(246, 226, 215),
    color(246, 204, 180)
  ];


  let col_1 = color(244, 163, 160, foundation_alphy_1);
  drawFoundation(
    foundation_pos_x_1, foundation_pos_y_1,
    foundation_size_1, foundation_size_1 * 1.25,
    foundation_angle_1, col_1
  );

  let col_2 = color(245, 177, 140, foundation_alphy_2);
  drawFoundation(
    foundation_pos_x_2, foundation_pos_y_2,
    foundation_size_2, foundation_size_2 * 1.25,
    foundation_angle_2, col_2
  );

  if (draw_neck_or_blush) {
    drawNecklace(color(244, 146, 147));
  } else {
    drawBlush(color(240, 159, 157));
  }

  corner_type = (corner_type + 6) % 7;

  let col_corner = palette[3];
  drawCorner(col_corner, corner_type > 3, (corner_type % 4) * HALF_PI);

  push();
  if (mouth_type !== 2) {
    translate(1, 0);
  }
  drawMouth(mouth_type);
  pop();


  noFill();

  // nose
  beginShape();
  curveVertex(-1.460000, 0.100000);
  curveVertex(-1.219999, 2.440000);
  curveVertex(-0.120000, 2.240000);
  curveVertex(0.280000, 0.100000);
  curveVertex(-0.160000, -2.760000);
  curveVertex(0.580000, -5.780000);
  curveVertex(2.640000, -7.780000);
  curveVertex(5.000000, -7.960000);
  curveVertex(7.180000, -6.140000);
  curveVertex(7.900000, -3.840000);
  curveVertex(7.400000, -0.320000);
  curveVertex(5.500000, 3.719999);
  curveVertex(3.220000, 6.240000);
  curveVertex(0.260000, 7.219999);
  curveVertex(-2.480000, 6.380001);
  curveVertex(-4.780000, 3.760000);
  curveVertex(-5.660000, 0.180000);
  curveVertex(-5.500000, -2.059999);
  curveVertex(-4.000000, -3.740000);
  endShape();


  // left eye
  beginShape();
  curveVertex(-7.000000, -0.620000);
  curveVertex(-7.520000, -2.540000);
  curveVertex(-4.980000, -3.760000);
  curveVertex(-2.460000, -2.560000);
  curveVertex(-4.080000, -0.059999);
  endShape();

  beginShape();
  curveVertex(-6.780000, -4.720000);
  curveVertex(-7.680000, -2.560000);
  curveVertex(-5.080000, -1.280001);
  curveVertex(-2.340000, -2.440000);
  curveVertex(-2.540000, -5.080000);
  endShape();



  // tears
  push();
  fill(0);
  ellipse(-8.300000, -1.620000, 0.32);
  ellipse(-8.400000, 0.320000, 0.32, 0.44);
  strokeWeight(0.25);
  ellipse(-8.500000, 1.700000, 0.26, 0.42);
  pop();


  // left pupil
  push();
  ellipse(-4.960000, -2.460000, 1.4);

  strokeWeight(0.2);

  beginShape();
  curveVertex(-6.020000, -2.280000);
  curveVertex(-5.420000, -2.220000);
  curveVertex(-4.880000, -2.440000);
  curveVertex(-4.920000, -3.020000);
  curveVertex(-4.420000, -2.620000);
  curveVertex(-4.520000, -2.240000);
  curveVertex(-4.740000, -1.960000);
  curveVertex(-5.240000, -2.140000);
  curveVertex(-4.580000, -2.640000);
  curveVertex(-4.700000, -2.180000);
  curveVertex(-5.040000, -2.140000);
  curveVertex(-4.620000, -2.700000);
  curveVertex(-4.420000, -6.900000);
  endShape();



  pop();



  // right eye
  beginShape();
  curveVertex(1.940001, -4.880000);
  curveVertex(2.000000, -3.220000);
  curveVertex(3.940001, -2.720000);
  curveVertex(5.840000, -3.700000);
  curveVertex(4.759999, -5.020000);
  endShape();

  line(2.660000, -2.860000, 2.420000, -2.000000);
  line(3.719999, -2.720000, 3.960000, -1.940001);
  line(4.720000, -2.900000, 5.780000, -1.219999);


}

// draw foundation 
// x, y : position
// w, h : size
function drawFoundation(x, y, w, h, angle, col) {
  push();
  translate(x, y);
  rotate(angle);

  noStroke();
  fill(col);
  ellipse(0, 0, w, h);
  pop();
}

// draw corner decoration
// col color
// type circle or rectangle
// angle 
function drawCorner(col, type = true, angle = 0) {
  push();
  noStroke();
  fill(col);

  angleMode(RADIANS);
  rotate(angle);

  if (type) {
    beginShape();
    curveVertex(-2.200000, -9.040000);
    curveVertex(1.300000, -9.560000);
    curveVertex(3.680000, -9.240000);
    curveVertex(7.600000, -9.160000);
    curveVertex(8.600000, -9.040000);
    curveVertex(8.520000, -6.100000);
    curveVertex(8.500000, -2.860000);
    curveVertex(8.420000, -0.840000);
    curveVertex(7.879999, -2.880000);
    curveVertex(6.740000, -5.340000);
    curveVertex(5.100000, -7.280000);
    curveVertex(3.520000, -8.480000);
    curveVertex(1.240000, -9.560000);
    curveVertex(2.680000, -6.820000);
    endShape();
  } else {
    arc(-8, -8, 7, 6, PI, TWO_PI);
  }

  pop();
}

// draw necklace
// col color
function drawNecklace(col) {
  push();
  translate(0, 1.5);
  noFill();
  stroke(col);
  beginShape();
  curveVertex(6.820000, 5.800000);
  curveVertex(7.940001, 7.520000);
  curveVertex(5.580000, 9.620001);
  curveVertex(1.280001, 8.020000);
  curveVertex(-2.540000, 9.500000);
  curveVertex(-4.940000, 7.780001);
  curveVertex(-6.940000, 8.600000);
  curveVertex(-6.060000, 9.719999);
  endShape();
  pop();
}

// draw blush
// col color
function drawBlush(col) {
  push();
  stroke(250);
  strokeWeight(0.1);
  fill(col);
  ellipse(2.240000, 0.520000, 1, 2.5);
  pop();
}

//draw mouth
function drawMouth(type = 0) {
  push();
  noFill();
  strokeWeight(0.2);
  stroke(0);

  if (type === 0) {
    beginShape();
    curveVertex(-4.960000, 4.960001);
    curveVertex(-3.320000, 6.559999);
    curveVertex(-1.520000, 7.200001);
    curveVertex(0.480000, 6.959999);
    curveVertex(1.640000, 6.160000);
    curveVertex(1.920000, 7.560001);
    curveVertex(1.000000, 8.600000);
    curveVertex(-0.760000, 8.719999);
    curveVertex(-2.360000, 8.160000);
    curveVertex(-3.600000, 6.559999);
    curveVertex(-3.200000, 4.080000);
    endShape();
  } else if (type === 1) {
    rect(-4.240000, 4.880000, 6, 2.5)
  } else if (type === 2) {
    beginShape();
    curveVertex(-1.340000, 8.719999);
    curveVertex(-2.220000, 7.820000);
    curveVertex(0.000000, 5.900001);
    curveVertex(2.200001, 6.020000);
    curveVertex(3.580000, 7.940001);
    curveVertex(1.700000, 8.820000);
    endShape();

    beginShape();
    curveVertex(-2.620000, 9.559999);
    curveVertex(-2.320000, 8.099998);
    curveVertex(3.540000, 7.719999);
    curveVertex(4.220000, 9.580000);
    endShape();
  }


  pop();
}

index.html

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="face_code.js"></script>
    <script language="javascript" type="text/javascript" src="arrangement.js"></script>

    <style>
        body   { padding: 0; margin: 0; }
        .inner { position: absolute; }
        #controls {
            font: 300 12px "Helvetica Neue";
            padding: 5;
            margin: 5;
            background: #f0f0f0;
            opacity: 0.0;
            -webkit-transition: opacity 0.2s ease;
            -moz-transition: opacity 0.2s ease;
            -o-transition: opacity 0.2s ease;
            -ms-transition: opacity 0.2s ease;
        }
        #controls:hover { opacity: 0.9; }
    </style>

</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
<a href="index.html">arrangement</a>
(<a href="arrangement.js">arrangement code</a>, 
<a href="face_code.js">face code</a>)<br>
<a href="editor.html">editor</a>
(<a href="editor.js">editor code</a>, 
<a href="face_code.js">face code</a>)<br>
<a href="sketch.html">sketch</a>
        </div>
        <div class="inner" id="controls" height="500px">
            <table>
                <tr>
                    <td></td>
                    <td id="slider1Container"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="slider2Container"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="slider3Container"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="slider4Container"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="slider5Container"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="selector1Container"></td>
                </tr>
            </table>
        </div>
    </div>
</table>
</body>

preview.jpg

sketch.html

sketch.jpg

thumbnail.png

z_purview_helper.js