This README explains an experiment as part of the assignment.
This is an experiment looking at reimplementing the Chernoff face as specified in the original 1973 paper by Herman Chernoff.
xxxxxxxxxx
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.0/seedrandom.min.js"></script>
<script src="https://d3js.org/d3-random.v1.min.js"></script>
<script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
<script language="javascript" type="text/javascript" src=".focused_random.js"></script>
<script language="javascript" type="text/javascript" src="sketch.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>
</div>
<div class="inner" id="controls" height="500px">
<table>
<tr>
<td>radius to corner |OP|</td>
<td id="slider1Container"></td>
</tr>
<tr>
<td>angle of OP to horizontal</td>
<td id="slider2Container"></td>
</tr>
<tr>
<td>vertical size of face |OU|</td>
<td id="slider3Container"></td>
</tr>
<tr>
<td>eccentricity of upper face</td>
<td id="slider4Container"></td>
</tr>
<tr>
<td>width of lower face</td>
<td id="slider5Container"></td>
</tr>
<tr>
<td>length of nose</td>
<td id="slider6Container"></td>
</tr>
<tr>
<td>vertical position of mouth</td>
<td id="slider7Container"></td>
</tr>
<tr>
<td>curvature of mouth</td>
<td id="slider8Container"></td>
</tr>
<tr>
<td>width of mough</td>
<td id="slider9Container"></td>
</tr>
<tr>
<td>vertical position of eyes</td>
<td id="slider10Container"></td>
</tr>
<tr>
<td>separation of eyes</td>
<td id="slider11Container"></td>
</tr>
<tr>
<td>slant of eyes</td>
<td id="slider12Container"></td>
</tr>
<tr>
<td>eccentricity of eyes</td>
<td id="slider13Container"></td>
</tr>
<tr>
<td>size of eyes</td>
<td id="slider14Container"></td>
</tr>
<tr>
<td>position of pupils</td>
<td id="slider15Container"></td>
</tr>
<tr>
<td>vertical position of eyebrows</td>
<td id="slider16Container"></td>
</tr>
<tr>
<td>slant of eyebrows</td>
<td id="slider17Container"></td>
</tr>
<tr>
<td>size of eyebrows</td>
<td id="slider18Container"></td>
</tr>
<tr>
<td>Random</td>
<td id="selector1Container"></td>
</tr>
</table>
</div>
</div>
</table>
</body>
Modified http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js to a secure url
Modified http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.js to a secure url
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.js
https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.0/seedrandom.min.js
https://d3js.org/d3-random.v1.min.js