Class example.
Noise with more offset in the center.
const buffersPerFrame = 5;
<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_normal.js"></script>
<script language="javascript" type="text/javascript" src="draw_one_frame.js"></script>
<script language="javascript" type="text/javascript" src="code.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">(normal [this one])</a><br>
<a href="code_l.html">(large)</a><br>
<a href="code_xl.html">(xlarge)</a><br>
</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": "7ad30ed382f80464d2fdf50a5cd37bfc402304f7",
"name": "noise coding challenge"
},
{
"sha": "552340540929a35c2393e6284ce6189237c813a9",
"name": "motion blur"
},
{
"sha": "e8a1d82456d7396d2b6ec79fd9f1b7d483947f8f",
"name": "easing and multiples"
},
{
"sha": "2f01c29a47c0b7dd3b837bafd3ebb35ba51bd99d",
"name": "noise grid example"
},
{
"sha": "c52a9dab7d31f1fe580bdbb979d892a23c894faf",
"name": "bucket grid example"
},
{
"sha": "f5bbec48cf6f00eb2f9f5bf49d603a4bfea7fb2d",
"name": "noise example 1"
},
{
"sha": "97e845691ed9110c6d294a4bdb7779c51c83cb4e",
"name": "side scroller"
},
{
"sha": "c1de108e1ba055f83b8af9e27d1bab227f4857fd",
"name": "first example"
}
]
}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 = 1920;
var canvasHeight = 1080;
var canvasWidth = 960;
var canvasHeight = 540;
var canvasWidth = 2250;
var canvasHeight = 1200;
// these can be customized
const debugViewText = "#000";
const debugZoomBackground = "#444488"
const debugZoomScale = 0.5;
// this can be modified after we discuss in lecture
const buffersPerFrame = 2;
// probably best not to modify anything below this line
const frameMax = 24;
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);
}
}
}
<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_large.js"></script>
<script language="javascript" type="text/javascript" src="draw_one_frame.js"></script>
<script language="javascript" type="text/javascript" src="code.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>
<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">(normal)</a><br>
<a href="code_l.html">(large [this one])</a><br>
<a href="code_xl.html">(xlarge)</a><br>
</body><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_xl.js"></script>
<script language="javascript" type="text/javascript" src="draw_one_frame.js"></script>
<script language="javascript" type="text/javascript" src="code.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>
<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">(normal)</a><br>
<a href="code_l.html">(large)</a><br>
<a href="code_xl.html">(xlarge [this one])</a><br>
</body>function get_ramp_for_x(x) {
let r = map(x, 0, width/2, 0, 1.0);
if(x > width/2) {
r = map(x, width/2, width, 1.0, 0);
}
return r;
}
function draw_one_frame(cur_frac) {
let sun_size = height/8;
noStroke();
// background
fill(224, 224, 224);
rect(0, 0, width, height);
// bucketWidth
let bw = height/80;
let sw = height/120;
let max_cycle_offset = height/5;
let num_rows = 14;
let num_cols = 20;
let cell_width = width / (num_cols + 1);
let cell_height = height / (num_rows + 1);
let cycle_frac = cur_frac;
let dump_smoothness = height/2;
fill(0);
stroke(0);
strokeWeight(sw);
for (let j=0; j<num_rows; j++) {
let cur_y = (j+1)*cell_height;
for (let i=0; i<num_cols-1; i++) {
let cur_x = (i+1)*cell_width;
let next_x = (i+2)*cell_width;
let cur_ramp_x = get_ramp_for_x(cur_x);
let next_ramp_y = get_ramp_for_x(next_x);
let cur_offfset = cur_ramp_x * getNoiseValue(cur_x, cur_y, cur_frac, "dump_offset", -max_cycle_offset, max_cycle_offset, dump_smoothness);
let next_offfset = next_ramp_y * getNoiseValue(next_x, cur_y, cur_frac, "dump_offset", -max_cycle_offset, max_cycle_offset, dump_smoothness);
let face_right = (i+j) % 2 == 0;
// cycle_frac = (cur_frac + cycle_offset) % 1.0;
ellipse(cur_x, cur_y+cur_offfset, bw);
line(cur_x, cur_y+cur_offfset, next_x, cur_y+next_offfset);
ellipse(next_x, cur_y+next_offfset, bw);
}
}
}
// this draws a bucket from
function draw_bucket(cur_dump, face_right) {
// dumping logic: from 0-0.5 we dump, then rest until 1.0
angleMode(DEGREES); // Change the mode to DEGREES
let cur_angle = 0;
if (cur_dump < 0.15)
// bucket is falling
cur_angle = map(cur_dump, 0, 0.15, 0, 60);
else if (cur_dump < 0.5)
// bucket is recovering
cur_angle = map(cur_dump, 0.15, 0.5, 60, 0);
// blue containers
fill(30, 40, 70);
if(face_right) {
rotate(cur_angle);
// just draw one in the center of the screen rect(width/)
rect(-10, -10, 20, 20);
rect(-10, -14, 4, 24);
}
else {
rotate(-cur_angle);
// just draw one in the center of the screen rect(width/)
rect(-10, -10, 20, 20);
rect( 6, -14, 4, 24);
}
}
function draw_one_frame(cur_frac) {
let sun_size = height/8;
noStroke();
// background
fill(224, 224, 224);
rect(0, 0, width, height);
// bucketWidth
let bw = int(height/50);
// half bucketWidth
let bw2 = int(bw/2);
let cycle_frac = cur_frac;
// scale one bucket to the center of the screen
push()
translate(width/3, height/2);
scale(bw2);
draw_bucket(cycle_frac, false);
pop();
let cycle_frac2 = (cycle_frac + 0.5) % 1.0;
push()
translate(2*width/3, height/2);
scale(bw2);
draw_bucket(cycle_frac2, true);
pop();
}
// this draws a bucket from -10,-10 to 10,10
function draw_bucket(cur_dump, face_right) {
// dumping logic: from 0-0.5 we dump, then rest until 1.0
angleMode(DEGREES); // Change the mode to DEGREES
let cur_angle = 0;
let dump_end = 0.15;
let full_rot = 60;
if (cur_dump < 0.2)
// bucket is falling
cur_angle = map(cur_dump, 0, dump_end, 0, full_rot);
else if (cur_dump < 0.5)
// bucket is recovering
cur_angle = map(cur_dump, dump_end, 0.5, full_rot, 0);
// dark containers
fill(30, 40, 70);
if(face_right) {
rotate(cur_angle);
// just draw one in the center of the screen rect(width/)
rect(-10, -10, 20, 20);
rect(-10, -14, 4, 24);
}
else {
rotate(-cur_angle);
// just draw one in the center of the screen rect(width/)
rect(-10, -10, 20, 20);
rect( 6, -14, 4, 24);
}
}
// dump goes from 0.0 to 0.5
function ball_drop(cur_dump, face_right, dest_x, dest_y) {
// blueish liquid
fill(100, 120, 200);
let cur_x = 0;
let cur_y = -10;
if (cur_dump < 0.5) {
// bucket is recovering
cur_x = map(cur_dump, 0, 0.5, 0, dest_x);
cur_y = map(cur_dump, 0, 0.5, -10, -10+dest_y);
}
ellipse(cur_x, cur_y, 10, 10);
}
function draw_one_frame(cur_frac) {
let sun_size = height/8;
noStroke();
// background
fill(224, 224, 224);
rect(0, 0, width, height);
// bucketWidth
let bw = height/210;
let num_rows = 5;
let num_cols = 8;
let cell_width = width / (num_cols + 1);
let cell_height = height / (num_rows + 1);
let cycle_frac = cur_frac;
let scaled_offset_y = cell_height / bw;
let scaled_offset_x = cell_width / bw;
for (let j=0; j<num_rows; j++) {
let cur_y = (j+1)*cell_height;
for (let i=0; i<num_cols; i++) {
let cur_x = (i+1)*cell_width;
push()
translate(cur_x, cur_y);
scale(bw);
ball_drop(cycle_frac, true, scaled_offset_x, scaled_offset_y);
pop();
}
}
for (let j=0; j<num_rows; j++) {
let cur_y = (j+1)*cell_height;
for (let i=0; i<num_cols; i++) {
let cur_x = (i+1)*cell_width;
push()
translate(cur_x, cur_y);
scale(bw);
draw_bucket(cycle_frac, true);
pop();
}
}
/*
let cycle_frac = cur_frac;
// scale one bucket to the center of the screen
push()
translate(width/3, height/2);
scale(bw);
draw_bucket(cycle_frac, false);
pop();
let cycle_frac2 = (cycle_frac + 0.3) % 1.0;
push()
translate(2*width/3, height/2);
scale(bw);
draw_bucket(cycle_frac2, true);
pop();
*/
}
// this draws a bucket from -10,-10 to 10,10
function draw_bucket(cur_dump, face_right) {
// dumping logic: from 0-0.5 we dump, then rest until 1.0
angleMode(DEGREES); // Change the mode to DEGREES
let cur_angle = 0;
if (cur_dump < 0.2)
// bucket is falling
cur_angle = map(cur_dump, 0, 0.2, 0, 90);
else if (cur_dump < 0.5)
// bucket is recovering
cur_angle = map(cur_dump, 0.2, 0.5, 90, 0);
// dark containers
fill(30, 40, 70);
if(face_right) {
rotate(cur_angle);
// just draw one in the center of the screen rect(width/)
rect(-10, -10, 20, 20);
ellipse(-10, 0, 8, 8);
}
else {
rotate(-cur_angle);
// just draw one in the center of the screen rect(width/)
rect(-10, -10, 20, 20);
ellipse(10, 0, 8, 8);
}
}
// dump goes from 0.0 to 0.5
function ball_drop(cur_dump, face_right, dest_x, dest_y) {
// blueish liquid
fill(100, 120, 200);
let cur_x = 0;
let cur_y = -10;
if (!face_right) {
dest_x = -dest_x;
}
if (cur_dump < 0.5) {
// bucket is recovering
cur_x = map(cur_dump, 0, 0.5, 0, dest_x);
cur_y = map(cur_dump, 0, 0.5, -10, -10+dest_y);
}
else {
// bucket is recovering
cur_y = map(cur_dump, 0.5, 0.8, -10, 0, true);
}
ellipse(cur_x, cur_y, 10, 10);
}
function draw_one_frame(cur_frac) {
let sun_size = height/8;
noStroke();
// background
fill(224, 224, 224);
rect(0, 0, width, height);
// bucketWidth
let bw = height/320;
let num_rows = 7;
let num_cols = 10;
let cell_width = width / (num_cols + 1);
let cell_height = height / (num_rows + 1);
let cycle_frac = cur_frac;
let scaled_offset_y = cell_height / bw;
let scaled_offset_x = cell_width / bw;
let dump_smoothness = 300;
let max_cycle_offset = 0.4;
for (let j=0; j<num_rows; j++) {
let cur_y = (j+1)*cell_height;
for (let i=0; i<num_cols; i++) {
let cur_x = (i+1)*cell_width;
let cycle_offset = getNoiseValue(cur_x, cur_y, 0, "dump_offset", 0, max_cycle_offset, dump_smoothness);
// let direction_val = getNoiseValue(cur_x, cur_y, 0, "dump_dir", 0, 1, dump_smoothness);
// let face_right = (direction_val < 0.5);
let face_right = (i+j) % 2 == 0;
cycle_frac = (cur_frac + cycle_offset) % 1.0;
// cycle_frac = cur_frac;
push()
translate(cur_x, cur_y);
scale(bw);
ball_drop(cycle_frac, face_right, scaled_offset_x, scaled_offset_y);
pop();
}
}
for (let j=0; j<num_rows; j++) {
let cur_y = (j+1)*cell_height;
for (let i=0; i<num_cols; i++) {
let cur_x = (i+1)*cell_width;
let cycle_offset = getNoiseValue(cur_x, cur_y, 0, "dump_offset", 0, max_cycle_offset, dump_smoothness);
// let direction_val = getNoiseValue(cur_x, cur_y, 0, "dump_dir", 0, 1, dump_smoothness);
// let face_right = (direction_val < 0.5);
let face_right = (i+j) % 2 == 0;
cycle_frac = (cur_frac + cycle_offset) % 1.0;
// cycle_frac = cur_frac;
push()
translate(cur_x, cur_y);
scale(bw);
draw_bucket(cycle_frac, face_right);
pop();
}
}
/*
let cycle_frac = cur_frac;
// scale one bucket to the center of the screen
push()
translate(width/3, height/2);
scale(bw);
draw_bucket(cycle_frac, false);
pop();
let cycle_frac2 = (cycle_frac + 0.3) % 1.0;
push()
translate(2*width/3, height/2);
scale(bw);
draw_bucket(cycle_frac2, true);
pop();
*/
}
const ease = new p5.Ease();
function draw_one_frame(cur_frac) {
let going_right = true;
let amount_across = 0;
if (cur_frac < 0.5) {
going_right = true;
amount_across = cur_frac * 2;
}
else {
going_right = false;
amount_across = (cur_frac-0.5) * 2;
}
let ellipse_radius = int(0.08*height);
const left_x = int(0.15 * width);
const right_x = int(0.85 * width);
line(left_x - ellipse_radius, 0, left_x - ellipse_radius, height);
line(right_x + ellipse_radius, 0, right_x + ellipse_radius, height);
// const ease_amount_across = amount_across;
// const ease_amount_across = ease.circularInOut(amount_across); // OK
// try these other versions or look up others in the docs
// const ease_amount_across = ease.doubleCircularOgee(amount_across, 0.5);
const ease_amount_across = ease.bounceOut(amount_across, 10);
// print(amount_across, ease_amount_across);
if(going_right) {
cur_x1 = map(amount_across, 0, 1, left_x, right_x);
cur_x2 = map(ease_amount_across, 0, 1, left_x, right_x);
}
else {
cur_x1 = map(amount_across, 0, 1, right_x, left_x)
cur_x2 = map(ease_amount_across, 0, 1, right_x, left_x)
}
// draw the background circles
let ellipse_y1 = int(0.25 * height);
let ellipse_y2 = int(0.75 * height);
textSize(50);
fill(0, 0, 255);
ellipse(cur_x1, ellipse_y1, ellipse_radius * 2);
fill(255, 0, 255);
ellipse(cur_x2, ellipse_y2, ellipse_radius * 2);
fill(255);
textAlign(CENTER, CENTER);
textSize(30);
text("A", cur_x1, ellipse_y1);
text("B", cur_x2, ellipse_y2);
}
const ease = new p5.Ease();
function draw_one_frame(cur_frac) {
noStroke();
// background
fill(224, 224, 224);
rect(0, 0, width, height);
let going_right = true;
let amount_across = 0;
let num_balls=6;
let sliced_frac = cur_frac / num_balls;
for(let frames=0; frames<num_balls; frames++) {
amount_across = (sliced_frac + frames / num_balls) % 1.0;
let ellipse_radius = int(0.08*height);
ball_radius = ellipse_radius;
if (amount_across < 0.1) {
ball_radius = int(map(amount_across, 0, 0.1, 0, ellipse_radius));
}
else if(amount_across > 0.9) {
ball_radius = int(map(amount_across, 0.9, 1.0, ellipse_radius, 0));
}
const left_x = int(width * 0.15)
const right_x = int(width * 0.85)
stroke(0);
line(left_x, 0, left_x, height);
line(right_x, 0, right_x, height);
// COMMENT OUT ONLY ONE OF THE FOLLOWING
// ease_amount_across = amount_across;
const ease_amount_across = ease.doubleCircularOgee(amount_across, 0.5);
// const ease_amount_across = ease.bounceOut(amount_across, 10);
// const ease_amount_across = ease.cubicBezier(amount_across, 0,0,1,1);
// const ease_amount_across = ease.exponentialSmoothedStaircase(amount_across, 0.1, 7);
// const ease_amount_across = ease.exponentialSmoothedStaircase(amount_across, 0.2, 7);
// const ease_amount_across = ease.backInOut(amount_across);
if(going_right) {
cur_x1 = map(amount_across, 0, 1, left_x, right_x);
cur_x2 = map(ease_amount_across, 0, 1, left_x, right_x);
}
else {
cur_x1 = map(amount_across, 0, 1, right_x, left_x)
cur_x2 = map(ease_amount_across, 0, 1, right_x, left_x)
}
// draw the background circles
let ellipse_y1 = int(0.25 * height);
let ellipse_y2 = int(0.75 * height);
textSize(50);
fill(0, 0, 255);
ellipse(cur_x1, ellipse_y1, ball_radius * 2);
fill(255, 0, 255);
ellipse(cur_x2, ellipse_y2, ball_radius * 2);
fill(255);
textAlign(CENTER, CENTER);
textSize(30);
text("A", cur_x1, ellipse_y1);
text("B", cur_x2, ellipse_y2);
}
}
function draw_one_frame(cur_frac) {
let sun_size = canvasHeight/8;
noStroke();
fill(100, 100, 214);
rect(0, 0, width, height);
fill(255, 255, 0);
ellipse(width/2, height/2, sun_size);
fill(0, 200, 0);
rect(0, height/2, width, height/2);
stroke(0);
line(width/2, height/2, width/2, height);
line(0.40*width, height/2, 0.20*width, height);
line(0.60*width, height/2, 0.80*width, height);
strokeWeight(10);
let grid_points = [
0.50 * height,
0.53 * height,
0.60 * height,
0.75 * height,
1.00 * height
]
if (debugView) {
strokeWeight(1);
stroke(255, 0, 0);
for(let i=0; i<grid_points.length; i++) {
line(0, grid_points[i], width, grid_points[i]);
}
}
strokeWeight(2);
stroke(0);
for(let i=0; i<grid_points.length-1; i++) {
let cur_grid_line = map(cur_frac, 0, 1, grid_points[i], grid_points[i+1])
line(0, cur_grid_line, width, cur_grid_line);
}
}function draw_one_frame(cur_frac) {
noStroke();
fill(240);
rect(0, 0, width, height);
fill(0);
let num_cols = 96;
let num_rows = 54;
let cell_height = height / num_rows;
let cell_width = width / num_cols;
let size_smoothness = 100;
for(let col=0; col<num_cols; col++) {
let cur_x = col * cell_width;
for(let row=0; row<num_rows; row++) {
let cur_y = row * cell_height;
let brightness = getNoiseValue(cur_x, cur_y, cur_frac, "brightness", 0, 255, size_smoothness);
let fill_color = int(brightness);
fill(fill_color);
rect(cur_x, cur_y, cell_width-1, cell_height-1);
}
}
}function draw_one_frame(cur_frac) {
noStroke();
fill(240);
rect(0, 0, width, height);
fill(0);
let num_cols = 96;
let num_rows = 54;
let cell_height = height / num_rows;
let cell_width = width / num_cols;
let size_smoothness = 60;
let time_smoothness = 4;
for(let col=0; col<num_cols; col++) {
let cur_x = col * cell_width;
for(let row=0; row<num_rows; row++) {
let cur_y = row * cell_height;
let sum = 0;
for(let r=0; r<time_smoothness; r++) {
let brightness = getNoiseValue(cur_x, cur_y, ((cur_frac+r)/time_smoothness)%1.0, "brightness", 0, 255, size_smoothness);
sum = sum + brightness
}
let fill_color = int(sum / time_smoothness);
fill(fill_color);
rect(cur_x, cur_y, cell_width-1, cell_height-1);
}
}
}function draw_one_frame(cur_frac) {
let sun_size = height/8;
noStroke();
// sky
fill(100, 100, 214);
rect(0, 0, width, height);
// sun
fill(255, 255, 0);
ellipse(0.25 * width, 0.10 * height, sun_size);
// grass
fill(0, 200, 0);
rect(0, height/2, width, height/2);
stroke(0);
fill(100, 100, 100);
let b1_y = 0.55 * height;
let b2_y = 0.65 * height;
let b1_size = height/12;
let b2_size = height/6;
let grid_points1 = [
-0.25 * width,
0.0 * width,
0.25 * width,
0.50 * width,
0.75 * width,
1.00 * width
]
if (debugView) {
stroke(255, 0, 0);
strokeWeight(height/100);
noFill();
for(let i=0; i<grid_points1.length; i++) {
rect(grid_points1[i], b1_y, b1_size, 2*b1_size);
}
}
fill(100, 100, 100);
noStroke();
for(let i=0; i<grid_points1.length-1; i++) {
let cur_x_pos = map(cur_frac, 0, 1, grid_points1[i], grid_points1[i+1])
rect(cur_x_pos, b1_y, b1_size, 2*b1_size);
}
let grid_points2 = [
-0.40 * width,
0.10 * width,
0.60 * width,
1.10 * width
]
if(debugView) {
stroke(255, 0, 0);
strokeWeight(height/100);
noFill();
for(let i=0; i<grid_points2.length; i++) {
rect(grid_points2[i], b2_y, b2_size, 2*b2_size);
}
}
fill(100, 100, 100);
noStroke();
for(let i=0; i<grid_points2.length-1; i++) {
let cur_x_pos = map(cur_frac, 0, 1, grid_points2[i], grid_points2[i+1])
rect(cur_x_pos, b2_y, b2_size, 2*b2_size);
}
}
// function getNoiseValue(x, y, loop, name, min, max, smoothness) {
function draw_one_frame(cur_frac) {
let sun_size = height/8;
noStroke();
// sky
fill(100, 100, 214);
rect(0, 0, width, height);
let sunOffsetX = getNoiseValue(0, 0, cur_frac, "sun_swayx", -height/100, height/100, 100);
let sunOffsetY = getNoiseValue(0, 0, cur_frac, "sun_swayy", -height/200, height/200, 100);
// sun
fill(255, 255, 0);
ellipse(0.25 * width + sunOffsetX, 0.10 * height + sunOffsetY, sun_size);
// grass
fill(0, 200, 0);
rect(0, height/2, width, height/2);
stroke(0);
fill(100, 100, 100);
let b1_y = 0.55 * height;
let b2_y = 0.65 * height;
let b1_size = height/12;
let b2_size = height/6;
let grid_points1 = [
-0.25 * width,
0.0 * width,
0.25 * width,
0.50 * width,
0.75 * width,
1.00 * width
]
let bumped_grid_points1 = [];
for (let i=0; i<grid_points1.length; i++) {
let upBump = getNoiseValue(grid_points1[i], b1_y, cur_frac, "grid_points1_bumpup", -b1_size/2, b1_size/2, 100);
bumped_grid_points1.push(b1_y + upBump);
}
if (debugView) {
stroke(255, 0, 0);
strokeWeight(height/100);
noFill();
for(let i=0; i<grid_points1.length; i++) {
rect(grid_points1[i], bumped_grid_points1[i], b1_size, 2*b1_size);
}
}
fill(100, 100, 100);
noStroke();
for(let i=0; i<grid_points1.length-1; i++) {
let cur_x_pos = map(cur_frac, 0, 1, grid_points1[i], grid_points1[i+1])
rect(cur_x_pos, bumped_grid_points1[i], b1_size, 2*b1_size);
}
let grid_points2 = [
-0.40 * width,
0.10 * width,
0.60 * width,
1.10 * width
]
if(debugView) {
stroke(255, 0, 0);
strokeWeight(height/100);
noFill();
for(let i=0; i<grid_points2.length; i++) {
rect(grid_points2[i], b2_y, b2_size, 2*b2_size);
}
}
fill(100, 100, 100);
noStroke();
for(let i=0; i<grid_points2.length-1; i++) {
let cur_x_pos = map(cur_frac, 0, 1, grid_points2[i], grid_points2[i+1])
rect(cur_x_pos, b2_y, b2_size, 2*b2_size);
}
}
function draw_one_frame(cur_frac) {
noStroke();
// background
fill(224, 224, 224);
rect(0, 0, width, height);
// bucketWidth
let ball_size = height/20;
let four_positions = [
[ width/3, height/3],
[2*width/3, height/3],
[2*width/3, 2*height/3],
[ width/3, 2*height/3]
]
if (debugView) {
stroke(255, 0, 0);
strokeWeight(height/100);
noFill();
for (i in four_positions) {
p = four_positions[i];
ellipse(p[0], p[1], ball_size)
}
}
for (i in four_positions) {
let next_i = (i + 1) % 4;
p1 = four_positions[i];
p2 = four_positions[next_i];
ellipse(p[0], p[1], ball_size)
}
let num_rows = 10;
let num_cols = 14;
let cell_width = width / (num_cols + 1);
let cell_height = height / (num_rows + 1);
let cycle_frac = cur_frac;
let scaled_offset_y = cell_height / bw;
let scaled_offset_x = cell_width / bw;
let dump_smoothness = 3;
let max_cycle_offset = 1.0;
for (let j=0; j<num_rows; j++) {
let cur_y = (j+1)*cell_height;
for (let i=0; i<num_cols; i++) {
let cur_x = (i+1)*cell_width;
let cycle_offset = getNoiseValue(cur_x, cur_y, 0, "dump_offset", 0, max_cycle_offset, dump_smoothness);
let face_right = (i%2 == 0);
// let direction_val = getNoiseValue(cur_x, cur_y, 0, "dump_dir", 0, 1, dump_smoothness);
// let face_right = (direction_val < 0.5);
cycle_frac = (cur_frac + cycle_offset) % 1.0;
// cycle_frac = cur_frac;
push()
translate(cur_x, cur_y);
scale(bw);
ball_drop(cycle_frac, face_right, scaled_offset_x, scaled_offset_y);
pop();
}
}
for (let j=0; j<num_rows; j++) {
let cur_y = (j+1)*cell_height;
for (let i=0; i<num_cols; i++) {
let cur_x = (i+1)*cell_width;
let cycle_offset = getNoiseValue(cur_x, cur_y, 0, "dump_offset", 0, max_cycle_offset, dump_smoothness);
let face_right = (i%2 == 0);
// let direction_val = getNoiseValue(cur_x, cur_y, 0, "dump_dir", 0, 1, dump_smoothness);
// let face_right = (direction_val < 0.5);
// face_right = false;
cycle_frac = (cur_frac + cycle_offset) % 1.0;
// cycle_frac = cur_frac;
push()
translate(cur_x, cur_y);
scale(bw);
draw_bucket(cycle_frac, face_right);
pop();
}
}
}
/*
* 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="sketch.jpg" width="960" height="480"/>
<p>
<a href="sketch.html">sketch [this one]</a><br>
<a href="draw_one_frame.js">source code</a><br>
<a href="preview.jpg">preview image</a><br>
<a href="index.html">(normal)</a><br>
<a href="code_l.html">(large)</a><br>
<a href="code_xl.html">(xlarge)</a><br>
</body>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)();
}
// 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);
}
}