dribnet/.block

## .block
.

## README.md

      
    Raw
  

              README.md
            
          
    Assignment 1 Sample Code

In class demo for better drawing techniques.


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

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

  const num_across=5;
  for (let i=1; i<=num_across; i++) {
    push();
      translate(width*i/(num_across+1), height/2);
      scale(10);
      let eyeColor = random(0, 100);
      drawFace(eyeColor);
    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>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>Setting 6</td>
                    <td id="slider6Container"></td>
                </tr>
                <tr>
                    <td>Setting 7</td>
                    <td id="slider7Container"></td>
                </tr>
                <tr>
                    <td>Setting 8</td>
                    <td id="slider8Container"></td>
                </tr>
                <tr>
                    <td>Setting 9</td>
                    <td id="slider9Container"></td>
                </tr>
                <tr>
                    <td>Setting 10</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');
}

const bg_color = [125, 125, 125];

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 == '1') {
    // draw 1st face
    drawFace(s1);
  }

  if (mode == '2') {
    // draw 2nd face - let slider value 1 indicate thinness
    drawFace2(s1);
  }

  if (mode == '3') {
    // draw 3rd face using values mapped from 3 sliders
    let tilt_value = map(s1, 0, 100, -90, 90);
    let mouth_value = map(s2, 0, 100, 0.5, 10);
    let eye_value = int(map(s3, 0, 100, 1, 3));
    drawFace3(tilt_value, eye_value, mouth_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.
 */

const background_color = [125, 125, 125];

const lightBrown = [234, 215, 194];
const darkBrown = [93, 84, 77];
const midBrown = [195, 166, 136];
const lightpink = [244, 209, 209];
const offWhite = [239, 235, 229];
const offWhiteAlpha = [239, 235, 229, 100];
const offBlack = [69, 62, 57];
const offBlackAlpha = [69, 62, 57, 50];


// eyeColor goes from 0 to 100 - 100 is bright
function drawFace(eyeColor) {

    angleMode(DEGREES);

  //strokeWeight(0.1);

  //overall shadow ADDED

  fill(offBlackAlpha);
  stroke(offBlackAlpha);
  strokeWeight(0.5);
  strokeJoin(ROUND);

  push();
  translate(0.5, 0.5);
  triangle(-8, -8, -7, -2, -2, -7); //left
  triangle(8, -8, 7, -2, 2, -7);//right
  noStroke();
  ellipse(0, 0, 15)

  fill(offBlackAlpha);
  stroke(offBlackAlpha);


  for(let i = 0; i < 4; i++){
    translate(0.11, 0.1);
    triangle(-8, -8, -7, -2, -2, -7); //left
    triangle(8, -8, 7, -2, 2, -7);//right
    noStroke();
    ellipse(0, 0, 15);//head
  }
  //head
  pop();


  noFill();
  strokeJoin(ROUND);
  strokeWeight(0.1);
  fill(lightBrown);
  stroke(lightBrown);
  strokeWeight(0.7);
  triangle(-8, -8, -7, -2, -2, -7);
  fill(lightpink);
  noStroke();
  triangle(-6.5, -6.5, -6, -4, -4, -6);
  fill(lightBrown);
  stroke(lightBrown);
  strokeWeight(0.7);
  triangle(8, -8, 7, -2, 2, -7);
  fill(lightpink);
  noStroke();
  triangle(6.5, -6.5, 6, -4, 4, -6);


  // head
  fill(lightBrown);
  ellipse(0, 0, 15);

  fill(offWhite);
  arc(0, 0, 15, 15, 30, 150);
  ellipse(0, 0, 2.5, 1.5);


  //nose ADDED
  fill(offBlack);
  ellipse(0, 0, 2, 1);
  //nose shine ADDED
  fill(offWhiteAlpha);
  push();
  translate(-0.3, -0.1);
  rotate(-7);
  ellipse(0, 0, 0.7, 0.3);
  ellipse(0, 0, 0.4, 0.1);
  pop();


  // eyes
  let brightness = map(eyeColor, 0, 100, 0, 200);
  fill(darkBrown);
  ellipse(-3, -3, 3);
  ellipse( 3, -3, 3);
  fill(offWhiteAlpha);
  ellipse(-3.5, -3.5, 0.8);
  ellipse( 2.5, -3.5, 0.8);
  ellipse(-3.5, -3.5, 0.6);//ADDED for eye shine depth
  ellipse( 2.5, -3.5, 0.6);//ADDED for eye shine depth


}

## focused_random_demo.js
var canvasWidth = 960;
var canvasHeight = 500;
var sliders = [];
var faceSelector;
var curRandomSeed;

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

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

  // create sliders
  for(i=1; i<=3; i++) {
    var slider = createSlider(0, 100, 50);
    var parentStr = 'slider' + i + 'Container';
    slider.parent(parentStr);
    sliders.push(slider);
  }
  sliders[0].value(0);
  sliders[1].value(100);
  sliders[2].value(0);

  randButton = createButton('randomize');
  randButton.mousePressed(changeRandomSeed);
  randButton.parent('selector1Container');

  // rotation in degrees
  angleMode(DEGREES);
}

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

// global variables for colors
var bg_color = [200, 200, 200];
var fg_color = [255, 255, 255];
var stroke_color = [0, 0, 0];

var num_samples = 2000;
var num_bins = 20;

function getAveragedRandom(min, max, n) {
  let sum = 0;
  for(let i=0; i<n; i++) {
    sum = sum + random(min, max);
  }
  return sum / n;
}

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

  var min = sliders[0].value();
  var max = sliders[1].value();
  var focus = int(map(sliders[2].value(), 0, 100, 1, 8));

  var samples = []
  var bins = Array(num_bins)
  for(var i=0; i<num_bins; i++) {
    bins[i] = 0;
  }
  var s, b;
  for(var i=0; i<num_samples; i++) {
    s = getAveragedRandom(min, max, focus);
    b = Math.floor(s*4 / num_bins);
    bins[b] = bins[b] + 1;
  }

  background(bg_color);
  fill(fg_color);
  for(var i=0; i<num_bins; i++) {
    x = i * width / num_bins;
    y = bins[i];
    rect(x, height-y, width/num_bins, y);
  }

  fill(0);
  var info = "min " + min + "  max " + max + "  n " + focus;
  textSize(36);
  text(info, 300, 100);


}

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

## 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

      
    Raw
  

              preview.jpg
            
          
## purview.json
{
  "commits": [
    {
      "sha": "4d409e6b1216cb9e86087a31cf93f4f809abe996",
      "name": "drawing tips"
    },
    {
      "sha": "8085c457780ce116a282fe8d502e5b0646911269",
      "name": "getAveragedRandom() histogram"
    },
    {
      "sha": "4e72c9b327f050f40eb45cb59a305cbe17919e98",
      "name": "gaussian distribution"
    },
    {
      "sha": "5acd3634c58d1cb046b824018766ec4854d57975",
      "name": "weighted distribution"
    },
    {
      "sha": "ea91c483f8c3c75765ca5a93052f4caad5971792",
      "name": "cat in arrangement"
    },
    {
      "sha": "3009699893cad9fc31d4f52a5c413f0b3099e5e6",
      "name": "cat in editor"
    },
    {
      "sha": "83f4e2b64085b3ea695e0250791fe7d8098e1dc9",
      "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

      
    Raw
  

              sketch.jpg
            
          
## thumbnail.png

      
    Raw
  

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

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

	const num_across=5;
	for (let i=1; i<=num_across; i++) {
	push();
	translate(width*i/(num_across+1), height/2);
	scale(10);
	let eyeColor = random(0, 100);
	drawFace(eyeColor);
	pop();
	}
	}

	function keyTyped() {
	if (key == '!') {
	saveBlocksImages();
	}
	else if (key == '@') {
	saveBlocksImages(true);
	}
	}
	<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>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>Setting 6</td>
	<td id="slider6Container"></td>
	</tr>
	<tr>
	<td>Setting 7</td>
	<td id="slider7Container"></td>
	</tr>
	<tr>
	<td>Setting 8</td>
	<td id="slider8Container"></td>
	</tr>
	<tr>
	<td>Setting 9</td>
	<td id="slider9Container"></td>
	</tr>
	<tr>
	<td>Setting 10</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>
	/*
	* 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');
	}

	const bg_color = [125, 125, 125];

	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 == '1') {
	// draw 1st face
	drawFace(s1);
	}

	if (mode == '2') {
	// draw 2nd face - let slider value 1 indicate thinness
	drawFace2(s1);
	}

	if (mode == '3') {
	// draw 3rd face using values mapped from 3 sliders
	let tilt_value = map(s1, 0, 100, -90, 90);
	let mouth_value = map(s2, 0, 100, 0.5, 10);
	let eye_value = int(map(s3, 0, 100, 1, 3));
	drawFace3(tilt_value, eye_value, mouth_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.
	*/

	const background_color = [125, 125, 125];

	const lightBrown = [234, 215, 194];
	const darkBrown = [93, 84, 77];
	const midBrown = [195, 166, 136];
	const lightpink = [244, 209, 209];
	const offWhite = [239, 235, 229];
	const offWhiteAlpha = [239, 235, 229, 100];
	const offBlack = [69, 62, 57];
	const offBlackAlpha = [69, 62, 57, 50];


	// eyeColor goes from 0 to 100 - 100 is bright
	function drawFace(eyeColor) {

	angleMode(DEGREES);

	//strokeWeight(0.1);

	//overall shadow ADDED

	fill(offBlackAlpha);
	stroke(offBlackAlpha);
	strokeWeight(0.5);
	strokeJoin(ROUND);

	push();
	translate(0.5, 0.5);
	triangle(-8, -8, -7, -2, -2, -7); //left
	triangle(8, -8, 7, -2, 2, -7);//right
	noStroke();
	ellipse(0, 0, 15)

	fill(offBlackAlpha);
	stroke(offBlackAlpha);


	for(let i = 0; i < 4; i++){
	translate(0.11, 0.1);
	triangle(-8, -8, -7, -2, -2, -7); //left
	triangle(8, -8, 7, -2, 2, -7);//right
	noStroke();
	ellipse(0, 0, 15);//head
	}
	//head
	pop();



	noFill();
	strokeJoin(ROUND);
	strokeWeight(0.1);
	fill(lightBrown);
	stroke(lightBrown);
	strokeWeight(0.7);
	triangle(-8, -8, -7, -2, -2, -7);
	fill(lightpink);
	noStroke();
	triangle(-6.5, -6.5, -6, -4, -4, -6);
	fill(lightBrown);
	stroke(lightBrown);
	strokeWeight(0.7);
	triangle(8, -8, 7, -2, 2, -7);
	fill(lightpink);
	noStroke();
	triangle(6.5, -6.5, 6, -4, 4, -6);





	// head
	fill(lightBrown);
	ellipse(0, 0, 15);

	fill(offWhite);
	arc(0, 0, 15, 15, 30, 150);
	ellipse(0, 0, 2.5, 1.5);



	//nose ADDED
	fill(offBlack);
	ellipse(0, 0, 2, 1);
	//nose shine ADDED
	fill(offWhiteAlpha);
	push();
	translate(-0.3, -0.1);
	rotate(-7);
	ellipse(0, 0, 0.7, 0.3);
	ellipse(0, 0, 0.4, 0.1);
	pop();



	// eyes
	let brightness = map(eyeColor, 0, 100, 0, 200);
	fill(darkBrown);
	ellipse(-3, -3, 3);
	ellipse( 3, -3, 3);
	fill(offWhiteAlpha);
	ellipse(-3.5, -3.5, 0.8);
	ellipse( 2.5, -3.5, 0.8);
	ellipse(-3.5, -3.5, 0.6);//ADDED for eye shine depth
	ellipse( 2.5, -3.5, 0.6);//ADDED for eye shine depth




	}
	var canvasWidth = 960;
	var canvasHeight = 500;
	var sliders = [];
	var faceSelector;
	var curRandomSeed;

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

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

	// create sliders
	for(i=1; i<=3; i++) {
	var slider = createSlider(0, 100, 50);
	var parentStr = 'slider' + i + 'Container';
	slider.parent(parentStr);
	sliders.push(slider);
	}
	sliders[0].value(0);
	sliders[1].value(100);
	sliders[2].value(0);

	randButton = createButton('randomize');
	randButton.mousePressed(changeRandomSeed);
	randButton.parent('selector1Container');

	// rotation in degrees
	angleMode(DEGREES);
	}

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

	// global variables for colors
	var bg_color = [200, 200, 200];
	var fg_color = [255, 255, 255];
	var stroke_color = [0, 0, 0];

	var num_samples = 2000;
	var num_bins = 20;

	function getAveragedRandom(min, max, n) {
	let sum = 0;
	for(let i=0; i<n; i++) {
	sum = sum + random(min, max);
	}
	return sum / n;
	}

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

	var min = sliders[0].value();
	var max = sliders[1].value();
	var focus = int(map(sliders[2].value(), 0, 100, 1, 8));

	var samples = []
	var bins = Array(num_bins)
	for(var i=0; i<num_bins; i++) {
	bins[i] = 0;
	}
	var s, b;
	for(var i=0; i<num_samples; i++) {
	s = getAveragedRandom(min, max, focus);
	b = Math.floor(s*4 / num_bins);
	bins[b] = bins[b] + 1;
	}

	background(bg_color);
	fill(fg_color);
	for(var i=0; i<num_bins; i++) {
	x = i * width / num_bins;
	y = bins[i];
	rect(x, height-y, width/num_bins, y);
	}

	fill(0);
	var info = "min " + min + " max " + max + " n " + focus;
	textSize(36);
	text(info, 300, 100);


	}

	function keyTyped() {
	if (key == '!') {
	saveBlocksImages();
	}
	else if (key == '@') {
	saveBlocksImages(true);
	}
	}
	{
	"commits": [
	{
	"sha": "4d409e6b1216cb9e86087a31cf93f4f809abe996",
	"name": "drawing tips"
	},
	{
	"sha": "8085c457780ce116a282fe8d502e5b0646911269",
	"name": "getAveragedRandom() histogram"
	},
	{
	"sha": "4e72c9b327f050f40eb45cb59a305cbe17919e98",
	"name": "gaussian distribution"
	},
	{
	"sha": "5acd3634c58d1cb046b824018766ec4854d57975",
	"name": "weighted distribution"
	},
	{
	"sha": "ea91c483f8c3c75765ca5a93052f4caad5971792",
	"name": "cat in arrangement"
	},
	{
	"sha": "3009699893cad9fc31d4f52a5c413f0b3099e5e6",
	"name": "cat in editor"
	},
	{
	"sha": "83f4e2b64085b3ea695e0250791fe7d8098e1dc9",
	"name": "sketch"
	}
	]
	}
	<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>
	// 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);
	}