Debugging Jamie’s faces.
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.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="p5.func.js"></script>
<script type="text/javascript" src="LZWEncoder.js"></script>
<script type="text/javascript" src="NeuQuant.js"></script>
<script type="text/javascript" src="GIFEncoder.js"></script>
<script type="text/javascript" src="b64.js"></script>
<script type="text/javascript" src="z_recorder.js"></script>
<script language="javascript" type="text/javascript" src="simplex-noise.js"></script>
<script language="javascript" type="text/javascript" src="canvas_size.js"></script>
<script language="javascript" type="text/javascript" src="draw_one_frame.js"></script>
<script src="z_clmtrackr.js"></script>
<script src="z_model_pca_20_svm.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="z_face_system.js"></script>
<script language="javascript" type="text/javascript" src="z_kdTree.js"></script>
<script language="javascript" type="text/javascript" src="z_face-api.js"></script>
<script language="javascript" type="text/javascript" src="z_training_images.js"></script>
<script language="javascript" type="text/javascript" src="z_testing_images.js"></script>
<script language="javascript" type="text/javascript" src="face.js"></script>
<script language="javascript" type="text/javascript" src="system_runner.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" id="controls" height="500">
<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>
<!-- YOU CAN ADD MORE SLIDERS HERE, LIKE THIS
<tr>
<td>setting 9</td>
<td id="slider9Container"></td>
</tr>
<tr>
<td>setting 10</td>
<td id="slider10Container"></td>
</tr>
<tr>
<td>setting 11</td>
<td id="slider11Container"></td>
</tr>
<tr>
<td>setting 12</td>
<td id="slider12Container"></td>
</tr>
... AND KEEP GOING
-->
<tr>
</tr>
<tr>
<td>show target</td>
<td id="sliderTintContainer"></td>
</tr>
<tr>
<td>Draw function</td>
<td id="selector1Container"></td>
</tr>
<tr>
<td>Face Draw</td>
<td id="checkbox1Container"></td>
</tr>
<tr>
<td>Face Targets</td>
<td id="checkbox2Container"></td>
</tr>
<tr>
<td>Face Points</td>
<td id="checkbox3Container"></td>
</tr>
<tr>
<td></td>
<td id="button1Container"></td>
</tr>
<tr>
<td></td>
<td id="button2Container"></td>
</tr>
<tr>
<td></td>
<td id="button3Container"></td>
</tr>
<tr>
<td></td>
<td id="button4Container"></td>
</tr>
</table>
</div>
<div>
<div id="canvasContainer"></div>
<a href="face.js">face code</a><br>
<a href="sketch.html">sketches</a>
</div>
</div>
<pre>
<p id="output">
</p>
</pre>
</body>
/**
* This class lets you encode animated GIF files
* Base class : http://www.java2s.com/Code/Java/2D-Graphics-GUI/AnimatedGifEncoder.htm
* @author Kevin Weiner (original Java version - kweiner@fmsware.com)
* @author Thibault Imbert (AS3 version - bytearray.org)
* @author Kevin Kwok (JavaScript version - https://github.com/antimatter15/jsgif)
* @version 0.1 AS3 implementation
*/
GIFEncoder = function() {
for (var i = 0, chr = {}; i < 256; i++)
chr[i] = String.fromCharCode(i);
function ByteArray() {
this.bin = [];
}
ByteArray.prototype.getData = function() {
for (var v = '', l = this.bin.length, i = 0; i < l; i++)
v += chr[this.bin[i]];
return v;
};
ByteArray.prototype.writeByte = function(val) {
this.bin.push(val);
};
ByteArray.prototype.writeUTFBytes = function(string) {
for (var l = string.length, i = 0; i < l; i++)
this.writeByte(string.charCodeAt(i));
};
ByteArray.prototype.writeBytes = function(array, offset, length) {
for (var l = length || array.length, i = offset || 0; i < l; i++)
this.writeByte(array[i]);
};
var exports = {};
var width; // image size
var height;
var transparent = null; // transparent color if given
var transIndex; // transparent index in color table
var repeat = -1; // no repeat
var delay = 0; // frame delay (hundredths)
var started = false; // ready to output frames
var out;
var image; // current frame
var pixels; // BGR byte array from frame
var indexedPixels; // converted frame indexed to palette
var colorDepth; // number of bit planes
var colorTab; // RGB palette
var usedEntry = []; // active palette entries
var palSize = 7; // color table size (bits-1)
var dispose = -1; // disposal code (-1 = use default)
var closeStream = false; // close stream when finished
var firstFrame = true;
var sizeSet = false; // if false, get size from first frame
var sample = 10; // default sample interval for quantizer
var comment = "Generated by jsgif (https://github.com/antimatter15/jsgif/)"; // default comment for generated gif
/**
* Sets the delay time between each frame, or changes it for subsequent frames
* (applies to last frame added)
* int delay time in milliseconds
* @param ms
*/
var setDelay = exports.setDelay = function setDelay(ms) {
delay = Math.round(ms / 10);
};
/**
* Sets the GIF frame disposal code for the last added frame and any
*
* subsequent frames. Default is 0 if no transparent color has been set,
* otherwise 2.
* @param code
* int disposal code.
*/
var setDispose = exports.setDispose = function setDispose(code) {
if (code >= 0) dispose = code;
};
/**
* Sets the number of times the set of GIF frames should be played. Default is
* 1; 0 means play indefinitely. Must be invoked before the first image is
* added.
*
* @param iter
* int number of iterations.
* @return
*/
var setRepeat = exports.setRepeat = function setRepeat(iter) {
if (iter >= 0) repeat = iter;
};
/**
* Sets the transparent color for the last added frame and any subsequent
* frames. Since all colors are subject to modification in the quantization
* process, the color in the final palette for each frame closest to the given
* color becomes the transparent color for that frame. May be set to null to
* indicate no transparent color.
* @param
* Color to be treated as transparent on display.
*/
var setTransparent = exports.setTransparent = function setTransparent(c) {
transparent = c;
};
/**
* Sets the comment for the block comment
* @param
* string to be insterted as comment
*/
var setComment = exports.setComment = function setComment(c) {
comment = c;
};
/**
* The addFrame method takes an incoming BitmapData object to create each frames
* @param
* BitmapData object to be treated as a GIF's frame
*/
var addFrame = exports.addFrame = function addFrame(im, is_imageData) {
if ((im === null) || !started || out === null) {
throw new Error("Please call start method before calling addFrame");
}
var ok = true;
try {
if (!is_imageData) {
image = im.getImageData(0, 0, im.canvas.width, im.canvas.height).data;
if (!sizeSet) setSize(im.canvas.width, im.canvas.height);
} else {
if(im instanceof ImageData) {
image = im.data;
if(!sizeset || width!=im.width || height!=im.height) {
setSize(im.width,im.height);
} else {
}
} else if(im instanceof Uint8ClampedArray) {
if(im.length==(width*height*4)) {
image=im;
} else {
console.log("Please set the correct size: ImageData length mismatch");
ok=false;
}
} else {
console.log("Please provide correct input");
ok=false;
}
}
getImagePixels(); // convert to correct format if necessary
analyzePixels(); // build color table & map pixels
if (firstFrame) {
writeLSD(); // logical screen descriptior
writePalette(); // global color table
if (repeat >= 0) {
// use NS app extension to indicate reps
writeNetscapeExt();
}
}
writeGraphicCtrlExt(); // write graphic control extension
if (comment !== '') {
writeCommentExt(); // write comment extension
}
writeImageDesc(); // image descriptor
if (!firstFrame) writePalette(); // local color table
writePixels(); // encode and write pixel data
firstFrame = false;
} catch (e) {
ok = false;
}
return ok;
};
/**
* @description: Downloads the encoded gif with the given name
* No need of any conversion from the stream data (out) to base64
* Solves the issue of large file sizes when there are more frames
* and does not involve in creation of any temporary data in the process
* so no wastage of memory, and speeds up the process of downloading
* to just calling this function.
* @parameter {String} filename filename used for downloading the gif
*/
var download = exports.download = function download(filename) {
if(out===null || closeStream==false) {
console.log("Please call start method and add frames and call finish method before calling download");
} else {
filename= filename !== undefined ? ( filename.endsWith(".gif")? filename: filename+".gif" ): "download.gif";
var templink = document.createElement("a");
templink.download=filename;
templink.href= URL.createObjectURL(new Blob([new Uint8Array(out.bin)], {type : "image/gif" } ));
templink.click();
}
}
/**
* Adds final trailer to the GIF stream, if you don't call the finish method
* the GIF stream will not be valid.
*/
var finish = exports.finish = function finish() {
if (!started) return false;
var ok = true;
started = false;
try {
out.writeByte(0x3b); // gif trailer
closeStream=true;
} catch (e) {
ok = false;
}
return ok;
};
/**
* Resets some members so that a new stream can be started.
* This method is actually called by the start method
*/
var reset = function reset() {
// reset for subsequent use
transIndex = 0;
image = null;
pixels = null;
indexedPixels = null;
colorTab = null;
closeStream = false;
firstFrame = true;
};
/**
* * Sets frame rate in frames per second. Equivalent to
* <code>setDelay(1000/fps)</code>.
* @param fps
* float frame rate (frames per second)
*/
var setFrameRate = exports.setFrameRate = function setFrameRate(fps) {
if (fps != 0xf) delay = Math.round(100 / fps);
};
/**
* Sets quality of color quantization (conversion of images to the maximum 256
* colors allowed by the GIF specification). Lower values (minimum = 1)
* produce better colors, but slow processing significantly. 10 is the
* default, and produces good color mapping at reasonable speeds. Values
* greater than 20 do not yield significant improvements in speed.
* @param quality
* int greater than 0.
* @return
*/
var setQuality = exports.setQuality = function setQuality(quality) {
if (quality < 1) quality = 1;
sample = quality;
};
/**
* Sets the GIF frame size. The default size is the size of the first frame
* added if this method is not invoked.
* @param w
* int frame width.
* @param h
* int frame width.
*/
var setSize = exports.setSize = function setSize(w, h) {
if (started && !firstFrame) return;
width = w;
height = h;
if (width < 1) width = 320;
if (height < 1) height = 240;
sizeSet = true;
};
/**
* Initiates GIF file creation on the given stream.
* @param os
* OutputStream on which GIF images are written.
* @return false if initial write failed.
*/
var start = exports.start = function start() {
reset();
var ok = true;
closeStream = false;
out = new ByteArray();
try {
out.writeUTFBytes("GIF89a"); // header
} catch (e) {
ok = false;
}
return started = ok;
};
var cont = exports.cont = function cont() {
reset();
var ok = true;
closeStream = false;
out = new ByteArray();
return started = ok;
};
/**
* Analyzes image colors and creates color map.
*/
var analyzePixels = function analyzePixels() {
var len = pixels.length;
var nPix = len / 3;
indexedPixels = [];
var nq = new NeuQuant(pixels, len, sample);
// initialize quantizer
colorTab = nq.process(); // create reduced palette
// map image pixels to new palette
var k = 0;
for (var j = 0; j < nPix; j++) {
var index = nq.map(pixels[k++] & 0xff, pixels[k++] & 0xff, pixels[k++] & 0xff);
usedEntry[index] = true;
indexedPixels[j] = index;
}
pixels = null;
colorDepth = 8;
palSize = 7;
// get closest match to transparent color if specified
if (transparent !== null) {
transIndex = findClosest(transparent);
}
};
/**
* Returns index of palette color closest to c
*/
var findClosest = function findClosest(c) {
if (colorTab === null) return -1;
var r = (c & 0xFF0000) >> 16;
var g = (c & 0x00FF00) >> 8;
var b = (c & 0x0000FF);
var minpos = 0;
var dmin = 256 * 256 * 256;
var len = colorTab.length;
for (var i = 0; i < len;) {
var dr = r - (colorTab[i++] & 0xff);
var dg = g - (colorTab[i++] & 0xff);
var db = b - (colorTab[i] & 0xff);
var d = dr * dr + dg * dg + db * db;
var index = i / 3;
if (usedEntry[index] && (d < dmin)) {
dmin = d;
minpos = index;
}
i++;
}
return minpos;
};
/**
* Extracts image pixels into byte array "pixels
*/
var getImagePixels = function getImagePixels() {
var w = width;
var h = height;
pixels = [];
var data = image;
var count = 0;
for (var i = 0; i < h; i++) {
for (var j = 0; j < w; j++) {
var b = (i * w * 4) + j * 4;
pixels[count++] = data[b];
pixels[count++] = data[b + 1];
pixels[count++] = data[b + 2];
}
}
};
/**
* Writes Graphic Control Extension
*/
var writeGraphicCtrlExt = function writeGraphicCtrlExt() {
out.writeByte(0x21); // extension introducer
out.writeByte(0xf9); // GCE label
out.writeByte(4); // data block size
var transp;
var disp;
if (transparent === null) {
transp = 0;
disp = 0; // dispose = no action
} else {
transp = 1;
disp = 2; // force clear if using transparent color
}
if (dispose >= 0) {
disp = dispose & 7; // user override
}
disp <<= 2;
// packed fields
out.writeByte(0 | // 1:3 reserved
disp | // 4:6 disposal
0 | // 7 user input - 0 = none
transp); // 8 transparency flag
WriteShort(delay); // delay x 1/100 sec
out.writeByte(transIndex); // transparent color index
out.writeByte(0); // block terminator
};
/**
* Writes Comment Extention
*/
var writeCommentExt = function writeCommentExt() {
out.writeByte(0x21); // extension introducer
out.writeByte(0xfe); // comment label
out.writeByte(comment.length); // Block Size (s)
out.writeUTFBytes(comment);
out.writeByte(0); // block terminator
};
/**
* Writes Image Descriptor
*/
var writeImageDesc = function writeImageDesc() {
out.writeByte(0x2c); // image separator
WriteShort(0); // image position x,y = 0,0
WriteShort(0);
WriteShort(width); // image size
WriteShort(height);
// packed fields
if (firstFrame) {
// no LCT - GCT is used for first (or only) frame
out.writeByte(0);
} else {
// specify normal LCT
out.writeByte(0x80 | // 1 local color table 1=yes
0 | // 2 interlace - 0=no
0 | // 3 sorted - 0=no
0 | // 4-5 reserved
palSize); // 6-8 size of color table
}
};
/**
* Writes Logical Screen Descriptor
*/
var writeLSD = function writeLSD() {
// logical screen size
WriteShort(width);
WriteShort(height);
// packed fields
out.writeByte((0x80 | // 1 : global color table flag = 1 (gct used)
0x70 | // 2-4 : color resolution = 7
0x00 | // 5 : gct sort flag = 0
palSize)); // 6-8 : gct size
out.writeByte(0); // background color index
out.writeByte(0); // pixel aspect ratio - assume 1:1
};
/**
* Writes Netscape application extension to define repeat count.
*/
var writeNetscapeExt = function writeNetscapeExt() {
out.writeByte(0x21); // extension introducer
out.writeByte(0xff); // app extension label
out.writeByte(11); // block size
out.writeUTFBytes("NETSCAPE" + "2.0"); // app id + auth code
out.writeByte(3); // sub-block size
out.writeByte(1); // loop sub-block id
WriteShort(repeat); // loop count (extra iterations, 0=repeat forever)
out.writeByte(0); // block terminator
};
/**
* Writes color table
*/
var writePalette = function writePalette() {
out.writeBytes(colorTab);
var n = (3 * 256) - colorTab.length;
for (var i = 0; i < n; i++) out.writeByte(0);
};
var WriteShort = function WriteShort(pValue) {
out.writeByte(pValue & 0xFF);
out.writeByte((pValue >> 8) & 0xFF);
};
/**
* Encodes and writes pixel data
*/
var writePixels = function writePixels() {
var myencoder = new LZWEncoder(width, height, indexedPixels, colorDepth);
myencoder.encode(out);
};
/**
* Retrieves the GIF stream
*/
var stream = exports.stream = function stream() {
return out;
};
var setProperties = exports.setProperties = function setProperties(has_start, is_first) {
started = has_start;
firstFrame = is_first;
};
return exports;
};
/**
* This class handles LZW encoding
* Adapted from Jef Poskanzer's Java port by way of J. M. G. Elliott.
* @author Kevin Weiner (original Java version - kweiner@fmsware.com)
* @author Thibault Imbert (AS3 version - bytearray.org)
* @author Kevin Kwok (JavaScript version - https://github.com/antimatter15/jsgif)
* @version 0.1 AS3 implementation
*/
LZWEncoder = function() {
var exports = {};
var EOF = -1;
var imgW;
var imgH;
var pixAry;
var initCodeSize;
var remaining;
var curPixel;
// GIFCOMPR.C - GIF Image compression routines
// Lempel-Ziv compression based on 'compress'. GIF modifications by
// David Rowley (mgardi@watdcsu.waterloo.edu)
// General DEFINEs
var BITS = 12;
var HSIZE = 5003; // 80% occupancy
// GIF Image compression - modified 'compress'
// Based on: compress.c - File compression ala IEEE Computer, June 1984.
// By Authors: Spencer W. Thomas (decvax!harpo!utah-cs!utah-gr!thomas)
// Jim McKie (decvax!mcvax!jim)
// Steve Davies (decvax!vax135!petsd!peora!srd)
// Ken Turkowski (decvax!decwrl!turtlevax!ken)
// James A. Woods (decvax!ihnp4!ames!jaw)
// Joe Orost (decvax!vax135!petsd!joe)
var n_bits; // number of bits/code
var maxbits = BITS; // user settable max # bits/code
var maxcode; // maximum code, given n_bits
var maxmaxcode = 1 << BITS; // should NEVER generate this code
var htab = [];
var codetab = [];
var hsize = HSIZE; // for dynamic table sizing
var free_ent = 0; // first unused entry
// block compression parameters -- after all codes are used up,
// and compression rate changes, start over.
var clear_flg = false;
// Algorithm: use open addressing double hashing (no chaining) on the
// prefix code / next character combination. We do a variant of Knuth's
// algorithm D (vol. 3, sec. 6.4) along with G. Knott's relatively-prime
// secondary probe. Here, the modular division first probe is gives way
// to a faster exclusive-or manipulation. Also do block compression with
// an adaptive reset, whereby the code table is cleared when the compression
// ratio decreases, but after the table fills. The variable-length output
// codes are re-sized at this point, and a special CLEAR code is generated
// for the decompressor. Late addition: construct the table according to
// file size for noticeable speed improvement on small files. Please direct
// questions about this implementation to ames!jaw.
var g_init_bits;
var ClearCode;
var EOFCode;
// output
// Output the given code.
// Inputs:
// code: A n_bits-bit integer. If == -1, then EOF. This assumes
// that n_bits =< wordsize - 1.
// Outputs:
// Outputs code to the file.
// Assumptions:
// Chars are 8 bits long.
// Algorithm:
// Maintain a BITS character long buffer (so that 8 codes will
// fit in it exactly). Use the VAX insv instruction to insert each
// code in turn. When the buffer fills up empty it and start over.
var cur_accum = 0;
var cur_bits = 0;
var masks = [0x0000, 0x0001, 0x0003, 0x0007, 0x000F, 0x001F, 0x003F, 0x007F, 0x00FF, 0x01FF, 0x03FF, 0x07FF, 0x0FFF, 0x1FFF, 0x3FFF, 0x7FFF, 0xFFFF];
// Number of characters so far in this 'packet'
var a_count;
// Define the storage for the packet accumulator
var accum = [];
var LZWEncoder = exports.LZWEncoder = function LZWEncoder(width, height, pixels, color_depth) {
imgW = width;
imgH = height;
pixAry = pixels;
initCodeSize = Math.max(2, color_depth);
};
// Add a character to the end of the current packet, and if it is 254
// characters, flush the packet to disk.
var char_out = function char_out(c, outs) {
accum[a_count++] = c;
if (a_count >= 254) flush_char(outs);
};
// Clear out the hash table
// table clear for block compress
var cl_block = function cl_block(outs) {
cl_hash(hsize);
free_ent = ClearCode + 2;
clear_flg = true;
output(ClearCode, outs);
};
// reset code table
var cl_hash = function cl_hash(hsize) {
for (var i = 0; i < hsize; ++i) htab[i] = -1;
};
var compress = exports.compress = function compress(init_bits, outs) {
var fcode;
var i; /* = 0 */
var c;
var ent;
var disp;
var hsize_reg;
var hshift;
// Set up the globals: g_init_bits - initial number of bits
g_init_bits = init_bits;
// Set up the necessary values
clear_flg = false;
n_bits = g_init_bits;
maxcode = MAXCODE(n_bits);
ClearCode = 1 << (init_bits - 1);
EOFCode = ClearCode + 1;
free_ent = ClearCode + 2;
a_count = 0; // clear packet
ent = nextPixel();
hshift = 0;
for (fcode = hsize; fcode < 65536; fcode *= 2)
++hshift;
hshift = 8 - hshift; // set hash code range bound
hsize_reg = hsize;
cl_hash(hsize_reg); // clear hash table
output(ClearCode, outs);
outer_loop: while ((c = nextPixel()) != EOF) {
fcode = (c << maxbits) + ent;
i = (c << hshift) ^ ent; // xor hashing
if (htab[i] == fcode) {
ent = codetab[i];
continue;
}
else if (htab[i] >= 0) { // non-empty slot
disp = hsize_reg - i; // secondary hash (after G. Knott)
if (i === 0) disp = 1;
do {
if ((i -= disp) < 0)
i += hsize_reg;
if (htab[i] == fcode) {
ent = codetab[i];
continue outer_loop;
}
} while (htab[i] >= 0);
}
output(ent, outs);
ent = c;
if (free_ent < maxmaxcode) {
codetab[i] = free_ent++; // code -> hashtable
htab[i] = fcode;
}
else cl_block(outs);
}
// Put out the final code.
output(ent, outs);
output(EOFCode, outs);
};
// ----------------------------------------------------------------------------
var encode = exports.encode = function encode(os) {
os.writeByte(initCodeSize); // write "initial code size" byte
remaining = imgW * imgH; // reset navigation variables
curPixel = 0;
compress(initCodeSize + 1, os); // compress and write the pixel data
os.writeByte(0); // write block terminator
};
// Flush the packet to disk, and reset the accumulator
var flush_char = function flush_char(outs) {
if (a_count > 0) {
outs.writeByte(a_count);
outs.writeBytes(accum, 0, a_count);
a_count = 0;
}
};
var MAXCODE = function MAXCODE(n_bits) {
return (1 << n_bits) - 1;
};
// ----------------------------------------------------------------------------
// Return the next pixel from the image
// ----------------------------------------------------------------------------
var nextPixel = function nextPixel() {
if (remaining === 0) return EOF;
--remaining;
var pix = pixAry[curPixel++];
return pix & 0xff;
};
var output = function output(code, outs) {
cur_accum &= masks[cur_bits];
if (cur_bits > 0) cur_accum |= (code << cur_bits);
else cur_accum = code;
cur_bits += n_bits;
while (cur_bits >= 8) {
char_out((cur_accum & 0xff), outs);
cur_accum >>= 8;
cur_bits -= 8;
}
// If the next entry is going to be too big for the code size,
// then increase it, if possible.
if (free_ent > maxcode || clear_flg) {
if (clear_flg) {
maxcode = MAXCODE(n_bits = g_init_bits);
clear_flg = false;
} else {
++n_bits;
if (n_bits == maxbits) maxcode = maxmaxcode;
else maxcode = MAXCODE(n_bits);
}
}
if (code == EOFCode) {
// At EOF, write the rest of the buffer.
while (cur_bits > 0) {
char_out((cur_accum & 0xff), outs);
cur_accum >>= 8;
cur_bits -= 8;
}
flush_char(outs);
}
};
LZWEncoder.apply(this, arguments);
return exports;
};
/*
* NeuQuant Neural-Net Quantization Algorithm
* ------------------------------------------
*
* Copyright (c) 1994 Anthony Dekker
*
* NEUQUANT Neural-Net quantization algorithm by Anthony Dekker, 1994. See
* "Kohonen neural networks for optimal colour quantization" in "Network:
* Computation in Neural Systems" Vol. 5 (1994) pp 351-367. for a discussion of
* the algorithm.
*
* Any party obtaining a copy of these files from the author, directly or
* indirectly, is granted, free of charge, a full and unrestricted irrevocable,
* world-wide, paid up, royalty-free, nonexclusive right and license to deal in
* this software and documentation files (the "Software"), including without
* limitation the rights to use, copy, modify, merge, publish, distribute,
* sublicense, and/or sell copies of the Software, and to permit persons who
* receive copies from any such party to do so, with the only requirement being
* that this copyright notice remain intact.
*/
/*
* This class handles Neural-Net quantization algorithm
* @author Kevin Weiner (original Java version - kweiner@fmsware.com)
* @author Thibault Imbert (AS3 version - bytearray.org)
* @author Kevin Kwok (JavaScript version - https://github.com/antimatter15/jsgif)
* @version 0.1 AS3 implementation
*/
NeuQuant = function() {
var exports = {};
var netsize = 256; /* number of colours used */
/* four primes near 500 - assume no image has a length so large */
/* that it is divisible by all four primes */
var prime1 = 499;
var prime2 = 491;
var prime3 = 487;
var prime4 = 503;
var minpicturebytes = (3 * prime4); /* minimum size for input image */
/*
* Program Skeleton ---------------- [select samplefac in range 1..30] [read
* image from input file] pic = (unsigned char*) malloc(3*width*height);
* initnet(pic,3*width*height,samplefac); learn(); unbiasnet(); [write output
* image header, using writecolourmap(f)] inxbuild(); write output image using
* inxsearch(b,g,r)
*/
/*
* Network Definitions -------------------
*/
var maxnetpos = (netsize - 1);
var netbiasshift = 4; /* bias for colour values */
var ncycles = 100; /* no. of learning cycles */
/* defs for freq and bias */
var intbiasshift = 16; /* bias for fractions */
var intbias = (1 << intbiasshift);
var gammashift = 10; /* gamma = 1024 */
var gamma = (1 << gammashift);
var betashift = 10;
var beta = (intbias >> betashift); /* beta = 1/1024 */
var betagamma = (intbias << (gammashift - betashift));
/* defs for decreasing radius factor */
var initrad = (netsize >> 3); /* for 256 cols, radius starts */
var radiusbiasshift = 6; /* at 32.0 biased by 6 bits */
var radiusbias = (1 << radiusbiasshift);
var initradius = (initrad * radiusbias); /* and decreases by a */
var radiusdec = 30; /* factor of 1/30 each cycle */
/* defs for decreasing alpha factor */
var alphabiasshift = 10; /* alpha starts at 1.0 */
var initalpha = (1 << alphabiasshift);
var alphadec; /* biased by 10 bits */
/* radbias and alpharadbias used for radpower calculation */
var radbiasshift = 8;
var radbias = (1 << radbiasshift);
var alpharadbshift = (alphabiasshift + radbiasshift);
var alpharadbias = (1 << alpharadbshift);
/*
* Types and Global Variables --------------------------
*/
var thepicture; /* the input image itself */
var lengthcount; /* lengthcount = H*W*3 */
var samplefac; /* sampling factor 1..30 */
// typedef int pixel[4]; /* BGRc */
var network; /* the network itself - [netsize][4] */
var netindex = [];
/* for network lookup - really 256 */
var bias = [];
/* bias and freq arrays for learning */
var freq = [];
var radpower = [];
var NeuQuant = exports.NeuQuant = function NeuQuant(thepic, len, sample) {
var i;
var p;
thepicture = thepic;
lengthcount = len;
samplefac = sample;
network = new Array(netsize);
for (i = 0; i < netsize; i++) {
network[i] = new Array(4);
p = network[i];
p[0] = p[1] = p[2] = (i << (netbiasshift + 8)) / netsize;
freq[i] = intbias / netsize; /* 1/netsize */
bias[i] = 0;
}
};
var colorMap = function colorMap() {
var map = [];
var index = new Array(netsize);
for (var i = 0; i < netsize; i++)
index[network[i][3]] = i;
var k = 0;
for (var l = 0; l < netsize; l++) {
var j = index[l];
map[k++] = (network[j][0]);
map[k++] = (network[j][1]);
map[k++] = (network[j][2]);
}
return map;
};
/*
* Insertion sort of network and building of netindex[0..255] (to do after
* unbias)
* -------------------------------------------------------------------------------
*/
var inxbuild = function inxbuild() {
var i;
var j;
var smallpos;
var smallval;
var p;
var q;
var previouscol;
var startpos;
previouscol = 0;
startpos = 0;
for (i = 0; i < netsize; i++) {
p = network[i];
smallpos = i;
smallval = p[1]; /* index on g */
/* find smallest in i..netsize-1 */
for (j = i + 1; j < netsize; j++) {
q = network[j];
if (q[1] < smallval) { /* index on g */
smallpos = j;
smallval = q[1]; /* index on g */
}
}
q = network[smallpos];
/* swap p (i) and q (smallpos) entries */
if (i != smallpos) {
j = q[0];
q[0] = p[0];
p[0] = j;
j = q[1];
q[1] = p[1];
p[1] = j;
j = q[2];
q[2] = p[2];
p[2] = j;
j = q[3];
q[3] = p[3];
p[3] = j;
}
/* smallval entry is now in position i */
if (smallval != previouscol) {
netindex[previouscol] = (startpos + i) >> 1;
for (j = previouscol + 1; j < smallval; j++) netindex[j] = i;
previouscol = smallval;
startpos = i;
}
}
netindex[previouscol] = (startpos + maxnetpos) >> 1;
for (j = previouscol + 1; j < 256; j++) netindex[j] = maxnetpos; /* really 256 */
};
/*
* Main Learning Loop ------------------
*/
var learn = function learn() {
var i;
var j;
var b;
var g;
var r;
var radius;
var rad;
var alpha;
var step;
var delta;
var samplepixels;
var p;
var pix;
var lim;
if (lengthcount < minpicturebytes) samplefac = 1;
alphadec = 30 + ((samplefac - 1) / 3);
p = thepicture;
pix = 0;
lim = lengthcount;
samplepixels = lengthcount / (3 * samplefac);
delta = (samplepixels / ncycles) | 0;
alpha = initalpha;
radius = initradius;
rad = radius >> radiusbiasshift;
if (rad <= 1) rad = 0;
for (i = 0; i < rad; i++) radpower[i] = alpha * (((rad * rad - i * i) * radbias) / (rad * rad));
if (lengthcount < minpicturebytes) step = 3;
else if ((lengthcount % prime1) !== 0) step = 3 * prime1;
else {
if ((lengthcount % prime2) !== 0) step = 3 * prime2;
else {
if ((lengthcount % prime3) !== 0) step = 3 * prime3;
else step = 3 * prime4;
}
}
i = 0;
while (i < samplepixels) {
b = (p[pix + 0] & 0xff) << netbiasshift;
g = (p[pix + 1] & 0xff) << netbiasshift;
r = (p[pix + 2] & 0xff) << netbiasshift;
j = contest(b, g, r);
altersingle(alpha, j, b, g, r);
if (rad !== 0) alterneigh(rad, j, b, g, r); /* alter neighbours */
pix += step;
if (pix >= lim) pix -= lengthcount;
i++;
if (delta === 0) delta = 1;
if (i % delta === 0) {
alpha -= alpha / alphadec;
radius -= radius / radiusdec;
rad = radius >> radiusbiasshift;
if (rad <= 1) rad = 0;
for (j = 0; j < rad; j++) radpower[j] = alpha * (((rad * rad - j * j) * radbias) / (rad * rad));
}
}
};
/*
** Search for BGR values 0..255 (after net is unbiased) and return colour
* index
* ----------------------------------------------------------------------------
*/
var map = exports.map = function map(b, g, r) {
var i;
var j;
var dist;
var a;
var bestd;
var p;
var best;
bestd = 1000; /* biggest possible dist is 256*3 */
best = -1;
i = netindex[g]; /* index on g */
j = i - 1; /* start at netindex[g] and work outwards */
while ((i < netsize) || (j >= 0)) {
if (i < netsize) {
p = network[i];
dist = p[1] - g; /* inx key */
if (dist >= bestd) i = netsize; /* stop iter */
else {
i++;
if (dist < 0) dist = -dist;
a = p[0] - b;
if (a < 0) a = -a;
dist += a;
if (dist < bestd) {
a = p[2] - r;
if (a < 0) a = -a;
dist += a;
if (dist < bestd) {
bestd = dist;
best = p[3];
}
}
}
}
if (j >= 0) {
p = network[j];
dist = g - p[1]; /* inx key - reverse dif */
if (dist >= bestd) j = -1; /* stop iter */
else {
j--;
if (dist < 0) dist = -dist;
a = p[0] - b;
if (a < 0) a = -a;
dist += a;
if (dist < bestd) {
a = p[2] - r;
if (a < 0) a = -a;
dist += a;
if (dist < bestd) {
bestd = dist;
best = p[3];
}
}
}
}
}
return (best);
};
var process = exports.process = function process() {
learn();
unbiasnet();
inxbuild();
return colorMap();
};
/*
* Unbias network to give byte values 0..255 and record position i to prepare
* for sort
* -----------------------------------------------------------------------------------
*/
var unbiasnet = function unbiasnet() {
var i;
var j;
for (i = 0; i < netsize; i++) {
network[i][0] >>= netbiasshift;
network[i][1] >>= netbiasshift;
network[i][2] >>= netbiasshift;
network[i][3] = i; /* record colour no */
}
};
/*
* Move adjacent neurons by precomputed alpha*(1-((i-j)^2/[r]^2)) in
* radpower[|i-j|]
* ---------------------------------------------------------------------------------
*/
var alterneigh = function alterneigh(rad, i, b, g, r) {
var j;
var k;
var lo;
var hi;
var a;
var m;
var p;
lo = i - rad;
if (lo < -1) lo = -1;
hi = i + rad;
if (hi > netsize) hi = netsize;
j = i + 1;
k = i - 1;
m = 1;
while ((j < hi) || (k > lo)) {
a = radpower[m++];
if (j < hi) {
p = network[j++];
try {
p[0] -= (a * (p[0] - b)) / alpharadbias;
p[1] -= (a * (p[1] - g)) / alpharadbias;
p[2] -= (a * (p[2] - r)) / alpharadbias;
} catch (e) {} // prevents 1.3 miscompilation
}
if (k > lo) {
p = network[k--];
try {
p[0] -= (a * (p[0] - b)) / alpharadbias;
p[1] -= (a * (p[1] - g)) / alpharadbias;
p[2] -= (a * (p[2] - r)) / alpharadbias;
} catch (e) {}
}
}
};
/*
* Move neuron i towards biased (b,g,r) by factor alpha
* ----------------------------------------------------
*/
var altersingle = function altersingle(alpha, i, b, g, r) {
/* alter hit neuron */
var n = network[i];
n[0] -= (alpha * (n[0] - b)) / initalpha;
n[1] -= (alpha * (n[1] - g)) / initalpha;
n[2] -= (alpha * (n[2] - r)) / initalpha;
};
/*
* Search for biased BGR values ----------------------------
*/
var contest = function contest(b, g, r) {
/* finds closest neuron (min dist) and updates freq */
/* finds best neuron (min dist-bias) and returns position */
/* for frequently chosen neurons, freq[i] is high and bias[i] is negative */
/* bias[i] = gamma*((1/netsize)-freq[i]) */
var i;
var dist;
var a;
var biasdist;
var betafreq;
var bestpos;
var bestbiaspos;
var bestd;
var bestbiasd;
var n;
bestd = ~ (1 << 31);
bestbiasd = bestd;
bestpos = -1;
bestbiaspos = bestpos;
for (i = 0; i < netsize; i++) {
n = network[i];
dist = n[0] - b;
if (dist < 0) dist = -dist;
a = n[1] - g;
if (a < 0) a = -a;
dist += a;
a = n[2] - r;
if (a < 0) a = -a;
dist += a;
if (dist < bestd) {
bestd = dist;
bestpos = i;
}
biasdist = dist - ((bias[i]) >> (intbiasshift - netbiasshift));
if (biasdist < bestbiasd) {
bestbiasd = biasdist;
bestbiaspos = i;
}
betafreq = (freq[i] >> betashift);
freq[i] -= betafreq;
bias[i] += (betafreq << gammashift);
}
freq[bestpos] += beta;
bias[bestpos] -= betagamma;
return (bestbiaspos);
};
NeuQuant.apply(this, arguments);
return exports;
};
{
"commits": [
{
"sha": "0c6c3cfbf221d991635b1c1946ee777533194f47",
"name": "Face Logic"
},
{
"sha": "8973b99fa773cba2f2575f30c11cf5cff14cd51d",
"name": "Train Neighbors and Quiz"
},
{
"sha": "7adbeed1dabb00bc073f3a59144ca9d139875333",
"name": "first version of training"
},
{
"sha": "0e61ad32bbd42601bd25620421c35100ab813119",
"name": "added image to sample_images.json"
},
{
"sha": "21777e8da0a797bac8f042b3b509266012b28dc1",
"name": "using face positions"
},
{
"sha": "a683736618d1513f1c2477cfe0eade4a202dac8d",
"name": "mickey mouse example"
}
]
}<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.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="p5.func.js"></script>
<script type="text/javascript" src="LZWEncoder.js"></script>
<script type="text/javascript" src="NeuQuant.js"></script>
<script type="text/javascript" src="GIFEncoder.js"></script>
<script type="text/javascript" src="b64.js"></script>
<script type="text/javascript" src="z_recorder.js"></script>
<script language="javascript" type="text/javascript" src="simplex-noise.js"></script>
<script language="javascript" type="text/javascript" src="canvas_size.js"></script>
<script language="javascript" type="text/javascript" src="draw_one_frame.js"></script>
<script language="javascript" type="text/javascript" src="anim_runner.js"></script>
<style> body {padding: 0; margin: 0;} </style>
</head>
<body style="background-color:white">
<div class="outer">
<div class="inner">
<div id="canvasContainer"></div>
</div>
</div>
</table>
<br>
<pre>
keys:
spacebar => toggle debugZoom
d => toggle debug view
r => start recording
1,2,3 => change framerate
! = screen grab files
</pre>
<a href="sketch.html">sketch</a><br>
<a href="draw_one_frame.js">source code</a><br>
<a href="preview.jpg">preview image</a><br>
<a href="index.html">(anim [this one])</a><br>
</body>// these can be customized
const debugViewText = "#ff0000";
const debugZoomBackground = "#555588"
const debugZoomScale = 0.5;
// this can be modified after we discuss in lecture
const buffersPerFrame = 1;
// probably best not to modify anything below this line
const frameMax = 96;
let recording = false;
let gifRecorder = null;
let debugZoom = false;
let debugView = false;
let stickFrame = 0;
// *note: canvasWidth and canvasHeight will be defined before this script runs)
function setup () {
let main_canvas = createCanvas(canvasWidth,canvasHeight);
let r = random(100);
main_canvas.parent('canvasContainer');
frameRate(24 * buffersPerFrame);
}
function mousePressed(){
}
function draw () {
let animation_max_frames = frameMax * buffersPerFrame;
let sticky_max_frames = animation_max_frames + stickFrame;
let cur_frame = frameCount % sticky_max_frames;
if (cur_frame >= animation_max_frames) {
cur_frame = 0;
}
let cur_frac = map(cur_frame, 0, animation_max_frames, 0, 1);
background(debugZoomBackground);
push();
if(debugZoom) {
translate(0.5 * width, 0.5 * height);
scale(debugZoomScale);
translate(0.5 * -width, 0.5 * -height);
}
draw_one_frame(cur_frac);
pop();
if(debugView) {
textSize(28);
fill(debugViewText);
text("" + (cur_frame/buffersPerFrame).toFixed(2) + " / " +
(animation_max_frames/buffersPerFrame).toFixed(2) + " = " +
cur_frac.toFixed(2), 50, 50);
}
if(recording) {
textSize(24);
gifRecorder.addBuffer();
}
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
if (key == ' ') {
debugZoom = !debugZoom;
}
if (key == 'd') {
debugView = !debugView;
}
if (key == '1') {
frameRate(1);
stickFrame = 0;
}
if (key == '2') {
frameRate(5);
stickFrame = 5;
}
if (key == '3') {
frameRate(30);
stickFrame = 0;
}
if (key == 'r') {
if (recording==false){
recording = true;
gifRecorder = new p5recorder (frameMax, 'wallpaper.gif', buffersPerFrame);
}
}
}
function encode64(input) {
var output = "", i = 0, l = input.length,
key = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
chr1, chr2, chr3, enc1, enc2, enc3, enc4;
while (i < l) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) enc3 = enc4 = 64;
else if (isNaN(chr3)) enc4 = 64;
output = output + key.charAt(enc1) + key.charAt(enc2) + key.charAt(enc3) + key.charAt(enc4);
}
return output;
}
var canvasWidth = 960;
var canvasHeight = 540;
const ease = new p5.Ease();
function draw_one_frame(cur_frac) {
// note: to clear the screen draw a rectangle
// note: all shape sizes, line widths, etc. should be a function of width and height
// note: animation should progress depending on the value of cur_frac which goes from 0 to 1, and it should loop seamlessly
angleMode(DEGREES);
noStroke();
fill(255, 130, 155);
rect(0, 0, width, height); //the background
// let sunR = [228, 255, 255, 255, 255];
// let sunG = [153, 153, 153, 156, 202];
// let sunB = [255, 236, 177, 110, 87];
// let sunPulse = [width*1, width*1.1, width*1.15, width*1.2, width*1.2, width*1.15, width*1.1, width*1];
// let sunScale = [1, 0.95, 0.6, 0.4, 0.2];
//this is the gradient behind the sun
for (i=0; i<50; i++){
fill(255, 188, 64, 15);
push();
let sunScaleFac = i*0.02;
ellipse(width/2, height/1.5, (width*sunScaleFac));
pop();
}
//these are the sunrays
push();
noFill();
strokeWeight(height/20);
translate(width/2, height/1.5);
for(let i=0; i<10; i++){
stroke(254, 255, 166)
rotate(360/10);
sunRay(width/2, height/1.5, cur_frac);
}
pop();
//this is the actual sun
fill(255, 202, 87)
ellipse(width/2, height/1.5, (width*0.2));
//these are the hills I'm drawing, as well as the squiggle lines on top of them
push();
fill(105, 54, 0);
beginShape();
curveVertex(0, height);
curveVertex(-width/20, height/2.6);
curveVertex(width/8, height/2.1);
curveVertex(width/4.5, height/2.05);
curveVertex(width/3, height/1.6);
curveVertex(width/2.1, height/1.4);
curveVertex(width/1.75, height);
curveVertex(width/2, height);
curveVertex(0, height);
curveVertex(0, height);
endShape();
noFill();
stroke(122, 73, 18);
strokeWeight(width/500);
beginShape();
curveVertex(0, height);
curveVertex(-width/20, height/2.2);
curveVertex(width/8, height/1.85);
curveVertex(width/4.5, height/1.75);
curveVertex(width/3, height/1.5);
curveVertex(width/2.6, height/1.35);
curveVertex(width/4.75, height/1.35);
curveVertex(width/8, height/1.3);
curveVertex(0, height/1.5);
curveVertex(0, height/1.7);
endShape();
beginShape();
curveVertex(0, height);
curveVertex(-width/20, height/2.1);
curveVertex(width/8, height/1.75);
curveVertex(width/4.5, height/1.65);
curveVertex(width/3.5, height/1.5);
curveVertex(width/3, height/1.4);
curveVertex(width/4.75, height/1.4);
curveVertex(width/8, height/1.35);
curveVertex(0, height/1.6);
curveVertex(0, height/1.9);
endShape();
beginShape();
curveVertex(0, height);
curveVertex(-width/20, height/2);
curveVertex(width/8, height/1.65);
curveVertex(width/4.5, height/1.55);
curveVertex(width/3.6, height/1.475);
curveVertex(width/3.5, height/1.44);
curveVertex(width/4.75, height/1.475);
curveVertex(width/8, height/1.4);
curveVertex(0, height/1.7);
curveVertex(0, height/2);
endShape();
fill(117, 74, 29);
beginShape();
curveVertex(width/3, height);
curveVertex(width/2.25, height/1.3);
curveVertex(width/1.75, height/1.6);
curveVertex(width/1.3, height/1.7);
curveVertex(width/0.98, height/1.95);
curveVertex(width, height);
curveVertex(width/3, height);
curveVertex(width/3, height);
endShape();
noFill();
stroke(145, 104, 61);
strokeWeight(width/500);
beginShape();
curveVertex(width/0.98, height/1.7);
curveVertex(width/0.8, height/1.33);
curveVertex(width/1.2, height/1.43);
curveVertex(width/1.5, height/1.43);
curveVertex(width/1.6, height/1.43);
curveVertex(width/1.67, height/1.42);
curveVertex(width/1.56, height/1.47);
curveVertex(width/1.3, height/1.47);
curveVertex(width/1.1, height/1.65);
curveVertex(width/0.98, height/1.7);
curveVertex(width/0.98, height/1.7);
endShape();
beginShape();
curveVertex(width/0.98, height/1.75);
curveVertex(width/0.8, height/1.3);
curveVertex(width/1.2, height/1.4);
curveVertex(width/1.5, height/1.4);
curveVertex(width/1.7, height/1.38);
curveVertex(width/1.75, height/1.4);
curveVertex(width/1.56, height/1.5);
curveVertex(width/1.3, height/1.5);
curveVertex(width/1.1, height/1.7);
curveVertex(width/0.98, height/1.75);
curveVertex(width/0.98, height/1.75);
endShape();
beginShape();
curveVertex(width/0.98, height/1.8);
curveVertex(width/0.8, height/1.25);
curveVertex(width/1.2, height/1.35);
curveVertex(width/1.5, height/1.35);
curveVertex(width/1.75, height/1.33);
curveVertex(width/1.8, height/1.45);
curveVertex(width/1.56, height/1.55);
curveVertex(width/1.3, height/1.55);
curveVertex(width/1.1, height/1.75);
curveVertex(width/0.98, height/1.8);
curveVertex(width/0.98, height/1.8);
endShape();
beginShape();
curveVertex(width/0.98, height/1.8);
curveVertex(width/0.8, height/1.2);
curveVertex(width/1.2, height/1.3);
curveVertex(width/1.5, height/1.3);
curveVertex(width/1.75, height/1.28);
curveVertex(width/1.9, height/1.45);
curveVertex(width/1.56, height/1.6);
curveVertex(width/1.3, height/1.6);
curveVertex(width/1.1, height/1.8);
curveVertex(width/0.98, height/1.85);
curveVertex(width/0.98, height/1.85);
endShape();
pop();
//this is the lake
fill(166, 249, 255);
ellipse(width/2, height*1.3, width*2, height)
//these are the clouds
const ease_amount_cloud = ease.cubicInOut(cur_frac);
//this makes the clouds move accross the page
let cloudxPlace = [-width*0.25, 0, width*0.25, width*0.5, width*0.75, width, width*1.25];
let cloudyPlace = [height/8, height/200, height/10, height/12];
for(let i=0; i<cloudxPlace.length-1; i++) {
let cloudXpos1 = map(ease_amount_cloud, 0, 1, cloudxPlace[i], cloudxPlace[i+1])
let cloudYpos1 = map(ease_amount_cloud, 0, 1, cloudyPlace[i], cloudyPlace[i+1])
cloud(cloudXpos1, cloudYpos1);
}
//these are the waves
let waveXoffset = [0, width/20, -width/40];
let waveYoffset = [0, height/20, height/50];
waves(width/4+waveXoffset[0], height/1.1+waveYoffset[0], cur_frac);
waves(width/4+waveXoffset[1], height/1.1+waveYoffset[1], cur_frac);
waves(width/4+waveXoffset[2], height/1.1+waveYoffset[2], cur_frac);
let waveX2offset = [0, width/100];
waves(width/1.8+waveX2offset[0], height/1.17+waveX2offset[0], cur_frac);
waves(width/1.8+waveX2offset[1], height/1.17+waveX2offset[1], cur_frac);
//these are the flowers in the front left
flower2(width/10, height/1.4, cur_frac);
flower3(width/5.5, height/1.35, cur_frac)
flower1(width/100, height/1.3, cur_frac);
flower1(width/8, height/1.2, cur_frac);
flower2(width/4, height/1.18, cur_frac);
flower3(width/30, height/1.1, cur_frac)
//these are the flowers in the front right
flower1(width-width/55, height/1.1, cur_frac);
flower1(width-width/3, height/1.1, cur_frac);
flower1(width-width/10, height/1.4, cur_frac);
flower2(width-width/100, height/1.3, cur_frac);
flower3(width-width/100, height/1.6, cur_frac)
flower2(width-width/5.5, height/1.2, cur_frac);
flower3(width-width/3.75, height/1.13, cur_frac)
flower1(width-width/3, height/1.1, cur_frac);
flower3(width-width/10, height/1.17, cur_frac)
}
//from here down are just the different elements that I put in a function so it was easier to call on them mulitple times
//the names should make it pretty self explanatory
function cloud (x, y) {
fill(255, 227, 238);
push();
scale(2.25, 1.5);
ellipse(x+width/9.5, y+height/11, width/8, width/25);
ellipse(x+width/25, y+height/10, width/9, width/30);
ellipse(x+width/11, y+height/16, width/11, width/22);
ellipse(x+width/17, y+height/15, width/12, width/40);
ellipse(x+width/6.2, y+height/8.5, width/20, width/50);
pop();
}
function sunRay(x, y, cur_frac) {
push();
noFill();
translate(width*0.08, 0);
let squiggle_up = true;
if (cur_frac < 0.5) {
squiggle_up = true;
amount_squiggle = cur_frac * 2;
}
else {
squiggle_up = false;
amount_squiggle = (cur_frac-0.5) * 2;
}
const ease_amount_squiggle = ease.quadraticOut(amount_squiggle);
let strokeTransparencyArray = [225, 75, 125, 175, 200, 75, 125, 175, 200];
let rayOffsetArray = [0, height/12, height/15, height/20, height/30, -height/12, -height/15, -height/20, -height/30];
for(let j=0; j<4; j++){
let rayOffset = rayOffsetArray[j];
strokeWeight(j*height/10+height/50);
stroke(255, 246, 176, 100);
beginShape();
for (let i=0; i<360; i++){
var waveX = map(i, 0, 360, 0, width);
var waveY = sin(i*2.5) * height/10;
let rayYpos;
if(cur_frac<0.5){
rayYpos = map(ease_amount_squiggle, 0, 0.5, -waveY/4, waveY/4);
}
else{
rayYpos = map(ease_amount_squiggle, 0.5, 1, waveY/4, -waveY/4);
}
vertex(waveX, rayYpos);
}
endShape();
}
pop();
}
function flower1 (x, y, cur_frac){
let petalxOffset;
let petalyOffset;
petalxOffset = [0, width/30, width/20, width/30, 0, -width/30, -width/20, -width/30];
petalyOffset = [0, width/50, width/20, width/12.5, width/10, width/12.5, width/20, width/50];
push();
for (let i = 0; i < 8; i++) {
push();
translate(petalxOffset[i], petalyOffset[i]);
noStroke();
fill(99, 45, 93, 100);
ellipse(x+width/200, y+width/200, width/20)
fill(255, 179, 249);
ellipse(x, y, width/20)
pop();
}
let flowerCentre = true;
if (cur_frac < 0.5) {
flowerCentre = true;
amount_scale = cur_frac * 2;
}
else {
flowerCentre = false;
amount_scale = map(cur_frac, 0.5, 1, 1, 0);
}
const ease_amount_scale = ease.cubicInOut(amount_scale);
const ease_amount_alpha = ease.circularInOut(amount_scale);
let flowerSize = width/30
let flowerScale = map(ease_amount_scale, 0, 1, flowerSize/2, flowerSize);
let flowerAlpha = map(ease_amount_alpha, 0, 1, 0, 150);
fill(191, 164, 90, 100);
ellipse(x, y+(0.09*height), width/14);
fill(252, 214, 109);
ellipse(x, y+(0.09*height), width/15);
fill(252, 214, 109, flowerAlpha);
strokeWeight(width/1000);
stroke(237, 162, 0, flowerAlpha);
ellipse(x, y+(0.09*height), flowerScale*2);
stroke(237, 162, 0, flowerAlpha+25);
ellipse(x, y+(0.09*height), flowerScale*1.66);
stroke(237, 162, 0, flowerAlpha+50);
ellipse(x, y+(0.09*height), flowerScale*1.33);
stroke(237, 162, 0, flowerAlpha+100);
ellipse(x, y+(0.09*height), flowerScale);
stroke(237, 162, 0, flowerAlpha+150);
ellipse(x, y+(0.09*height), flowerScale*0.66);
stroke(237, 162, 0, flowerAlpha+200);
ellipse(x, y+(0.09*height), flowerScale*0.33);
ellipse(x, y+(0.09*height), flowerScale*0.1);
ellipse(x, y+(0.09*height), flowerScale*0.05);
pop();
pop();
}
function flower2 (x, y, cur_frac){
let petalxOffset;
let petalyOffset;
noStroke();
petalxOffset = [0, width/37.5, width/22.5, width/22.5, width/37.5, 0, -width/37.5, -width/22.5, -width/22.5, -width/37.5];
petalyOffset = [width/200, width/60, width/25, width/15, width/11, width/10, width/11, width/15, width/25, width/60];
for (let i = 0; i < 10; i++) {
push();
translate(petalxOffset[i], petalyOffset[i]);
noStroke();
fill(99, 45, 93, 100);
ellipse(x+width/200, y+width/200, width/20)
fill(245, 100, 120);
ellipse(x, y, width/25)
pop();
}
let flowerCentre = true;
if (cur_frac < 0.5) {
flowerCentre = true;
amount_scale = cur_frac * 2;
}
else {
flowerCentre = false;
amount_scale = map(cur_frac, 0.5, 1, 1, 0);
}
const ease_amount_scale = ease.circularIn(amount_scale);
const ease_amount_alpha = ease.circularInOut(amount_scale);
let flowerSize = width/30
let flowerScale = map(ease_amount_scale, 0, 1, flowerSize/2, flowerSize);
let flowerAlpha = map(ease_amount_alpha, 0, 1, 0, 150);
fill(74, 53, 27, 100);
ellipse(x, y+(0.09*height), width/14);
fill(138, 110, 77);
ellipse(x, y+(0.09*height), width/15);
fill(138, 110, 77, flowerAlpha);
strokeWeight(width/1000);
stroke(56, 31, 0, flowerAlpha);
ellipse(x, y+(0.09*height), flowerScale*2);
stroke(56, 31, 0, flowerAlpha+25);
ellipse(x, y+(0.09*height), flowerScale*1.66);
stroke(56, 31, 0, flowerAlpha+50);
ellipse(x, y+(0.09*height), flowerScale*1.33);
stroke(56, 31, 0, flowerAlpha+100);
ellipse(x, y+(0.09*height), flowerScale);
stroke(56, 31, 0, flowerAlpha+150);
ellipse(x, y+(0.09*height), flowerScale*0.66);
stroke(56, 31, 0, flowerAlpha+200);
ellipse(x, y+(0.09*height), flowerScale*0.33);
stroke(56, 31, 0, flowerAlpha+200);
ellipse(x, y+(0.09*height), flowerScale*0.1);
pop();
}
function flower3 (x, y, cur_frac){
let petalxOffset;
let petalyOffset;
petalxOffset = [0, width/55, width/35, width/55, 0, -width/55, -width/35, -width/55];
petalyOffset = [width/45, width/35, width/20, width/14, width/12.5, width/14, width/20, width/35];
noStroke();
push();
for (let i = 0; i < 8; i++) {
push();
translate(petalxOffset[i], petalyOffset[i]);
noStroke();
fill(99, 45, 93, 100);
ellipse(x+width/200, y+width/200, width/40)
fill(255);
ellipse(x, y, width/40)
pop();
}
let flowerCentre = true;
if (cur_frac < 0.5) {
flowerCentre = true;
amount_scale = cur_frac * 2;
}
else {
flowerCentre = false;
amount_scale = map(cur_frac, 0.5, 1, 1, 0);
}
const ease_amount_scale = ease.quadraticOut(amount_scale);
const ease_amount_alpha = ease.circularInOut(amount_scale);
let flowerSize = width/45
let flowerScale = map(ease_amount_scale, 0, 1, flowerSize/2, flowerSize);
let flowerAlpha = map(ease_amount_alpha, 0, 1, 0, 150);
fill(191, 164, 90, 100);
ellipse(x, y+(0.09*height), width/20);
fill(252, 214, 109);
ellipse(x, y+(0.09*height), width/22.5);
fill(252, 214, 109, flowerAlpha);
strokeWeight(width/1000);
stroke(237, 162, 0, flowerAlpha);
ellipse(x, y+(0.09*height), flowerScale*2);
stroke(237, 162, 0, flowerAlpha+25);
ellipse(x, y+(0.09*height), flowerScale*1.66);
stroke(237, 162, 0, flowerAlpha+50);
ellipse(x, y+(0.09*height), flowerScale*1.33);
stroke(237, 162, 0, flowerAlpha+100);
ellipse(x, y+(0.09*height), flowerScale);
stroke(237, 162, 0, flowerAlpha+150);
ellipse(x, y+(0.09*height), flowerScale*0.66);
stroke(237, 162, 0, flowerAlpha+200);
ellipse(x, y+(0.09*height), flowerScale*0.33);
ellipse(x, y+(0.09*height), flowerScale*0.1);
ellipse(x, y+(0.09*height), flowerScale*0.05);
pop();
}
function waves (x, y, cur_frac) {
push();
noFill();
let going_up = true;
strokeWeight(height/150);
translate(width*0.08, 0);
if (cur_frac < 0.5) {
going_up = true;
amount_down = cur_frac * 2;
}
else {
going_up = false;
amount_down = (cur_frac-0.5) * 2;
}
const ease_amount_up = ease.quadraticIn(amount_down);
let strokeAlpha = map(amount_down, 0, 1, 200, 100);
stroke(255, 255, 255, strokeAlpha);
beginShape();
var yoff = 0;
let nudgeScale = getNoiseValue(x, y, ease_amount_up, "nudgeScale", 0, height/500, 10);
for (let i=0; i<360; i++){
var waveX1 = map(i, 0, 360, -width/10, 0);
var waveNoiseY = map(noise(yoff), 0, 1, 0, height/50);
var waveSineY = sin(i*3) * height/300 + sin(i*2.5) * height/500;
var waveY = (waveSineY+waveNoiseY+nudgeScale)
let waveYpos;
let waveXpos;
if(cur_frac<0.5){
waveYpos = map(ease_amount_up, 0, 0.5, -waveY/4, waveY/4);
waveX2 = map(ease_amount_up, 0, 0.5, width/11, width/12);
}
else{
waveYpos = map(ease_amount_up, 0.5, 1, waveY/4, -waveY/4);
waveX2 = map(ease_amount_up, 0.5, 1, width/12, width/11);
}
waveXpos = waveX1+waveX2
vertex(waveXpos+x, waveYpos+y);
yoff += 0.01
}
endShape();
pop();
}
const ease = new p5.Ease();
function draw_one_frame(cur_frac) {
angleMode(DEGREES);
noStroke();
fill(191, 228, 255);
rect(0, 0, width, height); //background
noFill();
stroke(168, 207, 237); //tile shadows
strokeWeight(height*0.015);
for (let ii=0; ii<4; ii++){
for (let i=0; i<7; i++) {
line(width/14.8+width/7*i, 0, width/14.8+width/7*i, height);
line(0, width/14.8+width/7*ii, width, width/14.8+width/7*ii);
}
}
stroke(224, 242, 255); //tile grout
strokeWeight(height*0.005);
for (let ii=0; ii<4; ii++){
for (let i=0; i<7; i++) {
line(width/14+width/7*i, 0, width/14+width/7*i, height);
line(0, width/14+width/7*ii, width, width/14+width/7*ii);
}
}
let row1_x = 0.45 * width; //small row position
let sml2offset = 0.2 * width; //2nd small row offset
let sml3offset = -0.33 * width; //3rd small row offset
let row2_x = 0.3 * width; //medium row position
let mid2offset = 0.45 * width; //2nd medium row offset
let mid3offset = 0.5 * width; //3rd medium row offset
let row3_x = 0.6 * width; //big row position
let b1_size = height/10; //bubble sizes
let b2_size = height/7;
let b3_size = height/4.1;
const ease_frac = ease.smootherStep(cur_frac); //eased frames 0-1
let grid_points1 = [ //points along the path of bubbles
1.25 * height,
1.00 * height,
0.75 * height,
0.50 * height,
0.25 * height,
0.0 * height,
-0.25 * height
]
let wave_grid_points1 = []; //adjust grid points into wave pattern using noise
for (let i=0; i<grid_points1.length; i++) {
let wave = getNoiseValue(grid_points1[i], row1_x, 0, "wave_grid_points1", -b1_size*0.75, b1_size*0.75, 100);
wave_grid_points1.push(row1_x + wave);
}
let wave_grid_points1a = []; //another set of wave points for variation
for (let i=0; i<grid_points1.length; i++) {
let wave1 = getNoiseValue(grid_points1[i], row1_x, 0, "wave_grid_points1a", -b1_size*0.75, b1_size*0.75, 100);
wave_grid_points1a.push(row1_x + wave1);
}
//draw small bubbles
for(let i=0; i<grid_points1.length-1; i++) {
let cur_y_pos = map(cur_frac, 0, 1, grid_points1[i], grid_points1[i+1]);
let cur_x_pos = map(ease_frac, 0, 1, wave_grid_points1[i], wave_grid_points1[i+1]);
let cur_x_pos2 = map(ease_frac, 0, 1, wave_grid_points1a[i], wave_grid_points1a[i+1]);
drawBubble(cur_x_pos2, cur_y_pos, b1_size);
drawBubble(cur_x_pos+sml2offset, cur_y_pos-height*0.2, b1_size);
drawBubble(cur_x_pos+sml3offset, cur_y_pos-height*0.1, b1_size);
}
let grid_points2 = [
1.05 * height,
0.70 * height,
0.35 * height,
0 * height,
-0.35 * height
]
let wave_grid_points2 = [];
for (let i=0; i<grid_points2.length; i++) {
let wave2 = getNoiseValue(grid_points2[i], row2_x, 0, "wave_grid_points2", -b2_size*0.5, b2_size*0.5, 100);
wave_grid_points2.push(row2_x + wave2);
}
let wave_grid_points2a = [];
for (let i=0; i<grid_points2.length; i++) {
let wave2a = getNoiseValue(grid_points2[i], row2_x, 0, "wave_grid_points2a", -b2_size*0.5, b2_size*0.5, 100);
wave_grid_points2a.push(row2_x + wave2a);
}
//draw medium bubbles
for(let i=0; i<grid_points2.length-1; i++) {
let cur_y_pos = map(cur_frac, 0, 1, grid_points2[i], grid_points2[i+1]);
let cur_x_pos = map(ease_frac, 0, 1, wave_grid_points2[i], wave_grid_points2[i+1]);
let cur_x_pos2 = map(ease_frac, 0, 1, wave_grid_points1a[i], wave_grid_points1a[i+1]);
let cur_x_pos3 = map(ease_frac, 0, 1, wave_grid_points2a[i], wave_grid_points2a[i+1]);
drawBubble(cur_x_pos3, cur_y_pos, b2_size);
drawBubble(cur_x_pos+mid2offset, cur_y_pos+height*0.2, b2_size);
drawBubble(cur_x_pos2+mid3offset, cur_y_pos+height*0.1, b2_size);
}
let grid_points3 = [
1.10 * height,
0.60 * height,
0.10 * height,
-0.40 * height
]
let wave_grid_points3 = [];
for (let i=0; i<grid_points3.length; i++) {
let wave3 = getNoiseValue(grid_points3[i], row3_x, 0, "wave_grid_points3", -b3_size*0.35, b3_size*0.35, 100);
wave_grid_points3.push(row3_x + wave3);
}
//draw big bubbles
for(let i=0; i<grid_points3.length-1; i++) {
let cur_y_pos = map(cur_frac, 0, 1, grid_points3[i], grid_points3[i+1]);
let cur_x_pos = map(ease_frac, 0, 1, wave_grid_points3[i], wave_grid_points3[i+1]);
drawBubble(cur_x_pos, cur_y_pos, b3_size);
}
//drawing the cat
push();
scale(1.2);
translate(0,-height*0.15);
let change_direction = true; //set up variables for 50/50 back and forth
let amount_along = 0;
if (cur_frac < 0.5) {
change_direction = true;
amount_along = cur_frac * 2;
}
else {
change_direction = false;
amount_along = (cur_frac-0.5) * 2;
}
const eye_min = height*0.732;
const eye_max = height*0.768;
const ease_amount_along = ease.circularInOut(amount_along);
const ease_eyes = ease.circularInOut(cur_frac);
if(cur_frac <= 0.25){ //eyes move down for 1/4, up for 3/4
eye_y_pos = map(ease_amount_along, 0, 1, eye_min, eye_max);
}
else{
eye_y_pos = map(ease_eyes, 0, 1, eye_max, eye_min);
}
if(change_direction) { //tail flicking back and forth
tail_pos1 = map(ease_amount_along, 0, 1, height*0.325, height*0.375);
tail_pos2 = map(ease_amount_along, 0, 1, height*0.37, height*0.33);
tail_pos3 = map(ease_amount_along, 0, 1, height*0.36, height*0.34);
}
else {
tail_pos1 = map(ease_amount_along, 0, 1, height*0.375, height*0.325);
tail_pos2 = map(ease_amount_along, 0, 1, height*0.33, height*0.37);
tail_pos3 = map(ease_amount_along, 0, 1, height*0.34, height*0.36);
}
let catGrey = color(115, 131, 158);
let catLight = color(153, 170, 196);
let lightGreen = color(111, 189, 158);
let darkGreen = color(10, 144, 90);
noStroke();
fill(155, 194, 224, 185); //shadows
let shadowX = height*0.025;
let shadowY = height*0.05;
beginShape(); //ears shadow
curveVertex(height*0.08+shadowX, height*0.52+shadowY);
curveVertex(height*0.08+shadowX, height*0.52+shadowY);
curveVertex(height*0.23+shadowX, height*0.55+shadowY);
curveVertex(height*0.155+shadowX, height*0.625+shadowY);
curveVertex(height*0.155+shadowX, height*0.625+shadowY);
endShape(CLOSE);
beginShape();
curveVertex(height*0.08+shadowX, height*0.84+shadowY);
curveVertex(height*0.08+shadowX, height*0.84+shadowY);
curveVertex(height*0.23+shadowX, height*0.8+shadowY);
curveVertex(height*0.155+shadowX, height*0.735+shadowY);
curveVertex(height*0.155+shadowX, height*0.735+shadowY);
endShape(CLOSE);
fill(155, 194, 224, 205);
ellipse(width*0.005+shadowX, height*0.68+shadowY, height*0.31, height*0.36); //head shadow
noFill();
stroke(155, 194, 224, 185); //tail shadow
strokeWeight(height*0.07);
beginShape();
curveVertex(-height*0.05+shadowX, height*0.35+shadowY);
curveVertex(-height*0.05+shadowX, height*0.35+shadowY);
curveVertex(height*0.12+shadowX, tail_pos1+shadowY);
curveVertex(height*0.25+shadowX, tail_pos2+shadowY);
curveVertex(height*0.3+shadowX, tail_pos3+shadowY);
curveVertex(height*0.3+shadowX, tail_pos3+shadowY);
endShape();
strokeWeight(height*0.007); //whisker shadow
line(width*0.015+shadowX, height*0.858+shadowY, width*0.02+shadowX, height*0.88+shadowY);
line(width*0.001+shadowX, height*0.858+shadowY, width*0.005+shadowX, height*0.89+shadowY);
//end of shadows
noStroke();
fill(catGrey);
beginShape(); //ears
curveVertex(height*0.08, height*0.52);
curveVertex(height*0.08, height*0.52);
curveVertex(height*0.23, height*0.55);
curveVertex(height*0.13, height*0.64);
curveVertex(height*0.13, height*0.64);
endShape(CLOSE);
beginShape();
curveVertex(height*0.08, height*0.84);
curveVertex(height*0.08, height*0.84);
curveVertex(height*0.23, height*0.8);
curveVertex(height*0.13, height*0.72);
curveVertex(height*0.13, height*0.72);
endShape(CLOSE);
fill(103, 118, 143); //ear shading
beginShape();
curveVertex(height*0.08, height*0.84);
curveVertex(height*0.08, height*0.84);
curveVertex(height*0.23, height*0.8);
curveVertex(height*0.09, height*0.75);
curveVertex(height*0.09, height*0.75);
endShape(CLOSE);
push();
fill(catLight);
scale(0.6);
beginShape(); //inner ears
curveVertex(height*0.15, height*0.91);
curveVertex(height*0.15, height*0.91);
curveVertex(height*0.35, height*0.94);
curveVertex(height*0.25, height*1.03);
curveVertex(height*0.25, height*1.03);
endShape(CLOSE);
beginShape();
curveVertex(height*0.15, height*1.355);
curveVertex(height*0.15, height*1.355);
curveVertex(height*0.35, height*1.315);
curveVertex(height*0.25, height*1.235);
curveVertex(height*0.25, height*1.235);
endShape(CLOSE);
fill(143, 160, 186); //inner ear shading
beginShape();
curveVertex(height*0.15, height*1.355);
curveVertex(height*0.15, height*1.355);
curveVertex(height*0.35, height*1.317);
curveVertex(height*0.23, height*1.27);
curveVertex(height*0.23, height*1.27);
endShape(CLOSE);
pop();
fill(103, 118, 143); //head shading
ellipse(width*0.005, height*0.68, height*0.31, height*0.36);
fill(catGrey); //head
ellipse(width*0.005, height*0.67, height*0.295, height*0.345);
push();
translate(-height*0.003, height*0.012); //tail shading
noFill();
stroke(103, 118, 143);
strokeWeight(height*0.074);
beginShape();
curveVertex(-height*0.05, height*0.35);
curveVertex(-height*0.05, height*0.35);
curveVertex(height*0.12, tail_pos1);
curveVertex(height*0.25, tail_pos2);
curveVertex(height*0.3, tail_pos3);
curveVertex(height*0.3, tail_pos3);
endShape();
stroke(143, 160, 186);
strokeWeight(height*0.075);
strokeCap(SQUARE);
beginShape();
curveVertex(height*0.09, tail_pos1);
curveVertex(height*0.25, tail_pos2);
curveVertex(height*0.3, tail_pos3);
curveVertex(height*0.3, tail_pos3);
endShape();
noStroke();
fill(143, 160, 186);
ellipse(height*0.3, tail_pos3, height*0.075);
pop();
noFill();
stroke(catGrey); //drawing tail
strokeWeight(height*0.07);
beginShape();
curveVertex(-height*0.05, height*0.35);
curveVertex(-height*0.05, height*0.35);
curveVertex(height*0.12, tail_pos1);
curveVertex(height*0.25, tail_pos2);
curveVertex(height*0.3, tail_pos3);
curveVertex(height*0.3, tail_pos3);
endShape();
noStroke();
fill(143, 160, 186); //extra shading
ellipse(height*0.25, tail_pos2+height*0.033, height*0.031);
noFill();
stroke(catLight); //lighter end of tail
strokeWeight(height*0.071);
strokeCap(SQUARE);
beginShape();
curveVertex(height*0.09, tail_pos1);
curveVertex(height*0.25, tail_pos2);
curveVertex(height*0.3, tail_pos3);
curveVertex(height*0.3, tail_pos3);
endShape();
noStroke();
fill(catLight); //extra circles for end of tail
ellipse(height*0.3, tail_pos3, height*0.071);
ellipse(height*0.25, tail_pos2, height*0.031);
ellipse(height*0.25, tail_pos2+height*0.02, height*0.031);
ellipse(height*0.25, tail_pos2-height*0.02, height*0.031);
noStroke();
fill(lightGreen); //eyes
ellipse(width*0.025, height*0.75, height*0.055, height*0.06);
ellipse(width*0.025, height*0.61, height*0.055, height*0.06);
fill(lerpColor(lightGreen,darkGreen,0.25)); //eye gradient
ellipse(width*0.025, eye_y_pos, height*0.048, height*0.053);
ellipse(width*0.025, eye_y_pos-height*0.14, height*0.048, height*0.053);
fill(lerpColor(lightGreen,darkGreen,0.5));
ellipse(width*0.025, eye_y_pos, height*0.043, height*0.048);
ellipse(width*0.025, eye_y_pos-height*0.14, height*0.043, height*0.048);
fill(lerpColor(lightGreen,darkGreen,0.75));
ellipse(width*0.025, eye_y_pos, height*0.038, height*0.043);
ellipse(width*0.025, eye_y_pos-height*0.14, height*0.038, height*0.043);
fill(darkGreen);
ellipse(width*0.025, eye_y_pos, height*0.033, height*0.038);
ellipse(width*0.025, eye_y_pos-height*0.14, height*0.033, height*0.038);
fill(10); //pupils
ellipse(width*0.025, eye_y_pos, height*0.04, height*0.015);
ellipse(width*0.025, eye_y_pos-height*0.14, height*0.04, height*0.015);
fill(240, 245, 255); //shine
ellipse(width*0.023, height*0.73, height*0.01, height*0.015);
ellipse(width*0.023, height*0.59, height*0.01, height*0.015);
noFill(); //circle around eyes to cover extra circles
strokeWeight(height*0.05);
stroke(catGrey);
ellipse(width*0.025, height*0.75, height*0.105, height*0.11);
ellipse(width*0.025, height*0.61, height*0.105, height*0.11);
stroke(catLight); //whiskers
strokeCap(ROUND);
strokeWeight(height*0.007);
line(-width*0.018, height*0.72, width*0.02, height*0.88);
line(-width*0.018, height*0.72, width*0.005, height*0.89);
line(-width*0.018, height*0.64, width*0.02, height*0.48);
line(-width*0.018, height*0.64, width*0.005, height*0.47);
pop();
}
function drawBubble(x,y,s){
angleMode(DEGREES);
let b1_size = height/10; //bubble sizes
let b2_size = height/7;
let b3_size = height/4.1;
let green = color(82, 235, 150, 50);
let blue = color(70, 154, 250, 50);
let purple = color(191, 106, 247, 50);
let pink = color(252, 109, 248, 50);
noStroke();
fill(168, 207, 237, 150);
if(s==b3_size){
fill(168, 207, 237, 115);
ellipse(x+height*0.06,y+height*0.1,s*0.9);
}
else if(s==b2_size){
ellipse(x+height*0.04,y+height*0.054,s*0.9);
}
else{
ellipse(x+height*0.015,y+height*0.03,s*0.9);
}
noFill();
//colour gradient
strokeWeight(s*0.1);
stroke(green);
ellipse(x,y,s*0.3);
ellipse(x,y,s*0.333);
stroke(lerpColor(green,blue,0.33));
ellipse(x,y,s*0.366);
ellipse(x,y,s*0.4);
stroke(lerpColor(green,blue,0.66));
ellipse(x,y,s*0.433);
ellipse(x,y,s*0.466);
ellipse(x,y,s*0.5);
stroke(blue);
ellipse(x,y,s*0.533);
ellipse(x,y,s*0.566);
ellipse(x,y,s*0.6);
stroke(lerpColor(blue,purple,0.33));
ellipse(x,y,s*0.633);
ellipse(x,y,s*0.666);
ellipse(x,y,s*0.7);
ellipse(x,y,s*0.733);
stroke(lerpColor(blue,purple,0.66));
ellipse(x,y,s*0.766);
ellipse(x,y,s*0.8);
ellipse(x,y,s*0.833);
stroke(purple);
ellipse(x,y,s*0.866);
ellipse(x,y,s*0.9);
stroke(lerpColor(purple,pink,0.5));
ellipse(x,y,s*0.933);
stroke(pink);
strokeWeight(s*0.05);
ellipse(x,y,s*1);
//white highlights
stroke(255,230);
strokeWeight(s*0.05);
arc(x,y,s,s,-185,-70);
arc(x,y,s,s,-210,-200);
arc(x,y,s,s,25,80);
stroke(255,240);
strokeWeight(s*0.225);
arc(x,y,s/2,s/2,-180,-80);
strokeWeight(s*0.2);
arc(x,y,s/2,s/2,35,60);
}
/*
* FaceMap class - holds all informaiton about one mapped
* face and is able to draw itself.
*/
// remove this or set to false to enable full program (load will be slower)
var DEBUG_MODE = true;
// this can be used to set the number of sliders to show
var NUM_SLIDERS = 3;
// other variables can be in here too
const fg_color = [255];
// example of a global function
// given a segment, this returns the average point [x, y]
function segment_average(segment) {
let sum_x = 0;
let sum_y = 0;
let s_len = segment.length;
for (let i=0; i<s_len; i++) {
sum_x = sum_x + segment[i][0];
sum_y = sum_y + segment[i][1];
}
return [sum_x / s_len , sum_y / s_len ];
}
// This where you define your own face object
function Face() {
// these are state variables for a face
// (your variables should be different!)
this.eye_type = 1; // can be either 1 (cyclops) or 2 (two eyes)
this.eye_shift = -1; // range is -10 to 10
this.mouth_value = 1; // range is 0.5 to 8
// example of a function *inside* the face object.
// this draws a segment, and do_loop will connect the ends if true
this.draw_segment = function(segment, do_loop) {
for(let i=0; i<segment.length; i++) {
let px = segment[i][0];
let py = segment[i][1];
if(i < segment.length - 1) {
let nx = segment[i+1][0];
let ny = segment[i+1][1];
ellipse(px,py,.1)
line(px, py, nx, ny);
}
else if(do_loop) {
let nx = segment[0][0];
let ny = segment[0][1];
line(px, py, nx, ny);
}
}
};
/*
* Draw the face with position lists that include:
* chin, right_eye, left_eye, right_eyebrow, left_eyebrow
* bottom_lip, top_lip, nose_tip, nose_bridge,
*/
this.draw = function(positions) {
rectMode(CENTER)
strokeWeight(.01);
// eyebrows
stroke(fg_color);
let left_eyebrow_pos = segment_average(positions.left_eyebrow);
this.draw_segment(positions.left_eyebrow);
let right_eyebrow_pos = segment_average(positions.right_eyebrow);
this.draw_segment(positions.right_eyebrow);
// draw segments of face using points
stroke(fg_color);
this.draw_segment(positions.chin);
stroke(fg_color);
this.draw_segment(positions.nose_bridge);
let nose_tip_pos = segment_average(positions.nose_tip);
this.draw_segment(positions.nose_tip);
stroke(fg_color);
this.draw_segment(positions.top_lip);
let top_lip_pos = segment_average(positions.top_lip);
this.draw_segment(positions.bottom_lip);
stroke(fg_color);
let left_eye_pos = segment_average(positions.left_eye);
this.draw_segment(positions.left_eye, true);
let right_eye_pos = segment_average(positions.right_eye);
this.draw_segment(positions.right_eye, true);
// eyes
noStroke();
let curEyeShift = 0.04 * this.eye_shift;
fill(fg_color);
ellipse(left_eye_pos[0] + curEyeShift, left_eye_pos[1], 0.18);
ellipse(right_eye_pos[0] + curEyeShift, right_eye_pos[1], 0.18);
var gridSize = 3;
var cellSize = .75;
/*** TOM ADDED THIS LOOP #1 to "color in" the face ***/
// this is a lookup table that keeps track of previous cells
let leftmost_cell_in_row = [];
for (let y = -gridSize; y < gridSize; y+=cellSize) {
// each row we'll draw one line from left_x to right_x
let left_x = null;
let right_x = null;
for (let x = -gridSize; x < gridSize; x+=cellSize) {
let lastX = null;
let lastY = null;
for (let i = 0; i < positions.chin.length; i++) {
if (positions.chin[i][0] > (x - cellSize/2) && positions.chin[i][0] < (x + cellSize/2) && positions.chin[i][1] > (y - cellSize/2) && positions.chin[i][1] < (y + cellSize/2)) {
if (x != lastX && y != lastY) {
lastX = x;
lastY = y;
// first check if this is the first one
if (left_x == null) {
// just record this for both left and right
left_x = x;
right_x = x;
}
else if(x < left_x) {
// new left_x
left_x = x;
}
else if(x > right_x) {
right_x = x;
}
}
}
}
noFill();
stroke(200,50)
rect(x, y, cellSize, cellSize);
}
if (left_x != null) {
// now draw the line (series of cells)
fill(255,255,0);
stroke(200,10)
for(let j=left_x; j<=right_x; j+=cellSize) {
rect(j, y, cellSize, cellSize);
}
}
}
/*** END OF TOM'S ADDITONS ***/
for (let x = -gridSize; x < gridSize; x+=cellSize) {
for (let y = -gridSize; y < gridSize; y+=cellSize) {
let lastX = null;
let lastY = null;
if (left_eye_pos[0] > (x - cellSize/2) && left_eye_pos[0] < (x + cellSize/2) && left_eye_pos[1] > (y - cellSize/2) && left_eye_pos[1] < (y + cellSize/2)) {
if (this.eye_type === 1) {
eye1(x,y);
} else {
eye2(x,y);
}
} else if (right_eye_pos[0] > (x - cellSize/2) && right_eye_pos[0] < (x + cellSize/2) && right_eye_pos[1] > (y - cellSize/2) && right_eye_pos[1] < (y + cellSize/2)) {
if (this.eye_type === 1) {
eye1(x,y);
} else {
eye2(x,y);
}
} else if (positions.nose_bridge[0][0] > (x - cellSize/2) && positions.nose_bridge[0][0] < (x + cellSize/2) && positions.nose_bridge[0][1] > (y - cellSize/2) && positions.nose_bridge[0][1] < (y + cellSize/2)) {
noseBridge(x, y);
} else if (positions.nose_bridge[3][0] > (x - cellSize/2) && positions.nose_bridge[3][0] < (x + cellSize/2) && positions.nose_bridge[3][1] > (y - cellSize/2) && positions.nose_bridge[3][1] < (y + cellSize/2)) {
noseTip(x, y)
} else if (top_lip_pos[0] > (x - cellSize/2) && top_lip_pos[0] < (x + cellSize/2) && top_lip_pos[1] > (y - cellSize/2) && top_lip_pos[1] < (y + cellSize/2)) {
mouth(x, y);
} else if (left_eyebrow_pos[0] > (x - cellSize/2) && left_eyebrow_pos[0] < (x + cellSize/2) && left_eyebrow_pos[1] > (y - cellSize/2) && left_eyebrow_pos[1] < (y + cellSize/2)) {
eyebrow(x, y);
} else if (right_eyebrow_pos[0] > (x - cellSize/2) && right_eyebrow_pos[0] < (x + cellSize/2) && right_eyebrow_pos[1] > (y - cellSize/2) && right_eyebrow_pos[1] < (y + cellSize/2)) {
eyebrow(x, y);
} else {
for (let i = 0; i < positions.chin.length; i++) {
if (positions.chin[i][0] > (x - cellSize/2) && positions.chin[i][0] < (x + cellSize/2) && positions.chin[i][1] > (y - cellSize/2) && positions.chin[i][1] < (y + cellSize/2)) {
if (x != lastX && y != lastY) {
fill(255,0,0);
stroke(200,10)
lastX = x;
lastY = y;
rect(x, y, cellSize, cellSize);
}
}
}
}
noFill();
stroke(200,50)
rect(x, y, cellSize, cellSize);
}
}
// print(this.eye_type)
function eye1(x, y) {
fill(255, 0, 0);
beginShape()
vertex(x - cellSize/2, y - cellSize/2);
vertex(x + cellSize/2, y - cellSize/2);
vertex(x + cellSize/2, y + cellSize/2);
vertex(x - cellSize/2, y + cellSize/2);
endShape(CLOSE);
fill(255);
beginShape();
vertex(x - cellSize/2, y);
bezierVertex(x - cellSize/4, y, x - cellSize/4, y + cellSize/4, x, y + cellSize/4);
bezierVertex(x + cellSize/4, y + cellSize/4, x + cellSize/4, y, x + cellSize/2, y);
bezierVertex(x + cellSize/4, y, x + cellSize/4, y - cellSize/4, x, y - cellSize/4);
bezierVertex(x - cellSize/4, y - cellSize/4, x - cellSize/4, y, x - cellSize/2, y);
endShape();
fill(0)
ellipse(x,y,cellSize/4)
}
function eye2(x, y) {
fill(255, 0, 0);
beginShape()
vertex(x - cellSize/2, y - cellSize/2);
vertex(x + cellSize/2, y - cellSize/2);
vertex(x + cellSize/2, y + cellSize/2);
vertex(x - cellSize/2, y + cellSize/2);
endShape(CLOSE);
fill(255);
ellipse(x, y, cellSize)
fill(0)
ellipse(x,y,cellSize/4)
}
function noseBridge(x,y) {
fill(255,0,0)
beginShape();
vertex(x - cellSize/2, y - cellSize/2);
vertex(x + positions.nose_bridge[0][0], y - cellSize/2);
vertex(x + positions.nose_bridge[0][0], y + cellSize/2);
vertex(x - cellSize/2, y + cellSize/2);
endShape(CLOSE);
fill(255);
beginShape();
vertex(x + cellSize/2, y - cellSize/2);
vertex(x + positions.nose_bridge[0][0], y - cellSize/2);
vertex(x + positions.nose_bridge[0][0], y + cellSize/2);
vertex(x + cellSize/2, y + cellSize/2);
endShape(CLOSE);
}
function noseTip(x,y) {
fill(255,0,0)
beginShape();
vertex(x - cellSize/2, y + nose_tip_pos[1]);
vertex(x + cellSize/2, y + nose_tip_pos[1]);
vertex(x + cellSize/2, y + cellSize/2);
vertex(x - cellSize/2, y + cellSize/2);
endShape(CLOSE);
fill(255);
beginShape();
vertex(x - cellSize/2, y + nose_tip_pos[1]);
vertex(x + cellSize/2, y + nose_tip_pos[1]);
vertex(x + cellSize/2, y - cellSize/2);
vertex(x - cellSize/2, y - cellSize/2);
endShape(CLOSE);
}
function mouth(x,y) {
fill(255,0,0)
beginShape();
vertex(x - cellSize/2, y + cellSize/8);
vertex(x + cellSize/2, y + cellSize/8);
vertex(x + cellSize/2, y + cellSize/2);
vertex(x - cellSize/2, y + cellSize/2);
endShape(CLOSE);
fill(255,0,0)
beginShape();
vertex(x - cellSize/2, y - cellSize/8);
vertex(x + cellSize/2, y - cellSize/8);
vertex(x + cellSize/2, y - cellSize/2);
vertex(x - cellSize/2, y - cellSize/2);
endShape(CLOSE);
fill(255)
beginShape();
vertex(x - cellSize/2, y + cellSize/8);
vertex(x - cellSize/2, y - cellSize/8);
vertex(x + cellSize/2, y - cellSize/8);
vertex(x + cellSize/2, y + cellSize/8);
endShape(CLOSE);
}
function eyebrow(x,y) {
fill(255)
beginShape();
vertex(x - cellSize/2, y + cellSize/8);
vertex(x - cellSize/2, y - cellSize/8);
vertex(x + cellSize/2, y - cellSize/8);
vertex(x + cellSize/2, y + cellSize/8);
endShape(CLOSE);
}
}
/* set internal properties based on list numbers 0-100 */
this.setProperties = function(settings) {
this.eye_type = int(map(settings[0], 0, 100, 1, 2));
this.eye_shift = map(settings[1], 0, 100, -2, 2);
this.mouth_value = map(settings[2], 0, 100, 0.5, 8);
}
/* get internal properties as list of numbers 0-100 */
this.getProperties = function() {
let settings = new Array(3);
settings[0] = map(this.eye_type, 1, 2, 0, 100);
settings[1] = map(this.eye_shift, -2, 2, 0, 100);
settings[2] = map(this.mouth_value, 0.5, 8, 0, 100);
return settings;
}
}
[
"five_faces.jpg",
"williams.jpg",
"oscar_selfie.jpg"
]/*
* A fast javascript implementation of simplex noise by Jonas Wagner
Based on a speed-improved simplex noise algorithm for 2D, 3D and 4D in Java.
Which is based on example code by Stefan Gustavson (stegu@itn.liu.se).
With Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
Better rank ordering method by Stefan Gustavson in 2012.
Copyright (c) 2018 Jonas Wagner
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
(function() {
'use strict';
var F2 = 0.5 * (Math.sqrt(3.0) - 1.0);
var G2 = (3.0 - Math.sqrt(3.0)) / 6.0;
var F3 = 1.0 / 3.0;
var G3 = 1.0 / 6.0;
var F4 = (Math.sqrt(5.0) - 1.0) / 4.0;
var G4 = (5.0 - Math.sqrt(5.0)) / 20.0;
function SimplexNoise(randomOrSeed) {
var random;
if (typeof randomOrSeed == 'function') {
random = randomOrSeed;
}
else if (randomOrSeed) {
random = alea(randomOrSeed);
} else {
random = Math.random;
}
this.p = buildPermutationTable(random);
this.perm = new Uint8Array(512);
this.permMod12 = new Uint8Array(512);
for (var i = 0; i < 512; i++) {
this.perm[i] = this.p[i & 255];
this.permMod12[i] = this.perm[i] % 12;
}
}
SimplexNoise.prototype = {
grad3: new Float32Array([1, 1, 0,
-1, 1, 0,
1, -1, 0,
-1, -1, 0,
1, 0, 1,
-1, 0, 1,
1, 0, -1,
-1, 0, -1,
0, 1, 1,
0, -1, 1,
0, 1, -1,
0, -1, -1]),
grad4: new Float32Array([0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1,
0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1,
1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1, 0, -1, -1,
-1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1,
1, 1, 0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1,
-1, 1, 0, 1, -1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, -1,
1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0,
-1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0]),
noise2D: function(xin, yin) {
var permMod12 = this.permMod12;
var perm = this.perm;
var grad3 = this.grad3;
var n0 = 0; // Noise contributions from the three corners
var n1 = 0;
var n2 = 0;
// Skew the input space to determine which simplex cell we're in
var s = (xin + yin) * F2; // Hairy factor for 2D
var i = Math.floor(xin + s);
var j = Math.floor(yin + s);
var t = (i + j) * G2;
var X0 = i - t; // Unskew the cell origin back to (x,y) space
var Y0 = j - t;
var x0 = xin - X0; // The x,y distances from the cell origin
var y0 = yin - Y0;
// For the 2D case, the simplex shape is an equilateral triangle.
// Determine which simplex we are in.
var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
if (x0 > y0) {
i1 = 1;
j1 = 0;
} // lower triangle, XY order: (0,0)->(1,0)->(1,1)
else {
i1 = 0;
j1 = 1;
} // upper triangle, YX order: (0,0)->(0,1)->(1,1)
// A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
// a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
// c = (3-sqrt(3))/6
var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
var y1 = y0 - j1 + G2;
var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords
var y2 = y0 - 1.0 + 2.0 * G2;
// Work out the hashed gradient indices of the three simplex corners
var ii = i & 255;
var jj = j & 255;
// Calculate the contribution from the three corners
var t0 = 0.5 - x0 * x0 - y0 * y0;
if (t0 >= 0) {
var gi0 = permMod12[ii + perm[jj]] * 3;
t0 *= t0;
n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0); // (x,y) of grad3 used for 2D gradient
}
var t1 = 0.5 - x1 * x1 - y1 * y1;
if (t1 >= 0) {
var gi1 = permMod12[ii + i1 + perm[jj + j1]] * 3;
t1 *= t1;
n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1);
}
var t2 = 0.5 - x2 * x2 - y2 * y2;
if (t2 >= 0) {
var gi2 = permMod12[ii + 1 + perm[jj + 1]] * 3;
t2 *= t2;
n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2);
}
// Add contributions from each corner to get the final noise value.
// The result is scaled to return values in the interval [-1,1].
return 70.0 * (n0 + n1 + n2);
},
// 3D simplex noise
noise3D: function(xin, yin, zin) {
var permMod12 = this.permMod12;
var perm = this.perm;
var grad3 = this.grad3;
var n0, n1, n2, n3; // Noise contributions from the four corners
// Skew the input space to determine which simplex cell we're in
var s = (xin + yin + zin) * F3; // Very nice and simple skew factor for 3D
var i = Math.floor(xin + s);
var j = Math.floor(yin + s);
var k = Math.floor(zin + s);
var t = (i + j + k) * G3;
var X0 = i - t; // Unskew the cell origin back to (x,y,z) space
var Y0 = j - t;
var Z0 = k - t;
var x0 = xin - X0; // The x,y,z distances from the cell origin
var y0 = yin - Y0;
var z0 = zin - Z0;
// For the 3D case, the simplex shape is a slightly irregular tetrahedron.
// Determine which simplex we are in.
var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
if (x0 >= y0) {
if (y0 >= z0) {
i1 = 1;
j1 = 0;
k1 = 0;
i2 = 1;
j2 = 1;
k2 = 0;
} // X Y Z order
else if (x0 >= z0) {
i1 = 1;
j1 = 0;
k1 = 0;
i2 = 1;
j2 = 0;
k2 = 1;
} // X Z Y order
else {
i1 = 0;
j1 = 0;
k1 = 1;
i2 = 1;
j2 = 0;
k2 = 1;
} // Z X Y order
}
else { // x0<y0
if (y0 < z0) {
i1 = 0;
j1 = 0;
k1 = 1;
i2 = 0;
j2 = 1;
k2 = 1;
} // Z Y X order
else if (x0 < z0) {
i1 = 0;
j1 = 1;
k1 = 0;
i2 = 0;
j2 = 1;
k2 = 1;
} // Y Z X order
else {
i1 = 0;
j1 = 1;
k1 = 0;
i2 = 1;
j2 = 1;
k2 = 0;
} // Y X Z order
}
// A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
// a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
// a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
// c = 1/6.
var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords
var y1 = y0 - j1 + G3;
var z1 = z0 - k1 + G3;
var x2 = x0 - i2 + 2.0 * G3; // Offsets for third corner in (x,y,z) coords
var y2 = y0 - j2 + 2.0 * G3;
var z2 = z0 - k2 + 2.0 * G3;
var x3 = x0 - 1.0 + 3.0 * G3; // Offsets for last corner in (x,y,z) coords
var y3 = y0 - 1.0 + 3.0 * G3;
var z3 = z0 - 1.0 + 3.0 * G3;
// Work out the hashed gradient indices of the four simplex corners
var ii = i & 255;
var jj = j & 255;
var kk = k & 255;
// Calculate the contribution from the four corners
var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
if (t0 < 0) n0 = 0.0;
else {
var gi0 = permMod12[ii + perm[jj + perm[kk]]] * 3;
t0 *= t0;
n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0 + grad3[gi0 + 2] * z0);
}
var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
if (t1 < 0) n1 = 0.0;
else {
var gi1 = permMod12[ii + i1 + perm[jj + j1 + perm[kk + k1]]] * 3;
t1 *= t1;
n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1 + grad3[gi1 + 2] * z1);
}
var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
if (t2 < 0) n2 = 0.0;
else {
var gi2 = permMod12[ii + i2 + perm[jj + j2 + perm[kk + k2]]] * 3;
t2 *= t2;
n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2 + grad3[gi2 + 2] * z2);
}
var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
if (t3 < 0) n3 = 0.0;
else {
var gi3 = permMod12[ii + 1 + perm[jj + 1 + perm[kk + 1]]] * 3;
t3 *= t3;
n3 = t3 * t3 * (grad3[gi3] * x3 + grad3[gi3 + 1] * y3 + grad3[gi3 + 2] * z3);
}
// Add contributions from each corner to get the final noise value.
// The result is scaled to stay just inside [-1,1]
return 32.0 * (n0 + n1 + n2 + n3);
},
// 4D simplex noise, better simplex rank ordering method 2012-03-09
noise4D: function(x, y, z, w) {
var perm = this.perm;
var grad4 = this.grad4;
var n0, n1, n2, n3, n4; // Noise contributions from the five corners
// Skew the (x,y,z,w) space to determine which cell of 24 simplices we're in
var s = (x + y + z + w) * F4; // Factor for 4D skewing
var i = Math.floor(x + s);
var j = Math.floor(y + s);
var k = Math.floor(z + s);
var l = Math.floor(w + s);
var t = (i + j + k + l) * G4; // Factor for 4D unskewing
var X0 = i - t; // Unskew the cell origin back to (x,y,z,w) space
var Y0 = j - t;
var Z0 = k - t;
var W0 = l - t;
var x0 = x - X0; // The x,y,z,w distances from the cell origin
var y0 = y - Y0;
var z0 = z - Z0;
var w0 = w - W0;
// For the 4D case, the simplex is a 4D shape I won't even try to describe.
// To find out which of the 24 possible simplices we're in, we need to
// determine the magnitude ordering of x0, y0, z0 and w0.
// Six pair-wise comparisons are performed between each possible pair
// of the four coordinates, and the results are used to rank the numbers.
var rankx = 0;
var ranky = 0;
var rankz = 0;
var rankw = 0;
if (x0 > y0) rankx++;
else ranky++;
if (x0 > z0) rankx++;
else rankz++;
if (x0 > w0) rankx++;
else rankw++;
if (y0 > z0) ranky++;
else rankz++;
if (y0 > w0) ranky++;
else rankw++;
if (z0 > w0) rankz++;
else rankw++;
var i1, j1, k1, l1; // The integer offsets for the second simplex corner
var i2, j2, k2, l2; // The integer offsets for the third simplex corner
var i3, j3, k3, l3; // The integer offsets for the fourth simplex corner
// simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.
// Many values of c will never occur, since e.g. x>y>z>w makes x<z, y<w and x<w
// impossible. Only the 24 indices which have non-zero entries make any sense.
// We use a thresholding to set the coordinates in turn from the largest magnitude.
// Rank 3 denotes the largest coordinate.
i1 = rankx >= 3 ? 1 : 0;
j1 = ranky >= 3 ? 1 : 0;
k1 = rankz >= 3 ? 1 : 0;
l1 = rankw >= 3 ? 1 : 0;
// Rank 2 denotes the second largest coordinate.
i2 = rankx >= 2 ? 1 : 0;
j2 = ranky >= 2 ? 1 : 0;
k2 = rankz >= 2 ? 1 : 0;
l2 = rankw >= 2 ? 1 : 0;
// Rank 1 denotes the second smallest coordinate.
i3 = rankx >= 1 ? 1 : 0;
j3 = ranky >= 1 ? 1 : 0;
k3 = rankz >= 1 ? 1 : 0;
l3 = rankw >= 1 ? 1 : 0;
// The fifth corner has all coordinate offsets = 1, so no need to compute that.
var x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords
var y1 = y0 - j1 + G4;
var z1 = z0 - k1 + G4;
var w1 = w0 - l1 + G4;
var x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords
var y2 = y0 - j2 + 2.0 * G4;
var z2 = z0 - k2 + 2.0 * G4;
var w2 = w0 - l2 + 2.0 * G4;
var x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords
var y3 = y0 - j3 + 3.0 * G4;
var z3 = z0 - k3 + 3.0 * G4;
var w3 = w0 - l3 + 3.0 * G4;
var x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords
var y4 = y0 - 1.0 + 4.0 * G4;
var z4 = z0 - 1.0 + 4.0 * G4;
var w4 = w0 - 1.0 + 4.0 * G4;
// Work out the hashed gradient indices of the five simplex corners
var ii = i & 255;
var jj = j & 255;
var kk = k & 255;
var ll = l & 255;
// Calculate the contribution from the five corners
var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
if (t0 < 0) n0 = 0.0;
else {
var gi0 = (perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32) * 4;
t0 *= t0;
n0 = t0 * t0 * (grad4[gi0] * x0 + grad4[gi0 + 1] * y0 + grad4[gi0 + 2] * z0 + grad4[gi0 + 3] * w0);
}
var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
if (t1 < 0) n1 = 0.0;
else {
var gi1 = (perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32) * 4;
t1 *= t1;
n1 = t1 * t1 * (grad4[gi1] * x1 + grad4[gi1 + 1] * y1 + grad4[gi1 + 2] * z1 + grad4[gi1 + 3] * w1);
}
var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
if (t2 < 0) n2 = 0.0;
else {
var gi2 = (perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32) * 4;
t2 *= t2;
n2 = t2 * t2 * (grad4[gi2] * x2 + grad4[gi2 + 1] * y2 + grad4[gi2 + 2] * z2 + grad4[gi2 + 3] * w2);
}
var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
if (t3 < 0) n3 = 0.0;
else {
var gi3 = (perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32) * 4;
t3 *= t3;
n3 = t3 * t3 * (grad4[gi3] * x3 + grad4[gi3 + 1] * y3 + grad4[gi3 + 2] * z3 + grad4[gi3 + 3] * w3);
}
var t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
if (t4 < 0) n4 = 0.0;
else {
var gi4 = (perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32) * 4;
t4 *= t4;
n4 = t4 * t4 * (grad4[gi4] * x4 + grad4[gi4 + 1] * y4 + grad4[gi4 + 2] * z4 + grad4[gi4 + 3] * w4);
}
// Sum up and scale the result to cover the range [-1,1]
return 27.0 * (n0 + n1 + n2 + n3 + n4);
}
};
function buildPermutationTable(random) {
var i;
var p = new Uint8Array(256);
for (i = 0; i < 256; i++) {
p[i] = i;
}
for (i = 0; i < 255; i++) {
var r = i + ~~(random() * (256 - i));
var aux = p[i];
p[i] = p[r];
p[r] = aux;
}
return p;
}
SimplexNoise._buildPermutationTable = buildPermutationTable;
/*
The ALEA PRNG and masher code used by simplex-noise.js
is based on code by Johannes Baagøe, modified by Jonas Wagner.
See alea.md for the full license.
*/
function alea() {
var s0 = 0;
var s1 = 0;
var s2 = 0;
var c = 1;
var mash = masher();
s0 = mash(' ');
s1 = mash(' ');
s2 = mash(' ');
for (var i = 0; i < arguments.length; i++) {
s0 -= mash(arguments[i]);
if (s0 < 0) {
s0 += 1;
}
s1 -= mash(arguments[i]);
if (s1 < 0) {
s1 += 1;
}
s2 -= mash(arguments[i]);
if (s2 < 0) {
s2 += 1;
}
}
mash = null;
return function() {
var t = 2091639 * s0 + c * 2.3283064365386963e-10; // 2^-32
s0 = s1;
s1 = s2;
return s2 = t - (c = t | 0);
};
}
function masher() {
var n = 0xefc8249d;
return function(data) {
data = data.toString();
for (var i = 0; i < data.length; i++) {
n += data.charCodeAt(i);
var h = 0.02519603282416938 * n;
n = h >>> 0;
h -= n;
h *= n;
n = h >>> 0;
h -= n;
n += h * 0x100000000; // 2^32
}
return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
};
}
// amd
if (typeof define !== 'undefined' && define.amd) define(function() {return SimplexNoise;});
// common js
if (typeof exports !== 'undefined') exports.SimplexNoise = SimplexNoise;
// browser
else if (typeof window !== 'undefined') window.SimplexNoise = SimplexNoise;
// nodejs
if (typeof module !== 'undefined') {
module.exports = SimplexNoise;
}
})();
// tom's helpers below
/* helper function */
String.prototype.hashCode = function() {
var hash = 0, i, chr;
if (this.length === 0) return hash;
for (i = 0; i < this.length; i++) {
chr = this.charCodeAt(i);
hash = ((hash << 5) - hash) + chr;
hash |= 0; // Convert to 32bit integer
}
return hash;
};
/*
getNoiseValue arguments:
x: current grid location across
y: current grid location down
loop: can be any value from 0-1 and will loop
name: the "name" of the lookup table. probably change this each time.
min/max: the minimum and maximum of the value to return
smoothness: 1 means elements are not related. larger numbers cause groupings.
*/
var global_simplex = null;
function getNoiseValue(x, y, loop, name, min, max, smoothness) {
if (global_simplex === null) {
global_simplex = new SimplexNoise();
}
let hashNumber = name.hashCode();
let xoff = Math.cos(2*PI*loop + (0.01 * hashNumber));
let yoff = Math.sin(2*PI*loop + (0.01 * hashNumber));
let noiseVal = global_simplex.noise4D(x / smoothness, y / smoothness, xoff + hashNumber, yoff);
// let noiseVal = noise(x / smoothness, y / smoothness, xoff + hashNumber);
return map(noiseVal, -1, 1, min, max);
}
<head>
<style> body {padding: 0; margin: 0;} </style>
</head>
<body style="background-color:white">
<img src="same_pose.jpg" width="960" height="500"/><br>
Same Pose
<hr>
<img src="same_subject.jpg" width="960" height="500"/><br>
Same Subject
<p>
<a href="index.html">program</a>
</body>{
}[{"weights":[{"name":"dense0/conv0/filters","shape":[3,3,3,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004853619781194949,"min":-0.5872879935245888}},{"name":"dense0/conv0/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004396426443960153,"min":-0.7298067896973853}},{"name":"dense0/conv1/depthwise_filter","shape":[3,3,32,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00635151559231328,"min":-0.5589333721235686}},{"name":"dense0/conv1/pointwise_filter","shape":[1,1,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.009354315552057004,"min":-1.2628325995276957}},{"name":"dense0/conv1/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0029380727048013726,"min":-0.5846764682554731}},{"name":"dense0/conv2/depthwise_filter","shape":[3,3,32,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0049374802439820535,"min":-0.6171850304977566}},{"name":"dense0/conv2/pointwise_filter","shape":[1,1,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.009941946758943446,"min":-1.3421628124573652}},{"name":"dense0/conv2/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0030300481062309416,"min":-0.5272283704841838}},{"name":"dense0/conv3/depthwise_filter","shape":[3,3,32,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.005672684837790097,"min":-0.7431217137505026}},{"name":"dense0/conv3/pointwise_filter","shape":[1,1,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010712201455060173,"min":-1.5639814124387852}},{"name":"dense0/conv3/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0030966934035806097,"min":-0.3839899820439956}},{"name":"dense1/conv0/depthwise_filter","shape":[3,3,32,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0039155554537679636,"min":-0.48161332081345953}},{"name":"dense1/conv0/pointwise_filter","shape":[1,1,32,64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01023082966898002,"min":-1.094698774580862}},{"name":"dense1/conv0/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0027264176630506327,"min":-0.3871513081531898}},{"name":"dense1/conv1/depthwise_filter","shape":[3,3,64,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004583378632863362,"min":-0.5454220573107401}},{"name":"dense1/conv1/pointwise_filter","shape":[1,1,64,64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00915846403907327,"min":-1.117332612766939}},{"name":"dense1/conv1/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003091680419211294,"min":-0.5966943209077797}},{"name":"dense1/conv2/depthwise_filter","shape":[3,3,64,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.005407439727409214,"min":-0.708374604290607}},{"name":"dense1/conv2/pointwise_filter","shape":[1,1,64,64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00946493943532308,"min":-1.2399070660273235}},{"name":"dense1/conv2/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004409168514550901,"min":-0.9788354102303}},{"name":"dense1/conv3/depthwise_filter","shape":[3,3,64,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004478132958505668,"min":-0.6493292789833219}},{"name":"dense1/conv3/pointwise_filter","shape":[1,1,64,64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.011063695888893277,"min":-1.2501976354449402}},{"name":"dense1/conv3/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003909627596537272,"min":-0.6646366914113363}},{"name":"dense2/conv0/depthwise_filter","shape":[3,3,64,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003213915404151468,"min":-0.3374611174359041}},{"name":"dense2/conv0/pointwise_filter","shape":[1,1,64,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010917326048308728,"min":-1.4520043644250609}},{"name":"dense2/conv0/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.002800439152063108,"min":-0.38085972468058266}},{"name":"dense2/conv1/depthwise_filter","shape":[3,3,128,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0050568851770139206,"min":-0.6927932692509071}},{"name":"dense2/conv1/pointwise_filter","shape":[1,1,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01074961213504567,"min":-1.3222022926106174}},{"name":"dense2/conv1/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0030654204242369708,"min":-0.5487102559384177}},{"name":"dense2/conv2/depthwise_filter","shape":[3,3,128,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00591809165244009,"min":-0.917304206128214}},{"name":"dense2/conv2/pointwise_filter","shape":[1,1,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01092823346455892,"min":-1.366029183069865}},{"name":"dense2/conv2/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.002681120470458386,"min":-0.36463238398234055}},{"name":"dense2/conv3/depthwise_filter","shape":[3,3,128,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0048311497650894465,"min":-0.5797379718107336}},{"name":"dense2/conv3/pointwise_filter","shape":[1,1,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.011227761062921263,"min":-1.4483811771168429}},{"name":"dense2/conv3/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0034643323982463162,"min":-0.3360402426298927}},{"name":"dense3/conv0/depthwise_filter","shape":[3,3,128,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003394978887894574,"min":-0.49227193874471326}},{"name":"dense3/conv0/pointwise_filter","shape":[1,1,128,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010051267287310432,"min":-1.2765109454884247}},{"name":"dense3/conv0/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003142924752889895,"min":-0.4588670139219247}},{"name":"dense3/conv1/depthwise_filter","shape":[3,3,256,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00448304671867221,"min":-0.5872791201460595}},{"name":"dense3/conv1/pointwise_filter","shape":[1,1,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.016063522357566685,"min":-2.3613377865623026}},{"name":"dense3/conv1/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00287135781026354,"min":-0.47664539650374765}},{"name":"dense3/conv2/depthwise_filter","shape":[3,3,256,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.006002906724518421,"min":-0.7923836876364315}},{"name":"dense3/conv2/pointwise_filter","shape":[1,1,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.017087187019048954,"min":-1.6061955797906016}},{"name":"dense3/conv2/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003124481205846749,"min":-0.46242321846531886}},{"name":"dense3/conv3/depthwise_filter","shape":[3,3,256,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.006576311588287353,"min":-1.0193282961845398}},{"name":"dense3/conv3/pointwise_filter","shape":[1,1,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.015590153955945782,"min":-1.99553970636106}},{"name":"dense3/conv3/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004453541601405424,"min":-0.6546706154065973}},{"name":"fc/weights","shape":[256,136],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010417488509533453,"min":-1.500118345372817}},{"name":"fc/bias","shape":[136],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0025084222648658005,"min":0.07683877646923065}}],"paths":["z_face_landmark_68_model-shard1"]}][{"weights":[{"name":"conv32_down/conv/filters","shape":[7,7,3,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0005260649557207145,"min":-0.07101876902229645}},{"name":"conv32_down/conv/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":8.471445956577858e-7,"min":-0.00014740315964445472}},{"name":"conv32_down/scale/weights","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.06814416062598135,"min":5.788674831390381}},{"name":"conv32_down/scale/biases","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.008471635042452345,"min":-0.931879854669758}},{"name":"conv32_1/conv1/conv/filters","shape":[3,3,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0007328585666768691,"min":-0.0974701893680236}},{"name":"conv32_1/conv1/conv/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":1.5952091238361e-8,"min":-0.000001978059313556764}},{"name":"conv32_1/conv1/scale/weights","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.02146628510718252,"min":3.1103382110595703}},{"name":"conv32_1/conv1/scale/biases","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0194976619645661,"min":-2.3787147596770644}},{"name":"conv32_1/conv2/conv/filters","shape":[3,3,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0004114975824075587,"min":-0.05267169054816751}},{"name":"conv32_1/conv2/conv/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":4.600177166424806e-9,"min":-5.70421968636676e-7}},{"name":"conv32_1/conv2/scale/weights","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.03400764932819441,"min":2.1677730083465576}},{"name":"conv32_1/conv2/scale/biases","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010974494616190593,"min":-1.240117891629537}},{"name":"conv32_2/conv1/conv/filters","shape":[3,3,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0005358753251094444,"min":-0.0760942961655411}},{"name":"conv32_2/conv1/conv/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":5.9886454383719385e-9,"min":-7.366033889197485e-7}},{"name":"conv32_2/conv1/scale/weights","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.014633869657329485,"min":2.769575357437134}},{"name":"conv32_2/conv1/scale/biases","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.022131107367721257,"min":-2.5229462399202234}},{"name":"conv32_2/conv2/conv/filters","shape":[3,3,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00030145110452876373,"min":-0.03949009469326805}},{"name":"conv32_2/conv2/conv/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":6.8779549306497095e-9,"min":-9.010120959151119e-7}},{"name":"conv32_2/conv2/scale/weights","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.03929369870354148,"min":4.8010945320129395}},{"name":"conv32_2/conv2/scale/biases","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010553357180427103,"min":-1.2452961472903983}},{"name":"conv32_3/conv1/conv/filters","shape":[3,3,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0003133527642371608,"min":-0.040735859350830905}},{"name":"conv32_3/conv1/conv/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":4.1064200719547974e-9,"min":-3.0387508532465503e-7}},{"name":"conv32_3/conv1/scale/weights","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.009252088210161994,"min":2.333256721496582}},{"name":"conv32_3/conv1/scale/biases","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.007104101251153385,"min":-0.34810096130651585}},{"name":"conv32_3/conv2/conv/filters","shape":[3,3,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00029995629892629733,"min":-0.031195455088334923}},{"name":"conv32_3/conv2/conv/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":5.62726418316814e-9,"min":-6.921534945296811e-7}},{"name":"conv32_3/conv2/scale/weights","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0467432975769043,"min":5.362040996551514}},{"name":"conv32_3/conv2/scale/biases","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010314425300149357,"min":-1.268674311918371}},{"name":"conv64_down/conv1/conv/filters","shape":[3,3,32,64],"dtype":"float32"},{"name":"conv64_down/conv1/conv/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":8.373908033218849e-10,"min":-1.172347124650639e-7}},{"name":"conv64_down/conv1/scale/weights","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0066875364266189875,"min":2.5088400840759277}},{"name":"conv64_down/conv1/scale/biases","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01691421620986041,"min":-2.0973628100226906}},{"name":"conv64_down/conv2/conv/filters","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv64_down/conv2/conv/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":2.3252014483766877e-9,"min":-2.673981665633191e-7}},{"name":"conv64_down/conv2/scale/weights","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.032557439804077146,"min":2.6351239681243896}},{"name":"conv64_down/conv2/scale/biases","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.015429047509735706,"min":-1.5429047509735707}},{"name":"conv64_1/conv1/conv/filters","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv64_1/conv1/conv/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":1.1319172039756998e-9,"min":-1.4941307092479238e-7}},{"name":"conv64_1/conv1/scale/weights","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.007802607031429515,"min":3.401733160018921}},{"name":"conv64_1/conv1/scale/biases","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01425027146058924,"min":-0.6982633015688727}},{"name":"conv64_1/conv2/conv/filters","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv64_1/conv2/conv/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":2.5635019893325435e-9,"min":-2.717312108692496e-7}},{"name":"conv64_1/conv2/scale/weights","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.04062801716374416,"min":3.542381525039673}},{"name":"conv64_1/conv2/scale/biases","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.007973166306813557,"min":-0.7415044665336609}},{"name":"conv64_2/conv1/conv/filters","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv64_2/conv1/conv/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":1.2535732661062331e-9,"min":-1.8302169685151004e-7}},{"name":"conv64_2/conv1/scale/weights","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.005631206549850164,"min":2.9051668643951416}},{"name":"conv64_2/conv1/scale/biases","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01859012585060269,"min":-2.3795361088771445}},{"name":"conv64_2/conv2/conv/filters","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv64_2/conv2/conv/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":2.486726369919351e-9,"min":-3.5311514452854786e-7}},{"name":"conv64_2/conv2/scale/weights","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.03740917467603497,"min":5.571568965911865}},{"name":"conv64_2/conv2/scale/biases","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.006418555858088475,"min":-0.5263215803632549}},{"name":"conv64_3/conv1/conv/filters","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv64_3/conv1/conv/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":7.432564576875473e-10,"min":-8.47312361763804e-8}},{"name":"conv64_3/conv1/scale/weights","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.006400122362024644,"min":2.268010377883911}},{"name":"conv64_3/conv1/scale/biases","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010945847922680425,"min":-1.3353934465670119}},{"name":"conv64_3/conv2/conv/filters","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv64_3/conv2/conv/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":2.278228722014533e-9,"min":-3.212302498040492e-7}},{"name":"conv64_3/conv2/scale/weights","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.029840927498013366,"min":7.038398265838623}},{"name":"conv64_3/conv2/scale/biases","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010651412197187834,"min":-1.161003929493474}},{"name":"conv128_down/conv1/conv/filters","shape":[3,3,64,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00020040544662989823,"min":-0.022245004575918704}},{"name":"conv128_down/conv1/conv/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":4.3550543563576545e-10,"min":-4.311503812794078e-8}},{"name":"conv128_down/conv1/scale/weights","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.007448580685783835,"min":2.830846071243286}},{"name":"conv128_down/conv1/scale/biases","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01211262824488621,"min":-1.6957679542840696}},{"name":"conv128_down/conv2/conv/filters","shape":[3,3,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00022380277514457702,"min":-0.02484210804104805}},{"name":"conv128_down/conv2/conv/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":9.031058637304466e-10,"min":-1.1650065642122761e-7}},{"name":"conv128_down/conv2/scale/weights","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.027663578706629135,"min":3.1111555099487305}},{"name":"conv128_down/conv2/scale/biases","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.008878476946961646,"min":-1.029903325847551}},{"name":"conv128_1/conv1/conv/filters","shape":[3,3,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00022380667574265425,"min":-0.032899581334170175}},{"name":"conv128_1/conv1/conv/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":4.4147297756478345e-10,"min":-5.253528433020923e-8}},{"name":"conv128_1/conv1/scale/weights","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.013599334978589825,"min":3.634530782699585}},{"name":"conv128_1/conv1/scale/biases","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.014059314073300829,"min":-1.4059314073300828}},{"name":"conv128_1/conv2/conv/filters","shape":[3,3,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00021715293474057143,"min":-0.02909849325523657}},{"name":"conv128_1/conv2/conv/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":9.887046963276768e-10,"min":-1.1370104007768284e-7}},{"name":"conv128_1/conv2/scale/weights","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.029993299409454943,"min":3.630716562271118}},{"name":"conv128_1/conv2/scale/biases","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00782704236460667,"min":-0.7200878975438136}},{"name":"conv128_2/conv1/conv/filters","shape":[3,3,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00017718105923895743,"min":-0.022324813464108636}},{"name":"conv128_2/conv1/conv/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":3.567012027797675e-10,"min":-5.243507680862582e-8}},{"name":"conv128_2/conv1/scale/weights","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.007940645778880399,"min":4.927767753601074}},{"name":"conv128_2/conv1/scale/biases","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.015933452867994122,"min":-1.5614783810634238}},{"name":"conv128_2/conv2/conv/filters","shape":[3,3,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0001451439717236687,"min":-0.01712698866339291}},{"name":"conv128_2/conv2/conv/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":1.0383988570966347e-9,"min":-1.2356946399449953e-7}},{"name":"conv128_2/conv2/scale/weights","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.02892604528688917,"min":4.750600814819336}},{"name":"conv128_2/conv2/scale/biases","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00797275748907351,"min":-0.7414664464838364}},{"name":"conv256_down/conv1/conv/filters","shape":[3,3,128,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0002698827827093648,"min":-0.03994265184098599}},{"name":"conv256_down/conv1/conv/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":5.036909834755123e-10,"min":-6.396875490139006e-8}},{"name":"conv256_down/conv1/scale/weights","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.014870181738161573,"min":4.269900798797607}},{"name":"conv256_down/conv1/scale/biases","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.022031106200872685,"min":-3.1063859743230484}},{"name":"conv256_down/conv2/conv/filters","shape":[3,3,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00046430734150549946,"min":-0.03946612402796745}},{"name":"conv256_down/conv2/conv/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":6.693064577513153e-10,"min":-7.630093618364995e-8}},{"name":"conv256_down/conv2/scale/weights","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.03475512242784687,"min":3.608360528945923}},{"name":"conv256_down/conv2/scale/biases","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01290142021927179,"min":-1.1482263995151893}},{"name":"conv256_1/conv1/conv/filters","shape":[3,3,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00037147209924810076,"min":-0.04234781931428348}},{"name":"conv256_1/conv1/conv/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":3.2105515457510146e-10,"min":-3.467395669411096e-8}},{"name":"conv256_1/conv1/scale/weights","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.043242172166412955,"min":5.28542947769165}},{"name":"conv256_1/conv1/scale/biases","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01643658619300992,"min":-1.3149268954407936}},{"name":"conv256_1/conv2/conv/filters","shape":[3,3,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0003289232651392619,"min":-0.041773254672686264}},{"name":"conv256_1/conv2/conv/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":9.13591691187321e-10,"min":-1.2333487831028833e-7}},{"name":"conv256_1/conv2/scale/weights","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0573908618852204,"min":4.360693454742432}},{"name":"conv256_1/conv2/scale/biases","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0164216583850337,"min":-1.3958409627278647}},{"name":"conv256_2/conv1/conv/filters","shape":[3,3,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00010476927912118389,"min":-0.015610622589056398}},{"name":"conv256_2/conv1/conv/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":2.418552539068639e-10,"min":-2.539480166022071e-8}},{"name":"conv256_2/conv1/scale/weights","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.06024209564807368,"min":6.598613739013672}},{"name":"conv256_2/conv1/scale/biases","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01578534350675695,"min":-1.1049740454729864}},{"name":"conv256_2/conv2/conv/filters","shape":[3,3,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00005543030908002573,"min":-0.007427661416723448}},{"name":"conv256_2/conv2/conv/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":1.0822061852320308e-9,"min":-1.515088659324843e-7}},{"name":"conv256_2/conv2/scale/weights","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.04302893993901272,"min":2.2855491638183594}},{"name":"conv256_2/conv2/scale/biases","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.006792667566561232,"min":-0.8083274404207865}},{"name":"conv256_down_out/conv1/conv/filters","shape":[3,3,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.000568966465253456,"min":-0.05632768006009214}},{"name":"conv256_down_out/conv1/conv/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":4.5347887884881677e-10,"min":-6.530095855422961e-8}},{"name":"conv256_down_out/conv1/scale/weights","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.017565592597512638,"min":4.594101905822754}},{"name":"conv256_down_out/conv1/scale/biases","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.04850864223405427,"min":-6.306123490427055}},{"name":"conv256_down_out/conv2/conv/filters","shape":[3,3,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0003739110687199761,"min":-0.06954745878191555}},{"name":"conv256_down_out/conv2/conv/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":1.2668428328152895e-9,"min":-2.2549802424112154e-7}},{"name":"conv256_down_out/conv2/scale/weights","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.04351314469879749,"min":4.31956672668457}},{"name":"conv256_down_out/conv2/scale/biases","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.021499746921015722,"min":-1.2039858275768804}},{"name":"fc","shape":[256,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.000357687911566566,"min":-0.04578405268052045}}],"paths":["z_face_recognition_model-shard1","z_face_recognition_model-shard2"]}]// Arithmetic mean
let getMean = function (data) {
return data.reduce(function (a, b) {
return Number(a) + Number(b);
}) / data.length;
};
// Standard deviation
let getSD = function (data) {
let m = getMean(data);
return Math.sqrt(data.reduce(function (sq, n) {
return sq + Math.pow(n - m, 2);
}, 0) / (data.length - 1));
};
const LM_LEN = 68;
const LM_parts = ['chin', 'left_eyebrow', 'right_eyebrow',
'nose_bridge', 'nose_tip', 'left_eye', 'right_eye',
'top_lip', 'bottom_lip'];
const LM_names = [
'chin', 'chin', 'chin', 'chin', 'chin',
'chin', 'chin', 'chin', 'chin', 'chin',
'chin', 'chin', 'chin', 'chin', 'chin',
'chin', 'chin',
'left_eyebrow', 'left_eyebrow', 'left_eyebrow', 'left_eyebrow', 'left_eyebrow',
'right_eyebrow', 'right_eyebrow', 'right_eyebrow', 'right_eyebrow', 'right_eyebrow',
'nose_bridge', 'nose_bridge', 'nose_bridge', 'nose_bridge',
'nose_tip', 'nose_tip', 'nose_tip', 'nose_tip', 'nose_tip',
'left_eye', 'left_eye', 'left_eye', 'left_eye', 'left_eye', 'left_eye',
'right_eye', 'right_eye', 'right_eye', 'right_eye', 'right_eye', 'right_eye',
'lip', 'lip', 'lip', 'lip',
'lip', 'lip', 'lip', 'lip',
'lip', 'lip', 'lip', 'lip',
'lip', 'lip', 'lip', 'lip',
'lip', 'lip', 'lip', 'lip'
]
// https://github.com/ageitgey/face_recognition/blob/d34c622bf42e2c619505a4884017051ecf61ac77/face_recognition/api.py#L190
const top_lip_indices = [48, 49, 50, 51, 52, 53, 54, 64, 63, 62, 61, 60];
const bottom_lip_indices = [54, 55, 56, 57, 58, 59, 48, 60, 67, 66, 65, 64];
function get_landmarks(faceDescriptions) {
let landmarks = []
for(let i=0; i<faceDescriptions.length; i++) {
let curLM = {
'chin': [],
'left_eyebrow': [],
'right_eyebrow': [],
'nose_bridge': [],
'nose_tip': [],
'left_eye': [],
'right_eye': [],
'top_lip': [],
'bottom_lip': []
};
let lm = faceDescriptions[i].landmarks;
let lpts = lm.positions;
let x_points = [];
let y_points = [];
// print(lpts.length)
for(let j=0; j<LM_LEN; j++) {
x_points.push(lpts[j].x)
y_points.push(lpts[j].y)
}
let mean_x = getMean(x_points);
let mean_y = getMean(y_points);
for(let j=0; j<LM_LEN; j++) {
x_points[j] = x_points[j] - mean_x;
y_points[j] = y_points[j] - mean_y;
}
let sdev_x = getSD(x_points);
let sdev_y = getSD(y_points);
let sdev = sdev_x > sdev_y ? sdev_x : sdev_y;
// let p1 = lpts[27]
// let p2 = lpts[28]
// EYES VERSION
// let p1 = lpts[36];
// let p2 = lpts[42];
// EARS VERSION
let p1 = lpts[2];
let p2 = lpts[14];
let xd = p1.x - p2.x;
let yd = p1.y - p2.y;
let angle = Math.atan2(-yd, -xd);
let s_a = Math.sin(-angle);
let c_a = Math.cos(-angle);
let raw_points = []
for(let j=0; j<LM_LEN; j++) {
let pt = [0, 0]
pt[0] = lpts[j].x - mean_x;
pt[1] = lpts[j].y - mean_y;
pt[0] = pt[0] / sdev;
pt[1] = pt[1] / sdev;
let x_new = pt[0] * c_a - pt[1] * s_a;
let y_new = pt[0] * s_a + pt[1] * c_a;
pt[0] = x_new;
pt[1] = y_new;
raw_points.push(pt);
}
// put all raw points into landmarks objects
// first everything but the lips (which start at 48)
for(let j=0; j<48; j++) {
let key = LM_names[j];
curLM[key].push(raw_points[j]);
}
// now the lips, which have dupes
for(let j=0; j<top_lip_indices.length; j++) {
let cur_ix = top_lip_indices[j];
let cur_pt = raw_points[cur_ix];
let pt_copy = [cur_pt[0], cur_pt[1]];
curLM['top_lip'].push(pt_copy);
}
for(let j=0; j<bottom_lip_indices.length; j++) {
let cur_ix = bottom_lip_indices[j];
let cur_pt = raw_points[cur_ix];
let pt_copy = [cur_pt[0], cur_pt[1]];
curLM['bottom_lip'].push(pt_copy);
}
curLM['transform'] = {
'center': [mean_x, mean_y],
'scale': sdev,
'angle': angle
}
landmarks.push(curLM);
}
// print(JSON.stringify(landmarks));
return landmarks;
}
function get_latents(faceDescriptions) {
latents = [];
for(let i=0; i<faceDescriptions.length; i++) {
let lm = faceDescriptions[i].descriptor;
latents.push(lm);
// print(lm);
}
return latents;
}
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)();
}
/**
* k-d Tree JavaScript - V 1.01
*
* https://github.com/ubilabs/kd-tree-javascript
*
* @author Mircea Pricop <pricop@ubilabs.net>, 2012
* @author Martin Kleppe <kleppe@ubilabs.net>, 2012
* @author Ubilabs http://ubilabs.net, 2012
* @license MIT License <http://www.opensource.org/licenses/mit-license.php>
*/
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['exports'], factory);
} else if (typeof exports === 'object') {
factory(exports);
} else {
factory((root.commonJsStrict = {}));
}
}(this, function (exports) {
function Node(obj, dimension, parent) {
this.obj = obj;
this.left = null;
this.right = null;
this.parent = parent;
this.dimension = dimension;
}
function kdTree(points, metric, dimensions) {
var self = this;
function buildTree(points, depth, parent) {
var dim = depth % dimensions.length,
median,
node;
if (points.length === 0) {
return null;
}
if (points.length === 1) {
return new Node(points[0], dim, parent);
}
points.sort(function (a, b) {
return a[dimensions[dim]] - b[dimensions[dim]];
});
median = Math.floor(points.length / 2);
node = new Node(points[median], dim, parent);
node.left = buildTree(points.slice(0, median), depth + 1, node);
node.right = buildTree(points.slice(median + 1), depth + 1, node);
return node;
}
// Reloads a serialied tree
function loadTree (data) {
// Just need to restore the `parent` parameter
self.root = data;
function restoreParent (root) {
if (root.left) {
root.left.parent = root;
restoreParent(root.left);
}
if (root.right) {
root.right.parent = root;
restoreParent(root.right);
}
}
restoreParent(self.root);
}
// If points is not an array, assume we're loading a pre-built tree
if (!Array.isArray(points)) loadTree(points, metric, dimensions);
else this.root = buildTree(points, 0, null);
// Convert to a JSON serializable structure; this just requires removing
// the `parent` property
this.toJSON = function (src) {
if (!src) src = this.root;
var dest = new Node(src.obj, src.dimension, null);
if (src.left) dest.left = self.toJSON(src.left);
if (src.right) dest.right = self.toJSON(src.right);
return dest;
};
this.insert = function (point) {
function innerSearch(node, parent) {
if (node === null) {
return parent;
}
var dimension = dimensions[node.dimension];
if (point[dimension] < node.obj[dimension]) {
return innerSearch(node.left, node);
} else {
return innerSearch(node.right, node);
}
}
var insertPosition = innerSearch(this.root, null),
newNode,
dimension;
if (insertPosition === null) {
this.root = new Node(point, 0, null);
return;
}
newNode = new Node(point, (insertPosition.dimension + 1) % dimensions.length, insertPosition);
dimension = dimensions[insertPosition.dimension];
if (point[dimension] < insertPosition.obj[dimension]) {
insertPosition.left = newNode;
} else {
insertPosition.right = newNode;
}
};
this.remove = function (point) {
var node;
function nodeSearch(node) {
if (node === null) {
return null;
}
if (node.obj === point) {
return node;
}
var dimension = dimensions[node.dimension];
if (point[dimension] < node.obj[dimension]) {
return nodeSearch(node.left, node);
} else {
return nodeSearch(node.right, node);
}
}
function removeNode(node) {
var nextNode,
nextObj,
pDimension;
function findMin(node, dim) {
var dimension,
own,
left,
right,
min;
if (node === null) {
return null;
}
dimension = dimensions[dim];
if (node.dimension === dim) {
if (node.left !== null) {
return findMin(node.left, dim);
}
return node;
}
own = node.obj[dimension];
left = findMin(node.left, dim);
right = findMin(node.right, dim);
min = node;
if (left !== null && left.obj[dimension] < own) {
min = left;
}
if (right !== null && right.obj[dimension] < min.obj[dimension]) {
min = right;
}
return min;
}
if (node.left === null && node.right === null) {
if (node.parent === null) {
self.root = null;
return;
}
pDimension = dimensions[node.parent.dimension];
if (node.obj[pDimension] < node.parent.obj[pDimension]) {
node.parent.left = null;
} else {
node.parent.right = null;
}
return;
}
// If the right subtree is not empty, swap with the minimum element on the
// node's dimension. If it is empty, we swap the left and right subtrees and
// do the same.
if (node.right !== null) {
nextNode = findMin(node.right, node.dimension);
nextObj = nextNode.obj;
removeNode(nextNode);
node.obj = nextObj;
} else {
nextNode = findMin(node.left, node.dimension);
nextObj = nextNode.obj;
removeNode(nextNode);
node.right = node.left;
node.left = null;
node.obj = nextObj;
}
}
node = nodeSearch(self.root);
if (node === null) { return; }
removeNode(node);
};
this.nearest = function (point, maxNodes, maxDistance) {
var i,
result,
bestNodes;
bestNodes = new BinaryHeap(
function (e) { return -e[1]; }
);
function nearestSearch(node) {
var bestChild,
dimension = dimensions[node.dimension],
ownDistance = metric(point, node.obj),
linearPoint = {},
linearDistance,
otherChild,
i;
function saveNode(node, distance) {
bestNodes.push([node, distance]);
if (bestNodes.size() > maxNodes) {
bestNodes.pop();
}
}
for (i = 0; i < dimensions.length; i += 1) {
if (i === node.dimension) {
linearPoint[dimensions[i]] = point[dimensions[i]];
} else {
linearPoint[dimensions[i]] = node.obj[dimensions[i]];
}
}
linearDistance = metric(linearPoint, node.obj);
if (node.right === null && node.left === null) {
if (bestNodes.size() < maxNodes || ownDistance < bestNodes.peek()[1]) {
saveNode(node, ownDistance);
}
return;
}
if (node.right === null) {
bestChild = node.left;
} else if (node.left === null) {
bestChild = node.right;
} else {
if (point[dimension] < node.obj[dimension]) {
bestChild = node.left;
} else {
bestChild = node.right;
}
}
nearestSearch(bestChild);
if (bestNodes.size() < maxNodes || ownDistance < bestNodes.peek()[1]) {
saveNode(node, ownDistance);
}
if (bestNodes.size() < maxNodes || Math.abs(linearDistance) < bestNodes.peek()[1]) {
if (bestChild === node.left) {
otherChild = node.right;
} else {
otherChild = node.left;
}
if (otherChild !== null) {
nearestSearch(otherChild);
}
}
}
if (maxDistance) {
for (i = 0; i < maxNodes; i += 1) {
bestNodes.push([null, maxDistance]);
}
}
if(self.root)
nearestSearch(self.root);
result = [];
for (i = 0; i < Math.min(maxNodes, bestNodes.content.length); i += 1) {
if (bestNodes.content[i][0]) {
result.push([bestNodes.content[i][0].obj, bestNodes.content[i][1]]);
}
}
return result;
};
this.balanceFactor = function () {
function height(node) {
if (node === null) {
return 0;
}
return Math.max(height(node.left), height(node.right)) + 1;
}
function count(node) {
if (node === null) {
return 0;
}
return count(node.left) + count(node.right) + 1;
}
return height(self.root) / (Math.log(count(self.root)) / Math.log(2));
};
}
// Binary heap implementation from:
// http://eloquentjavascript.net/appendix2.html
function BinaryHeap(scoreFunction){
this.content = [];
this.scoreFunction = scoreFunction;
}
BinaryHeap.prototype = {
push: function(element) {
// Add the new element to the end of the array.
this.content.push(element);
// Allow it to bubble up.
this.bubbleUp(this.content.length - 1);
},
pop: function() {
// Store the first element so we can return it later.
var result = this.content[0];
// Get the element at the end of the array.
var end = this.content.pop();
// If there are any elements left, put the end element at the
// start, and let it sink down.
if (this.content.length > 0) {
this.content[0] = end;
this.sinkDown(0);
}
return result;
},
peek: function() {
return this.content[0];
},
remove: function(node) {
var len = this.content.length;
// To remove a value, we must search through the array to find
// it.
for (var i = 0; i < len; i++) {
if (this.content[i] == node) {
// When it is found, the process seen in 'pop' is repeated
// to fill up the hole.
var end = this.content.pop();
if (i != len - 1) {
this.content[i] = end;
if (this.scoreFunction(end) < this.scoreFunction(node))
this.bubbleUp(i);
else
this.sinkDown(i);
}
return;
}
}
throw new Error("Node not found.");
},
size: function() {
return this.content.length;
},
bubbleUp: function(n) {
// Fetch the element that has to be moved.
var element = this.content[n];
// When at 0, an element can not go up any further.
while (n > 0) {
// Compute the parent element's index, and fetch it.
var parentN = Math.floor((n + 1) / 2) - 1,
parent = this.content[parentN];
// Swap the elements if the parent is greater.
if (this.scoreFunction(element) < this.scoreFunction(parent)) {
this.content[parentN] = element;
this.content[n] = parent;
// Update 'n' to continue at the new position.
n = parentN;
}
// Found a parent that is less, no need to move it further.
else {
break;
}
}
},
sinkDown: function(n) {
// Look up the target element and its score.
var length = this.content.length,
element = this.content[n],
elemScore = this.scoreFunction(element);
while(true) {
// Compute the indices of the child elements.
var child2N = (n + 1) * 2, child1N = child2N - 1;
// This is used to store the new position of the element,
// if any.
var swap = null;
// If the first child exists (is inside the array)...
if (child1N < length) {
// Look it up and compute its score.
var child1 = this.content[child1N],
child1Score = this.scoreFunction(child1);
// If the score is less than our element's, we need to swap.
if (child1Score < elemScore)
swap = child1N;
}
// Do the same checks for the other child.
if (child2N < length) {
var child2 = this.content[child2N],
child2Score = this.scoreFunction(child2);
if (child2Score < (swap == null ? elemScore : child1Score)){
swap = child2N;
}
}
// If the element needs to be moved, swap it, and continue.
if (swap != null) {
this.content[n] = this.content[swap];
this.content[swap] = element;
n = swap;
}
// Otherwise, we are done.
else {
break;
}
}
}
};
this.kdTree = kdTree;
exports.kdTree = kdTree;
exports.BinaryHeap = BinaryHeap;
}));
// 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);
}
function p5recorder(numFrames, filename, buffersPerFrame, delay, repeat) {
this.numFrames = numFrames;
// all other arguments are optional
if(buffersPerFrame) {
this.buffersPerFrame = buffersPerFrame;
}
else {
this.buffersPerFrame = 1;
}
if(filename) {
this.filename = filename;
}
else {
this.filename = "download.gif";
}
if(delay) {
this.delay = delay;
}
else {
this.delay = 1000/24; // expect 24 fps
}
if(repeat) {
this.repeat = repeat;
}
else {
this.repeat = 0; // 0 -> loop forever
}
this.encoder = new GIFEncoder();
this.offscreenCanvas = document.createElement('canvas');
this.offscreenCanvas.width = width;
this.offscreenCanvas.height = height;
this.offscreenContext = this.offscreenCanvas.getContext('2d');
this.framesRecorded = 0;
this.buffersRecorded = 0;
this.imageAccumulator = null;
this.encoder_has_started = false;
pixelDensity(1);
this.addBuffer = function() {
if(!this.encoder_has_started) {
this.encoder.setRepeat(this.repeat);
this.encoder.setDelay(this.delay);
this.encoderResult = this.encoder.start();
this.encoder_has_started = true;
}
let display_text = "Recording: " + (this.framesRecorded+1) + " / " + this.numFrames;
if (this.framesRecorded < this.numFrames) {
// background is flat white
this.offscreenContext.fillStyle="#FFFFFF";
this.offscreenContext.fillRect(0, 0, width, height);
this.offscreenContext.drawImage(canvas, 0, 0, width, height);
if (this.buffersPerFrame > 1) {
display_text = "Recording: " + (this.buffersRecorded+1) + " / " + this.buffersPerFrame + " : " + (this.framesRecorded+1) + " / " + this.numFrames;
// each output image is made up of several input frames averaged together
if (this.buffersRecorded == 0) {
// initialize a new output Image
this.imageAccumulator = new Array(width * height);
for (let i=0; i<width*height; i++) {
this.imageAccumulator[i] = [0, 0, 0];
}
}
loadPixels();
for (let i=0; i<pixels.length/4; i++) {
// print(i);
// print(imageAccumulator[i])
// print(pixels[i])
this.imageAccumulator[i][0] += pixels[i*4+0];
this.imageAccumulator[i][1] += pixels[i*4+1];
this.imageAccumulator[i][2] += pixels[i*4+2];
}
this.buffersRecorded = this.buffersRecorded + 1;
if(this.buffersRecorded == this.buffersPerFrame) {
// record this version and increment framesRecorded
loadPixels();
for (let i=0; i<pixels.length/4; i++) {
pixels[i*4+0] = int(this.imageAccumulator[i][0] * 1.0/this.buffersPerFrame);
pixels[i*4+1] = int(this.imageAccumulator[i][1] * 1.0/this.buffersPerFrame);
pixels[i*4+2] = int(this.imageAccumulator[i][2] * 1.0/this.buffersPerFrame);
pixels[i*4+3] = 255;
}
updatePixels();
this.imageAccumulator = null;
// reload this version onto the offscreen buffer
this.offscreenContext.fillStyle="#FFFFFF";
this.offscreenContext.fillRect(0, 0, width, height);
this.offscreenContext.drawImage(canvas, 0, 0, width, height);
this.encoder.addFrame(this.offscreenContext);
this.framesRecorded = this.framesRecorded + 1;
this.buffersRecorded = 0;
}
}
else {
this.encoder.addFrame(this.offscreenContext);
this.framesRecorded = this.framesRecorded + 1;
}
if(this.framesRecorded == this.numFrames) {
this.encoder.finish();
this.encoder.download(this.filename);
}
}
else {
display_text = "Recording: done";
}
fill(255, 0, 0);
textSize(48);
text(display_text, 50, height-20);
}
}