2020 MDDN342 Assignment 2: Randomised Collections

.block

license: mit

README.md

## Final

This project draws three types of really clownish faces. Each of them has different face expression and characteristic. There are two types of face use noise line so their face outline looks like draw by hand so their face is not too stiff.

Face 1 (the long ellipse face) wears a bowler hat and a pair of a glasses. He looks like a gentleman or a teacher. His facial expression let viewers feels he is a good guy.

Parameters explaination: Face 1 has 12 parameters, and some of them could control by the same slider.

Slider 1 controls the head and the hat's size.
S2 controls cheekred location and cheek red size
S3 controls his location of Eye
S4 controls his eye size
S5 controls his intensity of smile
S6 controls how round the face is/ noise values
S7 controls face color
S8 switches his mouth type from 'O' shape to smily face.

Face 2 (the wide ellipse face) has a round face wear a kerchief and curly hair. He looks like a rapper and has a cute and speachless facial expression.

S1 controls head size
S2 none
S3 eye location & size
S4 none
S5 none
S6 Roundness of faces
S7 Face colors
S8 switch between left and right
S9 Curly hair to straight hair

Face 3 (the rectangle face) has a rectangle face with a bangs. He has a dull facial expression and I feel his facial expression is really cute. The different location/size of his eyes, eye brown, head size display various intensity of dull facial expression.

S1 control head size and mouth size. The parameters of mouth are share with the face parameters. So the shape of face and the movement is the same with face.
S2 None
S3 Changes eye location
S4 controls eye size
S5-6 None
S7 Face colors
S8-9 None
S10 eyebrown location

The color schemes uses a retro color schemes. All the colors are low saturation which made the frame looks harmonious. The warm orange/ yellow color and cold dark/light blue color create a strong comparison and rich hierarchy of color.

The composition/arrangement design. I aim to use those faces to draw a really crowd and dazzling composition by making each face partly overlay to each other to make the frame looks crowd. Each face are randomly rotate between 30 to -30 degrees and its scale randomly set up between 5 - 11. Those design makes those faces display in different scale, angle. Even they are still store in a grid composition, they still look chaotic. Althrough the frame looks chaotic but and give a rich visual expression on the frame.

In each frame, there contains an unique face that has some different that others. Go to try to find he out. I will put his features at the bottom of paragraph.


 In conclusion, the strong comparison color create a vary hierarchy of color, the crowd chaotic composition and the facial expression design make the frame are easy to catch people's eyes in a chaotic way.


 The unique face's features:
 rectangle face outline
 mouth is crooked.
 hair and eyes are rectangle
 his color only contains subtle difference.

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 = [225, 206, 187];

function mouseClicked() {
  changeRandomSeed();
}

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

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

  //draw background colors
  let backgroundColorSpinner = int(focusedRandom(1, 10));
  if(backgroundColorSpinner >= 2 && backgroundColorSpinner <= 3) {
      //background (12, 18, 26);
      background (221, 199, 145);
    }
    else if(backgroundColorSpinner >= 4 && backgroundColorSpinner <= 6) {
      background (162, 149, 133);
    }
    else if(backgroundColorSpinner == 7) {
     background (57, 79, 89);
    }
    else {
      background (198, 153, 57);
    }


  let s1, s2, s3, s4, s5, s6, s7, s8, s9, s10;
  s1 = focusedRandom(0, 100);
  s2 = focusedRandom(0, 100);
  s3 = focusedRandom(0, 100);
  s4 = focusedRandom(0, 100);
  s5 = focusedRandom(0, 100);
  s6 = focusedRandom(0, 100);
  s7 = focusedRandom(0, 100);
  s8 = focusedRandom(0, 100);
  s9 = focusedRandom(0, 100);

  //Store grid
  let gridWidth = 10;
  let gridHeight = 5;
  let w = canvasWidth / gridWidth;
  let h = canvasHeight / gridHeight;



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



         face2scale = focusedRandom (5, 11);
         facerotate = focusedRandom (-40, 40);

         push();
          translate(x, y);
          scale(face2scale);
          rotate(facerotate);

           let facetype = int (focusedRandom(1, 10));
           if (facetype >=3 && facetype <= 5){
              //Draw Face 1 (The long and round face)
             headscale = focusedRandom(0.4, 0.8); //headwidth // control by s1
             headscale1 = focusedRandom(1, 1.2); //head length // control by s1
             cheeklocation = focusedRandom(4, 6); //cheek red location // s2
             eyelocax = focusedRandom(1, 3);  //Eyes location //s3
              eyesize = focusedRandom(0.4, 1); //eyes size //s4
              mouth_value = focusedRandom(7, 12);
              a_Value = focusedRandom(0.5, 0.96); //noise value/ Roundness of face //draw face 1 outline //s6
              mouthshape = focusedRandom(1, 3);
              cheeksize = focusedRandom(1, 1.5); //change cheek red size //s2

              faceColor = focusedRandom (1, 2);  //change mouth and face color //s7
              mouthmode = focusedRandom (1, 2);
              hatwidth = focusedRandom (10, 14);
             push();
             let faceColorSpinner = int(focusedRandom(1, 5));
             if( faceColorSpinner <= 3) {
                 faceColor = 1;
                 mouthmode = 1;
               }
               else {
                 faceColor = 2;
                 mouthmode = 2;
               }

               if (headscale < 0.2) {
                 hatwidth < 12;
               }else {
                 hatwidth >12;
               }

             drawFace1(headscale, headscale1, cheeklocation, eyelocax, eyesize, mouth_value, a_Value,
             mouthshape, cheeksize, faceColor, mouthmode, hatwidth);
             pop();
           }
           else if (facetype < 3){
             //Draw face2 (The wide and round face)
             headscale = focusedRandom(0.4, 0.8);
             headscale1 = focusedRandom(0.8, 1);
             a_Value = focusedRandom(0.05, 0.96);
             faceColor = focusedRandom(1, 4);
             eyex = focusedRandom(6, 3);
             eyesize = focusedRandom(0, 3);
             eyelocation = focusedRandom(1, 2);
             curly = focusedRandom(4, 1);

             push();

             let faceColorSpinner = int(focusedRandom(1, 10));
             if(faceColorSpinner >= 2 && faceColorSpinner <= 3) {
                 faceColor = 1;
               }
               else if(faceColorSpinner >= 4 && faceColorSpinner <= 6) {
                 faceColor = 2;
               }
               else if(faceColorSpinner == 7) {
                 faceColor = 3;
               }
               else {
                 faceColor = 4;
               }
               //
               let eyelocaSpinner = int(focusedRandom(1, 5));
               if(eyelocaSpinner >= 2 && eyelocaSpinner <= 3) {
                   eyelocation = 1;
                 } else {
                   eyelocation = 2;
                 }

             drawFace2(headscale, headscale1, a_Value, faceColor, eyex, eyesize,
             eyelocation, curly);

             pop();
           } else {
             //Draw face3 (The rectangle face)
       face3x = focusedRandom(5, 8);
       face3y = focusedRandom(10, 5);
       face3xbo = focusedRandom(10, 5);
       face3ybo = focusedRandom(10, 5);
       eyebrownx = focusedRandom(3, 2);
       eyebrowny = focusedRandom(0, 5);
       eyex = focusedRandom(-5, -3);
       eyey = focusedRandom(-3, -1);
       faceColor = focusedRandom(1, 4);
       eyewidth = focusedRandom(3, 1.5);

       push();
       let faceColorSpinner = int(focusedRandom(1, 10));
       if(faceColorSpinner >= 2 && faceColorSpinner <= 3) {
           faceColor = 1;
         }
         else if(faceColorSpinner >= 4 && faceColorSpinner <= 6) {
           faceColor = 2;
         }
         else if(faceColorSpinner == 7) {
           faceColor = 3;
         }
         else {
           faceColor = 4;
         }
       drawFace3 (face3x, face3y, face3xbo, face3ybo, eyebrownx, eyebrowny,
       eyex, eyey, faceColor,eyewidth);

       pop();
           }
pop();
     }
}


    //draw the unique face, this face has some different than others 
    let face4scale;
    face4scale = focusedRandom(6, 10);
    face4x = focusedRandom(40, width-40);
    face4y = focusedRandom(10, height-20);

    translate(face4x, face4y);
    scale(face4scale);

    drawFace4(face3x, face3y, face3xbo, face3ybo, eyebrownx, eyebrowny,
eyex, eyey, faceColor, eyewidth, mouthmode);
//     quad(0, height, width, height, width, height -40, 0, height-40);
//     quad(2*(width/4), height, 3*(width/4), height, 3*(width/4)-40, height-20, 2*(width/4)+40 ,height-20 );
// ellipse(100, 100, 100);
}
//}

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

editor.html

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.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="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>Headsize</td>
                    <td id="slider1Container"></td>
                </tr>
                <tr>
                    <td>Cheekred_location</td>
                    <td id="slider2Container"></td>
                </tr>
                <tr>
                    <td>Eye_location</td>
                    <td id="slider3Container"></td>
                </tr>
                <tr>
                    <td>Eye_size</td>
                    <td id="slider4Container"></td>
                </tr>
                <tr>
                    <td> Mouth angle</td>
                    <td id="slider5Container"></td>
                </tr>
                <tr>
                    <td>Roundness of face</td>
                    <td id="slider6Container"></td>
                </tr>
                <tr>
                    <td>faceColor</td>
                    <td id="slider7Container"></td>
                </tr>
                <tr>
                    <td>Face2_facemode</td>
                    <td id="slider8Container"></td>
                </tr>
                <tr>
                    <td>Face2_hair</td>
                    <td id="slider9Container"></td>
                </tr>
                <tr>
                    <td>Face3_eyebrown</td>
                    <td id="slider10Container"></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 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);

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

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

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

  angleMode (DEGREES);
}

const bg_color = [225, 206, 187];

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 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 == '3') {
    //draw 1st face
    let headscale = map(s1, 0, 100, 0.6, 0.8);
    let headscale1 = map(s1, 0, 100, 1, 1.2);
    let cheeklocation = map(s2, 0, 100, 3, 5);
    let eyelocax = map(s3, 0, 100, 1, 3);
    let eyesize = map(s4, 0,100, 0.4,1);
    let mouth_value = map(s5, 0,100, 7, 12);
    let a_Value = map(s6, 0,100, 0.6, 0.95);
    let mouthshape = map(s5, 0,100, 2, 3);
    let cheeksize = map(s2, 0,100, 1, 1.5);
    let faceColor = map(s7, 0,100, 1, 2);
  let  mouthmode = map (s8, 0,100, 1, 2);
  let hatwidth = map(s1, 0, 100, 10, 14);
    drawFace1(headscale, headscale1, cheeklocation, eyelocax, eyesize, mouth_value,
      a_Value, mouthshape, cheeksize, faceColor, mouthmode, hatwidth);

  }

  if (mode == '1') {
    // draw 2nd face - let slider value 1 indicate thinness
    let faceColor = int(map(s7, 0, 100, 1, 4));
    let headscale = map(s1, 0, 100, 0.6, 0.8);
    let headscale1 = map(s1, 0, 100, 0.8, 1);
    let a_Value = map(s6, 0,100, 0.05, 0.2);
    let eyex = map (s3, 0,100, 5, 2);
    //let eyex2 = map (s3, 0,100, 9, 9.2);
    let eyesize = map(s3, 0, 100, 0, 3);
    let eyelocation = map(s8, 0, 100, 1, 2);
    let curly = map(s9, 0, 100, 4, 1);

    drawFace2(headscale, headscale1, a_Value, faceColor, eyex, eyesize, eyelocation, curly);
  }

  if (mode == '2') {
    // draw 3rd face using values mapped from 3 sliders
    // let headscale = map(s1, 0, 100, 0.6, 0.8);
    // let headscale1 = map(s1, 0, 100, 0.8, 1);
    // let a_Value = map(s6, 0,100, 0.05, 0.95);
    let face3x = map(s1, 0,100, 5, 10);
    let face3y = map(s1, 0,100, 10, 5);
    let face3xbo = map(s1, 0,100, 10, 5);
    let face3ybo = map(s1, 0,100, 10, 5);
    let eyebrownx = map(s10, 0,100, 3, 2);
    let eyebrowny = map(s10, 0,100, 0, 5);
    let eyex = map(s3, 0,100, -5, -3);
    let eyey = map(s3, 0,100, -3, 0.5);
    let faceColor = int(map(s7, 0, 100, 1, 4));
    let eyewidth = map(s4, 0,100, 3, 1.5);

    drawFace3 (face3x, face3y, face3xbo, face3ybo, eyebrownx, eyebrowny,
    eyex, eyey, faceColor, eyewidth);
  }

  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(headscale, headscale1, cheeklocation, eyelocax, eyesize, mouth_value,
  a_Value, mouthshape,cheeksize, faceColor, mouthmode, hatwidth) {

    angleMode (DEGREES);
    rectMode (CENTER);

//head shape reference (https://editor.p5js.org/zygugi/sketches/BJHK3O_yM)
//draw head
 strokeWeight(0.2);
 fill(64, 93, 132);
 var yoff = 0;
 var radius = 10;

  beginShape();
  var xoff = 0;
  const orange = color (237, 124, 64);
  const blue = color (64, 93, 132);
    if(faceColor == 1) {
      fill(blue);
    }
    else {
      fill(orange);}

  for (var a = 0; a < 360; a += a_Value) {
    var offset = map(noise(xoff, yoff), 0, 1, -2, 1);
    var r = radius + offset;
    var x = headscale*r * cos(a);
    var y = headscale1*r * sin(a);
    vertex(x, y);
    xoff += 0.01;
  }
  endShape(CLOSE);

  yoff += 0.1;

  //eye
   fill(5, 17, 38);
   ellipse(eyelocax, -3, eyesize);
   ellipse(-eyelocax, -3, eyesize);

   //glasses
   fill(5, 17, 38, 80);
   noStroke();
   square(-eyelocax, -3, -eyelocax-1 ,1.5, 1, 1, 1);
   square(eyelocax, -3, eyelocax+1 ,1.5, 1, 1, 1);
   stroke(0);
   strokeWeight(0.2);
   line(-eyelocax+1.6, -3, eyelocax - 1.6, -3);


 // cheek red
  fill(212, 118, 108);
  ellipse(-cheeklocation, 3, 3, cheeksize);
  ellipse(cheeklocation, 3, 3, cheeksize);

  //mouth
    var mouthmode;
    if (mouthmode == 1){
      //draw smile mouth shape
      beginShape();
      vertex(-mouthshape, 5);
      bezierVertex(-mouthshape, 5, 0.5, mouth_value, mouthshape, 5);
      bezierVertex(mouthshape, 5, 0.5, 9, -mouthshape, 5);
      endShape();
    } else {
      //draw 'O' shape mouth shape
      ellipse(0, 5, 1, 2);
    }


  //nose
  noStroke();
  fill(154, 72, 0);
  triangle(0, -1, -0, 2, 1, 2);

//hat
  if(faceColor == 1) {
    fill(orange);
  }
  else {
    fill(blue);}
    stroke(0);
    strokeWeight(0.15);
    arc(0, -6, hatwidth, 12, 180, 360);
    rect(0, -6, hatwidth+5, 2);


}

function drawFace2 (headscale, headscale1, a_Value, faceColor, eyex, eyesize,
eyelocation,curly) {


    //Face color
    const green = color (112, 142,125);
    const yellow = color (243, 187, 75);
    const blue = color (98, 168, 172);
    const orange = color (201, 151, 80);

    strokeWeight(0.1);

    //face colors
  if(faceColor == 1) {
    fill(yellow);
  }
  else if (faceColor==2) {
    fill(green);
  }
  else if (faceColor==3) {
    fill(orange);
  }
  else if (faceColor == 4) {
    fill(blue);
  }

  // draw head
  var yoff = 0;
  var radius = 10;

  strokeWeight(0.1);


   beginShape();
   var xoff = 0;
   for (var a = 0; a < 360; a += a_Value) {
     var offset = map(noise(xoff, yoff), 0, 1, -0.5, 1);
     var r = radius + offset;
     var y = headscale*r * sin(a);
     var x = headscale1*r * cos(a);
     vertex(x, y);
     xoff += 0.01;
   }
   endShape(CLOSE);

   yoff += 0.01;




//eyes///////////
   var eyelocation;
   if (eyelocation == 1) {  //draw left eyes, left profile

     fill(20);
     beginShape();
     var xoff = 0;

     for (var a = 0; a < 150; a += a_Value) {
       var offset = map(noise(xoff, yoff), 0, 1, -1, 1);
       var r = radius + offset;
       var y = headscale*r * sin(-a);
       var x = headscale1*r * cos(-a);
       vertex(x, y);
       xoff += 0.01;
     }
     endShape();
      yoff += 0.01;

      //facial color
        if(faceColor == 1) {
          fill(yellow);
        }
        else if (faceColor==2) {
          fill(green);
        }
        else if (faceColor==3) {
          fill(orange);
        }
        else if (faceColor == 4) {
          fill(blue);
        }

        //eyes
     arc (-eyex, -2, 3, 2, 0, 180);
     arc (-8.4, -2, eyesize, 2, 0, 110);

     fill(0);
     arc (-eyex, -2, 1.5, 1, 0, 180);
     arc (-8.4, -2, eyesize/2 ,1, 0, 110);

     //mouth
     fill(212, 113, 113);
     stroke(0);
     quad (-8, 2, -6, 2, -7, 4, -8, 4);
     noFill();
     strokeWeight(0.2);
     translate(6, 0);
     stroke(20);

     //curly hair
     translate(0, 3);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);
     rotate(-180);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);


     translate(2, 0);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);
     rotate(-180);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);
     translate(1, 0);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);
     rotate(-180);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);

     translate(3, 0);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);
     rotate(-180);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);

     translate(-2, 0);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);
     rotate(-180);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);
   }
   else if (eyelocation == 2){  //draw right profile

     fill(20);
     beginShape();
     var xoff = 0;

     for (var a = 0; a < 150; a += a_Value) {
       var offset = map(noise(xoff, yoff), 0, 1, -1, 1);
       var r = radius + offset;
       var y = (headscale)*r * sin(-a);
       var x = (-headscale1)*r * cos(a);
       vertex(x, y);
       xoff += 0.01;
     }

     endShape();

      yoff += 0.01;

      //eye color
     if(faceColor == 1) {
       fill(yellow);
     }
     else if (faceColor==2) {
       fill(green);
     }
     else if (faceColor==3) {
       fill(orange);
     }
     else if (faceColor == 4) {
       fill(blue);
     }


     //eyes
     arc (eyex, -2, 3, 2, 0, 180);
     arc (8.4, -2, eyesize, 2, 70, 180);

     fill(0);
     arc (eyex, -2, 1.5, 1, 0, 180);
     arc (8.4, -2, eyesize/2 ,1, 70, 180);

     //Mouth
     fill(212, 113, 113);
     quad (8, 2, 6, 2, 7, 4, 8, 4)


     //curly hair
     noFill();
     strokeWeight(0.2);
     stroke(20);

     translate(0, 3);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);
     rotate(-180);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);


     translate(2, 0);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);
     rotate(-180);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);
     translate(1, 0);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);
     rotate(-180);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);

     translate(3, 0);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);
     rotate(-180);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);

     translate(-2, 0);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);
     rotate(-180);
     bezier(-0, 0, -curly, 1, curly, 3, -1, 5);


   }

}

function drawFace3 (face3x, face3y, face3xbo, face3ybo, eyebrownx, eyebrowny,
eyex, eyey, faceColor, eyewidth) {
  rectMode(RADIUS);
  strokeWeight(0.2);

  //face colors
       const darkgreen = color (22, 37, 47);
       const green = color (54, 79, 88);
       const yellow = color (216, 163, 62);
       const dark_blue = color (47, 51, 42);

       strokeWeight(0.1);


     if(faceColor == 1) {
       fill(yellow);
     }
     else if (faceColor==2) {
       fill(darkgreen);
     }
     else if (faceColor==3) {
       fill(green);
     }
     else if (faceColor == 4) {
       fill(dark_blue);
     }


  //head
    quad(-face3x, -face3y, face3x, -face3y, face3xbo, face3ybo, -face3xbo, face3ybo);

    fill(10);
 //eyebrown
    stroke(0);
    fill(12, 18, 26);
    push();
    translate(eyebrownx, eyebrowny);
    quad(-8, -7, -5, -7, -5, -8, -10, -8);
    pop();

    push();
    translate(-eyebrownx, eyebrowny)
    quad(8, -7, 5, -7, 5, -8, 10, -8);
    pop();

    //mouth
    fill(57, 19, 25);
    push();
    strokeWeight(0.5);
    translate(0, 2);
    scale(0.1);
    quad(-face3x, -face3y+5, face3x, -face3y+5, face3xbo, face3ybo-5, -face3xbo, face3ybo-5);
    pop();

    //eye
    ellipse(eyex, eyey, eyewidth, 0.7);
    ellipse(-eyex, eyey, eyewidth, 0.7);
    //Pupil
    fill(0);
    ellipse(eyex, eyey, eyewidth-1 ,0.7);
    ellipse(-eyex, eyey, eyewidth-1 ,0.7);

    //hair
    quad(-4, -face3y, 4, -face3y, 3, -face3y + 1.5, -3, -face3y + 1.5);
    stroke(20);
    quad(-3, -face3y, 3, -face3y, 2, -face3y + 1.5, -2, -face3y + 1.5);
    quad(-2, -face3y, 2, -face3y, 1, -face3y + 1.5, -1, -face3y + 1.5);
    quad(-1, -face3y, 1, -face3y, 0, -face3y + 1.5, -0, -face3y + 1.5);
    stroke(0);
    noFill();
    quad(-4, -face3y, 4, -face3y, 3, -face3y + 1.5, -3, -face3y + 1.5);

}

function drawFace4 (face3x, face3y, face3xbo, face3ybo, eyebrownx, eyebrowny,
eyex, eyey, faceColor, eyewidth) {

  rectMode(RADIUS);
  strokeWeight(0.2);

      //face colors
       const darkgreen = color (38, 46, 31);
       const blue = color (71, 96, 103);
       const yellow = color (229, 197, 113);
       const dark_blue = color (38, 73, 92);

       strokeWeight(0.1);
       //face color
     if(faceColor == 1) {
       fill(yellow);
     }
     else if (faceColor==2) {
       fill(darkgreen);
     }
     else if (faceColor==3) {
       fill(blue);
     }
     else if (faceColor == 4) {
       fill(dark_blue);
     }



     rotate(facerotate); //rotate head from 30 to -30 degrees
  //head
    quad(-face3x, -face3y, face3x, -face3y, face3xbo, face3ybo, -face3xbo, face3ybo);
    //eyebrown
    fill(10);
    stroke(0);
    fill(12, 18, 26);
    push();
    translate(eyebrownx, eyebrowny);
    quad(-8, -7, -5, -7, -5, -8, -10, -8);
    pop();

    push();
    translate(-eyebrownx, eyebrowny);
    quad(8, -7, 5, -7, 5, -8, 10, -8);
    pop();



    //mouth
    fill(57, 19, 25);
    push();
    strokeWeight(0.5);
    translate(-1, 2);
    scale(0.1);
    rotate(30);
    quad(-face3x, -face3y+5, face3x+2, -face3y+5, face3xbo+2, face3ybo-5, -face3xbo, face3ybo-3);
    pop();

    //eye
    rect(eyex, eyey, eyewidth-0.8, 0);
    rect(-eyex, eyey, eyewidth-0.8, 0);
    //Pupil
    fill(0);
    rect(eyex, eyey-0.5, eyewidth-1 ,0.2);
    rect(-eyex, eyey-0.5, eyewidth-1 ,0.3)

    //mole
    ellipse(5, 5, 0.5 ,0.5);

    //hair
    rect(0, -face3y+1, 3,1);
     stroke(20);
     rect(0, -face3y+1, 2,1);
     rect(0, -face3y+1, 1,1);
     rect(0, -face3y+1, 0,1);

}

index.html

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.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="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

purview.json

{
  "commits": [
    {
      "sha": "43fafacc36b6d8576ddb4901cdd639e200a64990",
      "name": "final_version"
    },
    {
      "sha": "a119cfd55fd88a3cd1b7ed4f8dc61034b546c66f",
      "name": "refined_distribution"
    },
    {
      "sha": "d59cad38bc697248810a7a61ba8f0e26bc19c0ca",
      "name": "weighted_selection"
    },
    {
      "sha": "f3213e6d8e1ffdd27150da4065b9228d360b4221",
      "name": "Progression 1"
    },
    {
      "sha": "f04210c39e05984acdcfc515edb31e433fdccdb6",
      "name": "Progression 2"
    },
    {
      "sha": "02da62c46fba67a80d3a851913cb68ba1e9253c8",
      "name": "Progression 3"
    },
    {
      "sha": "0cbf6b42937ca00f2c0f5728d50dcf1d079fd4d3",
      "name": "Sketch"
    }
  ]
}

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="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>
</body>

sketch.jpg

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