uwcc/.DS_Store

## .block
.

## .DS_Store

      
    Raw
  

              .DS_Store
            
          
            View raw
        
    
## README.md

      
    Raw
  

              README.md
            
          
    2021 MDDN342 Assignment 1: Randomised Collections

In the initial sketch, my idea is to use some faces with different colors to express different emotions. The face elements are very simple, even with some lines instead. Use simple shapes to express expressions.
7/6
At the very beginning, I drew my sketch of Assignment1. The initial idea was to use some simple expressions to complete emoji-like declarations. Then, using color to express emotions, I drew some words with a marker. I don't want to spend much time on the facial features. Irrelevant is mainly a style. Then focus on the shape of the face to distinguish them from different characters.
7/8
Try to make some bare faces with code. The first face is a helpless expression, can be said to be expressionless. The primary color is blue, and then I turn part of it into a transparent blue, and then I add the facial features to the face and make the whole face as far to the left as possible.
12/07/2021
I've already drawn a second face and given it some shallow saturation colors, except for the blush. The eyebrows of the second face move from side to side.
13/07/2021
The main movement is in the third face. For example slider 2: cross-eyes, normal eyes.
I also added a cute hairstyle that The Simpsons inspired, but I gave the third face a pink gradient to keep up with the first two faces.
20/07/2021
I thought I was making the third face, and there might be some problems with the face; the eyes are close together, so I added bags to the third face.
21/07/2021
The day before I handed in my homework, I studied how to make the whole canvas look more coordinated. Since my first face couldn't move, I decided to use it as a reference, a silent figure. They were highlighting the vivacity of the other two faces. I then tweaked some of the numbers in arrangement.js to make them look like they're in the crowd.

  
## 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 = [230,230,250];

function mouseClicked() {
  changeRandomSeed();
}

function draw () {
  strokeWeight(0.5);


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

  // reset the random number generator each time draw is called
  randomSeed(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;
      if (i == 0) {
        // center face
        let eye_value = 3;
        let tilt_value = random(-15, 45);
        let mouth_value = random(1, 5);
        let is_cyclops = random(0, 70);
        if(is_cyclops < 10) {
          eye_value = 1;
          tilt_value = random(-5, 5);
          mouth_value = random(5, 10);
        }
        push();
        translate(x, y);
        scale(w/13, h/13);
        drawFace3(tilt_value, eye_value, mouth_value);
        pop();
      }
      else if (i > 0) {
        // all other faces
        push();
        translate(x, y);
        scale(w/15, h/15);
        if((i+j)%2 == 0) {
          drawFace1();
        }
        else {
          thinness_value = random(0, 100);
          drawFace2(thinness_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/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('2');
  faceSelector.parent('selector1Container');
}

const bg_color = [65,105,225];

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

  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.
 */


function drawFace1() {
  fill(60);
  noStroke();
  // head
  fill(0, 0, 255, 160);
  ellipse(1.5, 0, 17);
  ellipse(1, 0, 14.5);
  // eyes
  fill(176,224,230);
  ellipse(-3, -3, 3);
  ellipse( 3, -3, 3);
  fill(0);
  rect(1.5,-3.5,3,0.5);
  ellipse(-3, -3, 1);
  rect(-4.5,-3.5,3,0.5);
  ellipse( 3, -3, 1);
  //nose
  rect(0.5,1,0.3,1);
  rect(1,1,0.3,1);
  rect(-1,-3,0.5,5);
  //mouth
  //fill(0,0,128);
  //rect(-3.5,4,6,3);
  //fill(0,192,203);
  //rect(-3,4,1,1);
  //rect(-1,4,1,1);
  //rect(1,4,1,1);
  //rect(-1,6,-1,1);
  //rect(0,6,1,1);
  fill(0, 0,110,160);
  ellipse(0,4,4,1.5);
  fill(0, 0,120,160);
  ellipse(0,3.5,4,1);
  //cheek color
  fill(0, 600,150,150);
  ellipse(0,2,2,1);
  ellipse(-5,2,5,4);
  ellipse(5,2,5,4);
  //ear
  fill(0, 0, 255, 160);
  ellipse(8,-1.5,3,6);
}

/*
 * thinness_value ranges from 0-100 and indicates how thin the face is
 */
function drawFace2(thinness_value) {

  //face
  strokeWeight(0);

   fill(176,224,230)
   ellipse(2, -4, 11, 11);
   ellipse(-1, -3, 11, 11);
   ellipse(-2, -1, 11, 11);
   ellipse(0, 5, 11, 11);
   ellipse(2, 1, 11, 11);
   ellipse(3, -2, 11, 11);
   fill(255, 0, 0, 50);
   ellipse(1, -3, 13, 16);
   ellipse(7, -5, 3, 7);
   ellipse(-5, -5, 3, 7);
  // head
  noStroke();
  fill(250,128,114);
  ellipse(0,2,2,1);
  ellipse(-5,2,4,4);
  fill(255,0,160,240);
  ellipse(5,2,4,4);
  //eyebrow
  fill(0);
  let brow_width = map(thinness_value, 0, 100, 8, 20);
  rect(-brow_width/3, -7, 3, 1);
  rect(brow_width/5, -7, 3, 1);
  // rect(-5, -10, 10, 20);

  // eyes
  fill(0);
  ellipse(-2, -4, 1);
  ellipse( 2, -4, 4);
  fill(240);
  ellipse(-2, -4, 3);
  ellipse( 2, -4, 3);
  fill(0);
  ellipse(-2, -4, 1);
  ellipse( 2, -4, 1);


}

/*
 * 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, eye_value, mouth_value) {
  const bg_color3 = [225, 206, 187];
  const fg_color3 = [151, 102, 52];


  angleMode(DEGREES);
  fill(178,240, 103);
  noStroke();
// head
  ellipse(0, 0, 15);
  //hair
  fill(0);
  ellipse(0, -7, 8);
  ellipse(-2, -5, 8);
  ellipse(-3, -7, 8);
  ellipse(2, -6, 8);
  fill(255,182,193);
  ellipse(0, -7, 6);
  ellipse(-2, -5, 6);
  ellipse(-3, -7, 6);
  ellipse(2, -6, 6);
  fill(255, 0, 0, 50);
  ellipse(0, -7, 4);
  ellipse(-2, -5, 4);
  ellipse(-3, -7, 4);
  ellipse(2, -6, 4);
  // eyes
  stroke(28, 21, 31);
  fill(255);
  ellipse(-eye_value, -1, 6);
  ellipse(eye_value, -1, 6);
  // eyes

    stroke(0);
    fill(255);
    ellipse( -2, -2, 4, 4);
    ellipse( 2, -2, 4, 4);
    fill(0);
    ellipse(-2, -2, 0.5, 0.5);
    ellipse(2, -2, 0.5, 0.5);
  //pupils
  noStroke();
  fill(0);
  ellipse(-3.5, -1, 1);
  ellipse( 3.5, -1, 1);
  //mouth
  fill(255,255,0);
  ellipse(0, 3.5, mouth_value/2);


}

## 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
{
      "sha": "104e77733bef2686f3a9388148c81580",
      "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.JPG

      
    Raw
  

              thumbnail.JPG
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	/*
	* 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 = [230,230,250];

	function mouseClicked() {
	changeRandomSeed();
	}

	function draw () {
	strokeWeight(0.5);


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

	// reset the random number generator each time draw is called
	randomSeed(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;
	if (i == 0) {
	// center face
	let eye_value = 3;
	let tilt_value = random(-15, 45);
	let mouth_value = random(1, 5);
	let is_cyclops = random(0, 70);
	if(is_cyclops < 10) {
	eye_value = 1;
	tilt_value = random(-5, 5);
	mouth_value = random(5, 10);
	}
	push();
	translate(x, y);
	scale(w/13, h/13);
	drawFace3(tilt_value, eye_value, mouth_value);
	pop();
	}
	else if (i > 0) {
	// all other faces
	push();
	translate(x, y);
	scale(w/15, h/15);
	if((i+j)%2 == 0) {
	drawFace1();
	}
	else {
	thinness_value = random(0, 100);
	drawFace2(thinness_value);
	}
	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('2');
	faceSelector.parent('selector1Container');
	}

	const bg_color = [65,105,225];

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

	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.
	*/


	function drawFace1() {
	fill(60);
	noStroke();
	// head
	fill(0, 0, 255, 160);
	ellipse(1.5, 0, 17);
	ellipse(1, 0, 14.5);
	// eyes
	fill(176,224,230);
	ellipse(-3, -3, 3);
	ellipse( 3, -3, 3);
	fill(0);
	rect(1.5,-3.5,3,0.5);
	ellipse(-3, -3, 1);
	rect(-4.5,-3.5,3,0.5);
	ellipse( 3, -3, 1);
	//nose
	rect(0.5,1,0.3,1);
	rect(1,1,0.3,1);
	rect(-1,-3,0.5,5);
	//mouth
	//fill(0,0,128);
	//rect(-3.5,4,6,3);
	//fill(0,192,203);
	//rect(-3,4,1,1);
	//rect(-1,4,1,1);
	//rect(1,4,1,1);
	//rect(-1,6,-1,1);
	//rect(0,6,1,1);
	fill(0, 0,110,160);
	ellipse(0,4,4,1.5);
	fill(0, 0,120,160);
	ellipse(0,3.5,4,1);
	//cheek color
	fill(0, 600,150,150);
	ellipse(0,2,2,1);
	ellipse(-5,2,5,4);
	ellipse(5,2,5,4);
	//ear
	fill(0, 0, 255, 160);
	ellipse(8,-1.5,3,6);
	}

	/*
	* thinness_value ranges from 0-100 and indicates how thin the face is
	*/
	function drawFace2(thinness_value) {

	//face
	strokeWeight(0);

	fill(176,224,230)
	ellipse(2, -4, 11, 11);
	ellipse(-1, -3, 11, 11);
	ellipse(-2, -1, 11, 11);
	ellipse(0, 5, 11, 11);
	ellipse(2, 1, 11, 11);
	ellipse(3, -2, 11, 11);
	fill(255, 0, 0, 50);
	ellipse(1, -3, 13, 16);
	ellipse(7, -5, 3, 7);
	ellipse(-5, -5, 3, 7);
	// head
	noStroke();
	fill(250,128,114);
	ellipse(0,2,2,1);
	ellipse(-5,2,4,4);
	fill(255,0,160,240);
	ellipse(5,2,4,4);
	//eyebrow
	fill(0);
	let brow_width = map(thinness_value, 0, 100, 8, 20);
	rect(-brow_width/3, -7, 3, 1);
	rect(brow_width/5, -7, 3, 1);
	// rect(-5, -10, 10, 20);

	// eyes
	fill(0);
	ellipse(-2, -4, 1);
	ellipse( 2, -4, 4);
	fill(240);
	ellipse(-2, -4, 3);
	ellipse( 2, -4, 3);
	fill(0);
	ellipse(-2, -4, 1);
	ellipse( 2, -4, 1);


	}

	/*
	* 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, eye_value, mouth_value) {
	const bg_color3 = [225, 206, 187];
	const fg_color3 = [151, 102, 52];


	angleMode(DEGREES);
	fill(178,240, 103);
	noStroke();
	// head
	ellipse(0, 0, 15);
	//hair
	fill(0);
	ellipse(0, -7, 8);
	ellipse(-2, -5, 8);
	ellipse(-3, -7, 8);
	ellipse(2, -6, 8);
	fill(255,182,193);
	ellipse(0, -7, 6);
	ellipse(-2, -5, 6);
	ellipse(-3, -7, 6);
	ellipse(2, -6, 6);
	fill(255, 0, 0, 50);
	ellipse(0, -7, 4);
	ellipse(-2, -5, 4);
	ellipse(-3, -7, 4);
	ellipse(2, -6, 4);
	// eyes
	stroke(28, 21, 31);
	fill(255);
	ellipse(-eye_value, -1, 6);
	ellipse(eye_value, -1, 6);
	// eyes

	stroke(0);
	fill(255);
	ellipse( -2, -2, 4, 4);
	ellipse( 2, -2, 4, 4);
	fill(0);
	ellipse(-2, -2, 0.5, 0.5);
	ellipse(2, -2, 0.5, 0.5);
	//pupils
	noStroke();
	fill(0);
	ellipse(-3.5, -1, 1);
	ellipse( 3.5, -1, 1);
	//mouth
	fill(255,255,0);
	ellipse(0, 3.5, mouth_value/2);





	}
	{
	"sha": "104e77733bef2686f3a9388148c81580",
	"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>