Jcimat13/README.md

## README.md

      
    Raw
  

              README.md
            
          
    PS2 MDDN 342 2019

FINAL VERSION
My idea originally came from taa moko, the permanent marking/scarring of the face. However, I realised that would be too difficult to show accurately and with great enough variation.
Therefore, I adapted my idea to Maaori carvings instead. Traditional carvings depicting taniwha, tiki, and tupuna were used as inspirations. I had trouble with curves and beziers, and decided to use strokeJoint to create polygons instead.
For my final version, I replaced my original face1 and replicated face3 in its place, while changing the main colours. I did this because my original idea was carving, therefore my original faces represented the wood used, however, maaori carvings can also be made out of bone. I made this ‘bone’ face a very rare occurrence because it stands out so much, especially after I changed to background colours to fit my overall design. Speaking of my background, I made it a darker, more fitting colour and my original ‘wood’ face was not legible. This was an easy fix, as I just created as slightly larger ‘bone face behind it to create a border of sorts and help give its shape back.
My variations, remain similar throughout my distributions. I have 4 variables and 3 (tilt_value, pukana_value, tongue_value) of which are specific to my idea, created and set with intent, and are shown/used in traditional art/carvings. My 4th is a scale_value that gives the layout a bit more variety and is weighted so one face shows up larger than the other and the rare 'bone' face appears smaller than the others. Pukana_value is also weighted to favour one face over the other and changes within those set min and max values.

  
## 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 = 5000;

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

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

  // rotation in degrees
  angleMode(DEGREES);
}

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

// global variables for colors
const bg_color1 = [46, 7, 3]; //179

function mouseClicked() {
  changeRandomSeed();
}

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

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

  // clear screen
  background(bg_color1);
  noStroke();

  // draw a 7x4 grid of faces
  let w = canvasWidth / 7;
  let h = canvasHeight / 4;
  for(let i=0; i<4; i++) {
    for(let j=0; j<7; j++) {
      let y = h/2 + h*i;
      let x = w/2 + w*j;


        push();
        translate(1.4*x, 2*y);
        scale(w/25, h/25);
        let tilt_value = focusedRandom(-30, 30);
        let pukana_value = focusedRandom(2, 9);
        let tongue_value = int(focusedRandom(1, 4));
        let scale_value = focusedRandom(2, 4);

        //weighted selection
        let faceSpinner = int(focusedRandom(1, 13));
          if(faceSpinner >=1 && faceSpinner <= 7) { //original
            tongue_value = 1;
            //drawFace3(tilt_value, tongue_value, pukana_value, scale_value);
          }
          else if(faceSpinner >=8 && faceSpinner <= 11){ //curved
            tongue_value = 2;
            //drawFace3(tilt_value, tongue_value, pukana_value, scale_value);
          }
          if(tongue_value == 1){
            pukana_value = focusedRandom(7, 9);
            scale_value = focusedRandom(3, 4);
            drawFace3(tilt_value, tongue_value, pukana_value, scale_value);
          }
          else if(tongue_value == 2){
            pukana_value = focusedRandom(4, 6);
            scale_value = focusedRandom(2, 3);
            drawFace3(tilt_value, tongue_value, pukana_value, scale_value);
          }
          else {
            pukana_value = focusedRandom(4, 6);
            scale_value = focusedRandom(2, 3);
            drawFace1(tilt_value, tongue_value, pukana_value, scale_value);
          }

        pop();
    }
  }
}

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

## editor.html
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.3/seedrandom.min.js"></script>
    <script src="https://d3js.org/d3-random.v1.min.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="sketch.html">sketch</a>
        </div>
        <div class="inner" id="controls" height="500px">
            <table>
                <tr>
                    <td>Setting 1</td>
                    <td id="slider1Container"></td>
                </tr>
                <tr>
                    <td>Setting 2</td>
                    <td id="slider2Container"></td>
                </tr>
                <tr>
                    <td>Setting 3</td>
                    <td id="slider3Container"></td>
                </tr>
                <tr>
                    <td>Setting 4</td>
                    <td id="slider4Container"></td>
                </tr>
                <tr>
                    <td>Setting 5</td>
                    <td id="slider5Container"></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 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);

  slider1.parent('slider1Container');
  slider2.parent('slider2Container');
  slider3.parent('slider3Container');
  slider4.parent('slider4Container');
  slider5.parent('slider5Container');

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

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

const bg_color = [179, 179, 179]; //179, 179, 179

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 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);

  push();
  if (mode == '1') {
    // draw 1st face
    let tilt_value = map(s1, 0, 100, -30, 30);
    let pukana_value = map(s2, 0, 100, 3, 6.5);
    let tongue_value = int(map(s3, 0, 100, 1, 3));
    let scale_value = map(s4, 0, 100, 1.5, 2.25);
    drawFace1(tilt_value, tongue_value, pukana_value, scale_value);
  }

  if (mode == '2') {
    // draw 2nd face
    let scale_value = map(s1, 0, 100, 2, 4);
    let tilt_value = map(s2, 0, 100, -10, 30);
    drawFace2(scale_value, tilt_value);
  }

  if (mode == '3') {
    // draw 3rd face using values mapped from 3 sliders
    let tilt_value = map(s1, 0, 100, -30, 30);
    let pukana_value = map(s2, 0, 100, 3, 6.5);
    let tongue_value = int(map(s3, 0, 100, 1, 3));
    let scale_value = map(s4, 0, 100, 1.5, 2.25);
    drawFace3(tilt_value, tongue_value, pukana_value, scale_value);
  }
  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(tilt_value, tongue_value, pukana_value, scale_value) {
  const bg_color3 = [225, 206, 187];
  const fg_color3 = [79, 27, 6];
  const fg_color4 = [48, 15, 2];
  const shadow = [209, 192, 167];
  const bone = [222, 211, 186];
  const tongue = [107, 0, 11];

  let x = scale_value; //original value 1.75
  let y = (scale_value -0.25); // -0.25
  let x2 = (scale_value +0.25); // +0.25
  let y2 = (scale_value -0.5); // -0.5

  // rotation in degrees
  angleMode(DEGREES);
  rotate(tilt_value);
  //eyes
  stroke(bone);
  strokeWeight(0.1);
  fill(bone);
    strokeJoin(MITER);
    beginShape();
      vertex(-2*x, 0); //start bottom of left eye
      vertex(-3*x, -1*y2);
      vertex(-3*x, -3*y2);
      vertex(-2*x,-4*y2);
      vertex(-1*x, -4*y2);
      vertex(0, -3*y2); //top middle
      vertex(x, -4*y2);
      vertex(2*x,-4*y2);
      vertex(3*x, -3*y2);
      vertex(3*x, -1*y2);
      vertex(2*x, 0); //bottom of right eye
      vertex(x, 0);
      vertex(0, y); //bottom of nose
      vertex(-1*x, 0);
    endShape();
  //inner eyes
  fill(shadow);
  stroke(shadow);
    strokeJoin(MITER); //left
    beginShape();
      vertex(-1*x, 0);
      vertex(-1.75*x, -0.25*y2);
      vertex(-2.5*x, -1*y2);
      vertex(-2.5*x, -3*y2);
      vertex(-2*x, -3.5*y2);
      vertex(-1*x, -3.5*y2);
      vertex(-0.5*x, -3*y2);
      vertex(-0.5*x, -1*y2);
    endShape();
    strokeJoin(MITER); //right
    beginShape();
      vertex(1*x, 0);
      vertex(1.75*x, -0.25*y2);
      vertex(2.5*x, -1*y2);
      vertex(2.5*x, -3*y2);
      vertex(2*x, -3.5*y2);
      vertex(1*x, -3.5*y2);
      vertex(0.5*x, -3*y2);
      vertex(0.5*x, -1*y2);
    endShape();
  // eyes
  fill(0);
  noStroke();
    ellipse(-1.5*x, -1.5*y, pukana_value/2, pukana_value/2); //left
    ellipse(1.5*x, -1.5*y, pukana_value/2, pukana_value/2);
  fill(bone);
    ellipse(-1.5*x, -1.5*y, 0.75, 0.75);
    ellipse(1.5*x, -1.5*y, 0.75, 0.75);

  //mouth
  stroke(bone);
  fill(bone);
    strokeJoin(MITER);
    beginShape();
      vertex(0, y); //top middle of mouth (move clockwise)
      vertex(x, 0);
      vertex(2*x2, 0);
      vertex(3*x2, y);
      vertex(3.5*x2, 2*y); //
      vertex(3*x2, 3*y);
      vertex(1.5*x2, 4.5*y); //bottom right
      vertex(0, 5*y);
      vertex(-1.5*x2, 4.5*y); //bottom left
      vertex(-3*x2, 3*y);
      vertex(-3.5*x2, 2*y); //
      vertex(-3*x2, y);
      vertex(-2*x2, 0);
      vertex(-1*x, 0);
    endShape();
  //inner mouth
  fill(shadow);
  stroke(shadow);
    strokeJoin(MITER);
    beginShape();
      vertex(0, 2*y); //top middle of inner mouth (move clockwise)
      vertex(0.75*x, 0.75*y);
      vertex(2*x, 0.5*y);
      vertex(2.75*x, 1.5*y);
      vertex(3*x, 2*y); //
      vertex(2.5*x, 3*y);
      vertex(1.5*x, 4*y); //bottom right
      vertex(0, 4.5*y);
      vertex(-1.5*x, 4*y); //bottom left
      vertex(-2.5*x, 3*y);
      vertex(-3*x, 2*y); //
      vertex(-2.75*x, 1.5*y);
      vertex(-2*x, 0.5*y);
      vertex(-0.75*x, 0.75*y);
    endShape();
  //nose
  noStroke();
    triangle(0, y, -0.25*x, 0, -0.75*x, 0.25*y); //left
    triangle(0, y, 0.25*x, 0, 0.75*x, 0.25*y); //right


  fill(tongue);
  stroke(tongue);
    strokeJoin(MITER); //original tongue
    beginShape();
      vertex(0, 2*y); //middle point - clockwise
      vertex(0.75*x, 0.75*y);
      vertex(1.375*x, 0.625*y);
      vertex(1.25*x, 2*y);
      vertex(0, 6*y); //tongue point
      vertex(-1.25*x, 2*y);
      vertex(-1.375*x, 0.625*y);
      vertex(-0.75*x, 0.75*y);
    endShape();
  //middle slit
  fill(74, 0, 8);
  stroke(74, 0, 8);
    strokeJoin(MITER);
    beginShape();
      vertex(0, 2*y);
      vertex(0.1*x, 1.85*y);
      vertex(0, 6*y);
      vertex(-0.1*x, 1.85*y);
      vertex(0, 2*y);
    endShape();


}

/*
 * thinness_value ranges from 0-100 and indicates how thin the face is
 */
function drawFace2(scale_value, tilt_value) {
  const fg_main = [4, 61, 18];
  const fg_detail = [2, 33, 10];
  const ivory = [249, 250, 217];
  let x = scale_value;

  angleMode(DEGREES);
  rotate(tilt_value);

  //head
  fill(fg_detail);
  stroke(fg_detail);
  strokeWeight(0.1);
  //background
  strokeJoin(MITER); //starts on left anti-clockwise
  beginShape();
  vertex(-4*x, 0); //change to 4 for pull
  //vertex(-2*x, x);
  vertex(-1*x, 2*x);
  vertex(x, 2*x);
  //vertex(2*x, x);
  vertex(3*x, 0);
  vertex(x, -2*x);
  vertex(-1*x, -2*x);
  vertex(-4*x, 0); //change to 4 for pull
  endShape();

  //eye
  noStroke();
  fill(209, 209, 192);
  ellipse(0, 0, 3*x, 3*x); //shadow
  fill(ivory);
  ellipse(0, 0, 2.5*x, 2.5*x);
  fill(12, 26, 15);
  ellipse(0.8*x, 0, x, x);

  //face border
  fill(fg_main);
  stroke(fg_main);
  strokeWeight(0.1);

  beginShape(); //clockwise
  vertex(3*x, 0);
  vertex(x, -2*x);
  vertex(-1*x, -2*x);
  vertex(-4*x, 0);
  vertex(-1*x, 2*x);
  vertex(x, 2*x);
  vertex(3*x, 0);
  beginContour();
  //interior anti-clockwise
  vertex(2*x, 0);
  vertex(x, x);
  vertex(-1*x, x);
  vertex(-3*x, 0);
  vertex(-1*x, -1*x);
  vertex(x, -1*x);
  vertex(2*x, 0);
  endContour();
  endShape(CLOSE);

  //mouth
  strokeJoin(MITER); //top
  beginShape();
  vertex(2*x, -0.5*x);
  vertex(3*x, -1.5*x);
  vertex(5*x, -1.5*x);
  vertex(6*x, -0.5*x); //tip
  vertex(4.5*x, -0.9*x);
  vertex(3.5*x, -0.9*x);
  vertex(2*x, 0.5*x); //swap x value between 2*x and to 3*x
  endShape();

  strokeJoin(MITER); //bottom
  beginShape();
  vertex(2*x, 0.5*x);
  vertex(3*x, 1.5*x);
  vertex(5*x, 1.5*x);
  vertex(6*x, 0.5*x); //tip
  vertex(4.5*x, 0.9*x);
  vertex(3.5*x, 0.9*x);
  vertex(2*x, -0.5*x); //swap x value between 2*x and to 3*x
  endShape();

  //details - top
  fill(ivory);
  noStroke();
  quad(0, -2*x, 0.5*x, -1.5*x, 0, -1*x, -0.5*x, -1.5*x);
  strokeWeight(0.1);
  noFill();
  stroke(fg_main);
  strokeJoin(MITER);
  beginShape();
  vertex(0, -1*x);
  vertex(-0.25*x, -1.5*x);
  vertex(0, -1.75*x);
  vertex(0.25*x, -1.5*x);
  vertex(0.05*x, -1.3*x);
  endShape();

  stroke(ivory);
  strokeJoin(MITER); //left
  beginShape();
  vertex(-0.5*x, -2*x);
  vertex(-1*x, -1.5*x);
  vertex(-0.5*x, -1*x);
  endShape();
  strokeJoin(MITER); //right
  beginShape();
  vertex(0.5*x, -2*x);
  vertex(x, -1.5*x);
  vertex(0.5*x, -1*x);
  endShape();

  //details - bottom
  fill(ivory);
  noStroke();
  quad(0, 2*x, 0.5*x, 1.5*x, 0, 1*x, -0.5*x, 1.5*x);
  strokeWeight(0.1);
  noFill();
  stroke(fg_main);
  strokeJoin(MITER);
  beginShape();
  vertex(0, 1*x);
  vertex(-0.25*x, 1.5*x);
  vertex(0, 1.75*x);
  vertex(0.25*x, 1.5*x);
  vertex(0.05*x, 1.3*x);
  endShape();

  stroke(249, 250, 217);
  strokeJoin(MITER); //left
  beginShape();
  vertex(-0.5*x, 2*x);
  vertex(-1*x, 1.5*x);
  vertex(-0.5*x, 1*x);
  endShape();
  strokeJoin(MITER); //right
  beginShape();
  vertex(0.5*x, 2*x);
  vertex(x, 1.5*x);
  vertex(0.5*x, 1*x);
  endShape();

}

/*
 * tilt_value is in degrees
 * eye_value is an integer number of eyes: either 0, 1, 2, or 3
 * mouth_value is how open the mouth is and should generally range from 0.5 to 10
 */
function drawFace3(tilt_value, tongue_value, pukana_value, scale_value) {
  const bg_color3 = [225, 206, 187];
  const fg_color3 = [79, 27, 6];
  const fg_color4 = [48, 15, 2];
  const shadow = [33, 9, 0];
  const bone = [212, 199, 180];
  const tongue = [107, 0, 11];

  let x = scale_value; //original value 1.75
  let y = (scale_value -0.25); // -0.25
  let x2 = (scale_value +0.25); // +0.25
  let y2 = (scale_value -0.5); // -0.5
  //background values
  let x3 = scale_value +0.2; //original value 2.25
  let y3 = (scale_value -0.2); // +0.25
  let x4 = (scale_value +0.45); // +0.75
  let y4 = (scale_value -0.4); //

  // rotation in degrees
  angleMode(DEGREES);
  rotate(tilt_value);
  //background taniwha
  fill(bone);
  stroke(bone);
  strokeWeight(0.1);
  strokeJoin(MITER);
    beginShape();
      vertex(-2*x3, 0); //start bottom of left eye
      vertex(-3*x3, -1*y4);
      vertex(-3*x3, -3*y4);
      vertex(-2*x3,-4*y4);
      vertex(-1*x3, -4*y4);
      vertex(0, -3*y4); //top middle
      vertex(x3, -4*y4);
      vertex(2*x3,-4*y4);
      vertex(3*x3, -3*y4);
      vertex(3*x3, -1*y4);
      vertex(2*x3, 0); //bottom of right eye
      vertex(x3, 0);
      vertex(0, y3); //bottom of nose
      vertex(-1*x3, 0);
    endShape();
    //mouth
    stroke(bone);
  fill(bone);
    strokeJoin(MITER);
    beginShape();
      vertex(0, y3); //top middle of mouth (move clockwise)
      vertex(x3, 0);
      vertex(2*x4, 0);
      vertex(3*x4, y3);
      vertex(3.5*x4, 2*y3); //
      vertex(3*x4, 3*y3);
      vertex(1.5*x4, 4.5*y3); //bottom right
      vertex(0, 5*y3);
      vertex(-1.5*x4, 4.5*y3); //bottom left
      vertex(-3*x4, 3*y3);
      vertex(-3.5*x4, 2*y3); //
      vertex(-3*x4, y3);
      vertex(-2*x4, 0);
      vertex(-1*x3, 0);
    endShape();

  //eyes
  stroke(fg_color3);
  strokeWeight(0.1);
  fill(fg_color3);
    strokeJoin(MITER);
    beginShape();
      vertex(-2*x, 0); //start bottom of left eye
      vertex(-3*x, -1*y2);
      vertex(-3*x, -3*y2);
      vertex(-2*x,-4*y2);
      vertex(-1*x, -4*y2);
      vertex(0, -3*y2); //top middle
      vertex(x, -4*y2);
      vertex(2*x,-4*y2);
      vertex(3*x, -3*y2);
      vertex(3*x, -1*y2);
      vertex(2*x, 0); //bottom of right eye
      vertex(x, 0);
      vertex(0, y); //bottom of nose
      vertex(-1*x, 0);
    endShape();
  //inner eyes
  fill(shadow);
  stroke(shadow);
    strokeJoin(MITER); //left
    beginShape();
      vertex(-1*x, 0);
      vertex(-1.75*x, -0.25*y2);
      vertex(-2.5*x, -1*y2);
      vertex(-2.5*x, -3*y2);
      vertex(-2*x, -3.5*y2);
      vertex(-1*x, -3.5*y2);
      vertex(-0.5*x, -3*y2);
      vertex(-0.5*x, -1*y2);
    endShape();
    strokeJoin(MITER); //right
    beginShape();
      vertex(1*x, 0);
      vertex(1.75*x, -0.25*y2);
      vertex(2.5*x, -1*y2);
      vertex(2.5*x, -3*y2);
      vertex(2*x, -3.5*y2);
      vertex(1*x, -3.5*y2);
      vertex(0.5*x, -3*y2);
      vertex(0.5*x, -1*y2);
    endShape();
  // eyes
  fill(bone);
  noStroke();
    ellipse(-1.5*x, -1.5*y, pukana_value/2, pukana_value/2); //left
    ellipse(1.5*x, -1.5*y, pukana_value/2, pukana_value/2);
  fill(0);
    ellipse(-1.5*x, -1.5*y, 1, 1);
    ellipse(1.5*x, -1.5*y, 1, 1);

  //mouth
  stroke(fg_color3);
  fill(fg_color3);
    strokeJoin(MITER);
    beginShape();
      vertex(0, y); //top middle of mouth (move clockwise)
      vertex(x, 0);
      vertex(2*x2, 0);
      vertex(3*x2, y);
      vertex(3.5*x2, 2*y); //
      vertex(3*x2, 3*y);
      vertex(1.5*x2, 4.5*y); //bottom right
      vertex(0, 5*y);
      vertex(-1.5*x2, 4.5*y); //bottom left
      vertex(-3*x2, 3*y);
      vertex(-3.5*x2, 2*y); //
      vertex(-3*x2, y);
      vertex(-2*x2, 0);
      vertex(-1*x, 0);
    endShape();
  //inner mouth
  fill(shadow);
  stroke(shadow);
    strokeJoin(MITER);
    beginShape();
      vertex(0, 2*y); //top middle of inner mouth (move clockwise)
      vertex(0.75*x, 0.75*y);
      vertex(2*x, 0.5*y);
      vertex(2.75*x, 1.5*y);
      vertex(3*x, 2*y); //
      vertex(2.5*x, 3*y);
      vertex(1.5*x, 4*y); //bottom right
      vertex(0, 4.5*y);
      vertex(-1.5*x, 4*y); //bottom left
      vertex(-2.5*x, 3*y);
      vertex(-3*x, 2*y); //
      vertex(-2.75*x, 1.5*y);
      vertex(-2*x, 0.5*y);
      vertex(-0.75*x, 0.75*y);
    endShape();
  //nose
  noStroke();
    triangle(0, y, -0.25*x, 0, -0.75*x, 0.25*y); //left
    triangle(0, y, 0.25*x, 0, 0.75*x, 0.25*y); //right

  if(tongue_value == 3){
  //teeth
  fill(bone);
  noStroke();
    triangle(1.375*x, 0.625*y, 0.75*x, 0.75*y, 1*x, 1.5*y);
    triangle(1.375*x, 0.625*y, 2*x, 0.5*y, 1.75*x, 1.5*y); //top right
    triangle(-1.375*x, 0.625*y, -2*x, 0.5*y, -1.75*x, 1.5*y) //top left
    triangle(-1.375*x, 0.625*y, -0.75*x, 0.75*y, -1*x, 1.5*y); //for curved tongue
  //bottom row
    triangle(-1.5*x, 4*y, -2.25*x, 3.3*y, -1.65*x, 2.75*y);
    triangle(-0.75*x, 4.25*y, -1.5*x, 4*y, -1.075*x, 3.25*y);
    triangle(0, 4.5*y, -0.75*x, 4.25*y, -0.375*x, 3.25*y); //middle-left
    triangle(0, 4.5*y, 0.75*x, 4.25*y, 0.375*x, 3.25*y); //middle-right
    triangle(0.75*x, 4.25*y, 1.5*x, 4*y, 1.075*x, 3.25*y);
    triangle(1.5*x, 4*y, 2.25*x, 3.3*y, 1.65*x, 2.75*y);
  }
  else if(tongue_value == 1){
  fill(tongue);
  stroke(tongue);
    strokeJoin(MITER); //original tongue
    beginShape();
      vertex(0, 2*y); //middle point - clockwise
      vertex(0.75*x, 0.75*y);
      vertex(1.375*x, 0.625*y);
      vertex(1.25*x, 2*y);
      vertex(0, 6*y); //tongue point
      vertex(-1.25*x, 2*y);
      vertex(-1.375*x, 0.625*y);
      vertex(-0.75*x, 0.75*y);
    endShape();
  //middle slit
  fill(74, 0, 8);
  stroke(74, 0, 8);
    strokeJoin(MITER);
    beginShape();
      vertex(0, 2*y);
      vertex(0.1*x, 1.85*y);
      vertex(0, 6*y);
      vertex(-0.1*x, 1.85*y);
      vertex(0, 2*y);
    endShape();
  }
  else if(tongue_value ==2){
    //teeth
  fill(bone);
  noStroke();
    triangle(1.375*x, 0.625*y, 0.75*x, 0.75*y, 1*x, 1.5*y);
    triangle(1.375*x, 0.625*y, 2*x, 0.5*y, 1.75*x, 1.5*y); //top right
    triangle(-1.375*x, 0.625*y, -2*x, 0.5*y, -1.75*x, 1.5*y) //top left
    triangle(-1.375*x, 0.625*y, -0.75*x, 0.75*y, -1*x, 1.5*y); //for curved tongue
  //bottom row
    triangle(-1.5*x, 4*y, -2.25*x, 3.3*y, -1.65*x, 2.75*y);
    triangle(-0.75*x, 4.25*y, -1.5*x, 4*y, -1.075*x, 3.25*y);
    triangle(0, 4.5*y, -0.75*x, 4.25*y, -0.375*x, 3.25*y); //middle-left
    triangle(0, 4.5*y, 0.75*x, 4.25*y, 0.375*x, 3.25*y); //middle-right
    triangle(0.75*x, 4.25*y, 1.5*x, 4*y, 1.075*x, 3.25*y);
    triangle(1.5*x, 4*y, 2.25*x, 3.3*y, 1.65*x, 2.75*y);
    //tongue
    fill(tongue);
  stroke(tongue);
    strokeJoin(MITER); //curved tongue
    beginShape();
      vertex(0, 2*y); //middle point - clockwise
      vertex(0.75*x, 0.75*y);
      vertex(1.375*x, 0.625*y);
      vertex(x, 2*y);
      vertex(0.25*x, 3*y);
      vertex(0, 4*y);
      vertex(0.5*x, 5.4*y);
      vertex(0.75*x, 5.25*y); //tip of curved tongue
      vertex(0.5*x, 5.75*y);
      vertex(-0.75*x, 4*y);
      vertex(-1*x, 2.25*y);
      vertex(-0.5*x, 1.2*y);
      vertex(0, 2*y);
    endShape();
  //middle slit
  fill(74, 0, 8);
  stroke(74, 0, 8);
    strokeJoin(MITER);
    beginShape();
      vertex(0, 2*y);
      vertex(0.75*x, 0.75*y);
      vertex(0, 2.5*y);
      vertex(-0.25*x, 4*y);
      vertex(0.5*x, 5.625*y);
      vertex(-0.45*x, 4*y);
      vertex(-0.42*x, 2.5*y);
      vertex(-0.19*x, 1.7*y);
      vertex(0, 2*y);
    endShape();
  }


}

## index.html
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.3/seedrandom.min.js"></script>
    <script src="https://d3js.org/d3-random.v1.min.js"></script>
    <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="z_focused_random.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="editor.html">editor</a>
    <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

      
    Raw
  

              preview.jpg
            
          
## purview.json
{
  "commits": [
    {
      "sha": "4ac2fa382f6924116cafb04344795400a32f54c2",
      "name": "final_version"
    },
    {
      "sha": "4b51a4d4c61f4eea05186ec2a09184b776b16e19",
      "name": "refined_distribution"
    },
    {
      "sha": "a96ae94d81af35c6ac968546f92edbaa7697ba93",
      "name": "weighted_selection"
    },
    {
      "sha": "e641e758063f5e2a2bf4ccdc5de1243853f6cf03",
      "name": "refined_experiment"
    }
  ]
}

## sketch.html
<head>
    <style> body {padding: 0; margin: 0;} </style>
</head>
<body style="background-color:white">
<img src="sketch.jpg" width="960" height="480"/>
<p>
<a href="index.html">arrangement</a>
<a href="editor.html">editor</a>
</body>

## sketch.jpg

      
    Raw
  

              sketch.jpg
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## z_focused_random.js
function resetFocusedRandom() {
  return Math.seedrandom(arguments);
}

function focusedRandom(min, max, focus, mean) {
  // console.log("hello")
  if(max === undefined) {
    max = min;
    min = 0;
  }
  if(focus === undefined) {
    focus = 1.0;
  }
  if(mean === undefined) {
    mean = (min + max) / 2.0;
  }
  if(focus == 0) {
    return d3.randomUniform(min, max)();
  }
  else if(focus < 0) {
    focus = -1 / focus;
  }
  let sigma = (max - min) / (2 * focus);
  let val = d3.randomNormal(mean, sigma)();
  if (val >= min && val < max) {
    return val;
  }
  return d3.randomUniform(min, max)();
}

## z_purview_helper.js
// note: this file is poorly named - it can generally be ignored.

// helper functions below for supporting blocks/purview

function saveBlocksImages(doZoom) {
  if(doZoom == null) {
    doZoom = false;
  }

  // generate 960x500 preview.jpg of entire canvas
  // TODO: should this be recycled?
  var offscreenCanvas = document.createElement('canvas');
  offscreenCanvas.width = 960;
  offscreenCanvas.height = 500;
  var context = offscreenCanvas.getContext('2d');
  // background is flat white
  context.fillStyle="#FFFFFF";
  context.fillRect(0, 0, 960, 500);
  context.drawImage(this.canvas, 0, 0, 960, 500);
  // save to browser
  var downloadMime = 'image/octet-stream';
  var imageData = offscreenCanvas.toDataURL('image/jpeg');
  imageData = imageData.replace('image/jpeg', downloadMime);
  p5.prototype.downloadFile(imageData, 'preview.jpg', 'jpg');

  // generate 230x120 thumbnail.png centered on mouse
  offscreenCanvas.width = 230;
  offscreenCanvas.height = 120;

  // background is flat white
  context = offscreenCanvas.getContext('2d');
  context.fillStyle="#FFFFFF";
  context.fillRect(0, 0, 230, 120);

  if(doZoom) {
    // pixelDensity does the right thing on retina displays
    var pd = this._pixelDensity;
    var sx = pd * mouseX - pd * 230/2;
    var sy = pd * mouseY - pd * 120/2;
    var sw = pd * 230;
    var sh = pd * 120;
    // bounds checking - just displace if necessary
    if (sx < 0) {
      sx = 0;
    }
    if (sx > this.canvas.width - sw) {
      sx = this.canvas.width - sw;
    }
    if (sy < 0) {
      sy = 0;
    }
    if (sy > this.canvas.height - sh) {
      sy = this.canvas.height - sh;
    }
    // save to browser
    context.drawImage(this.canvas, sx, sy, sw, sh, 0, 0, 230, 120);
  }
  else {
    // now scaledown
    var full_width = this.canvas.width;
    var full_height = this.canvas.height;
    context.drawImage(this.canvas, 0, 0, full_width, full_height, 0, 0, 230, 120);
  }
  imageData = offscreenCanvas.toDataURL('image/png');
  imageData = imageData.replace('image/png', downloadMime);
  // call this function after 1 second
  setTimeout(function(){
    p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
  }, 1000);
}
	/*
	* This program draws your arrangement of faces on the canvas.
	*/

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

	let lastSwapTime = 0;
	const millisPerSwap = 5000;

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

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

	// rotation in degrees
	angleMode(DEGREES);
	}

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

	// global variables for colors
	const bg_color1 = [46, 7, 3]; //179

	function mouseClicked() {
	changeRandomSeed();
	}

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

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

	// clear screen
	background(bg_color1);
	noStroke();

	// draw a 7x4 grid of faces
	let w = canvasWidth / 7;
	let h = canvasHeight / 4;
	for(let i=0; i<4; i++) {
	for(let j=0; j<7; j++) {
	let y = h/2 + h*i;
	let x = w/2 + w*j;


	push();
	translate(1.4x, 2y);
	scale(w/25, h/25);
	let tilt_value = focusedRandom(-30, 30);
	let pukana_value = focusedRandom(2, 9);
	let tongue_value = int(focusedRandom(1, 4));
	let scale_value = focusedRandom(2, 4);

	//weighted selection
	let faceSpinner = int(focusedRandom(1, 13));
	if(faceSpinner >=1 && faceSpinner <= 7) { //original
	tongue_value = 1;
	//drawFace3(tilt_value, tongue_value, pukana_value, scale_value);
	}
	else if(faceSpinner >=8 && faceSpinner <= 11){ //curved
	tongue_value = 2;
	//drawFace3(tilt_value, tongue_value, pukana_value, scale_value);
	}
	if(tongue_value == 1){
	pukana_value = focusedRandom(7, 9);
	scale_value = focusedRandom(3, 4);
	drawFace3(tilt_value, tongue_value, pukana_value, scale_value);
	}
	else if(tongue_value == 2){
	pukana_value = focusedRandom(4, 6);
	scale_value = focusedRandom(2, 3);
	drawFace3(tilt_value, tongue_value, pukana_value, scale_value);
	}
	else {
	pukana_value = focusedRandom(4, 6);
	scale_value = focusedRandom(2, 3);
	drawFace1(tilt_value, tongue_value, pukana_value, scale_value);
	}

	pop();
	}
	}
	}

	function keyTyped() {
	if (key == '!') {
	saveBlocksImages();
	}
	else if (key == '@') {
	saveBlocksImages(true);
	}
	}
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.3/seedrandom.min.js"></script>
	<script src="https://d3js.org/d3-random.v1.min.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="sketch.html">sketch</a>
	</div>
	<div class="inner" id="controls" height="500px">
	<table>
	<tr>
	<td>Setting 1</td>
	<td id="slider1Container"></td>
	</tr>
	<tr>
	<td>Setting 2</td>
	<td id="slider2Container"></td>
	</tr>
	<tr>
	<td>Setting 3</td>
	<td id="slider3Container"></td>
	</tr>
	<tr>
	<td>Setting 4</td>
	<td id="slider4Container"></td>
	</tr>
	<tr>
	<td>Setting 5</td>
	<td id="slider5Container"></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>
	/*
	* This editor shows the possible faces that can be created
	*/

	const canvasWidth = 960;
	const canvasHeight = 500;
	let slider1, slider2, slider3, slider4, slider5;
	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);

	slider1.parent('slider1Container');
	slider2.parent('slider2Container');
	slider3.parent('slider3Container');
	slider4.parent('slider4Container');
	slider5.parent('slider5Container');

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

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

	const bg_color = [179, 179, 179]; //179, 179, 179

	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 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);

	push();
	if (mode == '1') {
	// draw 1st face
	let tilt_value = map(s1, 0, 100, -30, 30);
	let pukana_value = map(s2, 0, 100, 3, 6.5);
	let tongue_value = int(map(s3, 0, 100, 1, 3));
	let scale_value = map(s4, 0, 100, 1.5, 2.25);
	drawFace1(tilt_value, tongue_value, pukana_value, scale_value);
	}

	if (mode == '2') {
	// draw 2nd face
	let scale_value = map(s1, 0, 100, 2, 4);
	let tilt_value = map(s2, 0, 100, -10, 30);
	drawFace2(scale_value, tilt_value);
	}

	if (mode == '3') {
	// draw 3rd face using values mapped from 3 sliders
	let tilt_value = map(s1, 0, 100, -30, 30);
	let pukana_value = map(s2, 0, 100, 3, 6.5);
	let tongue_value = int(map(s3, 0, 100, 1, 3));
	let scale_value = map(s4, 0, 100, 1.5, 2.25);
	drawFace3(tilt_value, tongue_value, pukana_value, scale_value);
	}
	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);
	}
	}
	/*
	* 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(tilt_value, tongue_value, pukana_value, scale_value) {
	const bg_color3 = [225, 206, 187];
	const fg_color3 = [79, 27, 6];
	const fg_color4 = [48, 15, 2];
	const shadow = [209, 192, 167];
	const bone = [222, 211, 186];
	const tongue = [107, 0, 11];

	let x = scale_value; //original value 1.75
	let y = (scale_value -0.25); // -0.25
	let x2 = (scale_value +0.25); // +0.25
	let y2 = (scale_value -0.5); // -0.5

	// rotation in degrees
	angleMode(DEGREES);
	rotate(tilt_value);
	//eyes
	stroke(bone);
	strokeWeight(0.1);
	fill(bone);
	strokeJoin(MITER);
	beginShape();
	vertex(-2*x, 0); //start bottom of left eye
	vertex(-3x, -1y2);
	vertex(-3x, -3y2);
	vertex(-2x,-4y2);
	vertex(-1x, -4y2);
	vertex(0, -3*y2); //top middle
	vertex(x, -4*y2);
	vertex(2x,-4y2);
	vertex(3x, -3y2);
	vertex(3x, -1y2);
	vertex(2*x, 0); //bottom of right eye
	vertex(x, 0);
	vertex(0, y); //bottom of nose
	vertex(-1*x, 0);
	endShape();
	//inner eyes
	fill(shadow);
	stroke(shadow);
	strokeJoin(MITER); //left
	beginShape();
	vertex(-1*x, 0);
	vertex(-1.75x, -0.25y2);
	vertex(-2.5x, -1y2);
	vertex(-2.5x, -3y2);
	vertex(-2x, -3.5y2);
	vertex(-1x, -3.5y2);
	vertex(-0.5x, -3y2);
	vertex(-0.5x, -1y2);
	endShape();
	strokeJoin(MITER); //right
	beginShape();
	vertex(1*x, 0);
	vertex(1.75x, -0.25y2);
	vertex(2.5x, -1y2);
	vertex(2.5x, -3y2);
	vertex(2x, -3.5y2);
	vertex(1x, -3.5y2);
	vertex(0.5x, -3y2);
	vertex(0.5x, -1y2);
	endShape();
	// eyes
	fill(0);
	noStroke();
	ellipse(-1.5x, -1.5y, pukana_value/2, pukana_value/2); //left
	ellipse(1.5x, -1.5y, pukana_value/2, pukana_value/2);
	fill(bone);
	ellipse(-1.5x, -1.5y, 0.75, 0.75);
	ellipse(1.5x, -1.5y, 0.75, 0.75);

	//mouth
	stroke(bone);
	fill(bone);
	strokeJoin(MITER);
	beginShape();
	vertex(0, y); //top middle of mouth (move clockwise)
	vertex(x, 0);
	vertex(2*x2, 0);
	vertex(3*x2, y);
	vertex(3.5x2, 2y); //
	vertex(3x2, 3y);
	vertex(1.5x2, 4.5y); //bottom right
	vertex(0, 5*y);
	vertex(-1.5x2, 4.5y); //bottom left
	vertex(-3x2, 3y);
	vertex(-3.5x2, 2y); //
	vertex(-3*x2, y);
	vertex(-2*x2, 0);
	vertex(-1*x, 0);
	endShape();
	//inner mouth
	fill(shadow);
	stroke(shadow);
	strokeJoin(MITER);
	beginShape();
	vertex(0, 2*y); //top middle of inner mouth (move clockwise)
	vertex(0.75x, 0.75y);
	vertex(2x, 0.5y);
	vertex(2.75x, 1.5y);
	vertex(3x, 2y); //
	vertex(2.5x, 3y);
	vertex(1.5x, 4y); //bottom right
	vertex(0, 4.5*y);
	vertex(-1.5x, 4y); //bottom left
	vertex(-2.5x, 3y);
	vertex(-3x, 2y); //
	vertex(-2.75x, 1.5y);
	vertex(-2x, 0.5y);
	vertex(-0.75x, 0.75y);
	endShape();
	//nose
	noStroke();
	triangle(0, y, -0.25x, 0, -0.75x, 0.25*y); //left
	triangle(0, y, 0.25x, 0, 0.75x, 0.25*y); //right



	fill(tongue);
	stroke(tongue);
	strokeJoin(MITER); //original tongue
	beginShape();
	vertex(0, 2*y); //middle point - clockwise
	vertex(0.75x, 0.75y);
	vertex(1.375x, 0.625y);
	vertex(1.25x, 2y);
	vertex(0, 6*y); //tongue point
	vertex(-1.25x, 2y);
	vertex(-1.375x, 0.625y);
	vertex(-0.75x, 0.75y);
	endShape();
	//middle slit
	fill(74, 0, 8);
	stroke(74, 0, 8);
	strokeJoin(MITER);
	beginShape();
	vertex(0, 2*y);
	vertex(0.1x, 1.85y);
	vertex(0, 6*y);
	vertex(-0.1x, 1.85y);
	vertex(0, 2*y);
	endShape();




	}

	/*
	* thinness_value ranges from 0-100 and indicates how thin the face is
	*/
	function drawFace2(scale_value, tilt_value) {
	const fg_main = [4, 61, 18];
	const fg_detail = [2, 33, 10];
	const ivory = [249, 250, 217];
	let x = scale_value;

	angleMode(DEGREES);
	rotate(tilt_value);

	//head
	fill(fg_detail);
	stroke(fg_detail);
	strokeWeight(0.1);
	//background
	strokeJoin(MITER); //starts on left anti-clockwise
	beginShape();
	vertex(-4*x, 0); //change to 4 for pull
	//vertex(-2*x, x);
	vertex(-1x, 2x);
	vertex(x, 2*x);
	//vertex(2*x, x);
	vertex(3*x, 0);
	vertex(x, -2*x);
	vertex(-1x, -2x);
	vertex(-4*x, 0); //change to 4 for pull
	endShape();

	//eye
	noStroke();
	fill(209, 209, 192);
	ellipse(0, 0, 3x, 3x); //shadow
	fill(ivory);
	ellipse(0, 0, 2.5x, 2.5x);
	fill(12, 26, 15);
	ellipse(0.8*x, 0, x, x);

	//face border
	fill(fg_main);
	stroke(fg_main);
	strokeWeight(0.1);

	beginShape(); //clockwise
	vertex(3*x, 0);
	vertex(x, -2*x);
	vertex(-1x, -2x);
	vertex(-4*x, 0);
	vertex(-1x, 2x);
	vertex(x, 2*x);
	vertex(3*x, 0);
	beginContour();
	//interior anti-clockwise
	vertex(2*x, 0);
	vertex(x, x);
	vertex(-1*x, x);
	vertex(-3*x, 0);
	vertex(-1x, -1x);
	vertex(x, -1*x);
	vertex(2*x, 0);
	endContour();
	endShape(CLOSE);

	//mouth
	strokeJoin(MITER); //top
	beginShape();
	vertex(2x, -0.5x);
	vertex(3x, -1.5x);
	vertex(5x, -1.5x);
	vertex(6x, -0.5x); //tip
	vertex(4.5x, -0.9x);
	vertex(3.5x, -0.9x);
	vertex(2x, 0.5x); //swap x value between 2x and to 3x
	endShape();

	strokeJoin(MITER); //bottom
	beginShape();
	vertex(2x, 0.5x);
	vertex(3x, 1.5x);
	vertex(5x, 1.5x);
	vertex(6x, 0.5x); //tip
	vertex(4.5x, 0.9x);
	vertex(3.5x, 0.9x);
	vertex(2x, -0.5x); //swap x value between 2x and to 3x
	endShape();

	//details - top
	fill(ivory);
	noStroke();
	quad(0, -2x, 0.5x, -1.5x, 0, -1x, -0.5x, -1.5x);
	strokeWeight(0.1);
	noFill();
	stroke(fg_main);
	strokeJoin(MITER);
	beginShape();
	vertex(0, -1*x);
	vertex(-0.25x, -1.5x);
	vertex(0, -1.75*x);
	vertex(0.25x, -1.5x);
	vertex(0.05x, -1.3x);
	endShape();

	stroke(ivory);
	strokeJoin(MITER); //left
	beginShape();
	vertex(-0.5x, -2x);
	vertex(-1x, -1.5x);
	vertex(-0.5x, -1x);
	endShape();
	strokeJoin(MITER); //right
	beginShape();
	vertex(0.5x, -2x);
	vertex(x, -1.5*x);
	vertex(0.5x, -1x);
	endShape();

	//details - bottom
	fill(ivory);
	noStroke();
	quad(0, 2x, 0.5x, 1.5x, 0, 1x, -0.5x, 1.5x);
	strokeWeight(0.1);
	noFill();
	stroke(fg_main);
	strokeJoin(MITER);
	beginShape();
	vertex(0, 1*x);
	vertex(-0.25x, 1.5x);
	vertex(0, 1.75*x);
	vertex(0.25x, 1.5x);
	vertex(0.05x, 1.3x);
	endShape();

	stroke(249, 250, 217);
	strokeJoin(MITER); //left
	beginShape();
	vertex(-0.5x, 2x);
	vertex(-1x, 1.5x);
	vertex(-0.5x, 1x);
	endShape();
	strokeJoin(MITER); //right
	beginShape();
	vertex(0.5x, 2x);
	vertex(x, 1.5*x);
	vertex(0.5x, 1x);
	endShape();

	}

	/*
	* tilt_value is in degrees
	* eye_value is an integer number of eyes: either 0, 1, 2, or 3
	* mouth_value is how open the mouth is and should generally range from 0.5 to 10
	*/
	function drawFace3(tilt_value, tongue_value, pukana_value, scale_value) {
	const bg_color3 = [225, 206, 187];
	const fg_color3 = [79, 27, 6];
	const fg_color4 = [48, 15, 2];
	const shadow = [33, 9, 0];
	const bone = [212, 199, 180];
	const tongue = [107, 0, 11];

	let x = scale_value; //original value 1.75
	let y = (scale_value -0.25); // -0.25
	let x2 = (scale_value +0.25); // +0.25
	let y2 = (scale_value -0.5); // -0.5
	//background values
	let x3 = scale_value +0.2; //original value 2.25
	let y3 = (scale_value -0.2); // +0.25
	let x4 = (scale_value +0.45); // +0.75
	let y4 = (scale_value -0.4); //

	// rotation in degrees
	angleMode(DEGREES);
	rotate(tilt_value);
	//background taniwha
	fill(bone);
	stroke(bone);
	strokeWeight(0.1);
	strokeJoin(MITER);
	beginShape();
	vertex(-2*x3, 0); //start bottom of left eye
	vertex(-3x3, -1y4);
	vertex(-3x3, -3y4);
	vertex(-2x3,-4y4);
	vertex(-1x3, -4y4);
	vertex(0, -3*y4); //top middle
	vertex(x3, -4*y4);
	vertex(2x3,-4y4);
	vertex(3x3, -3y4);
	vertex(3x3, -1y4);
	vertex(2*x3, 0); //bottom of right eye
	vertex(x3, 0);
	vertex(0, y3); //bottom of nose
	vertex(-1*x3, 0);
	endShape();
	//mouth
	stroke(bone);
	fill(bone);
	strokeJoin(MITER);
	beginShape();
	vertex(0, y3); //top middle of mouth (move clockwise)
	vertex(x3, 0);
	vertex(2*x4, 0);
	vertex(3*x4, y3);
	vertex(3.5x4, 2y3); //
	vertex(3x4, 3y3);
	vertex(1.5x4, 4.5y3); //bottom right
	vertex(0, 5*y3);
	vertex(-1.5x4, 4.5y3); //bottom left
	vertex(-3x4, 3y3);
	vertex(-3.5x4, 2y3); //
	vertex(-3*x4, y3);
	vertex(-2*x4, 0);
	vertex(-1*x3, 0);
	endShape();

	//eyes
	stroke(fg_color3);
	strokeWeight(0.1);
	fill(fg_color3);
	strokeJoin(MITER);
	beginShape();
	vertex(-2*x, 0); //start bottom of left eye
	vertex(-3x, -1y2);
	vertex(-3x, -3y2);
	vertex(-2x,-4y2);
	vertex(-1x, -4y2);
	vertex(0, -3*y2); //top middle
	vertex(x, -4*y2);
	vertex(2x,-4y2);
	vertex(3x, -3y2);
	vertex(3x, -1y2);
	vertex(2*x, 0); //bottom of right eye
	vertex(x, 0);
	vertex(0, y); //bottom of nose
	vertex(-1*x, 0);
	endShape();
	//inner eyes
	fill(shadow);
	stroke(shadow);
	strokeJoin(MITER); //left
	beginShape();
	vertex(-1*x, 0);
	vertex(-1.75x, -0.25y2);
	vertex(-2.5x, -1y2);
	vertex(-2.5x, -3y2);
	vertex(-2x, -3.5y2);
	vertex(-1x, -3.5y2);
	vertex(-0.5x, -3y2);
	vertex(-0.5x, -1y2);
	endShape();
	strokeJoin(MITER); //right
	beginShape();
	vertex(1*x, 0);
	vertex(1.75x, -0.25y2);
	vertex(2.5x, -1y2);
	vertex(2.5x, -3y2);
	vertex(2x, -3.5y2);
	vertex(1x, -3.5y2);
	vertex(0.5x, -3y2);
	vertex(0.5x, -1y2);
	endShape();
	// eyes
	fill(bone);
	noStroke();
	ellipse(-1.5x, -1.5y, pukana_value/2, pukana_value/2); //left
	ellipse(1.5x, -1.5y, pukana_value/2, pukana_value/2);
	fill(0);
	ellipse(-1.5x, -1.5y, 1, 1);
	ellipse(1.5x, -1.5y, 1, 1);

	//mouth
	stroke(fg_color3);
	fill(fg_color3);
	strokeJoin(MITER);
	beginShape();
	vertex(0, y); //top middle of mouth (move clockwise)
	vertex(x, 0);
	vertex(2*x2, 0);
	vertex(3*x2, y);
	vertex(3.5x2, 2y); //
	vertex(3x2, 3y);
	vertex(1.5x2, 4.5y); //bottom right
	vertex(0, 5*y);
	vertex(-1.5x2, 4.5y); //bottom left
	vertex(-3x2, 3y);
	vertex(-3.5x2, 2y); //
	vertex(-3*x2, y);
	vertex(-2*x2, 0);
	vertex(-1*x, 0);
	endShape();
	//inner mouth
	fill(shadow);
	stroke(shadow);
	strokeJoin(MITER);
	beginShape();
	vertex(0, 2*y); //top middle of inner mouth (move clockwise)
	vertex(0.75x, 0.75y);
	vertex(2x, 0.5y);
	vertex(2.75x, 1.5y);
	vertex(3x, 2y); //
	vertex(2.5x, 3y);
	vertex(1.5x, 4y); //bottom right
	vertex(0, 4.5*y);
	vertex(-1.5x, 4y); //bottom left
	vertex(-2.5x, 3y);
	vertex(-3x, 2y); //
	vertex(-2.75x, 1.5y);
	vertex(-2x, 0.5y);
	vertex(-0.75x, 0.75y);
	endShape();
	//nose
	noStroke();
	triangle(0, y, -0.25x, 0, -0.75x, 0.25*y); //left
	triangle(0, y, 0.25x, 0, 0.75x, 0.25*y); //right

	if(tongue_value == 3){
	//teeth
	fill(bone);
	noStroke();
	triangle(1.375x, 0.625y, 0.75x, 0.75y, 1x, 1.5y);
	triangle(1.375x, 0.625y, 2x, 0.5y, 1.75x, 1.5y); //top right
	triangle(-1.375x, 0.625y, -2x, 0.5y, -1.75x, 1.5y) //top left
	triangle(-1.375x, 0.625y, -0.75x, 0.75y, -1x, 1.5y); //for curved tongue
	//bottom row
	triangle(-1.5x, 4y, -2.25x, 3.3y, -1.65x, 2.75y);
	triangle(-0.75x, 4.25y, -1.5x, 4y, -1.075x, 3.25y);
	triangle(0, 4.5y, -0.75x, 4.25y, -0.375x, 3.25*y); //middle-left
	triangle(0, 4.5y, 0.75x, 4.25y, 0.375x, 3.25*y); //middle-right
	triangle(0.75x, 4.25y, 1.5x, 4y, 1.075x, 3.25y);
	triangle(1.5x, 4y, 2.25x, 3.3y, 1.65x, 2.75y);
	}
	else if(tongue_value == 1){
	fill(tongue);
	stroke(tongue);
	strokeJoin(MITER); //original tongue
	beginShape();
	vertex(0, 2*y); //middle point - clockwise
	vertex(0.75x, 0.75y);
	vertex(1.375x, 0.625y);
	vertex(1.25x, 2y);
	vertex(0, 6*y); //tongue point
	vertex(-1.25x, 2y);
	vertex(-1.375x, 0.625y);
	vertex(-0.75x, 0.75y);
	endShape();
	//middle slit
	fill(74, 0, 8);
	stroke(74, 0, 8);
	strokeJoin(MITER);
	beginShape();
	vertex(0, 2*y);
	vertex(0.1x, 1.85y);
	vertex(0, 6*y);
	vertex(-0.1x, 1.85y);
	vertex(0, 2*y);
	endShape();
	}
	else if(tongue_value ==2){
	//teeth
	fill(bone);
	noStroke();
	triangle(1.375x, 0.625y, 0.75x, 0.75y, 1x, 1.5y);
	triangle(1.375x, 0.625y, 2x, 0.5y, 1.75x, 1.5y); //top right
	triangle(-1.375x, 0.625y, -2x, 0.5y, -1.75x, 1.5y) //top left
	triangle(-1.375x, 0.625y, -0.75x, 0.75y, -1x, 1.5y); //for curved tongue
	//bottom row
	triangle(-1.5x, 4y, -2.25x, 3.3y, -1.65x, 2.75y);
	triangle(-0.75x, 4.25y, -1.5x, 4y, -1.075x, 3.25y);
	triangle(0, 4.5y, -0.75x, 4.25y, -0.375x, 3.25*y); //middle-left
	triangle(0, 4.5y, 0.75x, 4.25y, 0.375x, 3.25*y); //middle-right
	triangle(0.75x, 4.25y, 1.5x, 4y, 1.075x, 3.25y);
	triangle(1.5x, 4y, 2.25x, 3.3y, 1.65x, 2.75y);
	//tongue
	fill(tongue);
	stroke(tongue);
	strokeJoin(MITER); //curved tongue
	beginShape();
	vertex(0, 2*y); //middle point - clockwise
	vertex(0.75x, 0.75y);
	vertex(1.375x, 0.625y);
	vertex(x, 2*y);
	vertex(0.25x, 3y);
	vertex(0, 4*y);
	vertex(0.5x, 5.4y);
	vertex(0.75x, 5.25y); //tip of curved tongue
	vertex(0.5x, 5.75y);
	vertex(-0.75x, 4y);
	vertex(-1x, 2.25y);
	vertex(-0.5x, 1.2y);
	vertex(0, 2*y);
	endShape();
	//middle slit
	fill(74, 0, 8);
	stroke(74, 0, 8);
	strokeJoin(MITER);
	beginShape();
	vertex(0, 2*y);
	vertex(0.75x, 0.75y);
	vertex(0, 2.5*y);
	vertex(-0.25x, 4y);
	vertex(0.5x, 5.625y);
	vertex(-0.45x, 4y);
	vertex(-0.42x, 2.5y);
	vertex(-0.19x, 1.7y);
	vertex(0, 2*y);
	endShape();
	}


	}
	{
	"commits": [
	{
	"sha": "4ac2fa382f6924116cafb04344795400a32f54c2",
	"name": "final_version"
	},
	{
	"sha": "4b51a4d4c61f4eea05186ec2a09184b776b16e19",
	"name": "refined_distribution"
	},
	{
	"sha": "a96ae94d81af35c6ac968546f92edbaa7697ba93",
	"name": "weighted_selection"
	},
	{
	"sha": "e641e758063f5e2a2bf4ccdc5de1243853f6cf03",
	"name": "refined_experiment"
	}
	]
	}
	<head>
	<style> body {padding: 0; margin: 0;} </style>
	</head>
	<body style="background-color:white">
	<img src="sketch.jpg" width="960" height="480"/>
	<p>
	<a href="index.html">arrangement</a>
	<a href="editor.html">editor</a>
	</body>
	function resetFocusedRandom() {
	return Math.seedrandom(arguments);
	}

	function focusedRandom(min, max, focus, mean) {
	// console.log("hello")
	if(max === undefined) {
	max = min;
	min = 0;
	}
	if(focus === undefined) {
	focus = 1.0;
	}
	if(mean === undefined) {
	mean = (min + max) / 2.0;
	}
	if(focus == 0) {
	return d3.randomUniform(min, max)();
	}
	else if(focus < 0) {
	focus = -1 / focus;
	}
	let sigma = (max - min) / (2 * focus);
	let val = d3.randomNormal(mean, sigma)();
	if (val >= min && val < max) {
	return val;
	}
	return d3.randomUniform(min, max)();
	}
	// note: this file is poorly named - it can generally be ignored.

	// helper functions below for supporting blocks/purview

	function saveBlocksImages(doZoom) {
	if(doZoom == null) {
	doZoom = false;
	}

	// generate 960x500 preview.jpg of entire canvas
	// TODO: should this be recycled?
	var offscreenCanvas = document.createElement('canvas');
	offscreenCanvas.width = 960;
	offscreenCanvas.height = 500;
	var context = offscreenCanvas.getContext('2d');
	// background is flat white
	context.fillStyle="#FFFFFF";
	context.fillRect(0, 0, 960, 500);
	context.drawImage(this.canvas, 0, 0, 960, 500);
	// save to browser
	var downloadMime = 'image/octet-stream';
	var imageData = offscreenCanvas.toDataURL('image/jpeg');
	imageData = imageData.replace('image/jpeg', downloadMime);
	p5.prototype.downloadFile(imageData, 'preview.jpg', 'jpg');

	// generate 230x120 thumbnail.png centered on mouse
	offscreenCanvas.width = 230;
	offscreenCanvas.height = 120;

	// background is flat white
	context = offscreenCanvas.getContext('2d');
	context.fillStyle="#FFFFFF";
	context.fillRect(0, 0, 230, 120);

	if(doZoom) {
	// pixelDensity does the right thing on retina displays
	var pd = this._pixelDensity;
	var sx = pd * mouseX - pd * 230/2;
	var sy = pd * mouseY - pd * 120/2;
	var sw = pd * 230;
	var sh = pd * 120;
	// bounds checking - just displace if necessary
	if (sx < 0) {
	sx = 0;
	}
	if (sx > this.canvas.width - sw) {
	sx = this.canvas.width - sw;
	}
	if (sy < 0) {
	sy = 0;
	}
	if (sy > this.canvas.height - sh) {
	sy = this.canvas.height - sh;
	}
	// save to browser
	context.drawImage(this.canvas, sx, sy, sw, sh, 0, 0, 230, 120);
	}
	else {
	// now scaledown
	var full_width = this.canvas.width;
	var full_height = this.canvas.height;
	context.drawImage(this.canvas, 0, 0, full_width, full_height, 0, 0, 230, 120);
	}
	imageData = offscreenCanvas.toDataURL('image/png');
	imageData = imageData.replace('image/png', downloadMime);
	// call this function after 1 second
	setTimeout(function(){
	p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
	}, 1000);
	}