palettes_page.bundle.js

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 52);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.randItem = randItem;
exports.randomInRange = randomInRange;
exports.randomInt = randomInt;
exports.shuffle = shuffle;
exports.setAttrs = setAttrs;
exports.resetTransform = resetTransform;
exports.rotateCanvas = rotateCanvas;
exports.getGradientFunction = getGradientFunction;
exports.getLocalGradientFunction = getLocalGradientFunction;
exports.getSolidColorFunction = getSolidColorFunction;
exports.hexToRgb = hexToRgb;
exports.colorDistanceArray = colorDistanceArray;
exports.closestColor = closestColor;
exports.scalarVec = scalarVec;
exports.getAngle = getAngle;
exports.getVector = getVector;
exports.averagePoints = averagePoints;
exports.pointsToPath = pointsToPath;
exports.mapKeywordToVal = mapKeywordToVal;
exports.friendlyBoolean = friendlyBoolean;
exports.Note = Note;

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

// random Array member
function randItem(arr) {
    return arr[Math.floor(arr.length * Math.random())];
}

function randomInRange(min, max) {
    if (max === undefined) {
        max = min;
        min = 0;
    }
    return min + (max - min) * Math.random();
}

function randomInt(min, max) {
    return Math.round(randomInRange(min, max));
}

// fisher-yates, from https://bost.ocks.org/mike/shuffle/
function shuffle(array) {
    var m = array.length,
        t,
        i;

    // While there remain elements to shuffle…
    while (m) {

        // Pick a remaining element…
        i = Math.floor(Math.random() * m--);

        // And swap it with the current element.
        t = array[m];
        array[m] = array[i];
        array[i] = t;
    }

    return array;
}

function setAttrs(el, attrs) {
    var a;
    if (el && el.setAttribute) {
        for (a in attrs) {
            if (attrs.hasOwnProperty(a)) {
                el.setAttribute(a, attrs[a]);
            }
        }
    }
}

// reset canvas transformations
function resetTransform(ctx) {
    ctx.setTransform(1, 0, 0, 1, 0, 0);
}

// rotate canvas around center point
function rotateCanvas(ctx, w, h, angle) {
    ctx.translate(w / 2, h / 2);
    ctx.rotate(angle);
    ctx.translate(-w / 2, -h / 2);
}

function getGradientFunction(palette) {
    var p = [].concat(palette);
    return function (ctx, w, h) {
        var bias = Math.random() - 0.5;
        var coords = [];
        if (bias) {
            coords = [randomInRange(0, w), 0, randomInRange(0, w), h];
        } else {
            coords = [0, randomInRange(0, h), w, randomInRange(0, h)];
        }
        var grad = ctx.createLinearGradient.apply(ctx, _toConsumableArray(coords));
        grad.addColorStop(0, randItem(p));
        grad.addColorStop(1, randItem(p));
        return grad;
    };
}

function getLocalGradientFunction(palette) {
    var p = [].concat(palette);
    return function (ctx, x, y, size) {
        var bias = Math.random() - 0.5;
        var coords = [];
        if (bias) {
            coords = [randomInRange(x - size, x + size), y - size, randomInRange(x - size, x + size), y + size];
        } else {
            coords = [x - size, randomInRange(y - size, y + size), x + size, randomInRange(y - size, y + size)];
        }
        var grad = ctx.createLinearGradient.apply(ctx, _toConsumableArray(coords));
        grad.addColorStop(0, randItem(p));
        grad.addColorStop(1, randItem(p));
        return grad;
    };
}

// Creates a function that returns a different random entry
// from @palette each time it is called.
function getSolidColorFunction(palette) {
    var refresh = function refresh() {
        // clone palette before providing func to avoid
        // operating on the input array.
        return [].concat(palette).sort(function (a, b) {
            return Math.random() - 0.5;
        });
    };
    var p = refresh();
    return function () {
        // if we run out of colors, start with a new shuffled palette
        if (!p.length) p = refresh();
        // otherwise pop a color
        return p.pop();
    };
}

// converts @hex to 8-bit array [r, g, b]
function hexToRgb(hex) {
    if (hex[0] === '#') {
        hex = hex.slice(1);
    }
    if (hex.length === 3) {
        hex = '' + hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    function toN(hexFrag) {
        return parseInt(hexFrag, 16);
    }
    return [toN(hex.slice(0, 2)), toN(hex.slice(2, 4)), toN(hex.slice(4, 6))];
}

// Supply @c1, @c2 as [r,g,b] colors.
// Return r,g,b distance components, and a scalar distance as [r,b,g,distance]
// Scalar diff is 0-765
function colorDistanceArray(c1, c2) {
    var dr = void 0,
        dg = void 0,
        db = void 0;
    var _r = (c1[0] + c2[0]) / 2;
    dr = c2[0] - c1[0];
    dg = c2[1] - c1[1];
    db = c2[2] - c1[2];
    // dc = scalar diff
    var dc = Math.sqrt(dr * dr * (2 + _r / 256) + dg * dg * 4 + db * db * (2 + (255 - _r) / 256));
    return [dr, dg, db, dc];
}

// args are rgb in 8 bit array form
// returns {diff, color}
function closestColor(sample, palette) {
    var diffs = palette.map(function (p) {
        return {
            diff: colorDistanceArray(p, sample),
            color: p
        };
    });
    diffs = diffs.sort(function (a, b) {
        return a.diff[3] - b.diff[3];
    });
    return diffs[0];
}

// util for scaling color errors in dithering, but could be useful
function scalarVec(vec, scalar) {
    return vec.map(function (x) {
        return x * scalar;
    });
}

// util
// get angle between @a and @b of form [x, y]
// returns in radians
function getAngle(a, b) {
    var dx = b[0] - a[0];
    var dy = b[1] - a[1];
    return Math.atan2(dy, dx);
}

// util
// get vector between @a and @b of form [x, y]
// return object with x, y = @a, angle, length
function getVector(a, b) {
    var dx = b[0] - a[0];
    var dy = b[1] - a[1];
    var theta = Math.atan2(dy, dx);
    var length = Math.sqrt(dx * dx + dy * dy);
    return {
        x: a[0],
        y: a[1],
        angle: theta,
        length: length
    };
}

// get the average coordinates from an array of
// @points in [x,y] form
function averagePoints(points) {
    var avg = [0, 0];
    for (var i = 0; i < points.length; i++) {
        avg[0] += points[i][0];
        avg[1] += points[i][1];
    }
    avg[0] /= points.length;
    avg[1] /= points.length;
    return avg;
}

// Create a path in @ctx by stepping through the points
// in @points, which are in [x,y] array form
function pointsToPath(ctx, points) {
    // copy the points list, so we don't mutate
    var pts = points.concat([]);
    ctx.beginPath();
    ctx.moveTo.apply(ctx, _toConsumableArray(pts.shift()));
    while (pts.length) {
        ctx.lineTo.apply(ctx, _toConsumableArray(pts.shift()));
    }
    ctx.closePath();
    return ctx;
}

// map named values of props, e.g. low, med, high…
// to values, as defined in the obj @props
// If values are arrays, use @accessor function to pick.
// Respect 'auto' as special case for @name
function mapKeywordToVal(props) {
    var accessor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : randomInRange;

    var names = Object.keys(props);

    return function (name) {
        var label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'param';

        if (name === 'auto' || name === 'AUTO') {
            name = randItem(names);
            console.log(label + ': auto picked ' + name);
        }
        if (props[name] === undefined) {
            name = names[0];
            console.log(label + ': fell back to ' + name);
        }
        var val = props[name];
        if (Array.isArray(val)) {
            return accessor.apply(undefined, _toConsumableArray(val));
        } else {
            return val;
        }
    };
}

// Get boolean value, but be friendly to "false" passed as string
function friendlyBoolean(prop) {
    if (prop === 'false') return false;
    return !!prop;
}

function Note() {
    var divider = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
    var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

    var msgs = [];
    var start_ts = new Date().getTime();
    var end_ts = start_ts;
    this.add = function (t) {
        msgs.push(t);
    };
    this.first = function (t) {
        msgs.unshift(t);
    };
    this.print = function () {
        return msgs.join('\n');
    };
    this.log = function () {
        if (time) {
            end_ts = new Date().getTime();
            this.add('> Ran in ' + (end_ts - start_ts) + 'ms');
        }
        if (divider) {
            this.first('------------------------------');
        }
        console.log(this.print());
    };
    return this;
}

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
// in use
var palettes = {
    ultra: ['#15d6d0', '#4481fc', '#bb19d8', '#f22f1c', '#ffa300', '#fff200'],
    high_contrast: ['#111111', '#444444', '#dddddd', '#f9f9f9'],
    low_contrast: ['#555555', '#777777', '#999999', '#cccccc', '#dddddd'],
    black_white_red: ['#111111', '#444444', '#dddddd', '#ffffff', '#880000', '#dd0000'],

    south_beach: ['#0c3646', '#11758e', '#89bed3', '#e4ca49', '#cabd9d', '#f2f0ea'],
    north_beach: ['#1d282e', '#4b4f52', '#0089ad', '#6e92b4', '#b9a583', '#f1e1d1'],
    twilight_beach: ['#030408', '#0c3646', '#4a828f', '#af8c70', '#aaadac', '#ffffff'],
    admiral: ['#0a131c', '#072444', '#3b6185', '#361313', '#c47423', '#b88d40', '#f3efec'],
    plum_sauce: ['#3C2E42', '#B4254B', '#FF804A', '#E8D1A1', '#A5C9C4'],
    fingerspitzen: ['#f4dda8', '#eda87c', '#c8907e', '#9cacc3', '#485e80', '#3b465b'],
    de_stijl: ['#f9f9f9', '#D9AC32', '#ED5045', '#1F3E9C', '#000142'],

    terra_cotta_cactus: ['#5d576b', '#9bc1b8', '#f4f1bb', '#dcc48e', '#ed6a5a'],
    metroid_fusion: ['#DBEED6', '#47BDC2', '#0A7DB8', '#1A3649', '#B24432'],

    candywafer: ['#222222', '#fae1f6', '#b966d3', '#8ED2EE', '#362599', '#fff9de', '#FFC874'],
    blush: ['#111111', '#94552C', '#F8ADAA', '#F8E3AC', '#ffffff'],

    ikb: ['#070033', '#00006b', '#00187c', '#002ea7', '#0b6fff', '#5c9eff', '#e9f4ff'],

    torch: ['#230000', '#770022', '#bf0000', '#dd3400', '#ff7415', '#ff9d27', '#fffa50'],

    magma: ['#000004', '#3b0f70', '#8c2981', '#de4968', '#fe9f6d', '#fcfdbf'],
    inferno: ['#000004', '#420a68', '#932667', '#dd513a', '#fca50a', '#fcffa4'],
    plasma: ['#0d0887', '#6a00a8', '#b12a90', '#e16462', '#fca636', '#f0f921'],
    viridis: ['#440154', '#414487', '#2a788e', '#22a884', '#7ad151', '#fde725'],

    morley_rainbow: ['#817', '#a35', '#c66', '#e94', '#ed0', '#9d5', '#4d8', '#2cb', '#0bc', '#09c', '#36b', '#639']
};

exports.default = palettes;

// older palettes:

var lemon_beach = exports.lemon_beach = ['#d7d7d7', '#979797', '#cabd9d', '#e4ca49', '#89bed3', '#11758e'];

/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
/**
 * Add noise to existing artwork, adding small equal values to each r,g,b
 * component of each pixel, by stepping through imageData.
 * Noise values darken or lighten pixels within the bounds of @opacity.
 * @param {node} canvas  input canvas to act upon
 * @param {number} opacity number from 0-1. Values < 0.1 recommended.
 */
function addNoiseToCanvas(canvas) {
    var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.2;

    var ctx = canvas.getContext('2d');

    var noise = void 0;
    var d = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var px = d.data;
    var n = px.length;
    var random = Math.random;
    var i = 0;
    // manipulate imageData array
    while (i < n) {
        noise = opacity * ((random() - 0.5) * 256) | 0;
        px[i++] += noise;
        px[i++] += noise;
        px[i++] += noise;
        i++; // step i for alpha value
    }

    ctx.putImageData(d, 0, 0);
}

/**
 * Add noise to @canvas efficiently, by creating a separate offscreen noisy
 * canvas, then applying that as a tiled pattern.
 * @param {node} canvas     the canvas to add noise to
 * @param {number} opacity    the intensity of the noise
 * @param {number} tileSize   the size of the pattern tile (a square)
 * @param {boolean} useOverlay if true, will composite using overlay blend mode
 */
function addNoiseFromPattern(canvas, opacity, tileSize, useOverlay) {
    var noiseCanvas = createNoiseCanvas(opacity, tileSize);
    applyNoiseCanvas(canvas, noiseCanvas, useOverlay);

    return {
        noiseCanvas: noiseCanvas,
        canvas: canvas
    };
}

/**
 * Creates an offscreen noisy canvas, where pixels are black or white with
 * alpha values random less than @opacity. This can be applied to other canvases
 * as a pattern for efficient noise application.
 * @param  {number} opacity  Noise intensity. As usual, small values < 0.1 best
 * @param  {number} tileSize The size of the pattern to be created
 * @return {node}          returns a reference to the canvas
 */
function createNoiseCanvas(opacity, tileSize) {
    tileSize = tileSize || 100;
    var canvas = document.createElement('canvas');
    canvas.width = tileSize;
    canvas.height = tileSize;

    // add noise to the offscreen canvas

    var ctx = canvas.getContext('2d');

    var noise = void 0;
    var d = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var px = d.data;
    var n = px.length;
    var random = Math.random;
    var i = 0;
    // manipulate imageData array
    while (i < n) {
        px[i++] = px[i++] = px[i++] = random() > 0.5 ? 255 : 0;
        px[i++] = opacity * random() * 256 | 0;
    }

    ctx.putImageData(d, 0, 0);

    return canvas;
}

/**
 * Actually do the application of @noiseCanvas as a pattern to @targetCanvas
 * @param  {node} targetCanvas the destination artwork
 * @param  {node} noiseCanvas  the input canvas with alpha channel noise
 * @param  {boolean} useOverlay   composite with overlay vs normal
 * @return {node}              return ref to the @targetCanvas
 */
function applyNoiseCanvas(targetCanvas, noiseCanvas, useOverlay) {
    var ctx = targetCanvas.getContext('2d');
    // create a noise pattern from the offscreen canvas
    var noisePattern = ctx.createPattern(noiseCanvas, 'repeat');
    ctx.fillStyle = noisePattern;
    if (useOverlay) {
        ctx.globalCompositeOperation = 'overlay';
    }
    ctx.fillRect(0, 0, targetCanvas.width, targetCanvas.height);
    if (useOverlay) {
        ctx.globalCompositeOperation = 'normal';
    }
    return targetCanvas;
}

exports.default = {
    addNoiseToCanvas: addNoiseToCanvas,
    addNoiseFromPattern: addNoiseFromPattern,
    createNoiseCanvas: createNoiseCanvas,
    applyNoiseCanvas: applyNoiseCanvas
};

/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

exports.drawLine = drawLine;
exports.drawCross = drawCross;
/*
 * Scaffolding for a drawing function.
 * Implements basic setup for placement, rotation, stroke, fill,
 * and leaving the path open.
 * All the drawing takes place in @renderFunc, which must have the standard
 * signature used in the returned function.
 * The renderFunc should not begin or close paths, or translate the canvas.
 */
function _makeRenderer(renderFunc) {
    return function (ctx, x, y, size, opts) {
        if (!opts.continue) {
            ctx.save();
            ctx.beginPath();
        }

        ctx.translate(x, y);
        if (opts.angle) {
            ctx.rotate(opts.angle);
        }

        // This is where all the drawing happens!
        //
        renderFunc(ctx, x, y, size, opts);
        //
        // Done defining path

        if (!opts.continue) {
            ctx.closePath();
            ctx.restore();
        }

        // Paint pixels
        ctx.fillStyle = opts.fill;
        ctx.strokeStyle = opts.stroke;
        opts.fill && ctx.fill();
        opts.stroke && ctx.stroke();

        return ctx;
    };
}

// Draw a closed circle
var drawCircle = exports.drawCircle = _makeRenderer(function (ctx, x, y, r, opts) {
    ctx.moveTo(r, 0);
    ctx.arc(0, 0, r, 0, 2 * Math.PI, false);
});

// Draw a ring with 50% thickness
var drawRing = exports.drawRing = _makeRenderer(function (ctx, x, y, r, opts) {
    var inner = r * 0.5;

    ctx.moveTo(r, 0);
    ctx.arc(0, 0, r, 0, 2 * Math.PI, false);
    // cutout
    ctx.moveTo(inner, 0);
    ctx.arc(0, 0, inner, 0, 2 * Math.PI, true);
});

// Draw a closed square
var drawSquare = exports.drawSquare = _makeRenderer(function (ctx, x, y, d, opts) {
    ctx.rect(-d, -d, d * 2, d * 2);
});

// Draw a closed rectangle with golden ratio aspect ratio
var drawRect = exports.drawRect = _makeRenderer(function (ctx, x, y, d, opts) {
    var gl = 0.6180339;

    ctx.rect(-d, -d * gl, d * 2, d * 2 * gl);
});

// Draw a square box, 60% thickness
var drawBox = exports.drawBox = _makeRenderer(function (ctx, x, y, d, opts) {
    var r = d * 0.4;

    ctx.moveTo(-d, -d);
    ctx.lineTo(+d, -d);
    ctx.lineTo(+d, +d);
    ctx.lineTo(-d, +d);
    ctx.lineTo(-d, -d);
    // cutout
    ctx.moveTo(-r, -r);
    ctx.lineTo(-r, +r);
    ctx.lineTo(+r, +r);
    ctx.lineTo(+r, -r);
    ctx.lineTo(-r, -r);
});

// Generate drawing functions for polygons
function _drawPolygon(SIDES, SCALE) {
    SCALE = SCALE || 1;

    return _makeRenderer(function (ctx, x, y, d, opts) {
        var r = d * SCALE;
        var a = Math.PI * 2 / SIDES;
        function _x(theta) {
            return r * Math.cos(theta - Math.PI / 2);
        }
        function _y(theta) {
            return r * Math.sin(theta - Math.PI / 2);
        }

        ctx.moveTo(_x(a * 0), _y(a * 0));
        for (var i = 1; i <= SIDES; i++) {
            ctx.lineTo(_x(a * i), _y(a * i));
        }
    });
}

// Strict drawing from centerpoint and radial corner placement
var drawExactTriangle = exports.drawExactTriangle = _drawPolygon(3, 1.2);
// Adjusting triangles downward a little fits them more naturally
// near other shapes.
var drawTriangle = exports.drawTriangle = function drawTriangle(ctx, x, y, d, opts) {
    drawExactTriangle(ctx, x, y + d * 0.2, d, opts);
};
var drawPentagon = exports.drawPentagon = _drawPolygon(5, 1.1);
var drawHexagon = exports.drawHexagon = _drawPolygon(6, 1.05);

// Draw a line from @a to @b, where they are of form [x, y]
function drawLine(ctx, a, b) {
    var _a = _slicedToArray(a, 2),
        x1 = _a[0],
        y1 = _a[1];

    var _b = _slicedToArray(b, 2),
        x2 = _b[0],
        y2 = _b[1];

    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
}

function drawCross(ctx, x, y, r, opts) {
    ctx.strokeStyle = opts.stroke || opts.fill;
    ctx.beginPath();
    ctx.moveTo(x - r, y);
    ctx.lineTo(x + r, y);
    ctx.moveTo(x, y - r);
    ctx.lineTo(x, y + r);
    ctx.stroke();
}

/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = hexScatter;
// Fast scattering of random-looking points

function hexScatter(spacing, w, h, loosen) {
    loosen = loosen || 1.25;

    var TWOPI = Math.PI * 2;

    var gridSize = spacing * loosen;
    var R = spacing / 2;
    var cellR = gridSize - R;
    var hexW = 2 * 0.8660 * gridSize;
    var hexH = 1.5 * gridSize;
    var cols = Math.ceil(w / hexW) + 1;
    var rows = Math.ceil(h / hexH) + 1;
    var row; // current row in loops
    var col; // current col in loops

    function randomInRange(min, max) {
        return min + Math.random() * (max - min);
    }

    // Generates hexagon center-points for non-overlapping tiling
    function getTiledLayout(w, h, scale) {
        var points = [];
        var hexW = 2 * scale * 0.8660;
        var hexH = scale * 1.5;
        var rows = Math.ceil(h / hexH) + 1;
        var cols = Math.ceil(w / hexW) + 1;
        var count = rows * cols;
        var offset;
        var row;

        for (var i = 0; i < count; i++) {
            row = Math.floor(i / cols);
            offset = row % 2 ? -scale * 0.8660 : 0;
            points.push([i % cols * hexW + offset, row * hexH]);
        }

        return points;
    }

    function avgPoints(points) {
        var avg = [0, 0];
        avg[0] = points.reduce(function (m, v) {
            return m + v[0];
        }, 0) / points.length;
        avg[1] = points.reduce(function (m, v) {
            return m + v[1];
        }, 0) / points.length;
        return avg;
    }

    function isTooClose(p1, p2, d) {
        var dx = p2[0] - p1[0];
        var dy = p2[1] - p1[1];
        return dx * dx + dy * dy < d * d;
    }

    function checkSet(p, others, d) {
        var ok = true;
        others.forEach(function (o) {
            ok = ok && !isTooClose(p, o, d);
        });
        return ok;
    }

    function circumcenter(a, b, c) {
        var ax = a[0];
        var ay = a[1];
        var bx = b[0];
        var by = b[1];
        var cx = c[0];
        var cy = c[1];

        // midpoints
        var midAB = avgPoints([a, b]);
        var midAC = avgPoints([a, c]);

        // slopes
        var mAB = (by - ay) / (bx - ax);
        var mAC = (cy - ay) / (cx - ax);
        // invert for perpendicular
        mAB = -1 / mAB;
        mAC = -1 / mAC;

        // offsets
        var bAB = midAB[1] - mAB * midAB[0];
        var bAC = midAC[1] - mAC * midAC[0];

        var CCx;
        var CCy;

        // algebra!
        CCx = (bAC - bAB) / (mAB - mAC);
        CCy = mAB * CCx + bAB;

        var dx = CCx - ax;
        var dy = CCy - ay;
        var r = Math.sqrt(dx * dx + dy * dy);

        return { x: CCx, y: CCy, r: r };
    }

    var layout = getTiledLayout(w, h, gridSize);
    // [rows…][cols]
    var points = [];
    var topTriangles = [];

    var renderCount = rows * cols; // track points and repacking.

    var out = []; // output points

    var attempts = 0;

    // placement vars
    var cc; // circumcenter from points
    var packed = []; // coords from cc
    var tricc; // circumcenter from packed top triangles
    var tripacked; // coords from tricc

    var start = new Date().getTime();

    layout.forEach(function (p, i) {
        var x = p[0];
        var y = p[1];

        // the point
        var a = randomInRange(0, TWOPI);
        var v = randomInRange(0, cellR);
        var px = x + v * Math.cos(a);
        var py = y + v * Math.sin(a);

        points.push([px, py]);
        out.push([px, py]);

        attempts++;
    });

    // now pack points in top triangles
    var grid = points;
    for (var i = 0; i < grid.length - cols; i++) {
        row = Math.floor(i / cols);

        if (i % cols >= cols - 1) {
            continue;
        }

        var nextRowColOffset = row % 2 ? 0 : 1;
        // top triangles: get points from grid
        var p1 = grid[i];
        var p2 = grid[i + 1];
        var p3 = grid[i + cols + nextRowColOffset];

        cc = circumcenter(p1, p2, p3);
        packed = [cc.x, cc.y];
        attempts++;

        topTriangles[i] = packed;

        if (cc.r > spacing) {
            out.push(packed);
            renderCount++;
        }
    }

    // now pack points in bottom triangles
    for (var i = cols; i < grid.length - 1; i++) {
        row = Math.floor(i / cols);

        var odd = row % 2; // odd or even row
        var step = i % cols; // step within a row

        if (step >= cols - 1) {
            continue;
        }

        var colOffset = odd ? 0 : 1;

        var p1 = grid[i];
        var p2 = grid[i + 1];
        var p3 = grid[i - cols + colOffset];

        cc = circumcenter(p1, p2, p3);
        packed = [cc.x, cc.y];
        attempts++;

        var pp1;
        var pp2;
        var pp3;

        if (odd) {
            pp1 = topTriangles[i - cols - 1];
            pp2 = topTriangles[i - cols - 0];
            pp3 = topTriangles[i];
        } else {
            pp1 = topTriangles[i - cols + 0];
            pp2 = topTriangles[i - cols + 1];
            pp3 = topTriangles[i];
        }

        var hasTriangles = pp1 && pp2 && pp3;

        if (hasTriangles) {
            tricc = circumcenter(pp1, pp2, pp3);
            tripacked = [tricc.x, tricc.y];
            attempts++;
        }

        // check circumcenter against its component points
        var ccOK = cc.r > spacing;
        // now check against the neighboring packed points
        if (ccOK && hasTriangles) {
            ccOK = checkSet(packed, [pp1, pp2, pp3], spacing);
        }

        var tripOK = false;
        if (tricc && !ccOK) {
            tripOK = tricc.r > spacing;

            if (tripOK) {
                tripOK = checkSet(tripacked, [p1, p2, p3], spacing);
            }
        }

        if (ccOK) {
            out.push(packed);
            renderCount++;
        }

        if (tricc && !ccOK) {
            if (tripOK) {
                out.push(tripacked);
                renderCount++;
            }
        }

        if (!ccOK && !tripOK && tricc && hasTriangles) {
            packed = avgPoints([packed, tripacked]);
            attempts++;
            ccOK = checkSet(packed, [p1, p2, p3, pp1, pp2, pp3], spacing);
            if (ccOK) {
                out.push(packed);
                renderCount++;
            }
        }
    }

    var count = out.length;

    console.log(count + ' samples from ' + attempts + ' attempts, ' + (count / attempts * 100).toPrecision(2) + '% efficiency');

    return out;
}

/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.createTransform = createTransform;
exports.createSourceSinkTransform = createSourceSinkTransform;
exports.opacityTransforms = opacityTransforms;

var _utils = __webpack_require__(0);

var PI = Math.PI;

// Create a function which is a periodic transform of x, y
function createTransform() {
    var rateMin = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
    var rateMax = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;

    var rate1 = (0, _utils.randomInRange)(0, rateMax / 2);
    var rate2 = (0, _utils.randomInRange)(0, rateMax / 2);
    var rate3 = (0, _utils.randomInRange)(rateMax / 2, rateMax);
    var rate4 = (0, _utils.randomInRange)(rateMax / 2, rateMax);

    var phase1 = (0, _utils.randomInRange)(-PI, PI);
    var phase2 = (0, _utils.randomInRange)(-PI, PI);
    var phase3 = (0, _utils.randomInRange)(-PI, PI);
    var phase4 = (0, _utils.randomInRange)(-PI, PI);

    var c1 = (0, _utils.randomInRange)(0, 1);
    var c2 = (0, _utils.randomInRange)(0, 1);
    var c3 = (0, _utils.randomInRange)(0, 1);
    var c4 = (0, _utils.randomInRange)(0, 1);
    return function (xnorm, ynorm) {
        var t1 = Math.sin(xnorm * rate1 * 2 * PI + phase1);
        var t2 = Math.sin(ynorm * rate2 * 2 * PI + phase2);
        var t3 = Math.sin(xnorm * rate3 * 2 * PI + phase3);
        var t4 = Math.sin(ynorm * rate4 * 2 * PI + phase4);
        return (c1 * t1 + c2 * t2 + c3 * t3 + c4 * t4) / (c1 + c2 + c3 + c4);
    };
}

function createSourceSinkTransform() {
    var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;

    var sources = [];

    while (count--) {
        var src = {
            strength: (0, _utils.randomInRange)(1, 20),
            sign: 1,
            x: (0, _utils.randomInRange)(-0.25, 1.25), // add some overscan
            y: (0, _utils.randomInRange)(-0.25, 1.25)
        };
        if (Math.random() > 0.9) {
            // occasionally make sinks instead of sources
            src.sign *= -1;
        }
        sources.push(src);
    }

    return {
        sources: sources,
        t: function t(xnorm, ynorm) {
            var v = [0, 0]; // force vector to return

            sources.forEach(function (source) {
                var rmin = source.strength / 1000; // magic number


                var dx = xnorm - source.x;
                var dy = ynorm - source.y;
                var _r = dx * dx + dy * dy; // really r squared but that's what we want

                if (_r < rmin) {
                    _r = rmin;
                }; // min r

                var scalar = source.sign * source.strength / _r;

                var _x = scalar * dx;
                var _y = scalar * dy;
                v[0] += _x;
                v[1] += _y;
            });

            return v;
        }
    };
}

function opacityTransforms(maxLen) {
    return [function () {
        return 1;
    }, function (_x, _y) {
        return Math.abs(_y / _x) / maxLen;
    }, function (_x, _y) {
        return 1 - Math.abs(_y / _x) / maxLen;
    }, function (_x, _y) {
        return Math.abs(_x / _y);
    }, // hides verticals
    function (_x, _y) {
        return Math.abs(_y / _x);
    }, // hides horizontals
    function (_x, _y) {
        return _x / _y;
    }, function (_x, _y) {
        return _y / _x;
    }, function (_x, _y) {
        return _y - _x;
    }, function (_x, _y) {
        return _x - _y;
    }];
}

/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.defineFill = defineFill;
exports.expandFill = expandFill;

var _utils = __webpack_require__(0);

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

/*
 * The general approach is to define fills in a generic object format,
 * which can be considered the serialized form:
 *
 * myFill = {
 *     type: ['solid', 'linear', 'radial'],
 *     params: {
 *         // whatever you need for the fill type
 *     }
 * }
 *
 * These are returned by defineFill()
 *
 * These can be deserialized by expandFill(), which dispatches to helper functions
 * for each fill type. These return an expanded fill, which is anything that
 * is valid for assignment to context.fillStyle = {}
 * e.g. a string of a hex color, or a defined canvas gradient.
 * 
 */

//--------------------------------------
// SERIALIZE
//--------------------------------------

var defineSolidFill = function defineSolidFill(palette) {
    var f = {
        type: 'solid',
        params: {
            color: (0, _utils.randItem)(palette)
        }
    };
    return f;
};

/**
 * Define a linear fill
 * @param  {context} ctx  the canvas rendering context
 * @param {array} palette an array of color values
 * @param  {num} x    center x of shape, normalized
 * @param  {num} y    center y of shape, normalized
 * @param  {num} size       half the size of the shape (r for circle), normalized
 * @param  {num} skew       scalar to offset endpoints left/right for angled gradient
 * @return {fillStyle}      an object defining a linear gradient, to be processed by expandFill()
 */
var defineLinearGradientFill = function defineLinearGradientFill(palette, x, y, size, skew) {
    var gradient = {
        type: 'linear',
        params: {
            coords: [],
            stops: []
        }
    };
    // 
    // pick xoffset as fraction of size to get a shallow angle
    var xoff = (0, _utils.randomInRange)(-skew / 2, skew / 2) * size;
    // build gradient, add stops
    gradient.params.coords = [x - xoff, y - size, x + xoff, y + size];
    gradient.params.stops.push([0, (0, _utils.randItem)(palette)]);
    gradient.params.stops.push([1, (0, _utils.randItem)(palette)]);
    return gradient;
};

// generic fill definition function
/**
 * Get a fill, either in solid or gradients
 * @param  {context} ctx  the canvas rendering context
 * @param {array} palette an array of color values
 * @param  {num} x    center x of shape, normalized
 * @param  {num} y    center y of shape, normalized
 * @param  {num} size       half the size of the shape (r for circle), normalized
 * @param  {num} skew       scalar to offset endpoints left/right for angled gradient
 * @return {fillStyle}      a custom fill object to be processed by expandFill()
 */
function defineFill(type, palette, x, y, size, skew) {
    // create a fill object
    var fillGenerators = {
        'solid': defineSolidFill,
        'linear': defineLinearGradientFill,
        'radial': defineSolidFill // FIXME
    };
    return fillGenerators[type](palette, x, y, size, skew);
}

//--------------------------------------
// DESERIALIZE
//--------------------------------------


var gradientFromLinearDef = function gradientFromLinearDef(ctx, gradientDef, w, h, scale) {
    var c = [].concat(_toConsumableArray(gradientDef.params.coords));
    c[0] *= w;
    c[1] *= h;
    c[2] *= w;
    c[3] *= h;
    var g = ctx.createLinearGradient.apply(ctx, _toConsumableArray(c));
    gradientDef.params.stops.forEach(function (s) {
        return g.addColorStop.apply(g, _toConsumableArray(s));
    });
    return g;
};

// outer expandFill converts a fill spec to a usable 2D context fill
function expandFill(ctx, fill, w, h, scale) {
    var fillFuncs = {
        'linear': gradientFromLinearDef,
        'radial': function radial(ctx, fill) {
            return fill.params.color;
        }, // FIXME
        'solid': function solid(ctx, fill) {
            return fill.params.color;
        }
    };
    if (fillFuncs[fill.type]) {
        return fillFuncs[fill.type](ctx, fill, w, h, scale);
    } else {
        console.error('Could not resolve fill', fill, w, h, scale);
        return '#808080';
    }
}

/***/ }),
/* 7 */
/***/ (function(module, exports) {

// removed by extract-text-webpack-plugin

/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.speckle = speckle;
exports.donegal = donegal;
exports.dapple = dapple;

var _hexScatter = __webpack_require__(4);

var _hexScatter2 = _interopRequireDefault(_hexScatter);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var PI = Math.PI;

/**
 * Speckle the canvas little squares and shapes. This redraws existing canvas
 * @canvas to speckle
 * @speckleSize the size of placed dots
 * @spacing the empty cell size around each dot, relative to speckelSize
 * @fillWith an optional param, accepts "sample", "random", or
 * a function(p) which returns a color, where p = [x,y].
 * If fillWith is not supplied or is not a function, it defaults to "sample"
 * The "random" mode still samples, but from another random point.
 */
function speckle(canvas) {
    var speckleSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
    var spacing = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 4;
    var fillWith = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'sample';

    var ctx = canvas.getContext('2d');
    var cw = canvas.width;
    var ch = canvas.height;

    // create speckle points
    var speckles = (0, _hexScatter2.default)(speckleSize * spacing, cw, ch);
    // placeholder coloring func
    var speckleColor = void 0;

    // if custom color func was passed, use that.
    // otherwise sample from the image data
    if (typeof fillWith === 'function') {
        // use supplied color generator
        speckleColor = fillWith;
    } else if (fillWith === 'random') {
        // random mode samples from random other points on canvas
        var px = ctx.getImageData(0, 0, cw, ch).data;
        speckleColor = function speckleColor(p) {
            // sample from random point
            p = [(0, _utils.randomInt)(0, cw), (0, _utils.randomInt)(0, ch)];
            var i = 4 * (Math.round(p[0]) + Math.round(p[1]) * cw);
            var sample = px.slice(i, i + 3);
            return 'rgba(' + sample.join(',') + ')';
        };
    } else {
        // default is "sample" mode
        var _px = ctx.getImageData(0, 0, cw, ch).data;
        speckleColor = function speckleColor(p) {
            var i = 4 * (Math.round(p[0]) + Math.round(p[1]) * cw);
            var sample = _px.slice(i, i + 3);
            return 'rgba(' + sample.join(',') + ')';
        };
    }

    // draw a speckle at each point
    speckles.forEach(function (p, i) {
        // skip a fraction of pts for more irregularity
        if (Math.random() < 0.8) {
            (0, _shapes.drawSquare)(ctx, p[0], p[1], speckleSize, {
                fill: speckleColor(p),
                angle: (0, _utils.randomInRange)(0, PI)
            });
        };
    });
}

/**
 * Run multiple passes of speckle(), designed to make a nice donegal fabric
 * appearance. Runs in dense "sample" mode to break up edges, and does a
 * sparse pass in "random" mode or another func supplied in @fillWith
 */
function donegal(canvas) {
    var fillWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "random";

    var SCALE = Math.min(canvas.width, canvas.height);
    // coarse sampled speckles to break edges
    speckle(canvas, SCALE * (0, _utils.randomInRange)(.0015, .0030), 4, 'sample');
    // random speckles, widely spaced, for donegal look
    speckle(canvas, SCALE * (0, _utils.randomInRange)(.0010, .0020), (0, _utils.randomInt)(20, 40), fillWith);
    // finer sampled speckles to break edges more
    speckle(canvas, SCALE * (0, _utils.randomInRange)(.0010, .0020), 3, 'sample');

    // conditional, finer still:
    if (SCALE > 1600) {
        // finer sampled speckles to break edges more
        speckle(canvas, SCALE * (0, _utils.randomInRange)(.0005, .0010), 3, 'sample');
    }
}

function dapple(canvas) {
    var SCALE = Math.min(canvas.width, canvas.height);
    // coarse sampled speckles to break edges
    speckle(canvas, SCALE * (0, _utils.randomInRange)(.0016, .0032), (0, _utils.randomInt)(5, 8), 'sample');
    // medium
    speckle(canvas, SCALE * (0, _utils.randomInRange)(.0012, .0024), (0, _utils.randomInt)(4, 7), 'sample');
    // finer sampled speckles to break edges more
    speckle(canvas, SCALE * (0, _utils.randomInRange)(.0008, .0016), (0, _utils.randomInt)(3, 5), 'sample');

    // conditional, finer still:
    if (SCALE > 1600) {
        // finer sampled speckles to break edges more
        speckle(canvas, SCALE * (0, _utils.randomInRange)(.0004, .0008), (0, _utils.randomInt)(3, 5), 'sample');
    }
}

/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
var colorbrewer = {
    "Set1": { "3": ["rgb(228,26,28)", "rgb(55,126,184)", "rgb(77,175,74)"], "4": ["rgb(228,26,28)", "rgb(55,126,184)", "rgb(77,175,74)", "rgb(152,78,163)"], "5": ["rgb(228,26,28)", "rgb(55,126,184)", "rgb(77,175,74)", "rgb(152,78,163)", "rgb(255,127,0)"], "6": ["rgb(228,26,28)", "rgb(55,126,184)", "rgb(77,175,74)", "rgb(152,78,163)", "rgb(255,127,0)", "rgb(255,255,51)"], "7": ["rgb(228,26,28)", "rgb(55,126,184)", "rgb(77,175,74)", "rgb(152,78,163)", "rgb(255,127,0)", "rgb(255,255,51)", "rgb(166,86,40)"], "8": ["rgb(228,26,28)", "rgb(55,126,184)", "rgb(77,175,74)", "rgb(152,78,163)", "rgb(255,127,0)", "rgb(255,255,51)", "rgb(166,86,40)", "rgb(247,129,191)"], "9": ["rgb(228,26,28)", "rgb(55,126,184)", "rgb(77,175,74)", "rgb(152,78,163)", "rgb(255,127,0)", "rgb(255,255,51)", "rgb(166,86,40)", "rgb(247,129,191)", "rgb(153,153,153)"], "type": "qual" },
    "Set3": { "3": ["rgb(141,211,199)", "rgb(255,255,179)", "rgb(190,186,218)"], "4": ["rgb(141,211,199)", "rgb(255,255,179)", "rgb(190,186,218)", "rgb(251,128,114)"], "5": ["rgb(141,211,199)", "rgb(255,255,179)", "rgb(190,186,218)", "rgb(251,128,114)", "rgb(128,177,211)"], "6": ["rgb(141,211,199)", "rgb(255,255,179)", "rgb(190,186,218)", "rgb(251,128,114)", "rgb(128,177,211)", "rgb(253,180,98)"], "7": ["rgb(141,211,199)", "rgb(255,255,179)", "rgb(190,186,218)", "rgb(251,128,114)", "rgb(128,177,211)", "rgb(253,180,98)", "rgb(179,222,105)"], "8": ["rgb(141,211,199)", "rgb(255,255,179)", "rgb(190,186,218)", "rgb(251,128,114)", "rgb(128,177,211)", "rgb(253,180,98)", "rgb(179,222,105)", "rgb(252,205,229)"], "9": ["rgb(141,211,199)", "rgb(255,255,179)", "rgb(190,186,218)", "rgb(251,128,114)", "rgb(128,177,211)", "rgb(253,180,98)", "rgb(179,222,105)", "rgb(252,205,229)", "rgb(217,217,217)"], "10": ["rgb(141,211,199)", "rgb(255,255,179)", "rgb(190,186,218)", "rgb(251,128,114)", "rgb(128,177,211)", "rgb(253,180,98)", "rgb(179,222,105)", "rgb(252,205,229)", "rgb(217,217,217)", "rgb(188,128,189)"], "11": ["rgb(141,211,199)", "rgb(255,255,179)", "rgb(190,186,218)", "rgb(251,128,114)", "rgb(128,177,211)", "rgb(253,180,98)", "rgb(179,222,105)", "rgb(252,205,229)", "rgb(217,217,217)", "rgb(188,128,189)", "rgb(204,235,197)"], "12": ["rgb(141,211,199)", "rgb(255,255,179)", "rgb(190,186,218)", "rgb(251,128,114)", "rgb(128,177,211)", "rgb(253,180,98)", "rgb(179,222,105)", "rgb(252,205,229)", "rgb(217,217,217)", "rgb(188,128,189)", "rgb(204,235,197)", "rgb(255,237,111)"], "type": "qual" },
    "Pastel1": { "3": ["rgb(251,180,174)", "rgb(179,205,227)", "rgb(204,235,197)"], "4": ["rgb(251,180,174)", "rgb(179,205,227)", "rgb(204,235,197)", "rgb(222,203,228)"], "5": ["rgb(251,180,174)", "rgb(179,205,227)", "rgb(204,235,197)", "rgb(222,203,228)", "rgb(254,217,166)"], "6": ["rgb(251,180,174)", "rgb(179,205,227)", "rgb(204,235,197)", "rgb(222,203,228)", "rgb(254,217,166)", "rgb(255,255,204)"], "7": ["rgb(251,180,174)", "rgb(179,205,227)", "rgb(204,235,197)", "rgb(222,203,228)", "rgb(254,217,166)", "rgb(255,255,204)", "rgb(229,216,189)"], "8": ["rgb(251,180,174)", "rgb(179,205,227)", "rgb(204,235,197)", "rgb(222,203,228)", "rgb(254,217,166)", "rgb(255,255,204)", "rgb(229,216,189)", "rgb(253,218,236)"], "9": ["rgb(251,180,174)", "rgb(179,205,227)", "rgb(204,235,197)", "rgb(222,203,228)", "rgb(254,217,166)", "rgb(255,255,204)", "rgb(229,216,189)", "rgb(253,218,236)", "rgb(242,242,242)"], "type": "qual" },

    "YlOrRd": { "3": ["rgb(255,237,160)", "rgb(254,178,76)", "rgb(240,59,32)"], "4": ["rgb(255,255,178)", "rgb(254,204,92)", "rgb(253,141,60)", "rgb(227,26,28)"], "5": ["rgb(255,255,178)", "rgb(254,204,92)", "rgb(253,141,60)", "rgb(240,59,32)", "rgb(189,0,38)"], "6": ["rgb(255,255,178)", "rgb(254,217,118)", "rgb(254,178,76)", "rgb(253,141,60)", "rgb(240,59,32)", "rgb(189,0,38)"], "7": ["rgb(255,255,178)", "rgb(254,217,118)", "rgb(254,178,76)", "rgb(253,141,60)", "rgb(252,78,42)", "rgb(227,26,28)", "rgb(177,0,38)"], "8": ["rgb(255,255,204)", "rgb(255,237,160)", "rgb(254,217,118)", "rgb(254,178,76)", "rgb(253,141,60)", "rgb(252,78,42)", "rgb(227,26,28)", "rgb(177,0,38)"], "type": "seq" },
    "YlGnBu": { "3": ["rgb(237,248,177)", "rgb(127,205,187)", "rgb(44,127,184)"], "4": ["rgb(255,255,204)", "rgb(161,218,180)", "rgb(65,182,196)", "rgb(34,94,168)"], "5": ["rgb(255,255,204)", "rgb(161,218,180)", "rgb(65,182,196)", "rgb(44,127,184)", "rgb(37,52,148)"], "6": ["rgb(255,255,204)", "rgb(199,233,180)", "rgb(127,205,187)", "rgb(65,182,196)", "rgb(44,127,184)", "rgb(37,52,148)"], "7": ["rgb(255,255,204)", "rgb(199,233,180)", "rgb(127,205,187)", "rgb(65,182,196)", "rgb(29,145,192)", "rgb(34,94,168)", "rgb(12,44,132)"], "8": ["rgb(255,255,217)", "rgb(237,248,177)", "rgb(199,233,180)", "rgb(127,205,187)", "rgb(65,182,196)", "rgb(29,145,192)", "rgb(34,94,168)", "rgb(12,44,132)"], "9": ["rgb(255,255,217)", "rgb(237,248,177)", "rgb(199,233,180)", "rgb(127,205,187)", "rgb(65,182,196)", "rgb(29,145,192)", "rgb(34,94,168)", "rgb(37,52,148)", "rgb(8,29,88)"], "type": "seq" },
    "PuBu": { "3": ["rgb(236,231,242)", "rgb(166,189,219)", "rgb(43,140,190)"], "4": ["rgb(241,238,246)", "rgb(189,201,225)", "rgb(116,169,207)", "rgb(5,112,176)"], "5": ["rgb(241,238,246)", "rgb(189,201,225)", "rgb(116,169,207)", "rgb(43,140,190)", "rgb(4,90,141)"], "6": ["rgb(241,238,246)", "rgb(208,209,230)", "rgb(166,189,219)", "rgb(116,169,207)", "rgb(43,140,190)", "rgb(4,90,141)"], "7": ["rgb(241,238,246)", "rgb(208,209,230)", "rgb(166,189,219)", "rgb(116,169,207)", "rgb(54,144,192)", "rgb(5,112,176)", "rgb(3,78,123)"], "8": ["rgb(255,247,251)", "rgb(236,231,242)", "rgb(208,209,230)", "rgb(166,189,219)", "rgb(116,169,207)", "rgb(54,144,192)", "rgb(5,112,176)", "rgb(3,78,123)"], "9": ["rgb(255,247,251)", "rgb(236,231,242)", "rgb(208,209,230)", "rgb(166,189,219)", "rgb(116,169,207)", "rgb(54,144,192)", "rgb(5,112,176)", "rgb(4,90,141)", "rgb(2,56,88)"], "type": "seq" },
    "BuPu": { "3": ["rgb(224,236,244)", "rgb(158,188,218)", "rgb(136,86,167)"], "4": ["rgb(237,248,251)", "rgb(179,205,227)", "rgb(140,150,198)", "rgb(136,65,157)"], "5": ["rgb(237,248,251)", "rgb(179,205,227)", "rgb(140,150,198)", "rgb(136,86,167)", "rgb(129,15,124)"], "6": ["rgb(237,248,251)", "rgb(191,211,230)", "rgb(158,188,218)", "rgb(140,150,198)", "rgb(136,86,167)", "rgb(129,15,124)"], "7": ["rgb(237,248,251)", "rgb(191,211,230)", "rgb(158,188,218)", "rgb(140,150,198)", "rgb(140,107,177)", "rgb(136,65,157)", "rgb(110,1,107)"], "8": ["rgb(247,252,253)", "rgb(224,236,244)", "rgb(191,211,230)", "rgb(158,188,218)", "rgb(140,150,198)", "rgb(140,107,177)", "rgb(136,65,157)", "rgb(110,1,107)"], "9": ["rgb(247,252,253)", "rgb(224,236,244)", "rgb(191,211,230)", "rgb(158,188,218)", "rgb(140,150,198)", "rgb(140,107,177)", "rgb(136,65,157)", "rgb(129,15,124)", "rgb(77,0,75)"], "type": "seq" },
    "PuRd": { "3": ["rgb(231,225,239)", "rgb(201,148,199)", "rgb(221,28,119)"], "4": ["rgb(241,238,246)", "rgb(215,181,216)", "rgb(223,101,176)", "rgb(206,18,86)"], "5": ["rgb(241,238,246)", "rgb(215,181,216)", "rgb(223,101,176)", "rgb(221,28,119)", "rgb(152,0,67)"], "6": ["rgb(241,238,246)", "rgb(212,185,218)", "rgb(201,148,199)", "rgb(223,101,176)", "rgb(221,28,119)", "rgb(152,0,67)"], "7": ["rgb(241,238,246)", "rgb(212,185,218)", "rgb(201,148,199)", "rgb(223,101,176)", "rgb(231,41,138)", "rgb(206,18,86)", "rgb(145,0,63)"], "8": ["rgb(247,244,249)", "rgb(231,225,239)", "rgb(212,185,218)", "rgb(201,148,199)", "rgb(223,101,176)", "rgb(231,41,138)", "rgb(206,18,86)", "rgb(145,0,63)"], "9": ["rgb(247,244,249)", "rgb(231,225,239)", "rgb(212,185,218)", "rgb(201,148,199)", "rgb(223,101,176)", "rgb(231,41,138)", "rgb(206,18,86)", "rgb(152,0,67)", "rgb(103,0,31)"], "type": "seq" },
    "RdPu": { "3": ["rgb(253,224,221)", "rgb(250,159,181)", "rgb(197,27,138)"], "4": ["rgb(254,235,226)", "rgb(251,180,185)", "rgb(247,104,161)", "rgb(174,1,126)"], "5": ["rgb(254,235,226)", "rgb(251,180,185)", "rgb(247,104,161)", "rgb(197,27,138)", "rgb(122,1,119)"], "6": ["rgb(254,235,226)", "rgb(252,197,192)", "rgb(250,159,181)", "rgb(247,104,161)", "rgb(197,27,138)", "rgb(122,1,119)"], "7": ["rgb(254,235,226)", "rgb(252,197,192)", "rgb(250,159,181)", "rgb(247,104,161)", "rgb(221,52,151)", "rgb(174,1,126)", "rgb(122,1,119)"], "8": ["rgb(255,247,243)", "rgb(253,224,221)", "rgb(252,197,192)", "rgb(250,159,181)", "rgb(247,104,161)", "rgb(221,52,151)", "rgb(174,1,126)", "rgb(122,1,119)"], "9": ["rgb(255,247,243)", "rgb(253,224,221)", "rgb(252,197,192)", "rgb(250,159,181)", "rgb(247,104,161)", "rgb(221,52,151)", "rgb(174,1,126)", "rgb(122,1,119)", "rgb(73,0,106)"], "type": "seq" },

    "Greys": { "3": ["rgb(240,240,240)", "rgb(189,189,189)", "rgb(99,99,99)"], "4": ["rgb(247,247,247)", "rgb(204,204,204)", "rgb(150,150,150)", "rgb(82,82,82)"], "5": ["rgb(247,247,247)", "rgb(204,204,204)", "rgb(150,150,150)", "rgb(99,99,99)", "rgb(37,37,37)"], "6": ["rgb(247,247,247)", "rgb(217,217,217)", "rgb(189,189,189)", "rgb(150,150,150)", "rgb(99,99,99)", "rgb(37,37,37)"], "7": ["rgb(247,247,247)", "rgb(217,217,217)", "rgb(189,189,189)", "rgb(150,150,150)", "rgb(115,115,115)", "rgb(82,82,82)", "rgb(37,37,37)"], "8": ["rgb(255,255,255)", "rgb(240,240,240)", "rgb(217,217,217)", "rgb(189,189,189)", "rgb(150,150,150)", "rgb(115,115,115)", "rgb(82,82,82)", "rgb(37,37,37)"], "9": ["rgb(255,255,255)", "rgb(240,240,240)", "rgb(217,217,217)", "rgb(189,189,189)", "rgb(150,150,150)", "rgb(115,115,115)", "rgb(82,82,82)", "rgb(37,37,37)", "rgb(0,0,0)"], "type": "seq" }
};

exports.default = colorbrewer;

/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.field = field;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _hexScatter = __webpack_require__(4);

var _hexScatter2 = _interopRequireDefault(_hexScatter);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

var _fieldUtils = __webpack_require__(5);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.de_stijl,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true,
    colorMode: 'auto', // from COLORMODES or 'auto'
    fieldMode: 'auto', // [auto, harmonic, flow]
    lightMode: 'normal', // [auto, bloom, normal]
    gridMode: 'auto', // [auto, normal, scatter, random]
    density: 'auto', // [auto, coarse, fine]
    fieldNoise: 'auto' // mapped to values below
};

var PI = Math.PI;
var FIELDMODES = ['harmonic', 'flow'];
var LIGHTMODES = ['bloom', 'normal'];
var GRIDMODES = ['normal', 'scatter', 'random'];
var DENSITIES = ['coarse', 'fine'];
var COLORMODES = ['single', 'angle', 'random'];

// Main function
function field(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);
    var LONG = Math.max(cw, ch);
    var SHORT = Math.min(cw, ch);
    var AREA = cw * ch;

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // modes and styles
    var LIGHTMODE = opts.lightMode === 'auto' ? (0, _utils.randItem)(LIGHTMODES) : opts.lightMode;
    var GRIDMODE = opts.gridMode === 'auto' ? (0, _utils.randItem)(GRIDMODES) : opts.gridMode;
    var DENSITY = opts.density === 'auto' ? (0, _utils.randItem)(DENSITIES) : opts.density;
    var FIELDMODE = opts.fieldMode === 'auto' ? (0, _utils.randItem)(FIELDMODES) : opts.fieldMode;
    var COLORMODE = opts.colorMode === 'auto' ? (0, _utils.randItem)(COLORMODES) : opts.colorMode;
    var FIELDNOISE = (0, _utils.mapKeywordToVal)({
        // hacky way to weight options by redundantly specifying
        'none': 0,
        'none2': 0,
        'low': 0.125,
        'low2': 0.125,
        'med': 0.25,
        'high': 0.5
    })(opts.fieldNoise, 'fieldNoise');

    // color funcs
    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // how many cells are in the grid?
    var countMin = void 0,
        countMax = void 0;
    if (DENSITY === 'coarse') {
        countMin = 10;
        countMax = 30;
    } else {
        countMin = 60;
        countMax = 100;
    }

    var cellSize = Math.round(SHORT / (0, _utils.randomInRange)(countMin, countMax));
    console.log('Field: ' + DENSITY + '(' + cellSize + 'px) ' + GRIDMODE + ' ' + FIELDMODE + ' ' + COLORMODE);

    // setup vars for each cell
    var x = 0;
    var y = 0;
    var xnorm = 0;
    var ynorm = 0;
    var renderer = void 0;

    // shared colors
    var bg = getSolidFill();

    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);

    // shared foregrounds
    var fg = getContrastColor();
    var fg2 = getContrastColor();

    // in bloom mode, we draw high-contrast grayscale, and layer
    // palette colors on top
    if (LIGHTMODE === 'bloom') {
        bg = '#222222';
        fg = fg2 = '#cccccc';
    }

    // draw background
    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, cw, ch);

    // set default tail color
    ctx.strokeStyle = fg;
    // set default dot color
    var dotFill = fg2;

    var rateMax = 3;
    if (DENSITY === 'fine' && Math.random() < 0.5) {
        rateMax = 6;
    }

    // tail vars
    var _x = void 0,
        _y = void 0,
        len = void 0;

    // dotScale will be multiplied by 2. Keep below .25 to avoid bleed.
    // Up to 0.5 will lead to full coverage.
    var dotScale = cellSize * (0, _utils.randomInRange)(0.1, 0.25);
    // line width
    var weight = (0, _utils.randomInRange)(0.5, 3) * SCALE / 800;

    ctx.lineWidth = weight;
    ctx.lineCap = 'round';

    // const used in normalizing transforms
    var maxLen = 2 * Math.sqrt(2);

    // It looks nice to extend lines beyond their cells. how much?
    // Scaled against cellSize
    var lineScale = (0, _utils.randomInRange)(0.7, 2);

    // Displace the center point of each cell by this factor
    // Only do this sometimes, and not when scattering
    var warp = 0;
    if (GRIDMODE !== 'scatter' && Math.random() < 0.5) {
        warp = (0, _utils.randomInRange)(0.75, Math.sqrt(2));
    }

    // Pick an opacity transform to use
    var opacityFunc = (0, _utils.randItem)((0, _fieldUtils.opacityTransforms)(maxLen));

    // a set of independent transforms to use while rendering
    var trans = {
        xbase: (0, _fieldUtils.createTransform)(rateMax), // (x,y)=>0,//
        ybase: (0, _fieldUtils.createTransform)(rateMax), // (x,y)=>0,//
        xtail: (0, _fieldUtils.createTransform)(rateMax), // (x,y)=>0,//
        ytail: (0, _fieldUtils.createTransform)(rateMax), // (x,y)=>0,//
        radius: (0, _fieldUtils.createTransform)(rateMax)
    };

    function randomScatter(size, w, h) {
        var pts = [];
        var xcount = Math.ceil(w / size);
        var ycount = Math.ceil(h / size);
        var count = xcount * ycount;
        while (count--) {
            pts.push([(0, _utils.randomInRange)(0, w), (0, _utils.randomInRange)(0, h)]);
        }
        return pts;
    }

    function placeNormal(size, w, h) {
        var pts = [];
        var xcount = Math.ceil(w / size) + 2;
        var ycount = Math.ceil(h / size) + 2;
        var count = xcount * ycount;
        var x = void 0,
            y = void 0;
        for (var i = 0; i < count; i++) {
            x = size * (i % xcount - 1) + size / 2;
            y = size * (Math.floor(i / xcount) - 1) + size / 2;
            pts.push([x, y]);
        }
        return pts;
    }

    var pts = [];

    // If we are warping the grid, we should plot points outside of the canvas
    // bounds to avoid gaps at the edges. Shift them over below.
    var overscan = 1;
    if (warp) {
        overscan = 1.2;
    }

    switch (GRIDMODE) {
        case 'scatter':
            pts = (0, _hexScatter2.default)(cellSize, cw * overscan, ch * overscan);
            break;
        case 'random':
            pts = randomScatter(cellSize, cw * overscan, ch * overscan);
            break;
        default:
            pts = placeNormal(cellSize, cw * overscan, ch * overscan);
    }

    // compensate for overscan by shifting pts back
    if (warp) {
        pts.map(function (p, i) {
            return [p[0] - cw * .1, p[1] - ch * .1];
        });
    }

    var sourceTransform = (0, _fieldUtils.createSourceSinkTransform)(Math.round((0, _utils.randomInRange)(5, 15)));

    // Flags for coloring by angle
    // Don't do special coloring in bloom mode, because it relies on grayscale
    // initial rendering
    var colorTailByAngle = false;
    var colorDotByAngle = false;
    var randomColorThreshold = void 0;
    if (LIGHTMODE !== 'bloom') {
        if (COLORMODE === 'angle') {
            if (Math.random() < 0.6) {
                colorTailByAngle = true;
            }
            if (Math.random() < 0.6) {
                colorDotByAngle = true;
            }
        }
        if (COLORMODE === 'random') {
            randomColorThreshold = 0.66;
        }
    }

    // console.log(`Colors: tails ${colorTailByAngle}, dots: ${colorDotByAngle}`);

    // source/sink stuff
    if (FIELDMODE === 'flow') {
        var totalStrength = 0;
        sourceTransform.sources.forEach(function (source) {
            totalStrength += source.strength;
        });
        lineScale = 1 / totalStrength;
    }

    // step thru points
    pts.forEach(function (p, i) {
        x = p[0];
        y = p[1];
        xnorm = x / cw;
        ynorm = y / ch;

        // shift base points to their warped coordinates
        x = x + cellSize * trans.xbase(xnorm, ynorm) * warp;
        y = y + cellSize * trans.ybase(xnorm, ynorm) * warp;

        var xNoise = 0;
        var yNoise = 0;
        if (FIELDNOISE > 0) {
            xNoise = (0, _utils.randomInRange)(-1, 1) * FIELDNOISE;
            yNoise = (0, _utils.randomInRange)(-1, 1) * FIELDNOISE;
        }

        // get end of tail coords
        if (FIELDMODE === 'flow') {
            // flow fields (source-sink)
            var flow = sourceTransform.t(xnorm, ynorm);
            _x = flow[0];
            _y = flow[1];
        } else {
            // harmonic fields
            _x = trans.xtail(xnorm, ynorm);
            _y = trans.ytail(xnorm, ynorm);
        }

        _x += xNoise;
        _y += yNoise;

        var theta = Math.atan2(_y, _x);
        var fillIndex = Math.round(contrastPalette.length * theta / PI / 2);
        var angleColor = contrastPalette[fillIndex];

        if (colorDotByAngle) {
            dotFill = angleColor;
        }
        if (COLORMODE === 'random' && Math.random() < randomColorThreshold) {
            dotFill = getContrastColor();
        }

        // draw dot
        ctx.globalAlpha = 1;
        (0, _shapes.drawCircle)(ctx, x, y, (trans.radius(xnorm, ynorm) + 1) * dotScale, { fill: dotFill });

        ctx.globalAlpha = opacityFunc(_x, _y);

        if (colorTailByAngle) {
            ctx.strokeStyle = angleColor;
        }
        if (COLORMODE === 'random' && Math.random() < randomColorThreshold) {
            ctx.strokeStyle = getContrastColor();
        }

        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x + cellSize * _x * lineScale, y + cellSize * _y * lineScale);
        ctx.stroke();
    });

    ctx.globalAlpha = 1;

    // in bloom mode, we draw a big colorful gradient over the grayscale
    // background, using palette colors and nice blend modes
    if (LIGHTMODE === 'bloom') {
        ctx.globalCompositeOperation = 'color-dodge';

        // bloom with linear gradient
        ctx.fillStyle = (0, _utils.getGradientFunction)(opts.palette)(ctx, cw, ch); //getContrastColor();
        ctx.fillRect(0, 0, cw, ch);

        if (Math.random() < 0.5) {
            // bloom with spot lights
            var dodgeDot = function dodgeDot() {
                var max = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1.5;

                var gx = void 0,
                    gy = void 0,
                    gr1 = void 0,
                    gr2 = void 0;
                gx = (0, _utils.randomInRange)(0, cw);
                gy = (0, _utils.randomInRange)(0, ch);
                gr1 = (0, _utils.randomInRange)(0, 0.25);
                gr2 = (0, _utils.randomInRange)(gr1, max);

                var radial = ctx.createRadialGradient(gx, gy, gr1 * SCALE, gx, gy, gr2 * SCALE);
                radial.addColorStop(0, (0, _utils.randItem)(opts.palette));
                radial.addColorStop(1, '#000000');

                ctx.fillStyle = radial;
                ctx.fillRect(0, 0, cw, ch);
            };
            // try layering dots with varying coverage
            ctx.globalAlpha = (0, _utils.randomInRange)(0.4, 0.7);
            dodgeDot(1.5);
            ctx.globalAlpha = (0, _utils.randomInRange)(0.4, 0.7);
            dodgeDot(1.0);
            ctx.globalAlpha = (0, _utils.randomInRange)(0.7, 0.9);
            dodgeDot(0.5);
            ctx.globalAlpha = 1;
        }

        ctx.globalCompositeOperation = 'normal';
    }

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            // apply noise from supplied canvas
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            // create noise pattern and apply
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, cw / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

exports.defineWaterline = defineWaterline;
exports.drawWaterline = drawWaterline;
exports.waterline = waterline;

var _waterlineSchema = __webpack_require__(12);

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _colors = __webpack_require__(6);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

/**
 * Define a fill, either in solid or gradients
 * @param  {context} ctx  the canvas rendering context
 * @param {array} palette an array of color values
 * @param  {num} x    center x of shape
 * @param  {num} y    center y of shape
 * @param  {num} size       half the size of the shape (r for circle)
 * @param  {num} skew       scalar to offset endpoints left/right for angled gradient
 * @return {fillStyle}      a solid color or canvas gradient
 */
function getRandomFill(palette, x, y, size) {
    var skew = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;

    var type = 'solid';
    if (Math.random() < 0.999999) {
        type = 'linear';
    }
    return (0, _colors.defineFill)(type, palette, x, y, size, skew);
}

function drawWave(ctx, y1, c1, c2, y2, w, h, opts) {
    ctx.save();
    if (opts.fill) {
        ctx.fillStyle = opts.fill;
    }
    ctx.beginPath();
    ctx.moveTo(0, y1);
    ctx.bezierCurveTo(w / 3, c1, 2 * w / 3, c2, w, y2);
    ctx.lineTo(w, h);
    ctx.lineTo(0, h);
    ctx.closePath();

    ctx.fill();
    ctx.restore();
}

function drawSunbeams(ctx, x, y, w, h, fill) {
    var triCount;
    var x2;
    var y2;
    var tw;
    var tx;
    var grad;
    ctx.globalCompositeOperation = 'soft-light';

    if (Math.random() > 0.15) {
        // Most of the time, render many beams at low opacity
        triCount = Math.round((0, _utils.randomInRange)(40, 60));
        ctx.globalAlpha = (0, _utils.randomInRange)(0.1, 0.3);
    } else {
        // … sometimes, render a few beams at more varying opacities
        triCount = Math.round((0, _utils.randomInRange)(5, 10));
        ctx.globalAlpha = (0, _utils.randomInRange)(0.2, 0.8);
    }

    while (triCount--) {
        // Set triangle width, and target x centerpoint.
        // Target x can be on or off page, with width spread bringing part
        // of the beam into the image
        tw = (0, _utils.randomInRange)(w / 30, w / 3); // width range
        tx = (0, _utils.randomInRange)(-w / 3, 4 * w / 3); // target (bottom) x
        ctx.fillStyle = fill || '#fff';
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(tx + tw / 2, h);
        ctx.lineTo(tx - tw / 2, h);
        ctx.closePath();
        ctx.fill();
    }
}

function addShadow(ctx, w, h) {
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 3 * Math.min(w, h) / 400;
    ctx.shadowBlur = 10 * Math.min(w, h) / 400;
    ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
}

function removeShadow(ctx) {
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.shadowBlur = 0;
    ctx.shadowColor = 'transparent';
}

// Draw a waterline shape, clip to it, execute renderFunc,
// then restore canvas to remove clipping
function clipInWaterline(ctx, y1, c1, c2, y2, w, h, renderFunc) {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(0, y1 * h);
    ctx.bezierCurveTo(w / 3, c1 * h, 2 * w / 3, c2 * h, w, y2 * h);
    ctx.lineTo(w, h);
    ctx.lineTo(0, h);
    ctx.clip();

    renderFunc(ctx, w, h, y1, y2);

    ctx.closePath();
    ctx.restore();
}

// Map shape names to drawing functions
var renderMap = {
    circle: _shapes.drawCircle,
    ring: _shapes.drawRing,
    triangle: _shapes.drawTriangle,
    square: _shapes.drawSquare,
    box: _shapes.drawBox,
    rect: _shapes.drawRect,
    pentagon: _shapes.drawPentagon,
    hexagon: _shapes.drawHexagon
};

var DEFAULT_OPTIONS = {
    container: 'body',
    palette: _palettes2.default.candywafer,
    drawShadows: true,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true
};

// For dev use:
// A descriptor of what we think a complete schema should look like.
// Compare structure with the def object produced by defineWaterline().


// Dev util: check a waterline def against the schema, and list any keys
// not yet represented.  This doesn't check for correctness!!!
var checkDef = function checkDef(def, schema) {
    var defKeys = Object.keys(def);
    var schemaKeys = Object.keys(schema);
    var missingKeys = [];
    schemaKeys.map(function (k) {
        if (!defKeys.includes(k)) missingKeys.push(k);
    });
    return missingKeys;
};

// Create a waterline definition from a set of input @options.
// Eventually, this should be a JSON object that fully describes
// a graphic's appearance, with some secondary randomness.
function defineWaterline(options) {
    var opts = Object.assign({}, DEFAULT_OPTIONS, options);
    var shapes = Object.keys(renderMap);
    // shuffle shape list and pick a shape
    shapes.sort(function (a, b) {
        return (0, _utils.randomInRange)(-1, 1);
    });

    // Set up container values that determine sizes and coordinates
    var container = opts.container;
    var w = container.offsetWidth;
    var h = container.offsetHeight;
    var SCALE = Math.min(w, h); // generalized size of the layout

    // temp vars which are used in multiple attributes
    var _shapeSize = (0, _utils.randomInRange)(0.25, 0.4);
    var _shapeX = 1 / 2;
    var _shapeY = (0, _utils.randomInRange)(0.4, 0.6);

    // waves
    var _backLine = [(0, _utils.randomInRange)(0.49, 0.51), (0, _utils.randomInRange)(0.48, 0.52), (0, _utils.randomInRange)(0.48, 0.52), (0, _utils.randomInRange)(0.49, 0.51)];
    var _backTop = Math.min(_backLine[0], _backLine[3]);
    var _frontLine = [(0, _utils.randomInRange)(0.47, 0.52), (0, _utils.randomInRange)(0.45, 0.55), (0, _utils.randomInRange)(0.45, 0.55), (0, _utils.randomInRange)(0.47, 0.52)];
    var _frontTop = Math.min(_frontLine[0], _frontLine[3]);

    // skeleton of a waterline def
    var def = {
        shapeName: shapes[0],
        shapeX: _shapeX,
        shapeY: _shapeY,
        shapeSize: _shapeSize,
        shapeMagnified: _shapeSize * (1 + 1 / (0, _utils.randomInRange)(50, 80)),
        // Rotate shape. Not all renderers will use this.
        shapeAngle: (0, _utils.randomInRange)(-Math.PI / 12, Math.PI / 12),
        shapeFill: getRandomFill(opts.palette, _shapeX, _shapeY, _shapeSize, opts.skew),
        underwaterShapeAlpha: (0, _utils.randomInRange)(0.2, 1),

        // sky fill
        backgroundFill: getRandomFill(opts.palette, 0.5, 0.5, 0.5, opts.skew),

        // waves
        surfaceLine: {
            fill: getRandomFill(opts.palette, 0, _backTop, 1 - _backTop, 0),
            backAlpha: (0, _utils.randomInRange)(0.2, 0.6),
            backOffset: 1 / (0, _utils.randomInRange)(40, 100), // offset between the two waterline waves
            backLine: _backLine,
            frontLine: _frontLine
        },

        // edge
        edgeThickness: 0.005 * Math.random(),
        edgeAlpha: (0, _utils.randomInRange)(0.1, 0.75),
        edgeBlendStops: [(0, _utils.randomInRange)(0, 0.5), (0, _utils.randomInRange)(0.5, 1)]

        // debug: show defs and missing properties
        // console.log('def', def);
        // console.log('missing:', checkDef(def, SCHEMA));

    };window.LASTDEF = def; // debug allow re-run

    return def;
}

// Draw a waterline, given a @def and rendering @options.
// Eventually, @options should contain only the target element, height, and
// width, while @def determines what is drawn in that space
function drawWaterline(def, options) {
    var opts = Object.assign({}, DEFAULT_OPTIONS, options);

    var container = options.container;

    var w = container.offsetWidth;
    var h = container.offsetHeight;
    var SCALE = Math.min(w, h);

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = w;
        el.height = h;
    }

    var ctx; // canvas ctx or svg tag

    ctx = el.getContext('2d');

    // optional clear
    if (opts.clear) {
        el.width = container.offsetWidth;
        el.height = container.offsetHeight;
        ctx.clearRect(0, 0, w, h);
    }

    // BEGIN RENDERING

    if (opts.drawShadows) {
        addShadow(ctx, w, h);
    }

    // draw background/sky
    ctx.fillStyle = (0, _colors.expandFill)(ctx, def.backgroundFill, w, h, SCALE);
    ctx.fillRect(0, 0, w, h);

    var renderer = renderMap[def.shapeName];

    // pick centerpoint for shape

    // since these may get modified, make local copies
    var shapeSize = def.shapeSize;
    var shapeMagnified = def.shapeMagnified;
    if (def.shapeName === 'rect') {
        // bump up size of rectangles
        shapeSize *= 1.2;
        shapeMagnified *= 1.2;
    }

    // Create a fill we will reuse for both renderings of the shape
    var shapeFill = (0, _colors.expandFill)(ctx, def.shapeFill, w, h, SCALE);

    // Prepare main waterlines

    // Set waterline params for background renderin, and common fill
    var wfill = (0, _colors.expandFill)(ctx, def.surfaceLine.fill, w, h, SCALE); // main waterline fill

    // Draw background waterline at low opacity, slightly offset upward
    ctx.globalAlpha = def.surfaceLine.backAlpha;

    var backgroundOffset = def.surfaceLine.backOffset * h;
    drawWave(ctx, h * def.surfaceLine.backLine[0] - backgroundOffset, h * def.surfaceLine.backLine[1] - backgroundOffset, h * def.surfaceLine.backLine[2] - backgroundOffset, h * def.surfaceLine.backLine[3] - backgroundOffset, w, h, Object.assign({ fill: wfill }, opts));
    ctx.globalAlpha = 1;

    // Draw the shape above waterline
    renderer(ctx, def.shapeX * w, def.shapeY * h, shapeSize * SCALE, {
        fill: shapeFill,
        angle: def.shapeAngle
    });

    // Draw main foreground waterline. We will reuse these params
    // for clipping the underwater elements
    drawWave(ctx, h * def.surfaceLine.frontLine[0], h * def.surfaceLine.frontLine[1], h * def.surfaceLine.frontLine[2], h * def.surfaceLine.frontLine[3], w, h, Object.assign({
        fill: wfill
    }, opts));

    // rendering to be done within the waterline clipping
    function underwater(ctx, w, h, y1, y2) {
        var hz = Math.min(y1, y2);
        removeShadow(ctx);

        // Get a color sample from the underwater background block.
        // This will be used in the wavy overlays. We get it from
        // just below the horizon line in the middle, before we render
        // the underwater half of the main shape.
        var colorSample = ctx.getImageData(w / 2, Math.floor((h - hz) / 2), 1, 1);
        var colorData = colorSample.data;
        var waterLevel = hz;
        var waterColor = colorData[0] + ', ' + colorData[1] + ', ' + colorData[2];
        var waterFill;

        // Draw light beams with the same fill as the water
        // (will render in a different blending mode)
        // The beams start anywhere across width, and somewhere above
        // the top of the image (hence negative y vals)
        drawSunbeams(ctx, (0, _utils.randomInRange)(0, w), (0, _utils.randomInRange)(-2 * h, hz / 2), w, h, wfill);

        // Draw the underwater half of the main shape, a little bigger
        // for the liquid magnification effect. Fade it out to get different
        // apparent depth and clarity in liquid.
        ctx.globalCompositeOperation = 'normal';
        ctx.globalAlpha = def.underwaterShapeAlpha;
        addShadow(ctx, w, h);
        renderer(ctx, def.shapeX * w, def.shapeY * h, shapeMagnified * SCALE, {
            fill: shapeFill,
            angle: def.shapeAngle
        });

        // Function to batch create sets of wavy lines under the water
        function drawWaveSet(composite, ymin, ymax, amin, amax) {
            ctx.globalCompositeOperation = composite || 'normal';
            ymin = ymin || 0;
            ymax = ymax || h;
            amin = amin || 0.2;
            amax = amax || 0.8;

            var waterCount = Math.round((0, _utils.randomInRange)(3, 7));
            var increment = (ymax - ymin) / waterCount;

            while (waterCount--) {
                ctx.globalAlpha = (0, _utils.randomInRange)(amin, amax);
                waterLevel = ymin + waterCount * increment;

                waterFill = ctx.createLinearGradient((0, _utils.randomInRange)(w / 3, 2 * w / 3), (0, _utils.randomInRange)(hz, waterLevel), w / 2, (0, _utils.randomInRange)(waterLevel, h));
                waterFill.addColorStop(0, 'rgba(' + waterColor + ', 1)');
                waterFill.addColorStop(1, 'rgba(' + waterColor + ', 0)');

                drawWave(ctx, waterLevel * (0, _utils.randomInRange)(0.9, 1.1), waterLevel * (0, _utils.randomInRange)(0.9, 1.1), waterLevel * (0, _utils.randomInRange)(0.9, 1.1), waterLevel * (0, _utils.randomInRange)(0.9, 1.1), w, h, {
                    fill: waterFill
                });
            }
        }

        // The waves look bad when they cast shadows
        removeShadow(ctx);

        // Draw light blended waves near the surface
        drawWaveSet('soft-light', hz, hz + (h - hz) / 3, 0.2, 0.8);

        // Draw dark blended waves near the bottom
        drawWaveSet('multiply', hz + (h - hz) / 2, h, 0.1, 0.3);

        // At the top edge, use the main waterline points, then repeat the
        // curve going back to the left, slightly lower.  Fill with a light
        // gradient and blend over.
        var edgeThickness = def.edgeThickness * h + 1.5;
        var edgeFill = ctx.createLinearGradient(0, 0, w, 0);
        edgeFill.addColorStop(0, '#808080');
        edgeFill.addColorStop(def.edgeBlendStops[0], '#fff');
        edgeFill.addColorStop(def.edgeBlendStops[1], '#fff');
        edgeFill.addColorStop(1, '#808080');

        ctx.fillStyle = edgeFill;
        ctx.globalCompositeOperation = 'overlay';
        ctx.globalAlpha = def.edgeAlpha;

        var _def$surfaceLine$fron = _slicedToArray(def.surfaceLine.frontLine, 4),
            wl = _def$surfaceLine$fron[0],
            wc1 = _def$surfaceLine$fron[1],
            wc2 = _def$surfaceLine$fron[2],
            wr = _def$surfaceLine$fron[3];

        ctx.beginPath();
        ctx.moveTo(0, wl * h);
        ctx.bezierCurveTo(w / 3, h * wc1 - 1, 2 * w / 3, h * wc2 - 1, w, h * wr);
        ctx.bezierCurveTo(2 * w / 3, h * wc2 + edgeThickness, w / 3, h * wc1 + edgeThickness, 0, h * wl + 2);
        ctx.closePath();
        ctx.fill();

        if (opts.dust) {
            var spotCount = Math.floor((0, _utils.randomInRange)(200, 1000));
            ctx.globalCompositeOperation = 'soft-light';
            while (--spotCount) {
                ctx.globalAlpha = (0, _utils.randomInRange)(0, 0.5);
                (0, _shapes.drawCircle)(ctx, (0, _utils.randomInRange)(0, w), (0, _utils.randomInRange)(hz, h), (0, _utils.randomInRange)(0.5, 1.5) * w / 800, { fill: '#fff' });
            }
        }
    }

    // Now render the above function inside the waterline clipping area
    clipInWaterline.apply(undefined, [ctx].concat(_toConsumableArray(def.surfaceLine.frontLine), [w, h, underwater]));

    ctx.globalAlpha = 1;
    ctx.globalCompositeOperation = 'normal';

    // Add effect elements
    // ...

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, w / 3);
        }
    }

    // END RENDERING

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

// This wrapper function replaces the old single-function rendering pipeline,
// where you input rendering @options and get a surprise graphic.
function waterline(options) {
    drawWaterline(defineWaterline(options), options);
}

/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
// Waterline def schema
var SCHEMA = exports.SCHEMA = {
    shapeName: '',
    shapeY: 0,
    shapeSize: 0,
    shapeMagnified: 0,
    shapeAngle: 0,
    shapeFill: {},
    underwaterShapeAlpha: 1,
    backgroundFill: {},

    surfaceLine: {
        fill: {},
        backAlpha: 1,
        backOffset: 0,
        backLine: [0, 0, 0, 0],
        frontLine: [0, 0, 0, 0]
    },
    sunBeams: {
        alpha: 1,
        beams: [0, 0]
    },

    waveSet: [{
        gradient: { start: [0, 0], end: [0, 0] },
        position: [0, 0, 0, 0],
        alpha: 1
    }],

    edgeThickness: 0,
    edgeAlpha: 1,
    edgeBlendStops: [0.25, 0.75], // left half, right half

    spots: [{
        x: 0,
        y: 0,
        r: 1,
        alpha: 1
    }]

};

/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.shapestack = shapestack;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

var _stacks = __webpack_require__(14);

var _nests = __webpack_require__(15);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function addShadow(ctx, w, h) {
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.shadowBlur = 25 * Math.min(w, h) / 800;
    ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
}

function removeShadow(ctx) {
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.shadowBlur = 0;
    ctx.shadowColor = 'transparent';
}

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.plum_sauce,
    drawShadows: false,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    fillStyle: null, // null for auto, ['solid', 'gradient']
    nest: false,
    stack: false,
    fancy: null, // forces auto fanciness
    multiMask: false, // draw multiple masks
    clear: true

    // draw it!
};function shapestack(options) {
    var opts = Object.assign(DEFAULTS, options);

    var container = opts.container;

    var w = container.offsetWidth;
    var h = container.offsetHeight;
    var scale = Math.min(w, h); // reference size, regardless of aspect ratio

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = container.offsetWidth;
        el.height = container.offsetHeight;
    }

    var ctx = el.getContext('2d');

    ctx.save();

    // optional clear
    if (opts.clear) {
        ctx.clearRect(0, 0, w, h);
    }

    // Setup renderers and default palettes
    var renderer;
    var renderMap = {
        circle: _shapes.drawCircle,
        ring: _shapes.drawRing,
        triangle: _shapes.drawTriangle,
        square: _shapes.drawSquare,
        box: _shapes.drawBox,
        rect: _shapes.drawRect,
        pentagon: _shapes.drawPentagon,
        hexagon: _shapes.drawHexagon
    };
    var shapes = Object.keys(renderMap);
    var getRandomRenderer = function getRandomRenderer() {
        return renderMap[(0, _utils.randItem)(shapes)];
    };

    var grays = ['#111111', '#666666', '#808080', '#999999', '#b4b4b4', '#cccccc', '#e7e7e7', '#f9f9f9'];

    // randomize render style if both styles are false (default)
    var willDrawStack = opts.stack;
    var willDrawNest = opts.nest;
    if (!opts.stack && !opts.nest) {
        willDrawStack = Math.random() > 0.5;
        willDrawNest = !willDrawStack;
    }

    var willFillMask = Math.random() > 0.5;

    // rendering styles
    var fancy = opts.fancy;
    var fillStyle = opts.fillStyle;
    var drawShadows = opts.drawShadows;

    // Fancy directive: forces fillStyle and drawShadows options
    // Default behavior is to randomly choose fancy
    if (fancy === null || fancy === undefined) {
        fancy = Math.random() > 0.5;
    }

    if (fancy) {
        drawShadows = true;
        fillStyle = 'gradient';
    }

    // Set up color fill style
    // map of color function generators
    var colorFuncs = {
        'gradient': _utils.getGradientFunction,
        'solid': _utils.getSolidColorFunction
        // if no valid fill style is passed, assign one randomly
    };if (!['gradient', 'solid'].includes(fillStyle)) {
        fillStyle = Math.random() > 0.5 ? 'gradient' : 'solid';
    }
    // generate the fill function based on the palette
    opts.getColor = colorFuncs[fillStyle](opts.palette);

    // BEGIN RENDERING
    // ======================================

    // draw background/sky
    var sky = Math.round((0, _utils.randomInRange)(104, 245)).toString(16);
    ctx.fillStyle = '#' + sky + sky + sky;
    ctx.fillRect(0, 0, w, h);

    // shuffle shape list and pick a shape
    shapes.sort(function (a, b) {
        return (0, _utils.randomInRange)(-1, 1);
    });
    var shape = shapes[0];
    renderer = renderMap[shape];

    // do it again for nestRenderer
    shapes.sort(function (a, b) {
        return (0, _utils.randomInRange)(-1, 1);
    });
    var nestShape = shapes[0];
    var nestRenderer = renderMap[nestShape];

    // pick centerpoint for shape
    var maskX = w / 2;
    var maskY = h * (0, _utils.randomInRange)(0.45, 0.55);
    var maskSize = Math.min(w, h) * (0, _utils.randomInRange)(0.33, 0.45);

    // pick angle for stacks
    // only do it if skew option is truthy,
    // and then only some of the time
    var tilt = 0;
    if (opts.skew && Math.random() > 0.25) {
        tilt = (0, _utils.randomInRange)(0, Math.PI * 2);
    }

    // pick depth of stack
    var stackSize = Math.round((0, _utils.randomInRange)(1, 4));
    var heightA = h * (0, _utils.randomInRange)(0.4, 0.6);
    var heightB = heightA * (0, _utils.randomInRange)(0.95, 1.05);
    // define stacks
    var stackA = (0, _stacks.createStack)(heightA, h, stackSize);
    var stackB = (0, _stacks.createStack)(heightB, h, stackSize);

    // pick nest count, and define nests
    var nestCount = Math.round((0, _utils.randomInRange)(1, 3));
    var nests = [];
    for (var i = 0; i < nestCount; i++) {
        nests.push((0, _nests.defineNest)((0, _nests.generateNestDef)(w, h, scale)));
    }

    // now draw background according to style directives
    // --------------------------------------

    if (willDrawStack) {
        // rotate the canvas before drawing stacks
        (0, _utils.rotateCanvas)(ctx, w, h, tilt);

        // Draw stacks with gray
        (0, _stacks.drawStack)(ctx, stackA, -w / 4, w, null);
        (0, _stacks.drawStack)(ctx, stackB, w / 2, w, null);

        // un-rotate to draw main shape
        (0, _utils.resetTransform)(ctx);
    }

    if (willDrawNest) {
        // draw Nest
        nests.forEach(function (n) {
            (0, _nests.drawNest)(ctx, n, nestRenderer, colorFuncs[fillStyle](grays), {});
        });
    }

    // Draw main shape + mask
    // --------------------------------------

    if (drawShadows) {
        addShadow(ctx, w, h);
    }

    var maskFill = '#ffffff';
    if (willFillMask) {
        maskFill = colorFuncs[fillStyle](['#ffffff'].concat(opts.palette))(ctx, w, h);
    }

    if (opts.multiMask) {
        ctx.beginPath();
        getRandomRenderer()(ctx, w / 4, h / 4, scale * (0, _utils.randomInRange)(0.2, 0.25), { fill: maskFill, continue: true });
        (0, _utils.resetTransform)(ctx);
        getRandomRenderer()(ctx, w / 4 * 3, h / 4, scale * (0, _utils.randomInRange)(0.2, 0.25), { fill: maskFill, continue: true });
        (0, _utils.resetTransform)(ctx);
        getRandomRenderer()(ctx, w / 4, h / 4 * 3, scale * (0, _utils.randomInRange)(0.2, 0.25), { fill: maskFill, continue: true });
        (0, _utils.resetTransform)(ctx);
        getRandomRenderer()(ctx, w / 4 * 3, h / 4 * 3, scale * (0, _utils.randomInRange)(0.2, 0.25), { fill: maskFill, continue: true });
        (0, _utils.resetTransform)(ctx);
        ctx.closePath();
    } else {
        renderer(ctx, maskX, maskY, maskSize, { fill: maskFill });
    }

    // clear shadow
    removeShadow(ctx);

    // clip mask
    ctx.save();
    ctx.clip();

    // Draw color stacks or nests inside the mask

    if (willDrawStack) {
        // rotate the canvas before drawing stacks
        (0, _utils.rotateCanvas)(ctx, w, h, tilt);
        // draw color stacks in mask
        (0, _stacks.drawStack)(ctx, stackA, -w / 4, w, opts.getColor);
        (0, _stacks.drawStack)(ctx, stackB, w / 2, w, opts.getColor);

        // draw vertical pin in solid shapes
        if (['box', 'ring'].indexOf(shape) === -1) {
            var nudge = heightA > heightB ? -0.5 : 0.5;
            ctx.globalAlpha = 0.3;
            ctx.lineWidth = 1;

            ctx.beginPath();
            ctx.moveTo(w / 2 + nudge, 0);
            ctx.lineTo(w / 2 + nudge, h);
            ctx.closePath();
            ctx.strokeStyle = '#000000';
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(w / 2 + nudge, maskY + maskSize);
            ctx.lineTo(w / 2 + nudge, h);
            ctx.closePath();
            ctx.strokeStyle = '#ffffff';
            ctx.stroke();
        }
    }

    if (willDrawNest) {
        // draw color Nest in front of color stack
        nests.forEach(function (n) {
            (0, _nests.drawNest)(ctx, n, nestRenderer, opts.getColor, {});
        });

        // Draw connecting lines.
        // With a single nest, connect nest center to mask center.
        // With multiple nests, connect last nest to previous nest
        var c1 = { x: 0, y: 0 };
        var c2 = { x: 0, y: 0 };
        if (nests.length === 1) {
            c1 = { x: maskX, y: maskY };
            c2 = nests[0][0];
        } else {
            c1 = nests[nests.length - 2][0];
            c2 = nests[nests.length - 1][0];
        }

        // define the line
        var m = (c2.y - c1.y) / (c2.x - c1.x);
        var theta = Math.atan(m);
        if (c2.x > c1.x) {
            theta += Math.PI;
        }
        // extend it. This oughtta be enough.
        var R = w + h;

        ctx.beginPath();
        ctx.moveTo(c2.x, c2.y);
        ctx.lineTo(c2.x + R * Math.cos(theta), c2.y + R * Math.sin(theta));
        ctx.closePath();
        ctx.strokeStyle = 'rgba(0, 0, 0, 0.33)';
        ctx.stroke();
    }

    // unclip
    ctx.restore();

    // reset transform
    (0, _utils.resetTransform)(ctx);

    // add a border if it's an open shape or nest
    if (!drawShadows && (willDrawNest || ['box', 'ring'].indexOf(shape) >= 0)) {
        ctx.globalCompositeOperation = 'multiply';
        renderer(ctx, w / 2, maskY, maskSize, { fill: 'transparent', stroke: '#808080' });
        ctx.globalCompositeOperation = 'normal';
    }

    // Add effect elements
    // ...

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, w / 3);
        }
    }

    // END RENDERING

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.createStack = createStack;
exports.drawStack = drawStack;

var _utils = __webpack_require__(0);

function createStack(start, end) {
    var steps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;

    var step = (end - start) / steps;
    var stack = [];
    var y = start;
    var block = void 0;
    while (steps) {
        block = [y, y + step * (0, _utils.randomInRange)(0.25, 1)];
        y = block[1];
        stack.push(block);
        steps--;
    }
    stack.push([y, end * 1.5]); // tack on an end block to bleed off canvas
    return stack;
}

// stacks look like [[y1, y2], [y1, y2] ...]
// colorFunc is optional; if null it draws increasingly dark gray bands
function drawStack(ctx, stack, x, w, colorFunc) {
    var gray = void 0;
    stack.forEach(function (y, i) {
        if (!colorFunc) {
            gray = (0, _utils.randomInRange)(0.55, 0.85);
            ctx.fillStyle = 'rgba(0, 0, 0,' + (i + 1) * gray / stack.length + ')';
        } else {
            ctx.fillStyle = colorFunc(ctx, w, y[1] - y[0]);
        }

        ctx.beginPath();
        ctx.rect(x, y[0], x + w, y[1] - y[0]);
        ctx.closePath();

        ctx.fill();
    });
}

/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.generateNestDef = generateNestDef;
exports.defineNest = defineNest;
exports.drawNest = drawNest;

var _utils = __webpack_require__(0);

function generateNestDef(w, h, scale) {
    return {
        x: (0, _utils.randomInRange)(w * 0.1, w * 0.9),
        y: (0, _utils.randomInRange)(h * 0.1, h * 0.9),
        maxSize: scale * (0, _utils.randomInRange)(0.6, 1.7),
        minSize: scale * (0, _utils.randomInRange)(0.1, 0.6),
        steps: Math.floor((0, _utils.randomInRange)(3, 7)),
        angle: (0, _utils.randomInRange)(0, Math.PI / 4)
    };
}

var nestDefaults = {
    x: 0,
    y: 0,
    minSize: 200,
    maxSize: 400,
    steps: 4,
    jitter: 0.1,
    angle: 0
};

function defineNest(o) {
    o = Object.assign(nestDefaults, o);
    var stepSize = (o.maxSize - o.minSize) / o.steps;
    var i = o.steps;
    var j = 1;
    var nest = [];
    var step = void 0; // the actual step size in px

    while (i--) {
        step = stepSize * (1 + (0, _utils.randomInRange)(-o.jitter, +o.jitter));
        nest.push({
            x: o.x,
            y: o.y,
            size: (o.maxSize - j * step) / 2,
            angle: o.angle
        });
        j++;
    }
    return nest;
}

var nestRenderDefaults = {
    palette: ['#000', '#333', '#666', '#999'],
    alpha: 1,
    blendMode: 'normal'
};

function drawNest(ctx, nest, shapeFunction, colorFunction, o) {
    o = Object.assign(nestRenderDefaults, o);
    (0, _utils.resetTransform)(ctx);
    var ctxBlend = ctx.globalCompositeOperation;
    var ctxAlpha = ctx.globalAlpha;

    ctx.globalCompositeOperation = o.blendMode;
    ctx.globalAlpha = o.alpha;

    nest.forEach(function (n) {
        shapeFunction(ctx, n.x, n.y, n.size, {
            fill: colorFunction(ctx, n.size, n.size),
            angle: n.angle
        });
    });

    ctx.globalCompositeOperation = ctxBlend;
    ctx.globalAlpha = ctxAlpha;

    (0, _utils.resetTransform)(ctx);
}

/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.shapescape = shapescape;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _shapes = __webpack_require__(3);

var _utils = __webpack_require__(0);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * Get a fill, either in solid or gradients
 * @param  {context} ctx  the canvas rendering context
 * @param {array} palette an array of color values
 * @param  {num} x    center x of shape
 * @param  {num} y    center y of shape
 * @param  {num} size half the size of the shape (r for circle)
 * @return {fillStyle}      a solid color or canvas gradient
 */
function getFill(ctx, palette, x, y, size, skew) {
    if (Math.random() > 0.9) {
        // solid
        return (0, _utils.randItem)(palette);
    } else {
        // gradient
        // pick xoffset as fraction of size to get a shallow angle
        var xoff = (0, _utils.randomInRange)(-skew / 2, skew / 2) * size;
        // build gradient, add stops
        var grad = ctx.createLinearGradient(x - xoff, y - size, x + xoff, y + size);
        grad.addColorStop(0, (0, _utils.randItem)(palette));
        grad.addColorStop(1, (0, _utils.randItem)(palette));
        return grad;
    }
}

// Tile the container
function shapescape(options) {
    var defaults = {
        container: 'body',
        palette: _palettes2.default.candywafer,
        drawShadows: true,
        addNoise: 0.04,
        noiseInput: null,
        skew: 1, // normalized skew
        clear: true
    };
    var opts = {};
    opts = Object.assign(Object.assign(opts, defaults), options);

    var container = options.container;

    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);
    var LONG = Math.max(cw, ch);
    var SHORT = Math.min(cw, ch);

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx; // canvas ctx or svg tag

    ctx = el.getContext('2d');

    // optional clear
    if (opts.clear) {
        el.width = container.offsetWidth;
        el.height = container.offsetHeight;
        ctx.clearRect(0, 0, cw, ch);
    }

    var renderer;
    var renderMap = {
        circle: _shapes.drawCircle,
        triangle: _shapes.drawTriangle,
        square: _shapes.drawSquare,
        ring: _shapes.drawRing
        /*pentagon: drawPentagon,
        hexagon: drawHexagon*/
    };
    var shapes = Object.keys(renderMap);

    // BEGIN RENDERING

    if (opts.drawShadows) {
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 3 * SCALE / 400;
        ctx.shadowBlur = 10 * SCALE / 400;
        ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
    }

    var shapeOpts = {};

    // mostly, lock them to centerline. Else, nudge each left or right
    var centers = [];
    if (Math.random() < 0.66) {
        centers = [cw / 2, cw / 2, cw / 2];
        shapeOpts.angle = 0;
    } else {
        centers = [cw * (0, _utils.randomInRange)(0.4, 0.6), // shape 1
        cw * (0, _utils.randomInRange)(0.4, 0.6), // shape 2
        cw * (0, _utils.randomInRange)(0.2, 0.8)];
        shapeOpts.angle = (0, _utils.randomInRange)(-1, 1) * Math.PI / 2;
    }

    // Fill utilties
    var getGradientFill = (0, _utils.getLocalGradientFunction)(opts.palette);

    // add one or two bg blocks
    ctx.fillStyle = getGradientFill(ctx, cw / 2, ch / 2, LONG);
    ctx.fillRect(0, 0, cw, ch);
    if (Math.random() < 0.5) {
        var hr = (0, _utils.randomInRange)(3, 12) * cw;
        var hy = hr + (0, _utils.randomInRange)(0.5, 0.85) * ch;
        (0, _shapes.drawCircle)(ctx, centers[2], hy, hr, { fill: (0, _utils.getGradientFunction)(opts.palette)(ctx, cw, ch) });
    }

    // draw two shape layers in some order:
    // shuffle shape list
    shapes.sort(function (a, b) {
        return (0, _utils.randomInRange)(-1, 1);
    });

    // pop a renderer name, get render func and execute X 2
    var _y = void 0;
    var _size = void 0;

    _y = ch * (0, _utils.randomInRange)(0.3, 0.7);
    _size = cw * (0, _utils.randomInRange)(0.25, 0.35);
    renderMap[shapes.pop()](ctx, centers[0], _y, _size, {
        angle: shapeOpts.angle,
        fill: getGradientFill(ctx, centers[0], _y, _size)
    });

    _y = ch * (0, _utils.randomInRange)(0.3, 0.7);
    _size = cw * (0, _utils.randomInRange)(0.25, 0.35);
    renderMap[shapes.pop()](ctx, centers[1], _y, _size, {
        angle: shapeOpts.angle,
        fill: getGradientFill(ctx, centers[1], _y, _size)
    });

    // Add effect elements
    // ...

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, cw / 3);
        }
    }

    // END RENDERING

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 17 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.lines = lines;
exports.drawLines = drawLines;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var BGLIST = ['white', 'white', 'white', 'solid', 'gradient'];
var OVERLAYLIST = ['shape', 'area', 'blend', 'auto'];

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.south_beach,
    bg: 'auto', // one of BGLIST or 'auto'
    overlay: null, // one of OVERLAYLIST or 'auto'
    drawShadows: false,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true

    // util: random renderers
};var renderMap = {
    circle: _shapes.drawCircle,
    //ring: drawRing,
    triangle: _shapes.drawTriangle,
    square: _shapes.drawSquare,
    //box: drawBox,
    rect: _shapes.drawRect,
    pentagon: _shapes.drawPentagon,
    hexagon: _shapes.drawHexagon
};
var shapes = Object.keys(renderMap);
var getRandomRenderer = function getRandomRenderer() {
    return renderMap[(0, _utils.randItem)(shapes)];
};

// standard renderer, takes options
function lines(options) {
    var opts = Object.assign(DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx; // canvas ctx or svg tag

    ctx = el.getContext('2d');

    var drawOpts = Object.assign({}, opts);

    // bg styles
    var BG = void 0;
    if (opts.bg === 'auto') {
        BG = (0, _utils.randItem)([].concat(BGLIST));
        //console.log('auto bg, picked', BG);
    } else {
        BG = opts.bg;
    }

    drawOpts.bg = BG;

    // rendering styles
    var drawShapeMask = Math.random() >= 0.3333; // should we draw a shape-masked line set?

    var blendStyle = 'none'; // ['none', 'fg', 'bg']
    var blendSeed = Math.random(); // should blend overlay apply to fg, bg, or neither?

    // we set drawShapeMask and blendStyle now so we can apply the corresponding
    // overlay options when doing multi-section rendering below.
    if (drawShapeMask) {
        if (blendSeed <= 0.25) {
            blendStyle = 'fg';
        } else if (blendSeed <= 0.50) {
            blendStyle = 'bg';
        }
    }

    // debug
    //blendStyle = 'none';

    if (drawOpts.bg === 'gradient') {
        // if we will blend, specify a gradient now and re use it
        drawOpts.blendColors = (0, _utils.getGradientFunction)(opts.palette)(ctx, cw, ch);
    }

    if (blendStyle === 'bg') {
        drawOpts.overlay = 'blend';
    }

    // divide the canvas into multiple sections?
    var splitPoint = void 0;
    var splitSeed = Math.random();
    if (splitSeed > 0.5 && !drawShapeMask) {
        // left right
        splitPoint = [(0, _utils.randomInRange)(cw * 1 / 4, cw * 3 / 4), 0];

        drawLines(ctx, [0, 0], [splitPoint[0], ch], drawOpts);
        drawLines(ctx, [splitPoint[0], 0], [cw, ch], drawOpts);
    } else {
        // single
        drawLines(ctx, [0, 0], [cw, ch], drawOpts);
    }

    // draw shapemask, if specified above
    if (drawShapeMask) {
        if (blendStyle === 'fg') {
            Object.assign(drawOpts, { overlay: 'blend' });
        } else {
            Object.assign(drawOpts, { overlay: 'none' });
        }

        var maskScale = Math.min(cw, ch) * (0, _utils.randomInRange)(0.25, 0.6);
        // Get and use random shape for masking. No fill required.
        getRandomRenderer()(ctx, cw * (0, _utils.randomInRange)(0.2, 0.8), ch * (0, _utils.randomInRange)(0.2, 0.8), maskScale, { angle: (0, _utils.randomInRange)(0, Math.PI) });
        ctx.save();
        ctx.clip();
        drawLines(ctx, [0, 0], [cw, ch], drawOpts);
        ctx.restore();
        (0, _utils.resetTransform)(ctx);
    }

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, w / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

// Renderer:
// In context @ctx draw artwork in the rectangle between @p1 and @p2
// with passed options @opts
function drawLines(ctx, p1, p2, opts) {
    var w = p2[0] - p1[0];
    var h = p2[1] - p1[1];
    var scale = Math.min(w, h); // reference size, regardless of aspect ratio
    var aspect = w / h;

    // translate to the origin point
    ctx.translate(p1[0], p1[1]);

    // mark it, dude
    ctx.save();

    // clip within the region
    ctx.beginPath();
    ctx.rect(0, 0, w, h);
    ctx.clip();
    p1 = p1.map(function (v) {
        return v.toFixed(1);
    });
    p2 = p2.map(function (v) {
        return v.toFixed(1);
    });

    // optional clear
    if (opts.clear) {
        ctx.clearRect(0, 0, w, h);
    }

    switch (opts.bg) {
        case 'solid':
            ctx.fillStyle = (0, _utils.randItem)(opts.palette);
            break;
        case 'gradient':
            ctx.fillStyle = opts.blendColors || (0, _utils.getGradientFunction)(opts.palette)(ctx, w, h);
            break;
        case 'white':
            ctx.fillStyle = 'white';
            break;
        default:
            // set passed value of bg and hope it's a color!
            ctx.fillStyle = opts.bg;

    }
    ctx.fillRect(0, 0, w, h);

    // Pick a render style, which determines some of the values for
    // the primitive params
    // --------------------------------------

    var minStops = void 0;
    var maxStops = void 0;
    var renderStyle = opts.renderStyle;

    if (!renderStyle || renderStyle == 'auto') {
        if (Math.random() > 0.5) {
            renderStyle = 'wave';
        } else {
            renderStyle = 'jagged';
        }
    }

    // debug!
    //renderStyle = 'jagged';
    //renderStyle = 'wave';

    switch (renderStyle) {
        case 'wave':
            minStops = 50;
            maxStops = 200;
            ctx.lineJoin = 'round';
            break;
        case 'jagged':
            minStops = 2;
            maxStops = 30;
            ctx.lineJoin = 'miter';
            break;
    }

    // Set up basic params
    // --------------------------------------

    var stops = Math.ceil((0, _utils.randomInRange)(minStops, maxStops) * aspect);
    var lines = Math.floor((0, _utils.randomInRange)(10, 40) / aspect);

    var stopInterval = w / (stops - 1);
    var lineInterval = h / lines;

    // move endpoints out of frame
    ctx.translate(-stopInterval / 2, -lineInterval / 2);

    //console.log(`${lines} lines @${lineInterval.toFixed(1)}px  X  ${stops} stops @${stopInterval.toFixed(1)}px`)


    var pts = [];
    // create array of zeroes
    for (var i = 0; i <= stops; i++) {
        pts.push([i * stopInterval, 0]);
    }
    var pt = void 0;

    // Assign a line transform function
    // --------------------------------------

    var widthSeed = Math.random();
    var widthFunc = void 0;
    var widthStyle = ''; // ['CONSTANT','INCREASING','DECREASING']
    var minWidth = void 0;
    var maxWidth = void 0;
    var widthStep = void 0;

    if (widthSeed >= 0.66) {
        widthStyle = 'CONSTANT';
    } else if (widthSeed >= 0.33) {
        widthStyle = 'INCREASING';
    } else {
        widthStyle = 'DECREASING';
    }

    switch (widthStyle) {
        case 'CONSTANT':
            var widthScale = (0, _utils.randomInRange)(0.4, 0.5);
            widthFunc = function widthFunc(l) {
                return lineInterval * widthScale;
            };
            break;
        case 'INCREASING':
            maxWidth = lineInterval * (0, _utils.randomInRange)(0.6, 1.1);
            minWidth = 1 + lineInterval * (0, _utils.randomInRange)(0, 0.15);
            widthStep = (maxWidth - minWidth) / (lines - 1);
            widthFunc = function widthFunc(l) {
                return minWidth + l * widthStep;
            };
            break;
        case 'DECREASING':
            maxWidth = lineInterval * (0, _utils.randomInRange)(0.6, 1.1);
            minWidth = 1 + lineInterval * (0, _utils.randomInRange)(0, 0.15);
            widthStep = (maxWidth - minWidth) / (lines - 1);
            widthFunc = function widthFunc(l) {
                return maxWidth - l * widthStep;
            };
            break;
    }

    // Assign a points transform function -- these functions deviate
    // from straight lines.
    // --------------------------------------

    // component pt transform func
    // left/right drift of the line points. Easy to collide, so keep small.
    // Drift looks better with more lines and stops to reveal
    // the resulting patterns, so scale gently with those counts.
    var _xScale = 0.9 * lines / 1000 + 1.3 * stops / 1000;
    var xDrift = function xDrift(x, line, stop) {
        if (stop === 0 || stop === stops) {
            // do not drift the endpoints
            return x;
        }
        return x + stopInterval * (0, _utils.randomInRange)(-_xScale, _xScale);
    };

    // component pt transform func
    // Vertical drift of the line points
    // Baseline value plus some adjustment for line/stop density
    var _yScale = (0, _utils.randomInRange)(0.08, 0.12) + (0, _utils.randomInRange)(17, 23) / (lines * stops);
    var yDrift = function yDrift(y, line, stop) {
        return y + lineInterval * (0, _utils.randomInRange)(-_yScale, _yScale);
    };

    // component pt transform func
    // Waves with drifting phase, to make nice ripples
    var TWOPI = Math.PI * 2;
    var waveCount = (0, _utils.randomInRange)(0.5, 2.5) * aspect;
    var wavePhase = (0, _utils.randomInRange)(lines / 10, lines / 1);
    var yWave = function yWave(y, line, stop) {
        var factor = 0.2 * lineInterval * // scale the wave
        Math.sin(stop / stops * TWOPI * waveCount + // number of waves
        line / wavePhase * TWOPI // move phase with each line
        );
        return y + factor;
    };

    // sample pt transform func
    // Combines lateral and vertical drift functions.
    var drift = function drift(pt, line, stop) {
        return [xDrift(pt[0], line, stop), yDrift(pt[1], line, stop)];
    };

    // sample sin wave transform
    var wave = function wave(pt, line, stop) {
        return [pt[0], yWave(pt[1], line, stop)];
    };

    var styleTransformMap = {
        'wave': wave,
        'jagged': drift

        // assign pt transform func
    };var ptTransform = styleTransformMap[renderStyle];

    // Color transform
    // --------------------------------------
    // ...

    // Draw the lines!
    // --------------------------------------
    // Step through the lines, modifying the pts array as you go.

    // For blend overlays, we need black lines so we can apply true palette
    // colors using screen.
    if (opts.overlay === 'blend') {
        ctx.strokeStyle = 'black';
    } else {
        ctx.strokeStyle = (0, _utils.randItem)(opts.palette);
    }

    for (var l = 0; l <= lines; l++) {
        ctx.lineWidth = widthFunc(l);
        ctx.translate(0, lineInterval);
        ctx.moveTo(0, 0);
        ctx.beginPath();
        for (var s = 0; s <= stops; s++) {
            pts[s] = ptTransform(pts[s], l, s);

            ctx.lineTo(pts[s][0], pts[s][1]);
        }
        ctx.stroke();
    }

    // Add effect elements
    // ...

    // Overlay a shape or area, according to opts.overlay
    // Prepare ctx and render tools:
    (0, _utils.resetTransform)(ctx);
    ctx.translate(p1[0], p1[1]);

    // switch on overlay option…
    if (opts.overlay === 'auto') {
        // if auto overlay, pick one
        opts.overlay = (0, _utils.randItem)([null].concat(OVERLAYLIST));
    }
    switch (opts.overlay) {
        case 'shape':
            ctx.globalCompositeOperation = 'color';
            var renderer = getRandomRenderer();
            renderer(ctx, w / 2, h / 2, scale * (0, _utils.randomInRange)(0.3, 0.45), { fill: (0, _utils.randItem)(opts.palette) });
            break;
        case 'area':
            ctx.globalCompositeOperation = 'color';
            ctx.fillStyle = (0, _utils.randItem)(opts.palette);
            ctx.fillRect(0, 0, w * (0, _utils.randomInRange)(0.25, 0.75), h);
            break;
        case 'blend':
            ctx.globalCompositeOperation = 'screen';
            ctx.fillStyle = opts.blendColors || (0, _utils.getGradientFunction)(opts.palette)(ctx, w, h);
            ctx.fillRect(0, 0, w, h);
            break;
    }
    // …clean up blending and finish.
    ctx.globalCompositeOperation = 'normal';

    // END RENDERING

    // unclip and remove translation
    ctx.restore();
    (0, _utils.resetTransform)(ctx);
}

/***/ }),
/* 18 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.waves = waves;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var PI = Math.PI;

var DETAILS = ['coarse', 'fine'];
var STYLES = ['solid', 'dotted', 'dashed'];
var COLORMODES = ['solid', 'gradient'];

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.south_beach,
    detail: 'auto', // enum from DETAILS
    style: 'auto', // enum from STYLES
    colorMode: 'auto', // from FILLS
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    clear: true
};

var WAVEPATH_DEFAULTS = {
    fill: '#000',
    stroke: '#fff',
    jitter: 0.25
};

function jitter(val, amount) {
    if (amount === 0) return val;
    return (0, _utils.randomInRange)(val - val * amount, val + val * amount);
}

// x, y, width, height, (wave)length, amplitude, …
function wavepath(ctx, x, y, w, h, count, amp, options) {
    var opts = Object.assign({}, WAVEPATH_DEFAULTS, options);
    var wl = w / count;
    var x1 = void 0,
        y1 = void 0,
        x2 = void 0,
        y2 = void 0,
        x3 = void 0,
        y3 = void 0;

    //console.log(`${count} waves | ${wl} length`);

    ctx.fillStyle = opts.fill;
    ctx.strokeStyle = opts.stroke;
    ctx.beginPath();
    ctx.moveTo(x, y);

    y1 = y3 = y;
    y2 = y + amp;

    for (var i = 0; i < count; i++) {
        x1 = x + wl * i;
        x2 = x1 + wl / 2;
        x3 = x2 + wl / 2;

        y1 = y3;
        y2 = y + jitter(amp, opts.jitter); // jitter the midpoint based on amp
        y3 = y + jitter(amp * opts.jitter, opts.jitter); // jitter endpoint less

        ctx.bezierCurveTo(x1 + wl / 5, y1, x2 - wl / 5, y2, x2, y2);
        ctx.bezierCurveTo(x2 + wl / 5, y2, x3 - wl / 5, y3, x3, y3);
    }

    ctx.lineTo(x + wl * count, y + h);
    ctx.lineTo(x, y + h);

    ctx.closePath();
    opts.fill && ctx.fill();
    ctx.stroke();
}

// a series of smooth curves with a filled base layer, and then
// variants of the path.
// @w: width
// @h: height
// @count: the number of peaks
// @depth: the number of variant lines
// @amp: amplitude of the wave/trough

function waveband(ctx, x, y, w, h, count, amp, depth, options) {
    var opts = Object.assign({}, options);
    var _lineWidth = ctx.lineWidth;
    var _yoffset = 0;
    var depthStep = amp / (depth + 1);
    if (depth > 5) {
        depthStep += amp / depth;
        //depthStep = depthStep * Math.pow(1.1, depthStep - 5);
    }
    for (var i = 0; i < depth; i++) {
        if (i === 0) {
            // start with a thick solid line
            ctx.setLineDash([]);
            ctx.lineWidth = _lineWidth * (0, _utils.randomInRange)(1.5, 2);
        } else {
            // after, go thinner, and sometimes dotted

            var dashLength = void 0;

            if (opts.style === 'dotted') {
                // dotted lines. keep thicker line weight
                ctx.lineWidth = _lineWidth * 1.5;
                ctx.lineCap = 'round';
                dashLength = _lineWidth * (1 + i) + _lineWidth * .5;
                ctx.setLineDash([0, dashLength]);
                ctx.lineDashOffset = (0, _utils.randomInRange)(-dashLength, 0);
            } else if (opts.style === 'dashed') {
                // dashed lines, which should be thinner
                ctx.lineWidth = _lineWidth;
                ctx.setLineDash([_lineWidth * (depth - i + 1), _lineWidth * 2]);
                ctx.lineDashOffset = (0, _utils.randomInRange)(-_lineWidth * 2, 0);
            } else {
                ctx.lineWidth = _lineWidth;
            }
            opts.fill = null; // after the first pass, remove the fill, so lines overlap
        }

        _yoffset = i * depthStep;
        wavepath(ctx, x, y + _yoffset, w, h - depthStep * i, count, amp, opts);
    }
    // reset lineWidth in case depth = 0;
    ctx.lineWidth = _lineWidth;
    ctx.setLineDash([]);
    ctx.lineDashOffset = 0;
}

var WAVELET_DEFAULTS = {
    width: 200,
    rise: 60,
    dip: 30,
    skew: 0.5

    // a peaky little wavelet shape, stands alone
};function wavelet(ctx, x, y, options) {
    var _Object$assign = Object.assign({}, WAVELET_DEFAULTS, options),
        width = _Object$assign.width,
        rise = _Object$assign.rise,
        dip = _Object$assign.dip,
        skew = _Object$assign.skew;

    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.bezierCurveTo(x + width * skew * .333, y - rise / 2, x + width * skew * .666, y - rise / 2, x + width * skew, y - rise);
    ctx.bezierCurveTo(x + width * skew * (1 + 0.333), y - rise / 2, x + width * skew * (1 + 0.666), y - rise / 2, x + width, y);
    ctx.bezierCurveTo(x + width * skew * (1 + 0.666), y + dip * .5, x + width * skew * (1 + 0.333), y + dip * .75, x + width * skew, y + dip);
    ctx.bezierCurveTo(x + width * skew * .666, y + dip * .75, x + width * skew * .333, y + dip * .5, x, y);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}

var WAVES_DEFAULTS = {
    wl: 100,
    wh: 50,
    dense: 0.4,
    skew: 0.5
};

// a pattern of wavelet() renderings
function waveset(ctx, x, y, width, height, opts) {
    opts = Object.assign({}, WAVES_DEFAULTS, opts);
    opts.dense = Math.max(opts.dense, 0.1);
    var cols = Math.ceil(width / (opts.wl * opts.dense));
    var rows = Math.ceil(height / (opts.wh * opts.dense));
    console.log(rows + ' rows, ' + cols + ' cols');
    for (var row = 0; row < rows; row++) {
        for (var col = 0; col < cols + 1 * (row % 2); col++) {
            wavelet(ctx, x + opts.wl * col - opts.wl / 2 * (row % 2), y + opts.wh * row * opts.dense, {
                width: opts.wl,
                rise: opts.wh * 0.666,
                dip: opts.wh * 0.333,
                skew: opts.skew
            });
        }
    }
}

function waves(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);
    var LONG = Math.max(cw, ch);
    var SHORT = Math.min(cw, ch);

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx; // canvas ctx or svg tag
    ctx = el.getContext('2d');

    // Options
    var DETAIL = opts.detail === 'auto' ? (0, _utils.randItem)(DETAILS) : opts.detail;
    var STYLE = opts.style === 'auto' ? (0, _utils.randItem)(STYLES) : opts.style;
    var COLORMODE = opts.colorMode === 'auto' ? (0, _utils.randItem)(COLORMODES) : opts.colorMode;
    var JITTER = (0, _utils.randomInRange)(0.05, 0.25);

    console.log('==================================\nWaves:', DETAIL, STYLE, COLORMODE, JITTER.toPrecision(2));

    var depthRange = [5, 5];
    if (DETAIL === 'coarse') {
        depthRange = [4, 6];
    } else if (DETAIL === 'fine') {
        depthRange = [7, 14];
    }

    ctx.strokeStyle = "black";
    ctx.fillStyle = "#" + Math.random().toString(16).slice(2, 8);

    // setup

    var contrastPalette = [].concat(opts.palette);
    contrastPalette = (0, _utils.shuffle)(contrastPalette);
    var bg = contrastPalette.pop();

    var getSolidFill = (0, _utils.getSolidColorFunction)(contrastPalette);
    var getGradientFill = (0, _utils.getLocalGradientFunction)(contrastPalette);

    var fg = getSolidFill();

    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, cw, ch);

    var renderer;
    var renderMap = {
        circle: _shapes.drawCircle,
        //triangle: drawTriangle,
        //square: drawSquare,
        rectangle: _shapes.drawRect
        //box: drawBox,
        //ring: drawRing,
        //pentagon: drawPentagon,
        //hexagon: drawHexagon
    };
    var shapes = Object.keys(renderMap);

    // test bands
    // --------------------------------------


    //wavecurve(ctx, 200, 200, 100, 100, {depth: 5});

    //wavelet(ctx, 200, 400, 100, 100, {depth: 5, sign: 1})

    //waveset(ctx, 0, 0, 800, 800, {wl: 120, wh: 60, dense: 0.35, skew: 0.65});

    //waveband(ctx, 0, 100, cw, 60, 4, 50, 5, {fill: getSolidFill(opts.palette)});

    //waveband(ctx, 0, 100, cw, 120, 3, 50, 3, {fill: getSolidFill(opts.palette)});
    //waveband(ctx, 0, 300, cw, 120, 3, 50, 5, {fill: getSolidFill(opts.palette)});
    //waveband(ctx, 0, 500, cw, 120, 3, 50, 10, {fill: getSolidFill(opts.palette)});


    var strokeColor = Math.random() > 0.5 ? 'white' : 'black';

    var waveStart = void 0,
        waveEnd = void 0;
    waveStart = waveEnd = cw / 2;
    if (Math.random < 0.99995) {
        waveStart *= (0, _utils.randomInRange)(0.8, 1.2);
        waveEnd *= (0, _utils.randomInRange)(0.8, 1.2);
    }
    var waveGradient = function waveGradient(y1, y2) {
        var grad = ctx.createLinearGradient(waveStart, y1, waveEnd, y2);
        grad.addColorStop(0, fg);
        grad.addColorStop(1, bg);
        return grad;
    };

    // cover the canvas in a stack of bands of similar waves
    function simpleCover() {
        var y = 0;
        var x = 0;
        var h_shift = 0;
        var amp = void 0;
        var h = void 0;
        var count = void 0;
        var bandCount = (0, _utils.randomInRange)(10, 40); // number of horizontal bands
        var interval = ch / (bandCount - 1); // px per stripe


        // low or high number of peaks
        // magic number: pleasing waves are about twice as long as they are high
        // this is the max frequency or count to use.
        var baseCount = bandCount * (cw / ch) * 0.5;

        // actual baseCount should be lower
        baseCount *= (0, _utils.randomInRange)(0.2, 0.75);

        // pick line weight from canvas size and number of bands
        var weight = SCALE / 1600 * (0, _utils.randomInRange)(1, 3) + interval / 50;
        ctx.lineWidth = weight;

        y = -interval; // start above the top
        var max_shift = cw / baseCount; // max left offset is one wave

        for (var i = 0; i < bandCount; i++) {
            amp = interval * (0, _utils.randomInRange)(0.75, 1);
            h = interval * 3;

            // shift down if amplitude is less than interval
            y += (interval - amp) / 2;

            // Floating shapes!
            if (Math.random() < 0.3) {
                var _size = SCALE / 8;
                var _x = x + cw * (0, _utils.randomInRange)(0, 1);
                var _y = y + (0, _utils.randomInRange)(_size / 4, _size);
                renderMap[(0, _utils.randItem)(shapes)](ctx, _x, _y, _size, {
                    stroke: strokeColor,
                    fill: getGradientFill(ctx, _x, _y, _size),
                    angle: (0, _utils.randomInRange)(-PI / 4, PI / 4)
                });
            }

            // variation in wave count between bands
            count = Math.ceil(baseCount * (0, _utils.randomInRange)(1, 1.2));
            //count = baseCount;

            // horizontal offsets for natural appearance
            x = -(0, _utils.randomInRange)(0, max_shift);

            var waveFill = bg;
            if (COLORMODE === 'gradient') {
                waveFill = waveGradient(y, y + h * (0, _utils.randomInRange)(1, 2));
            }

            // ctx, x, y, w, h, wavecount, amp, stackdepth, opts
            waveband(ctx, x, y, cw + max_shift, h, count, amp, _utils.randomInt.apply(undefined, _toConsumableArray(depthRange)), {
                fill: waveFill,
                stroke: strokeColor,
                jitter: JITTER,
                style: STYLE
            });

            // step down
            y += interval;
        }
    }

    function nearFar() {
        var y = 0;
        var x = 0;
        var h_shift = 0;
        var amp = void 0;
        var h = void 0;
        var count = void 0;
        var bandCount = 34;
        var interval = ch / bandCount;

        for (var i = 0; i < bandCount; i++) {
            count = Math.max((0, _utils.randomInRange)(bandCount - 2 - i, bandCount + 2 - i), 0.5);
            //count = bandCount/2 + bandCount/2 - (i/2) + randomInt(0, 3);
            count = bandCount - i;
            count = Math.ceil(count);
            amp = 55 / count + i * 1;
            y += amp * 1;
            h = amp * 9;

            // horizontal offsets for natural appearance
            h_shift = (0, _utils.randomInRange)(0, 0.1);
            x = -h_shift * cw;

            // make near lines thicker
            ctx.lineWidth = 0.5 + amp / 50;

            // ctx, x, y, w, h, wavecount, amp, stackdepth, opts
            waveband(ctx, x, y, cw * (1 + h_shift), h, count, amp, 5, { fill: getSolidFill(opts.palette) });
        }
    }

    simpleCover();
    //nearFar();


    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            // apply noise from supplied canvas
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            // create noise pattern and apply
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, cw / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 19 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.grid = grid;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.south_beach,
    style: 'auto', // ['masked', 'layers']
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true
};

var PI = Math.PI;

// Main function
function grid(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // available renderers
    var renderMap = {
        //circle: drawCircle,
        //ring: drawRing,
        triangle: _shapes.drawTriangle,
        square: _shapes.drawSquare,
        box: _shapes.drawBox,
        rect: _shapes.drawRect,
        pentagon: _shapes.drawPentagon,
        hexagon: _shapes.drawHexagon
    };
    var shapes = Object.keys(renderMap);
    var getRandomRenderer = function getRandomRenderer() {
        return renderMap[(0, _utils.randItem)(shapes)];
    };

    // util to draw a square and clip following rendering inside
    function clipSquare(ctx, w, h, color) {
        ctx.save();
        ctx.beginPath();
        ctx.rect(0, 0, w, h);
        ctx.fillStyle = color;
        ctx.closePath();
        ctx.fill();
        ctx.clip();
    }

    // color funcs
    var randomFill = function randomFill() {
        return "#" + Math.random().toString(16).slice(2, 8);
    };
    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // define grid
    var count = Math.round((0, _utils.randomInRange)(4, 9));
    var w = Math.ceil(cw / count);
    var h = w;
    var vcount = Math.ceil(ch / h);

    // setup vars for each cell
    var x = 0;
    var y = 0;
    var xnorm = 0;
    var ynorm = 0;
    var renderer = void 0;

    // play with these random seeds
    var a = void 0,
        b = void 0,
        c = void 0;
    a = Math.random();
    b = Math.random();
    c = Math.random();

    // shared colors
    var fg = getSolidFill();
    var bg = getSolidFill();

    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);

    // mode
    function maskAndRotate() {
        renderer = getRandomRenderer();
        var colorFunc = void 0;
        // pick a color mode: random, or just fg
        if (Math.random() < 0.33) {
            colorFunc = getContrastColor;
        } else {
            colorFunc = function colorFunc() {
                return fg;
            };
        }
        for (var i = 0; i < vcount; i++) {
            // pick renderers by row here
            // renderer = getRandomRenderer();
            for (var j = 0; j < count; j++) {
                // convenience vars
                x = w * j;
                y = h * i;
                xnorm = x / cw;
                ynorm = y / ch;

                // shift and clip
                ctx.translate(x, y);
                clipSquare(ctx, w, h, bg);

                // draw
                renderer(ctx, w * a + xnorm * (1 - a), // start at a, march across
                h * b + ynorm * (1 - b), // start at b, march down
                w / (c + 1.5), // scale at c
                {
                    fill: colorFunc(),
                    angle: xnorm - a - (ynorm - b) // rotate with position
                });

                // unshift, unclip
                ctx.restore();
                (0, _utils.resetTransform)(ctx);
            }
        }
    }

    // mode
    function layers() {
        var layerCount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 7;


        function drawLayer() {
            var px = void 0,
                py = void 0;
            var s = void 0;

            for (var i = 0; i < vcount; i++) {
                for (var j = 0; j < count; j++) {
                    // convenience vars
                    x = w * j;
                    y = h * i;
                    xnorm = x / cw;
                    ynorm = y / ch;

                    // shift and clip
                    ctx.translate(x, y);
                    clipSquare(ctx, w, h, 'white');

                    // size jitter
                    s = (0, _utils.randomInRange)(0.15, 0.45) * w;
                    // offset a bit, based on available size
                    px = (0, _utils.randomInRange)(-1, 1) * 0.2 * (1 - s);
                    py = (0, _utils.randomInRange)(-1, 1) * 0.2 * (1 - s);

                    // shift to center for rotation
                    ctx.translate(w / 2, h / 2);

                    // draw
                    (0, _shapes.drawSquare)(ctx, px, py, s, {
                        fill: getSolidFill(),
                        angle: (0, _utils.randomInRange)(-1, 1) * 0.1
                    });

                    // unshift, unclip
                    ctx.restore();
                    (0, _utils.resetTransform)(ctx);
                }
            }
        }

        ctx.globalAlpha = Math.pow(0.9, layerCount);
        ctx.globalCompositeOperation = 'multiply';

        while (layerCount--) {
            drawLayer();
        }

        ctx.globalAlpha = 1;
        ctx.globalCompositeOperation = 'normal';
    }

    // gather our modes
    var modes = [maskAndRotate, layers];

    // do the loop with one of our modes
    var STYLE = opts.style;
    if (!STYLE || STYLE == 'auto') {
        (0, _utils.randItem)(modes)();
    } else {
        if (STYLE === 'masked') {
            maskAndRotate();
        }
        if (STYLE === 'layers') {
            layers();
        }
    }

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            // apply noise from supplied canvas
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            // create noise pattern and apply
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, w / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 20 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.truchet = truchet;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.south_beach,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true,

    style: 'auto', // one of modes
    layer: 'auto', // true | false | auto
    fancy: 'auto', // 
    count: 0, // 0 for auto, or an integer
    weight: 0, // 0 for auto, or 1-10 for normalized weights
    contrast: true
};

var PI = Math.PI;

// Main function
function truchet(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // util to draw a square and clip following rendering inside
    function clipSquare(ctx, w, h, color) {
        ctx.save();
        ctx.beginPath();
        ctx.rect(0, 0, w, h);
        ctx.fillStyle = color;
        ctx.closePath();
        ctx.fill();
        ctx.clip();
    }

    // color funcs
    var randomFill = function randomFill() {
        return "#" + Math.random().toString(16).slice(2, 8);
    };
    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // define grid
    var count = Math.round(opts.count) || Math.round((0, _utils.randomInRange)(4, 9));
    var w = Math.ceil(cw / count);
    var h = w;
    var vcount = Math.ceil(ch / h);

    // setup vars for each cell
    var x = 0;
    var y = 0;
    var xnorm = 0;
    var ynorm = 0;
    var renderer = void 0;

    var secondLayer = void 0;
    if (opts.layer === true || opts.layer === 'true') {
        secondLayer = true;
    }
    if (opts.layer === false || opts.layer === 'false') {
        secondLayer = false;
    }
    if (opts.layer === null || opts.layer === undefined || opts.layer == 'auto') {
        secondLayer = Math.random() < 0.5;
    }

    var FANCY = opts.fancy === undefined || opts.fancy === 'auto' ? (0, _utils.randItem)([true, false]) : opts.fancy;

    // play with these random seeds
    var a = void 0,
        b = void 0,
        c = void 0;
    a = Math.random();
    b = Math.random();
    c = Math.random();

    // shared colors
    var fg = void 0; // hold on…
    var bg = getSolidFill(); // pick bg

    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);
    fg = getContrastColor(); // …now set fg in contrast to bg

    // mode settings
    // line weight
    var weight = void 0;
    if (opts.weight) {
        weight = w / 30 * opts.weight;
    } else {
        weight = w / 30 * (0, _utils.randomInRange)(1, 10);
    }

    // component utils

    // draw a triangle at anchor corner
    function _triangle(anchor, fill) {
        var corners = [[0, 0], [w, 0], [w, h], [0, h]];
        var drawCorners = [];
        fill = fill || getSolidFill();
        if (anchor === undefined) anchor = Math.round((0, _utils.randomInRange)(0, 3));
        drawCorners = [].concat(corners);
        drawCorners.splice(anchor, 1);

        // draw a triangle with the remaining 3 points
        ctx.beginPath();
        ctx.moveTo.apply(ctx, _toConsumableArray(drawCorners[0]));
        ctx.lineTo.apply(ctx, _toConsumableArray(drawCorners[1]));
        ctx.lineTo.apply(ctx, _toConsumableArray(drawCorners[2]));
        ctx.closePath();
        ctx.fillStyle = fill;
        ctx.fill();
    }

    // draw a circle at anchor corner
    function _circle(anchor, fill) {
        var corners = [[0, 0], [w, 0], [w, h], [0, h]];
        var drawCorners = [];
        fill = fill || getSolidFill();
        if (anchor === undefined) anchor = Math.round((0, _utils.randomInRange)(0, 3));

        (0, _shapes.drawCircle)(ctx, corners[anchor][0], corners[anchor][1], w, {
            fill: fill
        });
    }

    // fill cell
    // first arg is for parity with _triangle and _circle
    function _square(_, fill) {
        fill = fill || getSolidFill();
        ctx.rect(0, 0, w, h);
        ctx.fillStyle = fill;
        ctx.closePath();
        ctx.fill();
    }

    function _dot(_, fill) {
        fill = fill || getSolidFill();
        (0, _shapes.drawCircle)(ctx, w / 2, h / 2, w / 4, { fill: fill });
    }

    // mode
    function circles(background) {
        background = background || bg;
        var px = void 0,
            py = void 0;
        for (var i = 0; i < vcount; i++) {
            for (var j = 0; j < count; j++) {
                // convenience vars
                x = w * j;
                y = h * i;
                xnorm = x / cw;
                ynorm = y / ch;

                // shift and clip
                ctx.translate(x, y);
                clipSquare(ctx, w, h, background);

                _circle();

                // unshift, unclip
                ctx.restore();
                (0, _utils.resetTransform)(ctx);
            }
        }
    }

    // mode
    function triangles(background) {
        background = background || bg;
        for (var i = 0; i < vcount; i++) {
            for (var j = 0; j < count; j++) {
                // convenience vars
                x = w * j;
                y = h * i;
                xnorm = x / cw;
                ynorm = y / ch;

                // shift and clip
                ctx.translate(x, y);
                clipSquare(ctx, w, h, background);

                _triangle();

                // unshift, unclip
                ctx.restore();
                (0, _utils.resetTransform)(ctx);
            }
        }
    }

    // mode
    function mixed(background) {
        background = background || bg;
        var px = void 0,
            py = void 0,
            seed = void 0;
        var styles = [function () {
            renderer = _shapes.drawCircle;
            px = 0;
            py = 0;
        }];

        for (var i = 0; i < vcount; i++) {
            for (var j = 0; j < count; j++) {
                // convenience vars
                x = w * j;
                y = h * i;
                xnorm = x / cw;
                ynorm = y / ch;

                // shift and clip
                ctx.translate(x, y);
                clipSquare(ctx, w, h, background);

                switch (Math.round((0, _utils.randomInRange)(1, 12))) {
                    case 1:
                    case 2:
                    case 3:
                    case 4:
                        _circle();
                        break;
                    case 5:
                    case 6:
                    case 7:
                    case 8:
                        _square();
                        break;
                    case 9:
                    case 10:
                    case 11:
                    case 12:
                        _triangle();
                        break;
                }

                // unshift, unclip
                ctx.restore();
                (0, _utils.resetTransform)(ctx);
            }
        }
    }

    // secondary modes: re-iterate on the cells, draw a second layer on top.
    function dots() {
        for (var i = 0; i < vcount; i++) {
            for (var j = 0; j < count; j++) {
                if (Math.random() < 0.2) _dot();
                ctx.translate(w, 0);
            }
            // carriage return
            ctx.translate(-w * count, h);
        }
        (0, _utils.resetTransform)(ctx);
    }

    // gather our primary modes
    var modes = {
        circles: circles,
        triangles: triangles,
        mixed: mixed
    };

    // do the loop with one of our modes
    if (opts.style && modes[opts.style]) {
        renderer = modes[opts.style];
    } else {
        renderer = modes[(0, _utils.randItem)(Object.keys(modes))];
    }
    renderer(bg, weight);

    if (secondLayer) {
        fg = getContrastColor();
        ctx.globalAlpha = 0.8;
        renderer('transparent', opts.contrast ? weight / 2 : weight);
        ctx.globalAlpha = 1;
    }

    if (FANCY) {
        dots();
    }

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            // apply noise from supplied canvas
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            // create noise pattern and apply
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, w / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 21 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.circles = circles;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

var _colors = __webpack_require__(6);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.de_stijl,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true
};

var PI = Math.PI;

// Main function
function circles(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // available renderers
    var renderMap = {
        //circle: drawCircle,
        //ring: drawRing,
        triangle: _shapes.drawTriangle,
        square: _shapes.drawSquare,
        box: _shapes.drawBox,
        rect: _shapes.drawRect,
        pentagon: _shapes.drawPentagon,
        hexagon: _shapes.drawHexagon
    };
    var shapes = Object.keys(renderMap);
    var getRandomRenderer = function getRandomRenderer() {
        return renderMap[(0, _utils.randItem)(shapes)];
    };

    // util to draw a square and clip following rendering inside
    function clipSquare(ctx, w, h, color) {
        ctx.save();
        ctx.beginPath();
        ctx.rect(0, 0, w, h);
        ctx.fillStyle = color;
        ctx.closePath();
        ctx.fill();
        ctx.clip();
    }

    // color funcs
    var randomFill = function randomFill() {
        return "#" + Math.random().toString(16).slice(2, 8);
    };
    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // define grid
    var count = Math.round((0, _utils.randomInRange)(SCALE / 200, SCALE / 80));
    var w = Math.ceil(cw / count);
    var h = w;
    var vcount = Math.ceil(ch / h);

    // setup vars for each cell
    var x = 0;
    var y = 0;
    var xnorm = 0;
    var ynorm = 0;
    var renderer = void 0;

    // play with these random seeds
    var a = void 0,
        b = void 0,
        c = void 0;
    a = Math.random();
    b = Math.random();
    c = Math.random();

    // shared colors
    var bg = getSolidFill();
    //bg = 'white';


    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);
    var fg = getContrastColor();

    // mode
    function snakes() {
        ctx.lineCap = 'round';
        ctx.fillStyle = bg;
        ctx.fillRect(0, 0, cw, ch);

        var px = void 0,
            py = void 0;

        var weight = (0, _utils.randomInRange)(1, w / 10);
        var lightweight = Math.max(1, weight / 3);

        var c1 = getContrastColor();
        var c2 = getContrastColor();
        var dotColor = c1;

        var dotGradient = (0, _utils.getGradientFunction)([c1, c2, bg])(ctx, cw / 2, ch / 2);

        var set1 = [];
        var set2 = [];

        function loop(color) {
            var ringdefs = [];
            var start = void 0;
            var segments = void 0;
            var r = void 0;
            // hit each cell
            for (var i = 0; i < vcount; i++) {
                for (var j = 0; j < count; j++) {
                    // convenience vars
                    x = w * j;
                    y = h * i;
                    px = x + w / 2;
                    py = y + h / 2;
                    xnorm = px / cw;
                    ynorm = py / ch;

                    start = Math.round((0, _utils.randomInRange)(0, 4));
                    segments = Math.round((0, _utils.randomInRange)(1, 2));
                    r = w / 2 * Math.round((0, _utils.randomInRange)(1, 1));

                    ctx.strokeStyle = color;
                    ctx.lineWidth = weight;

                    dotColor = color;
                    if (Math.random() < 0.75) {
                        // draw circles for many
                        ringdefs.push([px, py, r, PI / 2 * start, PI / 2 * (start + segments), false]);
                    } else if (Math.random() < 0.25) {
                        // draw line
                        ctx.beginPath();
                        if (Math.random() < 0.5) {
                            ctx.moveTo(px, y);
                            ctx.lineTo(px + w, y);
                        } else {
                            ctx.moveTo(x, py);
                            ctx.lineTo(x, py + h);
                        }
                        ctx.stroke();
                    } else {
                        dotColor = fg;
                    }

                    if (Math.random() < 0.125) {
                        (0, _shapes.drawCircle)(ctx, px, py, w / 2 * (0, _utils.randItem)([0.25, 0.5, 1]) - weight / 2 + 0.5, { fill: dotGradient });
                    }

                    // unshift, unclip
                    //ctx.restore();
                    (0, _utils.resetTransform)(ctx);
                }
            }
            return ringdefs;
        }

        set1 = loop(c1);
        set2 = loop(c2);

        // draw rings
        ctx.strokeStyle = c1;
        ctx.lineWidth = weight;
        set1.forEach(function (def) {
            ctx.beginPath();
            ctx.arc.apply(ctx, _toConsumableArray(def));
            ctx.stroke();
        });

        ctx.strokeStyle = c2;
        ctx.lineWidth = weight;
        set2.forEach(function (def) {
            ctx.beginPath();
            ctx.arc.apply(ctx, _toConsumableArray(def));
            ctx.stroke();
        });
    }

    function triPoints(ctx, p1, p2, p3, color) {
        ctx.beginPath();
        ctx.moveTo.apply(ctx, _toConsumableArray(p1));
        ctx.lineTo.apply(ctx, _toConsumableArray(p2));
        ctx.lineTo.apply(ctx, _toConsumableArray(p3));
        ctx.closePath();
        ctx.strokeStyle = color;
        ctx.stroke();
    }

    // mode
    function rings() {
        ctx.lineCap = 'round';
        ctx.fillStyle = bg;
        ctx.fillRect(0, 0, cw, ch);

        var px = void 0,
            py = void 0;

        var weight = (0, _utils.randomInRange)(1, w / 10);
        var lightweight = Math.max(0.5, weight / 3);

        console.log(count + ' by ' + vcount + ' cells');

        var c1 = getContrastColor();
        var c2 = getContrastColor();
        var dotColor = c1;

        var ringdefs = [];
        var centers = [];
        var r = void 0;

        // threshold to draw or not draw at a given cell
        var threshold = 0.5 - .25 * (count / 10);
        console.log('count:', count, 'threshold:', threshold);

        // hit each cell
        for (var i = 0; i < vcount; i++) {
            for (var j = 0; j < count; j++) {
                // convenience vars
                x = w * j;
                y = h * i;
                px = x + w / 2;
                py = y + h / 2;
                xnorm = px / cw;
                ynorm = py / ch;

                var start = Math.round((0, _utils.randomInRange)(0, 4));
                var segments = (0, _utils.randItem)([1, 1, 1, 2, 2, 2, 3, 3, 3, 4]);
                r = w / 2 * Math.round((0, _utils.randomInRange)(1, 3));

                ctx.strokeStyle = fg;
                ctx.lineWidth = lightweight;

                if (Math.random() < threshold) {
                    centers.push([px, py]);
                    ringdefs.push([px, py, r, PI / 2 * start, PI / 2 * (start + segments), false]);
                    dotColor = fg;

                    var _a = (0, _utils.randomInRange)(PI / 2 * start, PI / 2 * (start + segments));
                    ctx.beginPath();
                    ctx.moveTo(px, py);
                    ctx.lineTo(px + r * Math.cos(_a), py + r * Math.sin(_a));
                    ctx.stroke();
                } else {
                    dotColor = c1;
                    (0, _shapes.drawCircle)(ctx, px, py, lightweight, { fill: dotColor });
                }

                // unshift, unclip
                //ctx.restore();
                (0, _utils.resetTransform)(ctx);
            }
        }

        // draw connecting lines between dots
        var centers_copy = [].concat(centers);
        ctx.strokeStyle = c1;
        ctx.lineWidth = Math.max(lightweight / 2, 0.5);
        while (centers_copy.length >= 2) {
            ctx.beginPath();
            ctx.moveTo.apply(ctx, _toConsumableArray(centers_copy.pop()));
            ctx.lineTo.apply(ctx, _toConsumableArray(centers_copy.shift()));
            ctx.stroke();
        }

        // draw dots
        centers.forEach(function (c) {
            (0, _shapes.drawCircle)(ctx, c[0], c[1], lightweight, { fill: fg });
        });

        // draw rings
        ctx.strokeStyle = fg;
        ctx.lineWidth = weight;
        ringdefs.forEach(function (def) {
            ctx.beginPath();
            ctx.arc.apply(ctx, _toConsumableArray(def));
            ctx.stroke();
        });
    }

    // mode
    function pattern() {
        var c1 = (0, _utils.randomInRange)(0.125, 0.25);
        var c2 = (0, _utils.randomInRange)(.4, 0.8);

        //c1 = 0.00025;
        //c2 = 0.8;

        //c2 = 10;

        var dotScale = (0, _utils.randomInRange)(0.1, 0.5);
        var dotMin = (0, _utils.randomInRange)(0, 0.5 - dotScale);
        var dotFill = getContrastColor();
        var dotSign = Math.random() < 0.5;

        //dotFill = '#ffcc00';
        //dotFill = '#2222aa';

        var xref = Math.random();
        var yref = Math.random();
        if (Math.random() < 0.9999995) {
            xref = yref = 0.5;
        }

        var crossDots = true; //Math.random() < 0.5;
        var crossFill = Math.random() < 0.5 ? fg : bg;
        crossFill = bg;
        var crossScale = (0, _utils.randomInRange)(0.25, .3) * w;

        var cr = void 0;

        var crossPattern = function crossPattern(r) {
            (0, _shapes.drawCircle)(ctx, w * r, h / 2, w * r, { fill: null, stroke: fg });
            (0, _shapes.drawCircle)(ctx, -w * (r - 1), h / 2, w * r, { fill: null, stroke: fg });

            (0, _shapes.drawCircle)(ctx, w / 2, h * r, w * r, { fill: null, stroke: fg });
            (0, _shapes.drawCircle)(ctx, w / 2, -h * (r - 1), h * r, { fill: null, stroke: fg });
        };

        // base line weight
        var weight = (0, _utils.randomInRange)(1, w / 60);
        var gridWeight = weight * (0, _utils.randItem)([1, 1.5, 2]);
        var crossWeight = weight * (0, _utils.randItem)([1, 1.5, 2]);

        ctx.lineWidth = weight;
        console.log('cell width', w, 'line', weight);

        var gridR = w / 2;
        gridR = w * (0, _utils.randomInRange)(0.125, 0.5);

        for (var i = 0; i < vcount; i++) {
            for (var j = 0; j < count; j++) {
                // convenience vars
                x = w * j;
                y = h * i;
                xnorm = (x + w / 2) / cw;
                ynorm = (y + h / 2) / ch;

                // shift and clip
                ctx.translate(x, y);
                clipSquare(ctx, w, h, bg);

                ctx.lineWidth = gridWeight;
                // fg = '#000099';
                // fg = '#2222aa';

                (0, _shapes.drawCircle)(ctx, 0, 0, gridR, { fill: null, stroke: fg });
                (0, _shapes.drawCircle)(ctx, w, 0, gridR, { fill: null, stroke: fg });
                (0, _shapes.drawCircle)(ctx, w, h, gridR, { fill: null, stroke: fg });
                (0, _shapes.drawCircle)(ctx, 0, h, gridR, { fill: null, stroke: fg });

                // fg = '#990000';
                // fg = '#2222aa';
                ctx.lineWidth = crossWeight;

                crossPattern(c1);
                crossPattern(c2);

                if (crossDots && i % 2 === j % 2) {
                    (0, _shapes.drawCircle)(ctx, w / 2, h / 2, crossScale, { fill: crossFill, stroke: fg });
                }

                cr = Math.sqrt(Math.pow(xnorm - xref, 2) + Math.pow(ynorm - yref, 2)) / .7071;
                if (dotSign) {
                    cr = 1 - cr;
                }
                cr = Math.abs(cr);

                (0, _shapes.drawCircle)(ctx, w / 2, h / 2, dotMin + dotScale * w * cr, { fill: dotFill, stroke: fg });

                // drawCircle(ctx,
                //     w/2,
                //     h/2,
                //     dotMin + dotScale * w * cr + ctx.lineWidth * 2,
                //     {fill: null, stroke: fg});


                // unshift, unclip
                ctx.restore();
                (0, _utils.resetTransform)(ctx);
            }
        }
    }

    // gather our modes
    var modes = { snakes: snakes, rings: rings, pattern: pattern };

    // do the loop with one of our modes
    if (opts.style && modes[opts.style]) {
        renderer = modes[opts.style];
    } else {
        renderer = modes[(0, _utils.randItem)(Object.keys(modes))];
    }
    renderer();

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, w / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 22 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.mesh = mesh;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.de_stijl,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true
};

function mesh(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // DRAW --------------------------------------

    // define grid
    var count = Math.round((0, _utils.randomInRange)(3, 30));
    var w = cw / count;
    var h = w;
    var vcount = Math.ceil(ch / h);

    // setup vars for each cell
    var x = 0;
    var y = 0;
    var xnorm = 0;
    var ynorm = 0;
    var renderer = void 0;

    // play with these random seeds
    var a = void 0,
        b = void 0,
        c = void 0;
    a = Math.random();
    b = Math.random();
    c = Math.random();

    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // shared colors
    var fg = void 0; // hold on…
    var bg = getSolidFill(); // pick a bg

    // get palette of non-bg colors
    var contrastPalette = (0, _utils.shuffle)([].concat(opts.palette));
    contrastPalette.splice(contrastPalette.indexOf(bg), 1);
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);

    fg = getContrastColor(); // fg is another color


    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.lineWidth = (0, _utils.randomInRange)(1, 4) * SCALE / 800;

    ctx.strokeStyle = fg;

    var R = (0, _utils.randomInRange)(2, 5) * SCALE / 800; // dot radius
    var r = R; // radius per node
    var dotFill = (0, _utils.randItem)([fg, fg, 'transparent']);
    // probability thresholds to draw connections
    var drawUp = 0.25;
    var drawLeft = 0.25;
    var drawDL = 0.25;
    var drawDR = 0.25;
    var drawRing = 0.05;
    var isConnected = 0;

    var rTransform = (0, _utils.randItem)([function () {
        return R;
    }, // no scaling
    function () {
        // scale sin curve heavy center
        return 0.5 + (R * Math.sin(xnorm * Math.PI) + R * Math.sin(ynorm * Math.PI)) / 2;
    }, function () {
        // scale away from center linearly
        return 1 + R / 2 * pr;
    }]);

    var pr = void 0; // radius from center

    // choose a connection mode, which determines frequency
    // of the connection types
    var connectionMode = (0, _utils.randItem)([function () {}, // normal/uniform
    function () {}, // normal/uniform
    function () {}, // normal/uniform
    function () {
        // sweep up: bias diagonals on the left/right edge.
        // bias verticals toward the middle
        drawUp = 0.5 * Math.sin(xnorm * Math.PI);
        drawLeft = 0.05;
        drawDL = 0.75 * xnorm;
        drawDR = 0.75 * (1 - xnorm);
    }, function () {
        // sidways and diagonals
        drawUp = drawDR = 0;
        drawLeft = 0.3;
        drawDL = 0.2;
        drawRing = 0.1;
    }, function () {
        // vert and other diagonal
        drawLeft = drawDL = 0;
        drawUp = 0.3;
        drawDR = 0.2;
        drawRing = 0.2;
    }]);

    // Pick the item from @palette by converting the normalized @factor
    // to its nearest index
    var mapToPalette = function mapToPalette(palette, factor) {
        factor = factor % 1; // loop
        return palette[Math.round(factor * (palette.length - 1))];
    };
    var loopPalette = function loopPalette(palette, index) {
        return palette[index % palette.length];
    };

    // reference point is center by default
    var refPoint = [0.5, 0.5];
    if (Math.random() < 0.5) {
        // unless we randomize the refernce point!
        refPoint = [Math.random(), Math.random()];
    }

    // choose stroke color scheme
    var multiColorStrokes = Math.random() < 0.25;

    // work through the points
    for (var i = 0; i < vcount; i++) {
        for (var j = 0; j < count; j++) {
            // convenience vars
            x = w * j + w / 2;
            y = h * i + h / 2;
            xnorm = x / cw;
            ynorm = y / ch;

            isConnected = 0;

            // get distance to reference point
            pr = Math.sqrt(Math.pow(xnorm - refPoint[0], 2) + Math.pow(ynorm - refPoint[1], 2));

            // set dot radius, and draw it
            r = rTransform();
            (0, _shapes.drawCircle)(ctx, x, y, r, { fill: dotFill });

            // adjust connection weights, chosen above
            connectionMode();

            // start drawing connections
            ctx.globalCompositeOperation = 'destination-over';
            ctx.beginPath();
            if (i > 0 && Math.random() < drawUp) {
                if (multiColorStrokes) {
                    ctx.strokeStyle = loopPalette(contrastPalette, 0);
                }
                ctx.moveTo(x, y);
                ctx.lineTo(x, y - h);
                isConnected++;
            }
            if (j > 0 && Math.random() < drawLeft) {
                if (multiColorStrokes) {
                    ctx.strokeStyle = loopPalette(contrastPalette, 1);
                }
                ctx.moveTo(x, y);
                ctx.lineTo(x - w, y);
                isConnected++;
            }
            if (i > 0 && j < count - 1 && Math.random() < drawDL) {
                if (multiColorStrokes) {
                    ctx.strokeStyle = loopPalette(contrastPalette, 2);
                }
                ctx.moveTo(x, y);
                ctx.lineTo(x + w, y - h);
                isConnected++;
            }
            if (i > 0 && j > 0 && Math.random() < drawDR) {
                if (multiColorStrokes) {
                    ctx.strokeStyle = loopPalette(contrastPalette, 3);
                }
                ctx.moveTo(x, y);
                ctx.lineTo(x - w, y - h);
                isConnected++;
            }
            ctx.stroke();
            ctx.closePath();
            ctx.globalCompositeOperation = 'normal';

            // occasionally add rings
            if (isConnected && Math.random() < drawRing) {
                ctx.lineWidth = ctx.lineWidth / 2;
                (0, _shapes.drawCircle)(ctx, x, y, w / 3, { fill: null, stroke: fg });
                ctx.lineWidth = ctx.lineWidth * 2;
                ctx.strokeStyle = fg;
            }
        }
    }

    ctx.globalCompositeOperation = 'destination-over';
    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, cw, ch);
    ctx.globalCompositeOperation = 'normal';

    // END DRAW --------------------------------------

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, w / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 23 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.walk = walk;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.de_stijl,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true

    /*
     * Draw survival curves. Pick a bunch of walkers, step along
     * a grid. At each point, choose to go right or down.
     * Save the points according to type (down/right).
     * Decorate the line segments and the grid points.
     * Pick the rightmost and downmost points in each row/column, and
     * decorate those by extending lines to the edges.
     */
};function walk(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // DRAW --------------------------------------

    // define grid
    var count = Math.round((0, _utils.randomInRange)(10, 30));
    var w = cw / count;
    var h = w;
    var vcount = Math.ceil(ch / h);

    // setup vars for each cell
    var x = 0;
    var y = 0;
    var xnorm = 0;
    var ynorm = 0;
    var renderer = void 0;

    // play with these random seeds
    var a = void 0,
        b = void 0,
        c = void 0;
    a = Math.random();
    b = Math.random();
    c = Math.random();

    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // shared colors
    var fg = void 0; // hold on…
    var bg = getSolidFill(); // pick a bg

    // get palette of non-bg colors
    var contrastPalette = (0, _utils.shuffle)([].concat(opts.palette));
    contrastPalette.splice(contrastPalette.indexOf(bg), 1);
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);

    fg = getContrastColor(); // fg is another color

    var baseWidth = (0, _utils.randomInRange)(1, 4) * SCALE / 800;

    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.lineWidth = baseWidth;
    ctx.strokeStyle = fg;

    var R = (0, _utils.randomInRange)(1, 4) * SCALE / 800; // dot radius
    var r = R; // radius per node
    var dotFill = fg; // randItem([fg, fg, 'transparent']);
    // probability thresholds to draw connections

    var modes = ['descend', 'survival'];
    var MODENAME = (0, _utils.randItem)(modes);

    var drawOverlap = MODENAME !== 'survival';

    var walkers = [];
    var tracks = [];

    var walkerCount = Math.round((0, _utils.randomInRange)(2, 20));
    while (walkerCount--) {
        walkers.push({
            x: MODENAME === 'survival' ? 0 : Math.round((0, _utils.randomInRange)(2, count - 2)),
            y: 0,
            dir: 1 // right or left
        });
    }
    tracks = walkers.map(function (w) {
        return [];
    });

    // threshold to go right vs down
    var goH = 0.5;

    var pr = void 0; // radius from center

    // Pick the item from @palette by converting the normalized @factor
    // to its nearest index
    var mapToPalette = function mapToPalette(palette, factor) {
        factor = factor % 1; // loop
        return palette[Math.round(factor * (palette.length - 1))];
    };

    // reference point is center by default
    var refPoint = [0.5, 0.5];
    if (Math.random() < 0.5) {
        // unless we randomize the refernce point!
        refPoint = [Math.random(), Math.random()];
    }

    // choose stroke color scheme
    var multiColorStrokes = Math.random() < 0.25;

    // arrays to save the places where we chose right or down
    var rightDots = [];
    var downDots = [];
    var leftDots = [];

    // Walking function
    var survival = function survival(walker, i) {
        // For each walker, step till you hit the edges.
        // At each point, choose to go right or down.
        // Save the point into the appropriate dot array after choosing.
        var track = tracks[i];
        while (walker.x < count && walker.y < vcount) {
            if (Math.random() < goH) {
                walker.x += 1;
                rightDots.push([walker.x, walker.y]);
            } else {
                walker.y += 1;
                downDots.push([walker.x, walker.y]);
            }
            track.push([walker.x, walker.y]);
        }
    };

    // Walking function
    var descend = function descend(walker, i) {
        // For each walker, step till you hit the edges.
        // At each point, choose to go right or down.
        // Save the point into the appropriate dot array after choosing.

        var track = tracks[i];
        var start = true; // first step should always go down, so set a flag

        track.push([walker.x, walker.y]);

        while (walker.x < count && walker.y < vcount) {
            if (!start && Math.random() < goH) {
                walker.x += 1 * walker.dir;
                if (walker.dir > 0) {
                    rightDots.push([walker.x, walker.y]);
                } else {
                    leftDots.push([walker.x, walker.y]);
                }
            } else {
                walker.y += 1;
                downDots.push([walker.x, walker.y]);
                walker.dir *= -1;
            }
            start = false;
            track.push([walker.x, walker.y]);
        }
    };

    var rightColor = getContrastColor();
    var leftColor = getContrastColor();
    var downColor = getContrastColor();

    // pick a decoration scheme, each with a right and down decorator function
    var decoration = (0, _utils.randItem)([
    // dots
    {
        rightDeco: function rightDeco(d, i) {
            var _ref = [].concat(_toConsumableArray(d)),
                x = _ref[0],
                y = _ref[1];

            (0, _shapes.drawCircle)(ctx, x * w - w / 2, y * h - h / 2, r, { fill: rightColor });
        },
        leftDeco: function leftDeco(d, i) {
            var _ref2 = [].concat(_toConsumableArray(d)),
                x = _ref2[0],
                y = _ref2[1];

            (0, _shapes.drawCircle)(ctx, x * w + w / 2, y * h - h / 2, r, { fill: leftColor });
        },
        downDeco: function downDeco(d, i) {
            var _ref3 = [].concat(_toConsumableArray(d)),
                x = _ref3[0],
                y = _ref3[1];

            (0, _shapes.drawCircle)(ctx, x * w - w / 2, y * h - h / 2, r, { fill: downColor });
        }
    },
    // squares right, dots down. sized to fit inside each other
    {
        rightDeco: function rightDeco(d, i) {
            var _ref4 = [].concat(_toConsumableArray(d)),
                x = _ref4[0],
                y = _ref4[1];

            (0, _shapes.drawSquare)(ctx, x * w - w / 2, y * h - h / 2, w / 4, { fill: rightColor });
        },
        leftDeco: function leftDeco(d, i) {
            var _ref5 = [].concat(_toConsumableArray(d)),
                x = _ref5[0],
                y = _ref5[1];

            (0, _shapes.drawSquare)(ctx, x * w + w / 2, y * h - h / 2, w / 4, { fill: leftColor });
        },
        downDeco: function downDeco(d, i) {
            var _ref6 = [].concat(_toConsumableArray(d)),
                x = _ref6[0],
                y = _ref6[1];

            (0, _shapes.drawCircle)(ctx, x * w - w / 2, y * h - h / 2, w / 6, { fill: downColor });
        }
    },
    // half-square triangles pointing right or down
    {
        rightDeco: function rightDeco(d, i) {
            var _ref7 = [].concat(_toConsumableArray(d)),
                x = _ref7[0],
                y = _ref7[1];

            ctx.beginPath();
            ctx.moveTo(x * w - w * .25, y * h - h / 2);
            ctx.lineTo(x * w - w * .5, y * h - h * .25 - h / 2);
            ctx.lineTo(x * w - w * .5, y * h + h * .25 - h / 2);
            ctx.closePath();
            ctx.fillStyle = rightColor;
            ctx.fill();
        },
        leftDeco: function leftDeco(d, i) {
            var _ref8 = [].concat(_toConsumableArray(d)),
                x = _ref8[0],
                y = _ref8[1];

            ctx.beginPath();
            ctx.moveTo(x * w + w * .25, y * h - h / 2);
            ctx.lineTo(x * w + w * .5, y * h - h * .25 - h / 2);
            ctx.lineTo(x * w + w * .5, y * h + h * .25 - h / 2);
            ctx.closePath();
            ctx.fillStyle = leftColor;
            ctx.fill();
        },
        downDeco: function downDeco(d, i) {
            var _ref9 = [].concat(_toConsumableArray(d)),
                x = _ref9[0],
                y = _ref9[1];

            ctx.beginPath();
            ctx.moveTo(x * w - w / 2, y * h - h * .25);
            ctx.lineTo(x * w - w * .25 - w / 2, y * h - h * .5);
            ctx.lineTo(x * w + w * .25 - w / 2, y * h - h * .5);
            ctx.closePath();
            ctx.fillStyle = downColor;
            ctx.fill();
        }
    }]);

    // run the walkers to draw the main lines
    var walkFunc = MODENAME === 'survival' ? survival : descend;
    walkers.forEach(walkFunc);

    // util to draw the path of a track
    var drawTrack = function drawTrack(track, width, color) {
        ctx.lineWidth = width;
        ctx.strokeStyle = color;
        ctx.beginPath();
        ctx.moveTo(track[0][0] * w, track[0][1] * h);
        track.forEach(function (p, i) {
            ctx.lineTo(p[0] * w, p[1] * h);
        });
        ctx.stroke();
    };

    // draw the lines
    tracks.forEach(function (track) {
        drawOverlap && drawTrack(track, baseWidth * 3, bg);
        drawTrack(track, baseWidth, fg);
    });

    // will contain the rightmost and downmost dots in each row and column
    var rightMax = [];
    var leftMax = [];
    var downMax = [];

    // run through the points and assign the rightmost and downmost points
    tracks.forEach(function (t) {
        t.forEach(function (d) {
            var _ref10 = [].concat(_toConsumableArray(d)),
                x = _ref10[0],
                y = _ref10[1];

            if (!rightMax[y] || x > rightMax[y]) {
                rightMax[y] = x;
            }
            if (!leftMax[y] || x < leftMax[y]) {
                leftMax[y] = x;
            }
            if (!downMax[x] || y > downMax[x]) {
                downMax[x] = y;
            }
        });
    });

    // use a narrow line for the grid extensions
    ctx.lineWidth = Math.max(ctx.lineWidth / 2, 0.5);

    var rightLine = function rightLine(d, i) {
        ctx.beginPath();
        ctx.moveTo(d * w + w / 2 + ctx.lineWidth, i * h + h / 2);
        ctx.lineTo(cw, i * h + h / 2);
        ctx.strokeStyle = rightColor;
        ctx.stroke();
    };

    var leftLine = function leftLine(d, i) {
        ctx.beginPath();
        ctx.moveTo(d * w - w / 2 - ctx.lineWidth, i * h + h / 2);
        ctx.lineTo(0, i * h + h / 2);
        ctx.strokeStyle = leftColor;
        ctx.stroke();
    };

    var downLine = function downLine(d, i) {
        ctx.beginPath();
        ctx.moveTo(i * w + w / 2, d * h + h / 2 + ctx.lineWidth);
        ctx.lineTo(i * w + w / 2, ch);
        ctx.strokeStyle = downColor;
        ctx.stroke();
    };

    // draw lines from rightmost and downmost dots to boundaries
    rightMax.forEach(rightLine);

    if (MODENAME === 'descend') {
        leftMax.forEach(leftLine);
    } else if (MODENAME === 'survival') {
        downMax.forEach(downLine);
    }

    // execute the decoration functions on each junction dot
    rightDots.forEach(decoration.rightDeco);
    leftDots.forEach(decoration.leftDeco);
    downDots.forEach(decoration.downDeco);

    // composite in the background
    ctx.globalCompositeOperation = 'destination-over';
    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, cw, ch);
    ctx.globalCompositeOperation = 'normal';

    // END DRAW --------------------------------------

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, w / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 24 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.bands = bands;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

var _colors = __webpack_require__(6);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.fingerspitzen,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true
};

var PI = Math.PI;

// Main function
function bands(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // util to draw a square and clip following rendering inside
    function clipSquare(ctx, w, h, color) {
        ctx.save();
        ctx.beginPath();
        ctx.rect(0, 0, w, h);
        ctx.fillStyle = color;
        ctx.closePath();
        ctx.fill();
        ctx.clip();
    }

    // color funcs
    var randomFill = function randomFill() {
        return "#" + Math.random().toString(16).slice(2, 8);
    };
    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // shared colors
    var bg = getSolidFill();

    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);
    var fg = getContrastColor();

    // draw

    var count = Math.round((0, _utils.randomInRange)(70, 90));
    var baseStep = cw / count;
    var step = 0;

    var _x = 0;
    var jitter = 0.4;

    ctx.strokeStyle = 'black';

    var _h = void 0;
    var _y = void 0;
    var _w = void 0;

    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, cw, ch);

    // bands
    for (var i = 0; i <= count; i++) {
        step = baseStep * (0, _utils.randomInRange)(1 - jitter, 1 + jitter);
        _x += step;

        // maybe draw a ghosty band in the background
        if (Math.random() < 0.1) {
            ctx.fillStyle = '#e7e7e7';
            ctx.fillRect(_x, 0, step * (0, _utils.randItem)([1, 2, 3, 4]), ch);
        }

        // set width, height, placement of this colored box
        _w = step * (0, _utils.randomInRange)(0.8, 1);
        _h = ch * (0, _utils.randomInRange)(0.2, 0.7);
        _y = (0, _utils.randomInRange)(0, ch);

        // draw the box
        if (Math.random() < 0.66) {
            ctx.beginPath();
            ctx.fillStyle = getSolidFill();
            ctx.fillRect(_x - _w, _y - _h / 2, _w, _h);
        }

        // draw the dividing band
        ctx.lineWidth = (0, _utils.randomInRange)(0.25, 2);
        ctx.beginPath();
        ctx.moveTo(_x, 0);
        ctx.lineTo(_x, ch);
        ctx.stroke();
    }

    // draw cross band

    var m1 = (0, _utils.randomInRange)(-0.2, 0.2); // slope 1
    var m2 = (0, _utils.randomInRange)(-0.2, 0.2); // slope 2

    var p1 = void 0,
        h1 = void 0; // box 1 placement and height
    var p2 = void 0,
        h2 = void 0;

    p1 = ch * (0, _utils.randomInRange)(0.1, 0.3);
    h1 = ch * (0, _utils.randomInRange)(0.175, 0.275);

    p2 = ch * (0, _utils.randomInRange)(0.1, 0.3);
    h2 = ch * (0, _utils.randomInRange)(0.175, 0.275);

    // box 1
    var box1 = [[0, p1], [cw, p1 + m1 * cw], [cw, p1 + h1 + m1 * cw], [0, p1 + h1]];
    var box2 = [[0, p2], [cw, p2 + m2 * cw], [cw, p2 + h2 + m2 * cw], [0, p2 + h2]];

    ctx.save();
    ctx.fillStyle = getContrastColor();
    ctx.beginPath();

    box1.forEach(function (p, i) {
        if (i === 0) ctx.moveTo.apply(ctx, _toConsumableArray(p));else ctx.lineTo.apply(ctx, _toConsumableArray(p));
    });

    box2.forEach(function (p, i) {
        if (i === 0) ctx.moveTo.apply(ctx, _toConsumableArray(p));else ctx.lineTo.apply(ctx, _toConsumableArray(p));
    });

    ctx.closePath();
    ctx.clip();

    // draw color blocks
    var boxCount = (0, _utils.randItem)([3, 4, 5]);
    var boxWidth = cw / boxCount;
    var boxLeft = 0;
    var boxTop = p1;
    //let cut = randomInRange(topRange[1], bottomRange[0]);
    // top set
    for (var i = 0; i < boxCount; i++) {
        ctx.beginPath();
        //ctx.rect(boxLeft, ch * topRange[0], boxLeft + boxWidth, ch * cut);
        ctx.moveTo(boxLeft, boxTop);
        ctx.lineTo(boxLeft + boxWidth, boxTop + m1 * boxWidth);
        ctx.lineTo(boxLeft + boxWidth, h1 + boxTop + m1 * boxWidth);
        ctx.lineTo(boxLeft, boxTop + h1);
        ctx.fillStyle = getContrastColor();
        ctx.fill();
        boxLeft += boxWidth;
        boxTop += boxWidth * m1;
    }
    // bottom set
    boxLeft = 0;
    boxTop = p2;
    for (var i = 0; i < boxCount; i++) {
        ctx.beginPath();
        //ctx.rect(boxLeft, ch * topRange[0], boxLeft + boxWidth, ch * cut);
        ctx.moveTo(boxLeft, boxTop);
        ctx.lineTo(boxLeft + boxWidth, boxTop + m2 * boxWidth);
        ctx.lineTo(boxLeft + boxWidth, h2 + boxTop + m2 * boxWidth);
        ctx.lineTo(boxLeft, boxTop + h2);
        ctx.fillStyle = getContrastColor();
        ctx.fill();
        boxLeft += boxWidth;
        boxTop += boxWidth * m2;
    }

    // unclip
    ctx.restore();

    // box it in
    var borderWidth = SCALE / (0, _utils.randomInRange)(30, 50);
    ctx.lineWidth = borderWidth;
    ctx.strokeStyle = 'black';
    ctx.beginPath();
    ctx.rect(0, 0, cw, ch);
    ctx.stroke();

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, w / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 25 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.trails = trails;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _hexScatter = __webpack_require__(4);

var _hexScatter2 = _interopRequireDefault(_hexScatter);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

var _fieldUtils = __webpack_require__(5);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var PI = Math.PI;
var FIELDMODES = ['harmonic', 'flow'];
var GRIDMODES = ['normal', 'scatter', 'random'];
var COLORMODES = ['length', 'curve', 'change', /*'origin',*/'mono', 'duo', 'random'];
var STYLES = ['round', 'square'];

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.de_stijl,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true,
    fieldMode: 'auto', // [auto, harmonic, flow]
    gridMode: 'scatter', // from GRIDMODES
    colorMode: 'auto', // from COLORMODES
    style: 'auto', // from STYLES
    fieldNoise: 'auto', // mapped to values below
    mixWeight: false,
    isolate: true

    // Main function
};function trails(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var RENDERTOSVG = opts.renderTo === 'svg';

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);
    var LONG = Math.max(cw, ch);
    var SHORT = Math.min(cw, ch);
    var AREA = cw * ch;

    // Find or create canvas child
    var svg = void 0;
    if (RENDERTOSVG) {
        svg = container.querySelector('svg');
        svg.innerHTML = '';
        svg.setAttribute('width', cw);
        svg.setAttribute('height', ch);
        svg.setAttribute('viewBox', '0 0 ' + cw + ' ' + ch);
    }
    // for RENDERTOSVG
    var allpaths = '';

    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // modes and styles

    var FIELDMODE = opts.fieldMode === 'auto' ? (0, _utils.randItem)(FIELDMODES) : opts.fieldMode;
    var GRIDMODE = opts.gridMode === 'auto' ? (0, _utils.randItem)(GRIDMODES) : opts.gridMode;
    var COLORMODE = opts.colorMode === 'auto' ? (0, _utils.randItem)(COLORMODES) : opts.colorMode;
    var STYLE = opts.style === 'auto' ? (0, _utils.randItem)(STYLES) : opts.style;
    var FIELDNOISE = (0, _utils.mapKeywordToVal)({
        // hacky way to weight options by redundantly specifying
        'none': 0,
        'none2': 0,
        'none3': 0,
        'none4': 0,
        'low': 0.125,
        'low2': 0.125,
        'low3': 0.125,
        'med': 0.25,
        'med2': 0.25,
        'high': 0.5
    })(opts.fieldNoise, 'fieldNoise');

    console.log('==================================\nTrails:', FIELDMODE, GRIDMODE, COLORMODE, STYLE);
    if (RENDERTOSVG) {
        console.log('----> SVG rendering mode');
    }

    // color funcs
    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // how many cells are in the grid?
    var countMin = void 0,
        countMax = void 0;
    countMin = 80;
    countMax = 160;

    var cellSize = Math.round(SHORT / (0, _utils.randomInRange)(countMin, countMax));

    // setup vars for each cell
    var x = 0;
    var y = 0;
    var xnorm = 0;
    var ynorm = 0;
    var renderer = void 0;

    // shared colors
    var bg = getSolidFill();

    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    //contrastPalette.sort(()=>(randomInRange(-1, 1)));
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);
    var colorCount = contrastPalette.length;

    // shared foregrounds
    var fg = getContrastColor();
    var fg2 = getContrastColor();

    // draw background
    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, cw, ch);

    ctx.strokeStyle = fg;

    // trails:
    var rateMax = (0, _utils.randomInRange)(0.5, 5); // this is a bit meta and silly

    // tail vars
    var _x = void 0,
        _y = void 0,
        len = void 0;

    // line width
    var weight = SHORT / (0, _utils.randomInRange)(400, 75);

    ctx.lineWidth = weight;
    ctx.lineCap = STYLE;
    ctx.lineJoin = "bevel";

    // const used in normalizing transforms
    var maxLen = 2 * Math.sqrt(2);

    // It looks nice to extend lines beyond their cells. how much?
    // Scaled against cellSize
    var lineScale = (0, _utils.randomInRange)(0.7, 3);

    // Displace the center point of each cell by this factor
    // Only do this sometimes, and not when scattering
    var warp = 0;
    if (GRIDMODE !== 'scatter' && Math.random() < 0.5) {
        warp = (0, _utils.randomInRange)(0, Math.sqrt(2));
    }

    // Pick an opacity transform to use
    var opacityFunc = (0, _utils.randItem)((0, _fieldUtils.opacityTransforms)(maxLen));

    // a set of independent transforms to use while rendering
    var trans = {
        //xbase: createTransform(0, rateMax),
        //ybase: createTransform(0, rateMax),
        xtail: (0, _fieldUtils.createTransform)(0, rateMax),
        ytail: (0, _fieldUtils.createTransform)(0, rateMax),
        //radius: createTransform(0, rateMax),
        color: (0, _fieldUtils.createTransform)(0, 5 / SHORT) // change colors slowly
    };

    function randomScatter(size, w, h) {
        var pts = [];
        var xcount = Math.ceil(w / size);
        var ycount = Math.ceil(h / size);
        var count = xcount * ycount;
        while (count--) {
            pts.push([(0, _utils.randomInRange)(0, w), (0, _utils.randomInRange)(0, h)]);
        }
        return pts;
    }

    function placeNormal(size, w, h) {
        var pts = [];
        var xcount = Math.ceil(w / size) + 2;
        var ycount = Math.ceil(h / size) + 2;
        var count = xcount * ycount;
        var x = void 0,
            y = void 0;
        for (var i = 0; i < count; i++) {
            x = size * (i % xcount - 1) + size / 2;
            y = size * (Math.floor(i / ycount) - 1) + size / 2;
            pts.push([x, y]);
        }
        return pts;
    }

    var pts = [];

    switch (GRIDMODE) {
        case 'scatter':
            //pts = hexScatter(Math.round(SCALE/randomInRange(60,120)), cw, ch);
            pts = (0, _hexScatter2.default)(cellSize, cw, ch);
            break;
        case 'random':
            pts = randomScatter(cellSize, cw, ch);
            break;
        default:
            pts = placeNormal(cellSize, cw, ch);
    }

    // shuffle the points so trails are initialized randomly
    pts.sort(function () {
        return (0, _utils.randomInRange)(-1, 1);
    });

    // Create another canvas

    var ref = document.querySelector('#ref');
    if (!ref) {
        ref = document.createElement('canvas');
        ref.setAttribute('id', 'ref');
        ref.setAttribute('width', cw);
        ref.setAttribute('height', ch);
        ref.className = 'artContainer';
        //document.querySelector('body').appendChild(ref);
    }
    var rctx = ref.getContext('2d', { willReadFrequently: true });

    rctx.fillStyle = 'black';
    rctx.fillRect(0, 0, cw, ch);

    rctx.strokeStyle = 'white';
    rctx.lineWidth = weight * 2; // exclusion based on stroke
    rctx.lineCap = STYLE;

    // Field trails: for each point, follow the tail functions for
    // a bunch of steps. Seems to work well for 20-100 steps. With more steps
    // you have to fade out opacity as you go to remain legible
    var steps = void 0;
    var stepBase = (0, _utils.randomInRange)(6, 30); // vary this for each trail. See loop.
    lineScale = 0.7; // scalar of the function at each step. small=smooth.

    var dx = void 0,
        dy = void 0;

    ctx.globalAlpha = 1;
    //ctx.globalAlpha = 0.5;
    //ctx.globalCompositeOperation = 'overlay';

    ctx.lineWidth = weight;

    var colorVal = void 0; // color transform value
    var colorNorm = void 0; // color val normalized to palette

    var trace = [0, 0]; // color sample

    var tStart = new Date().getTime();

    // source/sink stuff
    var sourceTransform = (0, _fieldUtils.createSourceSinkTransform)(Math.round((0, _utils.randomInRange)(5, 15)));
    if (FIELDMODE === 'flow') {
        var totalStrength = 0;
        sourceTransform.sources.forEach(function (source) {
            totalStrength += source.strength;
        });
        lineScale = 1 / totalStrength;
    }

    // to avoid self blocking,
    // hold each trail and defer reference rendering till each is done.
    // This allows self intersection, but avoids self-interference when
    // each step is too small to avoid colliding with the last.
    var trail = [];

    if (!opts.isolate) {
        ctx.globalAlpha = (0, _utils.randomInRange)(0.5, 0.75);
        //ctx.globalCompositeOperation = 'overlay';
        stepBase = (0, _utils.randomInRange)(20, 40); // near normal max. TODO make this more interesting
        weight = (0, _utils.randomInRange)(0.5, 1.5); // thinner lines
        ctx.lineWidth = weight;
    }

    pts.forEach(function (p, i) {
        //ctx.strokeStyle = (i%2)? fg : fg2;
        //ctx.strokeStyle = (i%2)? 'white' : 'black';
        //ctx.strokeStyle = getContrastColor();

        steps = stepBase * (0, _utils.randomInRange)(1, 2);

        x = p[0];
        y = p[1];

        // check reference canvas at start point.
        if (opts.isolate) trace = rctx.getImageData(x, y, 1, 1).data;
        if (trace[0] > 5) {
            return;
        }

        var tlen = 0;
        var tCurve = 0;
        var tChange = 0;
        var angle = 0;
        var lastAngle = 0;
        var ddx = void 0,
            ddy = void 0;
        var lastDelta = [0, 0];

        if (opts.mixWeight) {
            ctx.lineWidth = weight * Math.tan(PI * (0, _utils.randomInRange)(0, 0.27));
            rctx.lineWidth = ctx.lineWidth * 2;
        }

        for (var z = 0; z <= steps; z++) {
            x = p[0];
            y = p[1];
            xnorm = x / cw;
            ynorm = y / ch;

            var xNoise = 0;
            var yNoise = 0;
            if (FIELDNOISE > 0) {
                xNoise = (0, _utils.randomInRange)(-1, 1) * FIELDNOISE;
                yNoise = (0, _utils.randomInRange)(-1, 1) * FIELDNOISE;
            }

            if (FIELDMODE === 'flow') {
                // flow fields (source-sink)
                var flow = sourceTransform.t(xnorm, ynorm);
                _x = flow[0];
                _y = flow[1];
            } else {
                // harmonic fields
                _x = trans.xtail(xnorm, ynorm);
                _y = trans.ytail(xnorm, ynorm);
            }

            // use lineScale to scale field effects, apply cellSize to both
            // field and noise factors
            dx = cellSize * (_x * lineScale + xNoise);
            dy = cellSize * (_y * lineScale + yNoise);

            // get ref sample
            if (opts.isolate) trace = rctx.getImageData(x + dx, y + dy, 1, 1).data;
            // stop if white
            if (trace[0] > 5) {
                continue;
            }

            // direct draw
            //ctx.beginPath();
            //ctx.moveTo(x, y);
            //ctx.lineTo(
            //    x + dx,
            //    y + dy
            //);
            //ctx.stroke();

            trail.push([x + dx, y + dy]);
            if (COLORMODE === 'length') {
                // tally up the length
                tlen += Math.sqrt(dx * dx + dy * dy);
            }
            if (COLORMODE === 'curve') {
                // add abs change in angle
                // tCurve += Math.abs((Math.atan((y+dy)/(x+dx)) - Math.atan(y/x)));
                angle = Math.atan(dy / dx);
                if (z > 0) {
                    // don't accumulate until second point, otherwise we include
                    // the initial angle of the root position in the tally
                    tCurve += Math.abs(angle - lastAngle);
                }
                lastAngle = angle;
            }
            if (COLORMODE === 'change') {
                ddx = dx - lastDelta[0];
                ddy = dy - lastDelta[1];
                tChange += Math.sqrt(ddx * ddx + ddy * ddy);
                lastDelta = [dx, dy];
            }

            p[0] = x + dx;
            p[1] = y + dy;
        }

        var trailStart = void 0;
        var trailEnd = void 0;

        // for RENDERTOSVG
        var plotpath = '';

        // Deferred drawing
        // foreach trail, render it
        if (trail.length) {
            trailStart = trail.shift();
            trailEnd = trail[trail.length - 1];

            if (RENDERTOSVG) {
                plotpath = '<path                 stroke-width="' + weight + '"                 stroke-linecap="' + STYLE + '" ';
            }

            // Colors

            if (COLORMODE === 'origin') {
                // set color as a function of position of trail origin
                colorVal = (trans.color(x, y) + 1) / 2;
                colorNorm = Math.round(colorVal * (contrastPalette.length - 1));
                ctx.strokeStyle = contrastPalette[colorNorm] || 'green';
            }

            if (COLORMODE === 'length') {
                colorVal = tlen / (stepBase * 2 * 3); // roughly the expected max length
                //console.log(colorVal);
                colorNorm = Math.round(colorVal * (colorCount - 1));
                ctx.strokeStyle = contrastPalette[colorNorm % colorCount] || 'green';
            }

            if (COLORMODE === 'curve') {
                colorVal = tCurve * 1.2; // magic number
                colorVal = colorVal % PI;
                //console.log(colorVal.toFixed(1));
                colorNorm = Math.round(colorVal * (colorCount - 1));
                ctx.strokeStyle = contrastPalette[colorNorm % colorCount] || 'green';
            }

            if (COLORMODE === 'change') {
                colorVal = tChange * 0.2; // magic number
                //console.log(colorVal.toFixed(1));
                colorNorm = Math.round(colorVal * (colorCount - 1));
                ctx.strokeStyle = contrastPalette[colorNorm % colorCount] || 'green';
            }

            if (COLORMODE === 'mono') {
                ctx.strokeStyle = fg;
            }

            if (COLORMODE === 'duo') {
                ctx.strokeStyle = (0, _utils.randItem)([fg, fg2]);
            }

            if (COLORMODE === 'random') {
                ctx.strokeStyle = getContrastColor();
            }

            // Start drawing

            ctx.beginPath();
            ctx.moveTo.apply(ctx, _toConsumableArray(trailStart));

            if (RENDERTOSVG) {
                plotpath += ' stroke="' + ctx.strokeStyle + '" fill="none" stroke-linecap="' + STYLE + '" ';
                plotpath += ' d="';
                plotpath += 'M' + trailStart[0].toPrecision(4) + ',' + trailStart[1].toPrecision(4);
            }

            if (opts.isolate) {
                rctx.beginPath();
                rctx.moveTo.apply(rctx, _toConsumableArray(trailStart));
            }

            trail.forEach(function (pt, i) {
                ctx.lineTo(pt[0], pt[1]);
                opts.isolate && rctx.lineTo(pt[0], pt[1]);
                if (RENDERTOSVG) {
                    plotpath += 'L' + pt[0].toPrecision(4) + ',' + pt[1].toPrecision(4);
                }
            });
            ctx.stroke();
            opts.isolate && rctx.stroke();
            trail = [];
            if (RENDERTOSVG) {
                plotpath += '" />';
                allpaths += plotpath;
            }
        }
    });

    if (RENDERTOSVG) {
        svg.innerHTML += allpaths;
    }

    ctx.globalAlpha = 1;

    var tEnd = new Date().getTime();

    console.log('rendered in ' + (tEnd - tStart) + 'ms');

    window.ctx = ctx;

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            // apply noise from supplied canvas
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            // create noise pattern and apply
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, cw / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl && !RENDERTOSVG) {
        container.innerHTML = '';
        container.appendChild(el);
    }
}

/***/ }),
/* 26 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.fragments = fragments;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.blush,
    drawGrid: 'auto', // [true, false, 'auto']
    addNoise: false, //0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true
};

function getFragmentsFromGrid() {
    var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
    var pts = arguments[1];

    var frags = [];
    var p1 = void 0,
        p2 = void 0,
        p3 = void 0;
    while (count--) {
        p1 = Math.round((0, _utils.randomInRange)(0, pts.length - 1));
        p2 = Math.round((0, _utils.randomInRange)(p1, pts.length - 1));
        p3 = Math.round((0, _utils.randomInRange)(p2, pts.length - 1));

        frags.push([pts[p1], pts[p2], pts[p3]]);
    }
    return frags;
}

function getFragmentsFromCanvas() {
    var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
    var cw = arguments[1];
    var ch = arguments[2];

    var frags = [];
    var getPoint = function getPoint(r) {
        var a = (0, _utils.randomInRange)(0, 2 * Math.PI);
        return [r * Math.sin(a) + cw / 2, r * Math.cos(a) + ch / 2];
    };
    var r = 0;
    var scale = Math.min(cw, ch);
    while (count--) {
        r = (0, _utils.randomInRange)(scale * 0.5, scale * 1.5);
        frags.push([getPoint(r), getPoint(r), getPoint(r)]);
    }
    return frags;
}

function getFragments() {
    var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
    var cw = arguments[1];
    var ch = arguments[2];

    var frags = [];
    var l = void 0,
        r = void 0;
    while (count--) {
        l = (0, _utils.randomInRange)(0, ch);
        r = (0, _utils.randomInRange)(0, ch);
        frags.push([[0, l], [cw, r], [cw, (0, _utils.randomInRange)(r, ch)], [0, (0, _utils.randomInRange)(l, ch)]]);
    }
    return frags;
}

function fragments(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx; // canvas ctx or svg tag

    ctx = el.getContext('2d');

    // auto opts
    if (opts.drawGrid === 'auto') {
        // draw grid usually
        opts.drawGrid = !!(Math.random() > 0.25);
    }

    // set up renderers
    var renderMap = {
        circle: _shapes.drawCircle,
        ring: _shapes.drawRing,
        triangle: _shapes.drawTriangle,
        square: _shapes.drawSquare,
        box: _shapes.drawBox,
        rect: _shapes.drawRect,
        pentagon: _shapes.drawPentagon,
        hexagon: _shapes.drawHexagon
    };
    var shapes = Object.keys(renderMap);
    var getRandomRenderer = function getRandomRenderer() {
        return renderMap[(0, _utils.randItem)(shapes)];
    };

    // shadow utils
    function addShadow(ctx) {
        var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
        var blur = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
        var opacity = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0.2;

        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = offset * SCALE / 400;
        ctx.shadowBlur = blur * SCALE / 400;
        ctx.shadowColor = 'rgba(0, 0, 0, ' + opacity + ')';
    }

    function removeShadow(ctx) {
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.shadowBlur = 0;
        ctx.shadowColor = 'transparent';
    }

    // set up grid
    var cols = Math.round((0, _utils.randomInRange)(5, 9));
    var w = cw / cols;
    var h = w;
    var rows = Math.ceil(ch / h);
    rows++;
    cols++;
    var count = rows * cols;

    var pts = [];
    for (var i = 0; i < count; i++) {
        pts.push([w * (i % rows), h * Math.floor(i / cols)]);
    }

    // set up drawing variables
    var x = 0;
    var y = 0;
    var xnorm = 0;
    var ynorm = 0;
    var renderer = void 0;

    // play with these
    var a = void 0,
        b = void 0,
        c = void 0;
    a = Math.random();
    b = Math.random();
    c = Math.random();

    // color funcs
    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);
    var getGradientFill = (0, _utils.getGradientFunction)(opts.palette);
    var getrandomFill = function getrandomFill() {
        return "#" + Math.random().toString(16).slice(2, 8);
    };

    // standard foreground and background colors
    var fg = getSolidFill();
    var bg = getGradientFill(ctx, cw, ch);

    // paint the background
    ctx.beginPath();
    ctx.rect(0, 0, cw, ch);
    ctx.fillStyle = bg;
    ctx.fill();
    ctx.closePath();

    // define triangles
    //let frags = getFragmentsFromGrid(Math.round(randomInRange(5, 15)), pts);
    //let frags = getFragmentsFromCanvas(Math.round(randomInRange(5, 10)), cw, ch);
    var frags = getFragments(Math.round((0, _utils.randomInRange)(5, 10)), cw, ch);

    // util: draw each fragment
    function drawFragments(ctx, frags, opts) {
        frags.forEach(function (f) {
            // skip some fragments
            if (Math.random() > 0.5) {
                return;
            }

            // add shadows, sometimes
            if (Math.random() > 0.25) {
                addShadow(ctx, (0, _utils.randomInRange)(3, 9), (0, _utils.randomInRange)(5, 15), (0, _utils.randomInRange)(0.15, 0.3));
            } else {
                removeShadow(ctx);
            }

            var frag = f.slice(0); // copy the points array since we will modify
            ctx.fillStyle = getGradientFill(ctx, cw, ch);
            ctx.beginPath();
            ctx.moveTo.apply(ctx, _toConsumableArray(frag.shift()));
            frag.forEach(function (p) {
                ctx.lineTo.apply(ctx, _toConsumableArray(p));
            });
            ctx.closePath();
            ctx.fill();
        });
        removeShadow(ctx);
    }

    // define masks
    var masks = [];
    var maskcount = Math.round((0, _utils.randomInRange)(3, 5));
    masks.push([[0, 0], [cw, 0], [cw, ch], [0, ch]]);
    while (maskcount--) {
        masks.push([[0, 0], [cw, 0], [cw, (0, _utils.randomInRange)(0, ch)], [0, (0, _utils.randomInRange)(0, ch)]]);
    }

    // For each mask, draw the path, clip into it, and draw fragments inside
    masks.forEach(function (m) {
        var _ctx, _ctx2, _ctx3, _ctx4;

        addShadow(ctx, cw, ch);
        ctx.save();
        ctx.beginPath();
        (_ctx = ctx).moveTo.apply(_ctx, _toConsumableArray(m[0]));
        (_ctx2 = ctx).lineTo.apply(_ctx2, _toConsumableArray(m[1]));
        (_ctx3 = ctx).lineTo.apply(_ctx3, _toConsumableArray(m[2]));
        (_ctx4 = ctx).lineTo.apply(_ctx4, _toConsumableArray(m[3]));
        ctx.closePath();
        ctx.fillStyle = 'black';
        //ctx.fill();
        ctx.clip();
        drawFragments(ctx, frags, opts);
        ctx.restore();
    });
    removeShadow(ctx);

    // draw grid
    if (opts.drawGrid) {
        for (var _i = 0; _i < rows; _i++) {
            //renderer = getRandomRenderer();
            renderer = _shapes.drawCircle;
            for (var j = 0; j < cols; j++) {
                // convenience vars
                x = w * j;
                y = h * _i;
                xnorm = x / cw;
                ynorm = y / ch;

                renderer(ctx, x, y, ch / 400, { fill: getSolidFill() });
            }
        }
    }

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, w / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 27 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.duos = duos;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _shapes = __webpack_require__(3);

var _utils = __webpack_require__(0);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var SILVERS = ['#ffffff', '#f2f2f2', '#eeeeee', '#e7e7e7', '#e0e0e0', '#d7d7d7'];

// Tile the container
function duos(options) {
    var defaults = {
        container: 'body',
        palette: _palettes2.default.terra_cotta_cactus,
        drawShadows: false,
        addNoise: 0.04,
        noiseInput: null,
        skew: 1, // normalized skew
        clear: true
    };
    var opts = {};
    opts = Object.assign(Object.assign(opts, defaults), options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);
    var LONG = Math.max(cw, ch);
    var SHORT = Math.min(cw, ch);
    var AREA = cw * ch;

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx; // canvas ctx or svg tag

    ctx = el.getContext('2d');

    // optional clear
    if (opts.clear) {
        el.width = container.offsetWidth;
        el.height = container.offsetHeight;
        ctx.clearRect(0, 0, cw, ch);
    }

    var renderer;
    var renderMap = {
        circle: _shapes.drawCircle,
        triangle: _shapes.drawExactTriangle,
        square: _shapes.drawSquare,
        ring: _shapes.drawRing
        /*pentagon: drawPentagon,
        hexagon: drawHexagon*/
    };
    var shapes = Object.keys(renderMap);

    // BEGIN RENDERING

    if (opts.drawShadows) {
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 3 * SHORT / 400;
        ctx.shadowBlur = 10 * SHORT / 400;
        ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
    }

    var shapeOpts = {};

    // draw two shape layers in some order:
    // shuffle shape list
    shapes.sort(function (a, b) {
        return (0, _utils.randomInRange)(-1, 1);
    });

    var shape1 = renderMap[(0, _utils.randItem)(shapes)];
    var r1 = SHORT * 0.33;
    var x1 = (0, _utils.randomInRange)(r1, cw - r1);
    var y1 = (0, _utils.randomInRange)(r1, ch - r1);
    var a1 = (0, _utils.randomInRange)(-1, 1) * Math.PI / 2;

    var shape2 = renderMap[(0, _utils.randItem)(shapes)];
    var r2 = SHORT * 0.33;
    var x2 = (0, _utils.randomInRange)(r2, cw - r2);
    var y2 = (0, _utils.randomInRange)(r2, ch - r2);
    var a2 = (0, _utils.randomInRange)(-1, 1) * Math.PI / 2;

    // sometimes, lock them to centerline with no angle
    if (Math.random() < 0.2) {
        x1 = x2 = cw / 2;
        a1 = a2 = 0;
    }

    // draw them

    // draw the first shape
    shape1(ctx, x1, y1, r1, {
        angle: a1,
        fill: (0, _utils.getLocalGradientFunction)(opts.palette)(ctx, x1, y1, r1 * (0, _utils.randomInRange)(0.75, 2))
    });

    // draw the second shape twice, using blend modes to draw
    // the intersecting and non-intersecting regions with different colors

    ctx.globalCompositeOperation = 'source-atop';
    shape2(ctx, x2, y2, r2, {
        angle: a2,
        fill: (0, _utils.getLocalGradientFunction)(opts.palette)(ctx, x2, y2, r2 * (0, _utils.randomInRange)(0.75, 2))
    });

    ctx.globalCompositeOperation = 'destination-over';
    shape2(ctx, x2, y2, r2, {
        angle: a2,
        fill: (0, _utils.getLocalGradientFunction)(opts.palette)(ctx, x2, y2, r2 * (0, _utils.randomInRange)(0.75, 2))
    });

    // reset blendmodes
    ctx.globalCompositeOperation = 'normal';
    ctx.lineWidth = SHORT / 800;

    // draw the center points and connecting line
    (0, _shapes.drawCircle)(ctx, x1, y1, SHORT / 150, { fill: 'black' });
    (0, _shapes.drawCircle)(ctx, x2, y2, SHORT / 150, { fill: 'black' });
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.strokeStyle = 'black';
    ctx.stroke();

    // draw the shapes again, in black outline
    shape1(ctx, x1, y1, r1, {
        angle: a1,
        fill: null,
        stroke: 'black'
    });

    shape2(ctx, x2, y2, r2, {
        angle: a2,
        fill: null,
        stroke: 'black'
    });

    // rotate the angles for triangle matching
    a1 += Math.PI / 2;
    a2 += Math.PI / 2;

    // OPTIONAL DECORATIONS
    if (Math.random() < 0.5 && x1 !== x2) {
        // EXTEND THE CONNECTING LINE
        //ctx.setLineDash([LONG/150, LONG/100]);
        ctx.strokeStyle = 'black';
        ctx.globalAlpha = (0, _utils.randomInRange)(0.4, 0.6);
        var m = (y2 - y1) / (x2 - x1);
        var b = y1 - m * x1;
        ctx.beginPath();
        ctx.moveTo(0, m * 0 + b);
        ctx.lineTo(cw, m * cw + b);
        ctx.stroke();
        ctx.strokeStyle = 'black';
        //ctx.setLineDash([]);
        ctx.globalAlpha = 1;
    } else if (Math.random() < 0.5 && a1 !== a2) {
        // EXTEND EACH ANGLE LINE
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x1 + Math.cos(a1) * LONG, y1 + Math.sin(a1) * LONG);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 + Math.cos(a2) * LONG, y2 + Math.sin(a2) * LONG);
        ctx.stroke();
    }

    // draw the background
    // this is done last so we can use blend modes to target the intersections
    // while drawing the shapes. Use the same technique to draw only the
    // unpainted background.
    ctx.globalCompositeOperation = 'destination-over';
    ctx.fillStyle = (0, _utils.getGradientFunction)(Math.random() < 0.5 ? SILVERS : opts.palette)(ctx, cw, ch);
    ctx.fillRect(0, 0, cw, ch);

    ctx.globalCompositeOperation = 'normal';

    // Add effect elements
    // ...

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, cw / 3);
        }
    }

    // END RENDERING

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 28 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.truchetCurves = truchetCurves;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.south_beach,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true,

    mode: null,
    count: 0, // 0 for auto, or an integer
    weight: 0, // 0 for auto, or 1-10 for normalized weights
    contrast: true
};

var PI = Math.PI;

// Main function
function truchetCurves(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // util to draw a square and clip following rendering inside
    function clipSquare(ctx, w, h, color) {
        ctx.save();
        ctx.beginPath();
        ctx.rect(0, 0, w, h);
        ctx.fillStyle = color;
        ctx.closePath();
        ctx.fill();
        ctx.clip();
    }

    // color funcs
    var randomFill = function randomFill() {
        return "#" + Math.random().toString(16).slice(2, 8);
    };
    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // define grid
    var count = Math.round(opts.count) || Math.round((0, _utils.randomInRange)(4, 9));
    var w = Math.ceil(cw / count);
    var h = w;
    var vcount = Math.ceil(ch / h);

    // setup vars for each cell
    var x = 0;
    var y = 0;
    var xnorm = 0;
    var ynorm = 0;
    var renderer = void 0;

    var secondLayer = Math.random() < 0.5;

    // play with these random seeds
    var a = void 0,
        b = void 0,
        c = void 0;
    a = Math.random();
    b = Math.random();
    c = Math.random();

    // shared colors
    var fg = void 0; // hold on…
    var bg = getSolidFill(); // pick bg

    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);
    fg = getContrastColor(); // …now set fg in contrast to bg

    // mode settings
    // line weight
    var weight = void 0;
    if (opts.weight) {
        weight = w / 30 * opts.weight;
    } else {
        weight = w / 30 * (0, _utils.randomInRange)(1, 10);
    }

    // component utils
    // draw an arc around anchor corner
    function _arc(anchor, color) {
        var corners = [[0, 0], [w, 0], [w, h], [0, h]];
        if (anchor === undefined) anchor = Math.round((0, _utils.randomInRange)(0, 3));

        (0, _shapes.drawCircle)(ctx, corners[anchor][0], corners[anchor][1], w / 2, {
            stroke: color
        });
    }

    // draw arc terminals for anchor corner
    function _terminal(size, anchor, color) {
        var corners = [[w / 2, 0], [w, h / 2], [w / 2, h], [0, h / 2]];
        if (anchor === undefined) anchor = Math.round((0, _utils.randomInRange)(0, 3));
        var a = anchor % corners.length;
        var b = (anchor + 3) % corners.length;

        (0, _shapes.drawCircle)(ctx, corners[a][0], corners[a][1], size, {
            fill: color
        });
        (0, _shapes.drawCircle)(ctx, corners[b][0], corners[b][1], size, {
            fill: color
        });
    }

    //mode
    // arcs around opposite corners, other corners blank
    function arcs(background, weight) {
        background = background || bg;
        ctx.lineWidth = weight;
        for (var i = 0; i < vcount; i++) {
            for (var j = 0; j < count; j++) {
                // convenience vars
                x = w * j;
                y = h * i;
                xnorm = x / cw;
                ynorm = y / ch;

                // shift and clip
                ctx.translate(x, y);
                clipSquare(ctx, w, h, background);

                if (Math.random() < 0.5) {
                    _arc(0, fg);
                    _arc(2, fg);
                } else {
                    _arc(1, fg);
                    _arc(3, fg);
                }

                // unshift, unclip
                ctx.restore();
                (0, _utils.resetTransform)(ctx);
            }
        }
    }

    // mode
    // any combination of opposite corners or single corners,
    // with terminals in remaining corners
    function arcs2(background, weight) {
        background = background || bg;
        ctx.lineWidth = weight;

        for (var i = 0; i < vcount; i++) {
            for (var j = 0; j < count; j++) {
                // convenience vars
                x = w * j;
                y = h * i;
                xnorm = x / cw;
                ynorm = y / ch;

                // shift and clip
                ctx.translate(x, y);
                clipSquare(ctx, w, h, background);

                switch (Math.round((0, _utils.randomInRange)(1, 9))) {
                    case 1:
                    case 2:
                        _arc(0, fg);
                        _arc(2, fg);
                        break;
                    case 3:
                    case 4:
                        _arc(1, fg);
                        _arc(3, fg);
                        break;
                    case 5:
                        _arc(0, fg);
                        _terminal(weight / 2, 2, fg);
                        break;
                    case 6:
                        _arc(1, fg);
                        _terminal(weight / 2, 3, fg);
                        break;
                    case 7:
                        _arc(2, fg);
                        _terminal(weight / 2, 0, fg);
                        break;
                    case 8:
                        _arc(3, fg);
                        _terminal(weight / 2, 1, fg);
                        break;
                    case 9:
                        _terminal(weight / 2, 0, fg);
                        _terminal(weight / 2, 2, fg);
                        break;
                }

                // unshift, unclip
                ctx.restore();
                (0, _utils.resetTransform)(ctx);
            }
        }
    }

    // mode
    // any permutation of arcs or terminals at each corner;
    function arcs3(background, weight) {
        background = background || bg;
        ctx.lineWidth = weight;

        for (var i = 0; i < vcount; i++) {
            for (var j = 0; j < count; j++) {
                // convenience vars
                x = w * j;
                y = h * i;
                xnorm = x / cw;
                ynorm = y / ch;

                // shift and clip
                ctx.translate(x, y);
                clipSquare(ctx, w, h, background);

                for (var c = 0; c < 4; c++) {
                    // for each corner, randomly choose to either
                    // arc or terminal
                    if (Math.random() < 0.5) {
                        _arc(c, fg);
                    } else {
                        _terminal(weight / 2, c, fg);
                    }
                }

                // unshift, unclip
                ctx.restore();
                (0, _utils.resetTransform)(ctx);
            }
        }
    }

    // gather our modes
    var modes = [arcs, arcs2, arcs3];

    // do the loop with one of our modes
    renderer = (0, _utils.randItem)(modes);
    renderer(bg, weight);

    if (secondLayer) {
        fg = getContrastColor();
        ctx.globalAlpha = 0.8;
        renderer('transparent', opts.contrast ? weight / 2 : weight);
        ctx.globalAlpha = 1;
    }

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            // apply noise from supplied canvas
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            // create noise pattern and apply
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, w / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 29 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.grille = grille;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.blush,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true,

    inset: 'auto', // or truthy/falsy
    mode: null,
    count: 0, // 0 for auto, or an integer
    weight: 0, // 0 for auto, or 1-10 for normalized weights
    contrast: true
};

var PI = Math.PI;

// Main function
function grille(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // color funcs
    var randomFill = function randomFill() {
        return "#" + Math.random().toString(16).slice(2, 8);
    };
    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // define grid
    var count = Math.round(opts.count) || Math.round((0, _utils.randomInRange)(4, 9));
    var w = Math.floor(cw / count);
    var h = w;
    var vcount = Math.ceil(ch / h);

    // setup vars for each cell
    var x = 0;
    var y = 0;
    var xnorm = 0;
    var ynorm = 0;
    var renderer = void 0;

    // shared colors
    var fg = void 0; // hold on…
    var bg = getSolidFill(); // pick bg

    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);
    fg = getContrastColor(); // …now set fg in contrast to bg

    // mode settings
    // line weight
    var WEIGHT = void 0;
    if (opts.weight) {
        WEIGHT = 1 + w / 250 * opts.weight;
    } else {
        WEIGHT = 1 + w / 250 * (0, _utils.randomInRange)(1, 10);
    }
    ctx.lineWidth = WEIGHT;

    // Spacing and zoom
    var INSET = void 0;
    if (opts.inset === 'auto') {
        INSET = Math.random() <= 0.5;
    } else {
        INSET = !!opts.inset;
    }
    var ZOOM = INSET ? 1 - 3 * WEIGHT / w : 1;

    // util to draw a square and clip following rendering inside
    function moveAndClip(ctx, x, y, size, color) {
        ctx.save();
        ctx.translate(x, y);
        ctx.scale(ZOOM, ZOOM);
        ctx.beginPath();
        ctx.rect(-size / 2 - 0.5, -size / 2 - 0.5, size + 1, size + 1);
        ctx.fillStyle = color;
        ctx.closePath();
        ctx.fill();
        ctx.clip();
    }

    // convenience var for center-based boxes
    var d = h / 2;

    // box styles

    var modes = {};

    modes.diag = function () {
        ctx.beginPath();

        ctx.moveTo(-d, -d);
        ctx.lineTo(d, d);

        ctx.moveTo(-d * .5, -d);
        ctx.lineTo(-d, -d * .5);

        ctx.moveTo(0, -d);
        ctx.lineTo(-d, 0);

        ctx.moveTo(d * .5, -d);
        ctx.lineTo(-d, d * .5);

        ctx.moveTo(d, -d);
        ctx.lineTo(-d, d);

        ctx.moveTo(d, -d * .5);
        ctx.lineTo(-d * .5, d);

        ctx.moveTo(d, 0);
        ctx.lineTo(0, d);

        ctx.moveTo(d, d * .5);
        ctx.lineTo(d * .5, d);

        ctx.stroke();
    };

    modes.fan = function () {
        // straight or curved crosspiece?
        var straight = Math.random() > 0.5;

        ctx.beginPath();

        ctx.moveTo(-d, -d);
        ctx.lineTo(-d, d);

        ctx.moveTo(-d, -d);
        ctx.lineTo(-d / 2, d);

        ctx.moveTo(-d, -d);
        ctx.lineTo(0, d);

        ctx.moveTo(-d, -d);
        ctx.lineTo(d / 2, d);

        ctx.moveTo(-d, -d);
        ctx.lineTo(d, d);

        //

        ctx.moveTo(-d, -d);
        ctx.lineTo(d, -d);

        ctx.moveTo(-d, -d);
        ctx.lineTo(d, -d / 2);

        ctx.moveTo(-d, -d);
        ctx.lineTo(d, 0);

        ctx.moveTo(-d, -d);
        ctx.lineTo(d, d / 2);

        if (straight) {
            ctx.moveTo(d, -d);
            ctx.lineTo(-d, d);
        }

        ctx.stroke();

        if (!straight) {
            (0, _shapes.drawCircle)(ctx, -d, -d, d * 3 / 2, { fill: 'transparent', stroke: fg });
        }

        (0, _shapes.drawCircle)(ctx, -d, -d, d / 2, { fill: bg, stroke: fg });
    };

    modes.cross = function () {
        ctx.beginPath();

        ctx.moveTo(-d, -d);
        ctx.lineTo(d, d);

        ctx.moveTo(-d / 2, -d);
        ctx.lineTo(d / 2, d);

        ctx.moveTo(0, -d);
        ctx.lineTo(0, d);

        ctx.moveTo(d / 2, -d);
        ctx.lineTo(-d / 2, d);

        ctx.moveTo(d, -d);
        ctx.lineTo(-d, d);

        ctx.stroke();

        (0, _shapes.drawCircle)(ctx, 0, 0, d / 4, { fill: bg, stroke: fg });
    };

    modes.sun = function () {
        ctx.beginPath();

        ctx.moveTo(-d, -d);
        ctx.lineTo(d, d);

        ctx.moveTo(-d / 2, -d);
        ctx.lineTo(d / 2, d);

        ctx.moveTo(0, -d);
        ctx.lineTo(0, d);

        ctx.moveTo(d / 2, -d);
        ctx.lineTo(-d / 2, d);

        ctx.moveTo(d, -d);
        ctx.lineTo(-d, d);

        //

        ctx.moveTo(-d, -d / 2);
        ctx.lineTo(d, d / 2);

        ctx.moveTo(-d, 0);
        ctx.lineTo(d, 0);

        ctx.moveTo(-d, d / 2);
        ctx.lineTo(d, -d / 2);

        ctx.stroke();

        (0, _shapes.drawCircle)(ctx, 0, 0, d / 5, { fill: bg, stroke: fg });
    };

    modes.offset = function () {
        ctx.beginPath();

        var pts = [[-d, -d], [-d / 2, -d], [0, -d], [d / 2, -d],
        //[d, -d],
        [d, -d / 2], [d, 0], [d, d / 2],
        //[d, d],
        [d / 2, d], [0, d], [-d / 2, d],
        //[-d, d],
        [-d, d / 2], [-d, 0], [-d, -d / 2]];

        var center = [-d / 3, -d / 3];

        pts.forEach(function (p) {
            ctx.moveTo.apply(ctx, center);
            ctx.lineTo.apply(ctx, _toConsumableArray(p));
        });

        ctx.stroke();

        (0, _shapes.drawCircle)(ctx, -d * 1.9, -d * 1.9, h * 1.5, { fill: null, stroke: fg });
        _shapes.drawCircle.apply(undefined, [ctx].concat(center, [d / 4, { fill: bg, stroke: fg }]));
    };

    modes.bars = function () {
        ctx.beginPath();

        ctx.moveTo(-d, -d);
        ctx.lineTo(-d, d);

        ctx.moveTo(-d / 2, -d);
        ctx.lineTo(-d / 2, d);

        ctx.moveTo(-0, -d);
        ctx.lineTo(-0, d);

        ctx.moveTo(d / 2, -d);
        ctx.lineTo(d / 2, d);

        ctx.moveTo(d, -d);
        ctx.lineTo(d, d);

        ctx.moveTo(-d, 0);
        ctx.lineTo(d, 0);

        ctx.stroke();

        (0, _shapes.drawCircle)(ctx, -d * .75, 0, d / 4, { fill: 'transparent', stroke: fg });
        (0, _shapes.drawCircle)(ctx, 0, 0, d / 2, { fill: 'transparent', stroke: fg });
        (0, _shapes.drawCircle)(ctx, d * .75, 0, d / 4, { fill: 'transparent', stroke: fg });
    };

    modes.notes = function () {
        ctx.beginPath();

        ctx.moveTo(-d, -d);
        ctx.lineTo(-d, d);

        ctx.moveTo(-d / 2, -d);
        ctx.lineTo(-d / 2, d);

        ctx.moveTo(-0, -d);
        ctx.lineTo(-0, d);

        ctx.moveTo(d / 2, -d);
        ctx.lineTo(d / 2, d);

        ctx.moveTo(d, -d);
        ctx.lineTo(d, d);

        ctx.stroke();

        (0, _shapes.drawCircle)(ctx, -d * .75, -d * .75, d / 4, { fill: 'transparent', stroke: fg });
        (0, _shapes.drawCircle)(ctx, -d * .25, -d * .25, d / 4, { fill: 'transparent', stroke: fg });
        (0, _shapes.drawCircle)(ctx, d * .25, d * .25, d / 4, { fill: 'transparent', stroke: fg });
        (0, _shapes.drawCircle)(ctx, d * .75, d * .75, d / 4, { fill: 'transparent', stroke: fg });
    };

    modes.circleSet = function () {
        ctx.beginPath();

        ctx.moveTo(-d * .5, -d);
        ctx.lineTo(-d * .5, d);

        ctx.moveTo(0, -d);
        ctx.lineTo(0, d);

        ctx.moveTo(d * .5, -d);
        ctx.lineTo(d * .5, d);

        ctx.moveTo(-d, -d * .5);
        ctx.lineTo(d, -d * .5);

        ctx.moveTo(-d, 0);
        ctx.lineTo(d, 0);

        ctx.moveTo(-d, d * .5);
        ctx.lineTo(d, d * .5);

        ctx.stroke();

        var r = d / 5;

        (0, _shapes.drawCircle)(ctx, d * -.5, -d * .5, r, { fill: bg, stroke: fg });
        (0, _shapes.drawCircle)(ctx, d * 0, -d * .5, r, { fill: bg, stroke: fg });
        (0, _shapes.drawCircle)(ctx, d * .5, -d * .5, r, { fill: bg, stroke: fg });

        (0, _shapes.drawCircle)(ctx, d * -.5, 0, r, { fill: bg, stroke: fg });
        (0, _shapes.drawCircle)(ctx, d * 0, 0, r, { fill: bg, stroke: fg });
        (0, _shapes.drawCircle)(ctx, d * .5, 0, r, { fill: bg, stroke: fg });

        (0, _shapes.drawCircle)(ctx, d * -.5, d * .5, r, { fill: bg, stroke: fg });
        (0, _shapes.drawCircle)(ctx, d * 0, d * .5, r, { fill: bg, stroke: fg });
        (0, _shapes.drawCircle)(ctx, d * .5, d * .5, r, { fill: bg, stroke: fg });
    };

    modes.standUps = function () {
        ctx.beginPath();

        var ringEdge = -d * .3;

        ctx.moveTo(-d * .5, -d);
        ctx.lineTo(-d * .5, -d * .5);

        ctx.moveTo(0, -d);
        ctx.lineTo(0, -d * .5);

        ctx.moveTo(d * .5, -d);
        ctx.lineTo(d * .5, -d * .5);

        ctx.moveTo(-d, -d * .5);
        ctx.lineTo(d, -d * .5);

        if (Math.random() < 0.5) {
            // criss cross

            ctx.moveTo(-d, d);
            ctx.lineTo(-d * .5, ringEdge);
            ctx.lineTo(0, d);
            ctx.lineTo(d * .5, ringEdge);
            ctx.lineTo(d, d);

            ctx.moveTo(-d, ringEdge);
            ctx.lineTo(-d * .5, d);
            ctx.lineTo(0, ringEdge);
            ctx.lineTo(d * .5, d);
            ctx.lineTo(d, ringEdge);
        } else {
            // zig zag

            ctx.moveTo(-d, ringEdge);
            ctx.lineTo(-d * .75, d);
            ctx.lineTo(-d * .5, ringEdge);
            ctx.lineTo(-d * .25, d);
            ctx.lineTo(0, ringEdge);
            ctx.lineTo(d * .25, d);
            ctx.lineTo(d * .5, ringEdge);
            ctx.lineTo(d * .75, d);
            ctx.lineTo(d, ringEdge);
        }

        ctx.stroke();

        // rings
        (0, _shapes.drawCircle)(ctx, -d, -d * .5, d / 5, { fill: bg, stroke: fg });
        (0, _shapes.drawCircle)(ctx, -d * .5, -d * .5, d / 5, { fill: bg, stroke: fg });
        (0, _shapes.drawCircle)(ctx, 0, -d * .5, d / 5, { fill: bg, stroke: fg });
        (0, _shapes.drawCircle)(ctx, d * .5, -d * .5, d / 5, { fill: bg, stroke: fg });
        (0, _shapes.drawCircle)(ctx, d, -d * .5, d / 5, { fill: bg, stroke: fg });
    };

    modes.squares = function () {

        (0, _shapes.drawSquare)(ctx, 0, 0, d, { fill: 'transparent', stroke: fg });
        (0, _shapes.drawSquare)(ctx, 0, 0, d / (4 / 3), { fill: 'transparent', stroke: fg });
        (0, _shapes.drawSquare)(ctx, 0, 0, d / 2, { fill: 'transparent', stroke: fg });
        (0, _shapes.drawSquare)(ctx, 0, 0, d / 4, { fill: 'transparent', stroke: fg });

        ctx.rotate(PI / 4);

        var diag = d * 0.7071;

        (0, _shapes.drawSquare)(ctx, 0, 0, diag * 1.5, { fill: 'transparent', stroke: fg });
        (0, _shapes.drawSquare)(ctx, 0, 0, diag / 1, { fill: 'transparent', stroke: fg });
        (0, _shapes.drawSquare)(ctx, 0, 0, diag / 2, { fill: 'transparent', stroke: fg });
    };

    modes.arcs = function () {

        (0, _shapes.drawCircle)(ctx, -d, -d, h / 1, { fill: 'transparent', stroke: fg });
        (0, _shapes.drawCircle)(ctx, -d, -d, h / 2, { fill: 'transparent', stroke: fg });
        (0, _shapes.drawCircle)(ctx, -d, -d, h / (4 / 3), { fill: 'transparent', stroke: fg });
        (0, _shapes.drawCircle)(ctx, -d, -d, h / 4, { fill: 'transparent', stroke: fg });

        ctx.beginPath();
        ctx.moveTo(-d, -d);
        ctx.lineTo(d, d);
        ctx.stroke();
    };

    modes.arcSide = function () {

        (0, _shapes.drawCircle)(ctx, 0, -d, d / 2, { fill: null, stroke: fg });
        (0, _shapes.drawCircle)(ctx, 0, -d, d / 1, { fill: null, stroke: fg });

        (0, _shapes.drawCircle)(ctx, 0, d, d / 2, { fill: null, stroke: fg });
        (0, _shapes.drawCircle)(ctx, 0, d, d / 1, { fill: null, stroke: fg });

        (0, _shapes.drawCircle)(ctx, 0, 0, d / 2, { fill: null, stroke: fg });
        (0, _shapes.drawCircle)(ctx, 0, 0, d / 1, { fill: null, stroke: fg });

        ctx.beginPath();
        ctx.moveTo(0, -d);
        ctx.lineTo(0, d);
        ctx.stroke();
    };

    modes.arcCorners = function () {
        (0, _shapes.drawCircle)(ctx, -d, -d, h / 1, { fill: 'transparent', stroke: fg });
        (0, _shapes.drawCircle)(ctx, -d, -d, h / 2, { fill: 'transparent', stroke: fg });
        (0, _shapes.drawCircle)(ctx, -d, -d, h / (4 / 3), { fill: 'transparent', stroke: fg });
        (0, _shapes.drawCircle)(ctx, -d, -d, h / 4, { fill: 'transparent', stroke: fg });

        (0, _shapes.drawCircle)(ctx, d, d, h / 1, { fill: 'transparent', stroke: fg });
        (0, _shapes.drawCircle)(ctx, d, d, h / 2, { fill: 'transparent', stroke: fg });
        (0, _shapes.drawCircle)(ctx, d, d, h / (4 / 3), { fill: 'transparent', stroke: fg });
        (0, _shapes.drawCircle)(ctx, d, d, h / 4, { fill: 'transparent', stroke: fg });
    };

    modes.flower = function () {
        (0, _shapes.drawCircle)(ctx, 0, -d, d / 1, { fill: null, stroke: fg });
        (0, _shapes.drawCircle)(ctx, 0, d, d / 1, { fill: null, stroke: fg });
        (0, _shapes.drawCircle)(ctx, -d, 0, d / 1, { fill: null, stroke: fg });
        (0, _shapes.drawCircle)(ctx, d, 0, d / 1, { fill: null, stroke: fg });

        (0, _shapes.drawCircle)(ctx, 0, 0, d / 4, { fill: bg, stroke: fg });
    };

    modes.herringbone = function () {
        function up(y) {
            ctx.moveTo(-d, -d + y);
            ctx.lineTo(0, -d + y - d);
        }

        function down(y) {
            ctx.moveTo(d, -d + y);
            ctx.lineTo(0, -d + y - d);
        }

        ctx.beginPath();

        for (var i = 0; i <= 6; i++) {
            up(i * d / 2);
            down(i * d / 2);
        }

        ctx.moveTo(0, -d);
        ctx.lineTo(0, d);

        ctx.stroke();
    };

    // TESTING
    //opts.mode = 'diag';


    // mode
    function main(background, double) {
        background = background || bg;
        ctx.strokeStyle = fg;
        var px = void 0,
            py = void 0;
        ctx.fillStyle = background;
        ctx.rect(0, 0, cw, ch);
        ctx.fill();
        for (var i = 0; i < vcount; i++) {
            for (var j = 0; j < count; j++) {
                // convenience vars
                x = w * j;
                y = h * i;
                xnorm = x / cw;
                ynorm = y / ch;
                // center point
                px = x + w / 2;
                py = y + h / 2;

                // shift and clip at center point
                moveAndClip(ctx, px, py, h, background);
                // randomly rotate by 90 degree increment
                ctx.rotate((0, _utils.randItem)([0, PI / 2, PI, PI * 3 / 2]));

                // do art in this box
                if (opts.mode && modes[opts.mode]) {
                    modes[opts.mode]();
                } else {
                    modes[(0, _utils.randItem)(Object.keys(modes))]();
                }

                // unshift, unclip
                ctx.restore();
                (0, _utils.resetTransform)(ctx);

                // draw border box after unclipping, to avoid aliasing
                (0, _shapes.drawSquare)(ctx, px, py, h / 2 * ZOOM, { fill: null, stroke: fg });
            }
        }
    }

    main(bg);

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            // apply noise from supplied canvas
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            // create noise pattern and apply
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, w / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 30 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.fieldShape = fieldShape;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _hexScatter = __webpack_require__(4);

var _hexScatter2 = _interopRequireDefault(_hexScatter);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

var _fieldUtils = __webpack_require__(5);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.metroid_fusion,
    addNoise: 0.04,
    noiseInput: null,
    clear: true,
    debug: false,
    colorMode: 'auto', // from COLORMODES or 'auto'
    fieldMode: 'auto', // [auto, harmonic, flow]
    lightMode: 'normal', // [auto, bloom, normal]
    drawEdges: 'auto' // [auto, true, false]
};

var PI = Math.PI;
var FIELDMODES = ['harmonic', 'flow'];
var LIGHTMODES = ['bloom', 'normal'];
var COLORMODES = ['single', 'angle', 'random'];

// Main function
function fieldShape(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);
    var LONG = Math.max(cw, ch);
    var SHORT = Math.min(cw, ch);
    var AREA = cw * ch;
    // canvas center x and y
    var cx = cw / 2;
    var cy = ch / 2;

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // modes and styles
    var DEBUG = opts.debug;
    var LIGHTMODE = opts.lightMode === 'auto' ? (0, _utils.randItem)(LIGHTMODES) : opts.lightMode;
    var FIELDMODE = opts.fieldMode === 'auto' ? (0, _utils.randItem)(FIELDMODES) : opts.fieldMode;
    var COLORMODE = opts.colorMode === 'auto' ? (0, _utils.randItem)(COLORMODES) : opts.colorMode;
    var POLYEDGES = opts.drawEdges === 'auto' ? (0, _utils.randItem)([true, false]) : opts.drawEdges;

    console.log('FieldShape: ' + FIELDMODE + ' ' + COLORMODE + ' ' + LIGHTMODE + ' ' + POLYEDGES);

    // color funcs
    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // how many cells are in the grid?
    var countMin = void 0,
        countMax = void 0;

    // setup vars for each cell
    var x = 0;
    var y = 0;
    var xnorm = 0;
    var ynorm = 0;
    var renderer = void 0;

    // shared colors
    var bg = getSolidFill();

    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);

    // shared foregrounds
    var fg = getContrastColor();
    var fg2 = getContrastColor();

    // in bloom mode, we draw high-contrast grayscale, and layer
    // palette colors on top
    if (LIGHTMODE === 'bloom') {
        bg = '#222222';
        fg = fg2 = '#cccccc';
    }

    // draw background
    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, cw, ch);

    // set default tail color
    ctx.strokeStyle = fg;
    // set default dot color
    var dotFill = fg2;

    var rateMax = 3;

    var tailLength = SCALE / (0, _utils.randomInRange)(30, 50);

    // tail vars
    var _x = void 0,
        _y = void 0,
        len = void 0;

    // dotScale will be multiplied by 2. Keep below .25 to avoid bleed.
    // Up to 0.5 will lead to full coverage.
    var dotScale = tailLength * (0, _utils.randomInRange)(0.1, 0.25);
    // line width
    var weight = (0, _utils.randomInRange)(0.5, 3) * SCALE / 800;

    ctx.lineWidth = weight;
    ctx.lineCap = 'round';

    // const used in normalizing transforms
    var maxLen = 2 * Math.sqrt(2);

    // It looks nice to extend lines beyond their cells. how much?
    // Scaled against tailLength
    var lineScale = (0, _utils.randomInRange)(0.7, 2);

    // Pick an opacity transform to use
    var opacityFunc = (0, _utils.randItem)((0, _fieldUtils.opacityTransforms)(maxLen));

    // a set of independent transforms to use while rendering
    var trans = {
        xbase: (0, _fieldUtils.createTransform)(rateMax), // (x,y)=>0,//
        ybase: (0, _fieldUtils.createTransform)(rateMax), // (x,y)=>0,//
        xtail: (0, _fieldUtils.createTransform)(rateMax), // (x,y)=>0,//
        ytail: (0, _fieldUtils.createTransform)(rateMax), // (x,y)=>0,//
        radius: (0, _fieldUtils.createTransform)(rateMax)

        // Make a reference canvas, fill it black
    };var ref = document.querySelector('#ref');
    if (!ref) {
        ref = document.createElement('canvas');
        ref.setAttribute('id', 'ref');
        ref.setAttribute('width', cw);
        ref.setAttribute('height', ch);
        ref.className = 'artContainer';
        //document.querySelector('body').appendChild(ref);
    }
    var refctx = ref.getContext('2d');
    // fill ref with black
    refctx.fillStyle = 'black';
    refctx.fillRect(0, 0, cw, ch);
    // set to white to draw shapes
    refctx.fillStyle = 'white';

    // with a set of imageData, get the color at x,y
    function colorFromReference(x, y, imageData) {
        var c = [];
        return c;
    }

    // edge spacing
    var SPACING = SCALE / (0, _utils.randomInRange)(35, 50);

    // place points along shapes
    function circlePoints(x, y, size) {
        var theta = 0;
        var N = 200;
        var r = size;
        for (var i = 0; i < N; i++) {
            theta += PI * 2 / N;
            pts.push([x + r * Math.cos(theta), y + r * Math.sin(theta)]);
        }
    }

    // Return an array of vertices defining a regular polygon
    // centered at @x, @y, with @sides, @size, and @angle
    function makeRegularVertices() {
        var sides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;
        var x = arguments[1];
        var y = arguments[2];
        var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 100;
        var angle = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;

        var vertices = [];
        var a = Math.PI * 2 / sides;
        function _x(theta) {
            return size * Math.cos(theta + angle - Math.PI / 2);
        }
        function _y(theta) {
            return size * Math.sin(theta + angle - Math.PI / 2);
        }

        for (var i = 1; i <= sides; i++) {
            vertices.push([_x(a * i), _y(a * i)]);
        }

        vertices = vertices.map(function (v, i) {
            return [v[0] + x, v[1] + y];
        });

        return vertices;
    }

    // Create points at @spacing along polygon defined by @vertices
    // Append to @pts and return modified @pts
    function getEdgePointsFromVertices(vertices) {
        var spacing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;

        // place points at vertices
        var pts = [];
        pts.push.apply(pts, _toConsumableArray(vertices));

        // for each edge:
        // get vector for edges by subtracing vertex coordinates
        function drawEdge(edge, pts) {
            // for each edge, get nearest number of whole number of steps based
            // on spacing

            var steps = Math.floor(edge.length / spacing);
            var inc = edge.length / steps;

            DEBUG && console.log(steps + ' steps at ' + inc.toPrecision(3) + 'px each');

            // start at vertex and move along edge vector in increments,
            // placing points
            // do this by dividing the edge vector by edge spacing scalar?
            // step along in increments until end vertex is reached

            for (var i = 0; i < steps; i++) {
                pts.push([edge.x + i * inc * Math.cos(edge.angle), edge.y + i * inc * Math.sin(edge.angle)]);
            }
        }

        vertices.forEach(function (v, i) {
            drawEdge((0, _utils.getVector)(v, vertices[(i + 1) % vertices.length]), pts);
        });

        return pts;
    }

    // Create points at @spacing along polygon defined by @vertices
    // Append to @pts and return modified @pts
    function drawShapeFromVertices(ctx, vertices) {
        //ctx.globalAlpha = 0.5;
        ctx.fillStyle = 'white';

        ctx.beginPath();
        ctx.moveTo.apply(ctx, _toConsumableArray(vertices.pop()));
        while (vertices.length) {
            ctx.lineTo.apply(ctx, _toConsumableArray(vertices.pop()));
        }
        ctx.closePath();
        ctx.fill();

        ctx.globalAlpha = 1;

        return vertices;
    }

    // Convenience function: compose the vertex and point placement functions
    // to draw a complete polygon
    function placePolygonPoints() {
        var sides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;
        var x = arguments[1];
        var y = arguments[2];
        var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 100;
        var angle = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
        var spacing = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 20;

        return getEdgePointsFromVertices(makeRegularVertices(sides, x, y, size, angle), spacing);
    }

    // util used for scaling shapes
    function distanceFromEdge(x, y) {
        var dx = Math.min(x, cw - x);
        var dy = Math.min(y, ch - y);
        // normalize gap to the larger dimension of the canvas
        return Math.min(dx, dy) / LONG;
    }

    // Define N shapes placed along a ring at some random interval, which
    // may loop. Move the ring a bit offset from the true center.
    // Returns a list of vertices.
    var placeShapesOnRing = function placeShapesOnRing() {
        var ringPoints = [];

        var shapeR = SCALE * (0, _utils.randomInRange)(0.25, 0.4);
        var N = (0, _utils.randomInt)(2, 6);
        var shapeAngle = PI / (0, _utils.randomInt)(1, N);

        var _cx = void 0,
            _cy = void 0; // adjusted center point
        var _r = SCALE * (0, _utils.randomInRange)(0, 0.2);
        _cx = cx + _r * Math.cos(shapeAngle);
        _cy = cy + _r * Math.sin(shapeAngle);

        for (var i = 0; i < N; i++) {
            var _x10 = void 0,
                _y2 = void 0;
            _x10 = _cx + shapeR * Math.cos(i * shapeAngle);
            _y2 = _cy + shapeR * Math.sin(i * shapeAngle);
            ringPoints = ringPoints.concat([makeRegularVertices((0, _utils.randomInt)(3, 6), _x10, _y2, SCALE * (0, _utils.randomInRange)(0.1, 0.3), PI * (0, _utils.randomInRange)(0, 1), SCALE / (0, _utils.randomInRange)(25, 55))]);
        }

        if (DEBUG) {
            ctx.globalAlpha = 0.33;
            ctx.lineWidth = 1;
            (0, _shapes.drawCircle)(ctx, _cx, _cy, shapeR, { stroke: fg2 });
            ctx.lineWidth = weight;
            ctx.globalAlpha = 1;
        }

        return ringPoints;
    };

    function placeShapesRandomly(N) {
        N = N || (0, _utils.randomInt)(3, 6);
        var shapePoints = [];

        // place them randomly
        // find distance to closest edge
        // make shapes near edges large, away from edges small
        // allow centers to be outside of area.

        for (var i = 0; i < N; i++) {
            var _x11 = void 0,
                _y3 = void 0;
            _x11 = (0, _utils.randomInRange)(0, cw);
            _y3 = (0, _utils.randomInRange)(0, ch);

            var scalar = 1 - distanceFromEdge(_x11, _y3);
            scalar = scalar * scalar * scalar;

            shapePoints = shapePoints.concat([makeRegularVertices((0, _utils.randomInt)(3, 6), _x11, _y3, SCALE * (0, _utils.randomInRange)(0.3, 0.5) * scalar, PI * (0, _utils.randomInRange)(0, 1), SCALE / (0, _utils.randomInRange)(25, 55))]);
        }

        return shapePoints;
    }

    function placeShapesOnLine() {
        var N = (0, _utils.randomInt)(3, 6);
        var shapePoints = [];

        // points along each side of the canvas
        var sides = (0, _utils.shuffle)([[cw * (0, _utils.randomInRange)(0.2, 0.8), 0], [cw, ch * (0, _utils.randomInRange)(0.2, 0.8)], [cw * (0, _utils.randomInRange)(0.2, 0.8), ch], [0, ch * (0, _utils.randomInRange)(0.2, 0.8)]]);

        // choose random combo
        var p1 = sides.pop();
        var p2 = sides.pop();

        if (DEBUG) {
            ctx.globalAlpha = 0.5;
            // trace line
            ctx.strokeStyle = fg;
            ctx.lineWidth = 1;
            ctx.moveTo.apply(ctx, _toConsumableArray(p1));
            ctx.lineTo.apply(ctx, _toConsumableArray(p2));
            ctx.stroke();
            ctx.lineWidth = weight;
        }

        // draw shapes along the line
        for (var i = 0; i < N; i++) {
            var _x12 = void 0,
                _y4 = void 0,
                d = void 0;
            // interpolate at random spot along p1 -> p2
            d = (0, _utils.randomInRange)(0, 1);
            _x12 = d * p1[0] + (1 - d) * p2[0];
            _y4 = d * p1[1] + (1 - d) * p2[1];

            var scalar = 1 - distanceFromEdge(_x12, _y4);
            scalar = scalar * scalar * scalar;

            shapePoints = shapePoints.concat([makeRegularVertices((0, _utils.randomInt)(3, 6), _x12, _y4, SCALE * (0, _utils.randomInRange)(0.3, 0.5) * scalar, PI * (0, _utils.randomInRange)(0, 1), SCALE / (0, _utils.randomInRange)(25, 55))]);
        }

        return shapePoints;
    }

    // make a collection of placement functions that we can pick from
    var placementFunctions = [placeShapesOnRing, placeShapesOnLine, placeShapesRandomly];

    // create field transform
    var sourceTransform = (0, _fieldUtils.createSourceSinkTransform)(Math.round((0, _utils.randomInRange)(5, 15)));

    // Flags for coloring by angle
    // Don't do special coloring in bloom mode, because it relies on grayscale
    // initial rendering
    var colorTailByAngle = false;
    var colorDotByAngle = false;
    var randomColorThreshold = void 0;
    if (LIGHTMODE !== 'bloom') {
        if (COLORMODE === 'angle') {
            if (Math.random() < 0.6) {
                colorTailByAngle = true;
            }
            if (Math.random() < 0.6) {
                colorDotByAngle = true;
            }
        }
        if (COLORMODE === 'random') {
            randomColorThreshold = 0.66;
        }
    }

    // console.log(`Colors: tails ${colorTailByAngle}, dots: ${colorDotByAngle}`);

    // source/sink stuff
    if (FIELDMODE === 'flow') {
        var totalStrength = 0;
        sourceTransform.sources.forEach(function (source) {
            totalStrength += source.strength;
        });
        lineScale = 1 / totalStrength;
    }

    // draw a single point in the field
    function drawPoints(points) {
        var drawTails = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
        var drawDots = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;

        points.forEach(function (p, i) {
            x = p[0];
            y = p[1];
            xnorm = x / cw;
            ynorm = y / ch;

            // get end of tail coords
            if (FIELDMODE === 'flow') {
                // flow fields (source-sink)
                var flow = sourceTransform.t(xnorm, ynorm);
                _x = flow[0];
                _y = flow[1];
            } else {
                // harmonic fields
                _x = trans.xtail(xnorm, ynorm);
                _y = trans.ytail(xnorm, ynorm);
            }

            var theta = Math.atan2(_y, _x);
            var fillIndex = Math.round(contrastPalette.length * theta / PI / 2);
            var angleColor = contrastPalette[fillIndex];

            if (drawDots) {
                if (colorDotByAngle) {
                    dotFill = angleColor;
                }
                if (COLORMODE === 'random' && Math.random() < randomColorThreshold) {
                    dotFill = getContrastColor();
                }

                // draw dot
                ctx.globalAlpha = 1;
                (0, _shapes.drawCircle)(ctx, x, y, (trans.radius(xnorm, ynorm) + 1) * dotScale, { stroke: dotFill });
            }

            if (drawTails) {
                ctx.globalAlpha = opacityFunc(_x, _y);

                if (colorTailByAngle) {
                    ctx.strokeStyle = angleColor;
                }
                if (COLORMODE === 'random' && Math.random() < randomColorThreshold) {
                    ctx.strokeStyle = getContrastColor();
                }

                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.lineTo(x + tailLength * _x * lineScale, y + tailLength * _y * lineScale);
                ctx.stroke();
            }
        });
    }

    // --------------------------------------
    // draw stuff:


    // -> Get a set of polygon vertices
    var polyVertices = [];
    polyVertices = (0, _utils.randItem)(placementFunctions)();

    // -> scatter a background field

    // Draw the background field from scattered points, with only tails
    // Use a shorter tail length and thickness to make this less dominant
    var baseScale = lineScale;
    lineScale = baseScale / 3;

    var bgField = (0, _hexScatter2.default)(tailLength, cw, ch);
    drawPoints(bgField, true, false);

    // -> draw the polygon edges, if desired

    // Restore full tail length and thickness to draw points derived from
    // the polygons
    lineScale = baseScale;
    ctx.lineWidth = weight * 2;

    // Pick a random placement function and draw the edges
    if (POLYEDGES) {
        polyVertices.forEach(function (polygon, i) {
            drawPoints(getEdgePointsFromVertices(polygon, SPACING), true, true);
        });
    }

    // -> select the background points that overlap polygons

    // draw the polys to the reference canvas
    polyVertices.forEach(function (polygon, i) {
        drawShapeFromVertices(refctx, polygon);
    });

    // step thru the field points, check their position against reference
    // and create a new list
    var pointsInsidePolys = [];
    bgField.forEach(function (p, i) {
        if (refctx.getImageData.apply(refctx, _toConsumableArray(p).concat([1, 1])).data[0] > 128) {
            pointsInsidePolys.push(p);
        }
    });

    // -> draw the polygon field points

    ctx.lineWidth = weight;
    lineScale = baseScale / 2;
    drawPoints(pointsInsidePolys, true, true);

    // reset alpha for any following draw operations
    ctx.globalAlpha = 1;

    // in bloom mode, we draw a big colorful gradient over the grayscale
    // background, using palette colors and nice blend modes
    if (LIGHTMODE === 'bloom') {
        ctx.globalCompositeOperation = 'color-dodge';

        // bloom with linear gradient
        ctx.fillStyle = (0, _utils.getGradientFunction)(opts.palette)(ctx, cw, ch); //getContrastColor();
        ctx.fillRect(0, 0, cw, ch);

        if (Math.random() < 0.5) {
            // bloom with spot lights
            var dodgeDot = function dodgeDot() {
                var max = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1.5;

                var gx = void 0,
                    gy = void 0,
                    gr1 = void 0,
                    gr2 = void 0;
                gx = (0, _utils.randomInRange)(0, cw);
                gy = (0, _utils.randomInRange)(0, ch);
                gr1 = (0, _utils.randomInRange)(0, 0.25);
                gr2 = (0, _utils.randomInRange)(gr1, max);

                var radial = ctx.createRadialGradient(gx, gy, gr1 * SCALE, gx, gy, gr2 * SCALE);
                radial.addColorStop(0, (0, _utils.randItem)(opts.palette));
                radial.addColorStop(1, '#000000');

                ctx.fillStyle = radial;
                ctx.fillRect(0, 0, cw, ch);
            };
            // try layering dots with varying coverage
            ctx.globalAlpha = (0, _utils.randomInRange)(0.4, 0.7);
            dodgeDot(1.5);
            ctx.globalAlpha = (0, _utils.randomInRange)(0.4, 0.7);
            dodgeDot(1.0);
            ctx.globalAlpha = (0, _utils.randomInRange)(0.7, 0.9);
            dodgeDot(0.5);
            ctx.globalAlpha = 1;
        }

        ctx.globalCompositeOperation = 'normal';
    }

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            // apply noise from supplied canvas
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            // create noise pattern and apply
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, cw / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 31 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.clouds = clouds;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.fingerspitzen,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true,
    lightMode: 'auto', // [auto, bloom, normal]
    gridMode: 'auto', // [auto, normal, scatter, random]
    density: 'auto' // [auto, coarse, fine]
};

var PI = Math.PI;
var TWOPI = PI * 2;

// Main function
function clouds(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);
    var LONG = Math.max(cw, ch);
    var SHORT = Math.min(cw, ch);
    var AREA = cw * ch;

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // color funcs
    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // shared colors
    var bg = getSolidFill();

    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);

    // shared foregrounds
    var fg = getContrastColor();
    var fg2 = getContrastColor();

    // special fill functions
    var getBgGradient = (0, _utils.getGradientFunction)(['#ffffff', bg]);
    var getCloudFill = function getCloudFill(y1, y2) {
        var color = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : bg;

        var grad = ctx.createLinearGradient(0, y1, 0, y2);
        grad.addColorStop(0, '#ffffff');
        grad.addColorStop(1, color);
        return grad;
    };

    // draw

    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, cw, ch);

    var rateMax = 3;

    function createTransform() {
        var rate1 = (0, _utils.randomInRange)(0, rateMax);
        var rate2 = (0, _utils.randomInRange)(0, rateMax);
        var phase1 = (0, _utils.randomInRange)(-PI, PI);
        var phase2 = (0, _utils.randomInRange)(-PI, PI);
        var c1 = (0, _utils.randomInRange)(1, 2);
        var c2 = (0, _utils.randomInRange)(0, 1);
        return function (x, y) {
            var t1 = Math.sin(x * PI * rate1 + phase1);
            var t2 = Math.sin(y * PI * rate2 + phase2);
            return (c1 * t1 + c2 * t2) / (c1 + c2);
        };
    }

    var wave = createTransform();

    var pointCount = cw / 4;
    var x = void 0,
        y = void 0,
        r = void 0;

    var r_seed = void 0;

    var waveScale = SHORT / 8;
    var harmScale = waveScale / 2;
    var bubbleSize = void 0;
    var bubbleMax = ch / 4;

    var cloudSize = void 0;
    var cloudSizeMax = void 0;

    var xnorm = void 0,
        ynorm = void 0;
    var countNorm = void 0;

    ctx.lineCap = 'round';

    // test seeds
    var cx = (0, _utils.randomInRange)(cw * .25, cw * .75);
    var cy = (0, _utils.randomInRange)(ch * .25, ch * .75);
    var cr = SCALE / 6;

    // elliptical cluster func
    var drawCluster = function drawCluster(ctx, cx, cy, size) {
        var maxSize = size;
        var eccentricity = 0.618;

        var pointCount = void 0;

        // ellipse constraints:
        // x = a * cos(t);
        // y = b * sin(t);
        // native func:
        // ctx.ellipse(x, y, 2a, 2b, rotation, startAngle, endAngle);

        pointCount = 6;
        //pointCount = 12;
        //pointCount = 24;

        // ideally we draw a main large ellipse
        // then draw medium ellipses near the lower corners,
        // then a few mixed in the primary axes and upper corners.

        var theta = void 0;

        for (var i = 0; i <= pointCount; i++) {

            //theta = TWOPI/pointCount * i;
            theta = PI * (0, _utils.randomInRange)(0, 1);

            r = (0, _utils.randomInRange)(maxSize / 4, maxSize);

            x = r * Math.cos(theta);
            y = r * eccentricity * Math.sin(theta);

            size = maxSize * (1 - r / size) + maxSize / 4;
            size = maxSize / 4 + 0.75 * maxSize * (Math.cos(2 * theta) + 1) / 2;

            ctx.fillStyle = 'white';
            ctx.strokeStyle = 'black';

            ctx.beginPath();
            ctx.ellipse(cx + x, cy + y, size, size * eccentricity, 0, 0, TWOPI);
            ctx.fill();
            //ctx.stroke();
        }

        ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)';
        ctx.beginPath();
        ctx.ellipse(cx, cy, maxSize, maxSize * eccentricity, 0, 0, TWOPI);
        ctx.stroke();
        ctx.fill();
    };

    //drawCluster(ctx, cx, cy, cr);

    var clusterCount = 3;
    clusterCount = Math.round(cw / 250);

    // now draw many clusters

    cloudSizeMax = SCALE / 4;

    for (var i = 0; i < clusterCount; i++) {
        countNorm = i / clusterCount;
        x = i * cw / clusterCount + cw / clusterCount * .5;
        y = wave(countNorm, 0) * waveScale; // input a normalized value
        y += ch / 2; // center, roughly

        cloudSize = (0, _utils.randomInRange)(0.5, 1) * cloudSizeMax;
        r_seed = Math.random();

        console.log('cloudSize', cloudSize, cloudSizeMax);

        y -= (0, _utils.randomInRange)(0, waveScale);

        drawCluster(ctx, x, y, cloudSize);

        /*drawCircle(ctx, x, y , harmScale, {
           fill: null,
           stroke: fg
        });*/
    }

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            // apply noise from supplied canvas
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            // create noise pattern and apply
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, cw / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 32 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.grads = grads;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _shapes = __webpack_require__(3);

var _utils = __webpack_require__(0);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var SILVERS = ['#ffffff', '#f2f2f2', '#eeeeee', '#e7e7e7', '#e0e0e0', '#d7d7d7'];

var PI = Math.PI;
var TWOPI = PI * 2;

// Tile the container
function grads(options) {
    var defaults = {
        container: 'body',
        palette: _palettes2.default.plum_sauce,
        middleOut: 'auto', // 'auto' 'true' 'false'
        drawShadows: false,
        optics: true, // 'auto', true, false
        addNoise: 0.04,
        noiseInput: null,
        clear: true
    };
    var opts = {};
    opts = Object.assign(Object.assign(opts, defaults), options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);
    var LONG = Math.max(cw, ch);
    var SHORT = Math.min(cw, ch);
    var AREA = cw * ch;

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx; // canvas ctx or svg tag

    ctx = el.getContext('2d');

    // optional clear
    if (opts.clear) {
        el.width = container.offsetWidth;
        el.height = container.offsetHeight;
        ctx.clearRect(0, 0, cw, ch);
    }

    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // drawing order
    var MIDDLEOUT = void 0;
    if (opts.middleOut === 'auto') {
        MIDDLEOUT = Math.random() > 0.5;
    } else if (opts.middleOut === 'false') {
        MIDDLEOUT = false;
    } else {
        MIDDLEOUT = true;
    }

    var OPTICS = void 0;
    if (opts.optics === 'auto') {
        OPTICS = Math.random() < 0.5;
    } else if (opts.optics === 'false') {
        OPTICS = false;
    } else {
        OPTICS = !!opts.optics;
    }

    // shadows
    function shadowsOn() {
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.shadowBlur = 25 * Math.min(cw, ch) / 800;
        ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
    }

    function shadowsOff() {
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.shadowBlur = 0;
        ctx.shadowColor = 0;
    }

    // split into shapes
    // add some slices, add more for high aspect ratios
    var sliceCount = Math.round((0, _utils.randomInRange)(6, 10) * cw / ch);
    if (sliceCount % 2 == 0) sliceCount++;

    var sw = cw / sliceCount;

    var g = void 0;

    var colors = opts.palette.length;

    var slices = [];

    if (Math.random() > 0.5) {
        opts.palette = opts.palette.reverse();
    }

    // Array of functions which will define slices. Slices are just arrays of gradients.
    var sliceGenerators = [
    // random
    function (count) {
        var slices = [];
        for (var i = 0; i <= count; i++) {
            g = ctx.createLinearGradient(0, 0 + 0.25 * (0, _utils.randomInRange)(-ch, ch), 0, ch + 0.25 * (0, _utils.randomInRange)(-ch, ch));

            for (var c = 0; c <= colors - 1; c++) {
                g.addColorStop(1 / colors * c, opts.palette[c]);
            }

            slices.push(g);
        }
        return slices;
    },
    // sine
    function (count) {
        var slices = [];
        var rate = (0, _utils.randomInRange)(0.5, 2);
        var phase = (0, _utils.randomInRange)(-PI, PI);
        var a1 = (0, _utils.randomInRange)(0.2, 1.5);
        var a2 = (0, _utils.randomInRange)(0.2, 1.5);

        for (var i = 0; i <= count; i++) {
            g = ctx.createLinearGradient(0, 0 + 0.25 * a1 * ch * Math.sin(rate * (i / count * TWOPI + phase)), 0, ch + 0.25 * a2 * ch * Math.sin(rate * (i / count * TWOPI + phase)));

            for (var c = 0; c <= colors - 1; c++) {
                g.addColorStop(1 / colors * c, opts.palette[c]);
            }

            slices.push(g);
        }
        return slices;
    }];

    slices = sliceGenerators[1](sliceCount);

    // Step through the slices, and draw a rectangle with the gradient defined in each slice

    // A utility function to draw a single slice
    function drawSliceAtIndex(i) {
        shadowsOn();

        ctx.beginPath();
        ctx.fillStyle = slices[i];
        ctx.rect(i * sw, 0, sw, ch);
        ctx.closePath();
        ctx.fill();

        if (OPTICS) {
            shadowsOff();

            var steps = 60;
            var inc = sw / steps;

            var coef = 0.05;
            var vscale = void 0;

            ctx.save();
            for (var j = 0; j < steps; j++) {
                (0, _utils.resetTransform)(ctx);

                vscale = 1 + coef;
                vscale -= 4 / PI * coef * Math.sin(PI * j / steps);
                vscale -= 4 / PI * coef * 1 / 2 * Math.sin(PI * 2 * j / steps);
                vscale -= 4 / PI * coef * 1 / 4 * Math.sin(PI * 4 * j / steps);
                // vscale -= 4/PI * coef * 1/8 * Math.sin(PI * 8 * j/steps);
                // vscale -= 4/PI * coef * 1/16 * Math.sin(PI * 16 * j/steps);
                // vscale -= 4/PI * coef * 1/32 * Math.sin(PI * 32 * j/steps);

                ctx.translate(0, ch / 2);
                ctx.scale(1, vscale);
                ctx.translate(0, -ch / 2);

                ctx.beginPath();
                ctx.fillStyle = slices[i];
                ctx.rect(i * sw + j * inc, 0, inc + 0.5, ch);

                ctx.closePath();
                ctx.fill();
            }
            ctx.restore();
        }
    }

    // If middle out, alternate outward from the center slice, to get nice shadow stacking
    // Otherwise just draw them in order
    if (MIDDLEOUT) {
        // start in the middle and alternate outward
        var middle = Math.floor(sliceCount / 2);
        var steps = 0;
        var increment = 1;

        drawSliceAtIndex(middle);
        steps = 1;
        while (steps < sliceCount) {
            drawSliceAtIndex(middle + increment);
            drawSliceAtIndex(middle - increment);
            increment++;
            steps += 2;
        }
    } else {
        // draw each slice in order
        for (var i = 0; i < slices.length; i++) {
            drawSliceAtIndex(i);
        }
    }

    // Add effect elements
    // ...

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, cw / 3);
        }
    }

    // END RENDERING

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 33 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

exports.doodle = doodle;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _hexScatter = __webpack_require__(4);

var _hexScatter2 = _interopRequireDefault(_hexScatter);

var _utils = __webpack_require__(0);

var _fieldUtils = __webpack_require__(5);

var _shapes = __webpack_require__(3);

var _speckle = __webpack_require__(8);

var _roughen = __webpack_require__(34);

var _roughen2 = _interopRequireDefault(_roughen);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.north_beach,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true,
    roughen: 4, // integer number of passes, or 0 for none
    density: 'coarse' // [auto, coarse, fine]
};

var PI = Math.PI;
var TWOPI = Math.PI;
var DENSITIES = ['coarse', 'fine'];

// Main function
function doodle(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);
    var LONG = Math.max(cw, ch);
    var SHORT = Math.min(cw, ch);
    var AREA = cw * ch;

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // modes and styles
    var DENSITY = opts.density === 'auto' ? (0, _utils.randItem)(DENSITIES) : opts.density;

    // color funcs
    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // how many cells are in the grid?
    var countMin = void 0,
        countMax = void 0;
    if (DENSITY === 'coarse') {
        countMin = 15;
        countMax = 25;
    } else {
        countMin = 60;
        countMax = 100;
    }

    var cellSize = Math.round(SHORT / (0, _utils.randomInRange)(countMin, countMax));
    //console.log(`cellSize: ${cellSize}, countMin:${countMin}, countMax:${countMax}, ${GRIDMODE}, ${DENSITY}`);

    // setup vars for each cell
    var x = 0;
    var y = 0;
    var xnorm = 0;
    var ynorm = 0;
    var renderer = void 0;

    // shared colors
    var bg = getSolidFill();

    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);

    // shared foregrounds
    var fg = getContrastColor();
    var fg2 = getContrastColor();

    // draw background
    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, cw, ch);
    ctx.lineJoin = 'round';

    ctx.strokeStyle = fg;

    var cellCount = cw / cellSize;
    var rateMax = 3;
    if (DENSITY === 'fine' && Math.random() < 0.5) {
        rateMax = 6;
    }

    // tail vars
    var _x = void 0,
        _y = void 0,
        len = void 0;

    // dotScale will be multiplied by 2. Keep below .25 to avoid bleed.
    // Up to 0.5 will lead to full coverage.
    var dotScale = cellSize * (0, _utils.randomInRange)(0.1, 0.2);
    // line width
    var weight = cellSize * (0, _utils.randomInRange)(0.05, 0.15);

    ctx.lineWidth = weight;
    ctx.lineCap = 'round';

    // --------------------------------------
    // BEGIN SHAPES
    // --------------------------------------

    var drawDash2 = function drawDash2(ctx, x, y, size, opts) {
        var angle = opts.angle || (0, _utils.randomInRange)(0, PI);
        var d = size * (0, _utils.randomInRange)(0.75, 1);
        var gap = size / 2;
        var jitter = 0.3;

        ctx.translate(x, y);
        ctx.rotate(angle);

        ctx.beginPath();

        ctx.translate(weight * (0, _utils.randomInRange)(-jitter, jitter), weight * (0, _utils.randomInRange)(-jitter, jitter));

        ctx.moveTo(-d, -gap);
        ctx.lineTo(d, -gap);

        ctx.translate(weight * (0, _utils.randomInRange)(-jitter, jitter), weight * (0, _utils.randomInRange)(-jitter, jitter));

        ctx.moveTo(-d, gap);
        ctx.lineTo(d, gap);

        ctx.stroke();

        (0, _utils.resetTransform)(ctx);
    };

    var drawDash3 = function drawDash3(ctx, x, y, size, opts) {
        var angle = opts.angle || (0, _utils.randomInRange)(0, PI);
        var d = size * (0, _utils.randomInRange)(0.75, 1);
        var gap = size / 3 * 1.75; // make room for extra stroke
        var jitter = 0.33;

        ctx.translate(x, y);
        ctx.rotate(angle);

        ctx.beginPath();

        // randomize between strokes
        ctx.translate(weight * (0, _utils.randomInRange)(-jitter, jitter), weight * (0, _utils.randomInRange)(-jitter, jitter));
        d *= (0, _utils.randomInRange)(0.9, 1.1);

        ctx.moveTo(-d, -gap);
        ctx.lineTo(d, -gap);

        // randomize between strokes
        ctx.translate(weight * (0, _utils.randomInRange)(-jitter, jitter), weight * (0, _utils.randomInRange)(-jitter, jitter));
        d *= (0, _utils.randomInRange)(0.9, 1.1);

        ctx.moveTo(-d, 0);
        ctx.lineTo(d, 0);

        // randomize between strokes
        ctx.translate(weight * (0, _utils.randomInRange)(-jitter, jitter), weight * (0, _utils.randomInRange)(-jitter, jitter));
        d *= (0, _utils.randomInRange)(0.9, 1.1);

        ctx.moveTo(-d, gap);
        ctx.lineTo(d, gap);

        ctx.stroke();

        (0, _utils.resetTransform)(ctx);
    };

    var drawHash2 = function drawHash2(ctx, x, y, size, opts) {
        var angle = opts.angle || (0, _utils.randomInRange)(0, PI);
        drawDash2(ctx, x, y, size, { angle: angle });
        drawDash2(ctx, x, y, size, { angle: angle + PI / 2 });
    };

    var drawHash3 = function drawHash3(ctx, x, y, size, opts) {
        var angle = opts.angle || (0, _utils.randomInRange)(0, PI);
        drawDash3(ctx, x, y, size, { angle: angle });
        drawDash3(ctx, x, y, size, { angle: angle + PI / 2 });
    };

    var drawSpiral = function drawSpiral(ctx, x, y, size, opts) {
        var count = 30; // points

        var t = (0, _utils.randomInRange)(0, TWOPI);
        var arc = TWOPI * (0, _utils.randomInRange)(3, 5);

        var direction = (0, _utils.randItem)([-1, 1]);

        // func to return an x,y point for theta, r
        // bake in offset t and the direction
        var f = function f(theta, r) {
            return [Math.cos(t + theta * direction) * r, Math.sin(t + theta * direction) * r];
        };

        ctx.beginPath();
        ctx.moveTo(x, y);

        for (var i = 0; i < count; i++) {
            // r scaling is magic number, I don't know why the scaling to
            // count isn't working
            var _f = f(i * arc / count, i * size / count * 0.6),
                _f2 = _slicedToArray(_f, 2),
                _x2 = _f2[0],
                _y2 = _f2[1];

            x += _x2;
            y += _y2;
            ctx.lineTo(x, y);
        }
        ctx.stroke();
    };

    var drawSquiggle = function drawSquiggle(ctx, x, y, size, opts) {
        var angle = opts.angle || (0, _utils.randomInRange)(0, PI);

        ctx.translate(x, y);
        ctx.rotate(angle);

        ctx.beginPath();

        var _x = -size / 2;
        var _y = -size / 2;

        var steps = (0, _utils.randomInt)(3, 6);

        ctx.beginPath();
        ctx.moveTo(_x, _y);

        for (var i = 0; i < steps; i++) {
            var dir = i % 2 ? 1 : -1;
            ctx.quadraticCurveTo(_x, _y + size / 2 * dir, _x + size / steps, _y + size * dir);
            _x = _x + size / steps;
            _y = _y + size * dir;
        }

        ctx.stroke();

        (0, _utils.resetTransform)(ctx);
    };

    var drawLightning = function drawLightning(ctx, x, y, size, opts) {
        var angle = opts.angle || (0, _utils.randomInRange)(0, PI * 2);

        // these look a little better a little bigger
        size *= (0, _utils.randomInRange)(1, 1.2);

        ctx.translate(x, y);
        ctx.rotate(angle);

        ctx.beginPath();
        ctx.moveTo(0, size * -1); // top left
        ctx.lineTo(size * 0.7, size * -1); // top right
        ctx.lineTo(size * 0.26, size * -0.35); // middle right
        ctx.lineTo(size * 0.67, size * -0.35); // middle push right
        ctx.lineTo(size * -0.55, size * 1); // bottom point
        ctx.lineTo(size * -0.10, size * -0.08); // middle left
        ctx.lineTo(size * -0.42, size * -0.08); // middle push left
        ctx.closePath(); // return to top left

        ctx.stroke();
        (0, _utils.resetTransform)(ctx);
    };

    var drawStar = function drawStar(ctx, x, y, size, opts) {
        var angle = opts.angle || (0, _utils.randomInRange)(0, PI * 2);

        size *= (0, _utils.randomInRange)(1, 1.2);

        // define the star
        var pts = [];
        pts.push([0, -1]);
        pts.push([0.59, 0.95]);
        pts.push([-0.86, -0.26]);
        pts.push([0.86, -0.26]);
        pts.push([-0.59, 0.95]);
        pts.push([0, -1]);

        // scale points and add jitter
        var jitter = 0.2;
        pts = pts.map(function (p) {
            return [p[0] * size * (1 + jitter * (0, _utils.randomInRange)(-1, 1)), p[1] * size * (1 + jitter * (0, _utils.randomInRange)(-1, 1))];
        });

        ctx.translate(x, y);
        ctx.rotate(angle);

        ctx.beginPath();
        ctx.moveTo.apply(ctx, _toConsumableArray(pts.shift()));
        while (pts.length) {
            ctx.lineTo.apply(ctx, _toConsumableArray(pts.shift()));
        }

        ctx.stroke();
        ctx.resetTransform(ctx);
    };

    // --------------------------------------
    // END SHAPES
    // --------------------------------------


    // a set of independent transforms to use while rendering
    var trans = {
        radius: (0, _fieldUtils.createTransform)(0, rateMax),
        angle: (0, _fieldUtils.createTransform)(0, rateMax),
        color: (0, _fieldUtils.createTransform)(0, rateMax / 4)
    };

    function randomScatter(size, w, h) {
        var pts = [];
        var xcount = Math.ceil(w / size);
        var ycount = Math.ceil(h / size);
        var count = xcount * ycount;
        while (count--) {
            pts.push([(0, _utils.randomInRange)(0, w), (0, _utils.randomInRange)(0, h)]);
        }
        return pts;
    }

    var pts = [];

    // If we are warping the grid, we should plot points outside of the canvas
    // bounds to avoid gaps at the edges. Shift them over below.
    var overscan = 1;

    pts = (0, _hexScatter2.default)(cellSize, cw * overscan, ch * overscan);

    var shapes = [drawDash2, drawDash3, _shapes.drawCircle, _shapes.drawTriangle, _shapes.drawSquare, _shapes.drawRect, drawSpiral, drawHash2, drawHash3, drawSquiggle, drawLightning, drawStar];

    shapes = (0, _utils.shuffle)(shapes);
    //shapes = [drawStar];

    var colorCount = contrastPalette.length;

    // point renderers:
    var drawPointsWithRandomColorRandomShape = function drawPointsWithRandomColorRandomShape(p, i) {
        x = p[0];
        y = p[1];
        xnorm = x / cw;
        ynorm = y / ch;

        ctx.fillStyle = null;
        ctx.strokeStyle = getContrastColor();

        (0, _utils.randItem)(shapes)(ctx, x, y, dotScale + (1 + trans.radius(xnorm, ynorm)) * (cellSize / 2 - dotScale) / 2.5, {
            fill: null,
            stroke: ctx.strokeStyle, //fg2,
            angle: PI * trans.angle(xnorm, ynorm)
        });
    };

    var drawPointsWithColorField = function drawPointsWithColorField(p, i) {
        x = p[0];
        y = p[1];
        xnorm = x / cw;
        ynorm = y / ch;

        var colorIndex = Math.round((trans.color(xnorm, ynorm) + 1) * colorCount) % colorCount;

        ctx.fillStyle = null;
        ctx.strokeStyle = contrastPalette[colorIndex];

        (0, _utils.randItem)(shapes)(ctx, x, y, dotScale + (1 + trans.radius(xnorm, ynorm)) * (cellSize / 2 - dotScale) / 2.5, {
            fill: null,
            stroke: contrastPalette[colorIndex], //fg2,
            angle: PI * trans.angle(xnorm, ynorm)
        });
    };

    var drawPointsWithShapesFromColors = function drawPointsWithShapesFromColors(p, i) {
        x = p[0];
        y = p[1];
        xnorm = x / cw;
        ynorm = y / ch;

        var colorIndex = Math.round((trans.color(xnorm, ynorm) + 1) / 2 * colorCount) % colorCount;

        var shapeFunc = shapes[colorIndex % shapes.length];

        ctx.fillStyle = null;
        ctx.strokeStyle = contrastPalette[colorIndex];

        shapeFunc(ctx, x, y, dotScale + (1 + trans.radius(xnorm, ynorm)) * (cellSize / 2 - dotScale) / 2.5, {
            fill: null,
            stroke: contrastPalette[colorIndex], //fg2,
            angle: (0, _utils.randomInRange)(PI * 2) //PI * trans.angle(xnorm, ynorm)
        });
    };

    var drawPointsWithConsistentColoredShapes = function drawPointsWithConsistentColoredShapes(p, i) {
        x = p[0];
        y = p[1];
        xnorm = x / cw;
        ynorm = y / ch;

        var shapeIndex = (0, _utils.randomInt)(shapes.length - 1);

        var colorIndex = shapeIndex % contrastPalette.length;

        var shapeFunc = shapes[shapeIndex];

        ctx.fillStyle = null;
        ctx.strokeStyle = contrastPalette[colorIndex];

        shapeFunc(ctx, x, y, dotScale + (1 + trans.radius(xnorm, ynorm)) * (cellSize / 2 - dotScale) / 2.5, {
            fill: null,
            stroke: contrastPalette[colorIndex], //fg2,
            angle: PI * trans.angle(xnorm, ynorm)
        });
    };

    // create collection of point renderers
    var pointRenderers = {
        //drawPointsWithRandomColorRandomShape,
        drawPointsWithColorField: drawPointsWithColorField,
        drawPointsWithShapesFromColors: drawPointsWithShapesFromColors,
        drawPointsWithConsistentColoredShapes: drawPointsWithConsistentColoredShapes

        // step thru points with selected renderer
    };pts.forEach(pointRenderers[(0, _utils.randItem)(Object.keys(pointRenderers))]);

    // reset canvas
    ctx.globalAlpha = 1;

    // donegal roughening
    if (opts.roughen > 0) {
        (0, _speckle.donegal)(el, 'random');
    }

    // classic roughen via shifting pixels
    (0, _roughen2.default)(el, opts.roughen);

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            // apply noise from supplied canvas
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            // create noise pattern and apply
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, cw / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 34 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = roughen;

var _utils = __webpack_require__(0);

// DEPRECATED IN FAVOR OF postprocess/speckle.js:dapple

function roughen(canvas) {
    var steps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;

    if (!steps) return;
    var ctx = canvas.getContext('2d');
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var px = imageData.data; // px to manipulate

    var refCtx = canvas.getContext('2d');
    var ref = refCtx.getImageData(0, 0, canvas.width, canvas.height).data; // reference copy

    var n = px.length;
    var w = canvas.width;
    var h = canvas.height;
    var newIdx = void 0;

    var scratch = document.createElement('canvas');
    scratch.width = w;
    scratch.height = h;
    var scratchCtx = scratch.getContext('2d');

    var directions = [-1, 1, -w, w];
    var distances = [1, 2, 3];

    function shift_pixels(alpha) {
        for (var i = 0; i <= n; i += 4) {
            newIdx = 4 * (0, _utils.randItem)(directions) * (0, _utils.randItem)(distances);
            newIdx += i;
            if (newIdx > n) {
                newIdx = newIdx % n;
            }
            if (newIdx < 0) {
                newIdx = n - newIdx;
            }
            px[newIdx + 0] = ref[i + 0];
            px[newIdx + 1] = ref[i + 1];
            px[newIdx + 2] = ref[i + 2];
            px[newIdx + 3] = ref[i + 3];
        }

        scratchCtx.putImageData(imageData, 0, 0);
        ctx.globalAlpha = alpha;

        ctx.fillStyle = ctx.createPattern(scratch, 'repeat');
        ctx.fillRect(0, 0, w, h);
    }

    var eachAlpha = 1 / (steps + 2);
    while (steps) {
        shift_pixels(eachAlpha);
        steps--;
    }

    ctx.globalAlpha = 1;
}

/***/ }),
/* 35 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.pillars = pillars;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.de_stijl,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true,
    shadows: 'auto', // [auto, true, false] auto = 50/50
    gridMode: 'normal', // [auto, normal, scatter, random]
    density: 'auto' // [auto, coarse, fine]
};

var PI = Math.PI;
var GRIDMODES = ['normal', 'scatter', 'random'];
var DENSITIES = ['coarse', 'fine'];

// Main function
function pillars(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);
    var LONG = Math.max(cw, ch);
    var SHORT = Math.min(cw, ch);
    var AREA = cw * ch;

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // modes and styles
    var GRIDMODE = opts.gridMode === 'auto' ? (0, _utils.randItem)(GRIDMODES) : opts.gridMode;
    var DENSITY = opts.density === 'auto' ? (0, _utils.randItem)(DENSITIES) : opts.density;
    var SHADOWS = opts.shadows === 'auto' ? (0, _utils.randItem)([true, false]) : opts.shadows;

    // color funcs
    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // how many cells are in the grid?
    var countMin = void 0,
        countMax = void 0;
    if (DENSITY === 'coarse') {
        countMin = 5;
        countMax = 10;
    } else {
        countMin = 10;
        countMax = 25;
    }

    var cellSize = Math.round(SHORT / (0, _utils.randomInRange)(countMin, countMax));
    //console.log(`cellSize: ${cellSize}, ${GRIDMODE}, ${DENSITY}`);

    // setup vars for each cell
    var x = 0;
    var y = 0;
    var xnorm = 0;
    var ynorm = 0;
    var renderer = void 0;

    // shared colors
    var bg = getSolidFill();

    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);

    // shared foregrounds
    var fg = getContrastColor();
    var fg2 = getContrastColor();
    var fg3 = getContrastColor();

    // draw background
    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, cw, ch);

    ctx.strokeStyle = fg;

    var cellCount = cw / cellSize;
    var rateMax = 3;
    if (DENSITY === 'fine' && Math.random() < 0.5) {
        rateMax = 6;
    }

    // tail vars
    var _x = void 0,
        _y = void 0,
        len = void 0;

    // line width
    var weight = cellSize * (0, _utils.randomInRange)(0.25, .866);

    ctx.lineWidth = weight;
    ctx.lineCap = 'round';

    // The max height of each column. Thinner cols can be taller.
    var max = cellSize * (0, _utils.randomInRange)(0.5, 1 / (weight / cellSize));

    // --------------------------------------


    // Create a function which is a periodic transform of x, y
    function createTransform() {
        var rateMin = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
        var rateMax = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;

        var rate1 = (0, _utils.randomInRange)(0, rateMax / 2);
        var rate2 = (0, _utils.randomInRange)(0, rateMax / 2);
        var rate3 = (0, _utils.randomInRange)(rateMax / 2, rateMax);
        var rate4 = (0, _utils.randomInRange)(rateMax / 2, rateMax);

        var phase1 = (0, _utils.randomInRange)(-PI, PI);
        var phase2 = (0, _utils.randomInRange)(-PI, PI);
        var phase3 = (0, _utils.randomInRange)(-PI, PI);
        var phase4 = (0, _utils.randomInRange)(-PI, PI);

        var c1 = (0, _utils.randomInRange)(0, 1);
        var c2 = (0, _utils.randomInRange)(0, 1);
        var c3 = (0, _utils.randomInRange)(0, 1);
        var c4 = (0, _utils.randomInRange)(0, 1);
        return function (xnorm, ynorm) {
            var t1 = Math.sin(xnorm * rate1 * 2 * PI + phase1);
            var t2 = Math.sin(ynorm * rate2 * 2 * PI + phase2);
            var t3 = Math.sin(xnorm * rate3 * 2 * PI + phase3);
            var t4 = Math.sin(ynorm * rate4 * 2 * PI + phase4);
            return (c1 * t1 + c2 * t2 + c3 * t3 + c4 * t4) / (c1 + c2 + c3 + c4);
        };
    }

    // a set of independent transforms to use while rendering
    var trans = {
        x: createTransform(rateMax), // (x,y)=>0,//
        y: createTransform(rateMax), // (x,y)=>0,//
        h: createTransform(rateMax) // (x,y)=>0,//
    };

    function hexPack(size, w, h) {
        var pts = [];
        var xcount = Math.ceil(w / size) + 2;
        var ycount = Math.ceil(h / (size * .8660)) + 10; // extra rows
        var count = xcount * ycount;
        var x = void 0,
            y = void 0;
        var shift = void 0;
        for (var j = 0; j <= ycount; j++) {
            shift = j % 2 ? size * .5 : 0;
            for (var i = 0; i <= xcount; i++) {
                x = size * i - shift;
                y = size * j * .8660;
                pts.push([x, y]);
            }
        }
        return pts;
    }

    var pts = [];

    // If we are warping the grid, we should plot points outside of the canvas
    // bounds to avoid gaps at the edges. Shift them over below.
    var overscan = 1;

    pts = hexPack(cellSize, cw, ch);

    var shadowAngle = (0, _utils.randomInRange)(0.2, 0.66) * (0, _utils.randItem)([-1, 1]);
    var shadowStrength = (0, _utils.randomInRange)(0.1, 0.3);

    // step thru points
    pts.forEach(function (p, i) {
        x = p[0];
        y = p[1];
        xnorm = x / cw;
        ynorm = y / ch;

        _x = trans.x(xnorm, ynorm);
        _y = (trans.y(xnorm, ynorm) + 1) / 2 * max;

        if (_y < 0) console.log('oh no', _y);

        // add jitter
        //_y += 0.15 * cellSize * randomInRange(-1, 1);
        _y *= (0, _utils.randomInRange)(1, 1.15);

        ctx.translate(x, y);

        // draw shadow first

        if (opts.shadows) {
            ctx.strokeStyle = 'black';
            ctx.globalAlpha = shadowStrength;
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(_y * shadowAngle, _y);
            ctx.stroke();
            ctx.globalAlpha = 1;
        }

        // draw main post
        var grad = ctx.createLinearGradient(0, -_y, 0, 2 * max - _y);
        grad.addColorStop(0, fg);
        grad.addColorStop(1, fg2);
        ctx.strokeStyle = grad;

        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -_y);
        ctx.stroke();

        (0, _shapes.drawCircle)(ctx, 0, -_y, weight / 2 - weight / 8, { fill: fg3 });

        ctx.translate(-x, -y);
    });

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            // apply noise from supplied canvas
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            // create noise pattern and apply
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, cw / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 36 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

exports.rings = rings;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _hexScatter = __webpack_require__(4);

var _hexScatter2 = _interopRequireDefault(_hexScatter);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var PI = Math.PI;
var TWOPI = PI * 2;
var STYLES = ['normal']; // TODO

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.plum_sauce,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true,
    style: 'auto', // from STYLES
    mixWeight: false,
    isolate: true

    // Main function
};function rings(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);
    var LONG = Math.max(cw, ch);
    var SHORT = Math.min(cw, ch);
    var AREA = cw * ch;
    var ASPECT = LONG / SHORT;

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // modes and styles
    var STYLE = opts.style === 'auto' ? (0, _utils.randItem)(STYLES) : opts.style;

    console.log('==================================\nRings:', STYLE);

    // color funcs
    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // setup

    var xnorm = 0;
    var ynorm = 0;
    var renderer = void 0;

    // shared colors
    var bg = getSolidFill();

    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    //contrastPalette.sort(()=>(randomInRange(-1, 1)));
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);
    var colorCount = contrastPalette.length;

    // draw background
    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, cw, ch);

    // rings

    /*
    Approach:
    - choose some center points
    - define a set of widening rings around each center point
    - each ring is solid or dashed, and of varying length and offset
    - all ring defs are in a common array, which we shuffle so they will
      be drawn interleaved if ring clusters overlap
    - around the last center point, draw radial rays, either starting at
      ring edge going outward, or at outer perimeter coming inward.
    - on top of this, draw rings twice: once with extra thickness in the
      background color, then again with a random foreground color.
      This leaves a cutout/outline where they overlap.
    */

    // max line weight depends on canvas size
    var MAXWEIGHT = SCALE / (50 + LONG / 100);
    ctx.lineWidth = MAXWEIGHT;
    console.log('max thickness', MAXWEIGHT);

    var centers = []; // array of center points
    var rings = []; // array of all rings

    // pick a few center points
    // more for large layouts
    var centerCount = (0, _utils.randomInt)(2, 2 + SCALE / 400);
    // more rings per group in large and stretched layouts
    var ringsPerGroup = [5 + Math.round(SCALE / 150), 10 + Math.round(ASPECT * 20)];
    var spacing = 3; // between rings

    // Radius to step outward, intial value. Keep in outer scope because
    // rays will rely on this for drawing too.
    var r = 0;

    // center vars
    // Scatter points coarsely
    // These numbers aren't great
    var MARGIN = SHORT / 12;
    var pts = (0, _hexScatter2.default)(SHORT * 0.5, cw - MARGIN * 2, ch - MARGIN * 2);

    pts.forEach(function (p, i) {
        p[0] += MARGIN;
        p[1] += MARGIN;
        // The scatter algo will place points out of bounds or near edges.
        // Discard those points.
        var bounds = true;
        if (p[0] > cw - MARGIN) bounds = false;
        if (p[0] < MARGIN) bounds = false;
        if (p[1] > ch - MARGIN) bounds = false;
        if (p[1] < MARGIN) bounds = false;

        if (bounds) {
            centers.push({ x: p[0], y: p[1] });
            //drawCircle(ctx,p[0], p[1], 30, {fill:'red'});
        }
    });

    // Limit centers, since hexscatter has a lot of overscan and does
    // poorly when cell size is large compared to container.
    // Allow more centers for stretched layouts.
    centers = (0, _utils.shuffle)(centers);
    var maxCenters = Math.ceil(ASPECT);
    centers = centers.slice(0, maxCenters);

    // Step through the centers and create ring clusters for each
    centers.forEach(function (center, i) {
        // intial r
        r = SCALE / 20;

        var ringCount = _utils.randomInt.apply(undefined, ringsPerGroup);
        // make several rings
        while (ringCount--) {
            // create a ring
            var thickness = (0, _utils.randomInRange)(MAXWEIGHT / 4, MAXWEIGHT);
            r += thickness / 2 + spacing;

            var arcLength = void 0;
            var arcOffset = void 0;

            // choose between incomplete or complete rings
            if (Math.random() < 0.75) {
                // incomplete vary from 1/4 to 3/4 turn
                arcLength = (0, _utils.randomInRange)(TWOPI * 1 / 3, TWOPI * 5 / 7);
                arcOffset = (0, _utils.randomInRange)(0, PI * 2);
            } else {
                // complete circle
                arcLength = PI * 2;
                arcOffset = 0;
            }

            // define the ring
            var ring = {
                x: center.x,
                y: center.y,
                r: r,
                start: arcOffset,
                end: arcOffset + arcLength,
                reverse: 0, //(Math.random() > 0.5),
                thickness: thickness,
                color: getContrastColor(),
                dashes: ''

                // push it to rings[]
            };rings.push(ring);

            // increment r by ring thickness + spacing
            r += ring.thickness / 2 + spacing;
        }
    });

    console.log(rings.length + ' rings around ' + centers.length + ' centers');

    /**
     * util for drawing rays
     * from @p1 to @p2, at thickness @weight.
     * Start solid and draws the last @dottedFraction dotted or dashed,
     * depending on weight.
     * Relies on a global context ctx;
     * */
    function dottedLine(p1, p2, weight) {
        var dottedFraction = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0.33;

        ctx.lineWidth = weight;

        var _p = _slicedToArray(p1, 2),
            x1 = _p[0],
            y1 = _p[1];

        var _p2 = _slicedToArray(p2, 2),
            x2 = _p2[0],
            y2 = _p2[1];

        var dx = x2 - x1;
        var dy = y2 - y1;

        var d = Math.sqrt(dx * dx + dy * dy);

        var t = Math.atan(dy / dx);
        if (x2 < x1) t += PI;

        var mx = x1 + Math.cos(t) * d * (1 - dottedFraction);
        var my = y1 + Math.sin(t) * d * (1 - dottedFraction);

        // start solid
        ctx.lineCap = 'butt';
        ctx.setLineDash([]);
        ctx.lineDashOffset = 0;
        // draw solid segment
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(mx, my);
        ctx.stroke();

        // dotted portion:
        ctx.beginPath();
        ctx.lineCap = 'round';
        if (weight <= 4) {
            // thin strokes
            ctx.setLineDash([weight, weight * 4]);
            ctx.lineDashOffset = 0;
        } else {
            // thick strokes
            ctx.setLineDash([0, weight * 2]);
            ctx.lineDashOffset = weight * 1;
        }
        ctx.moveTo(mx, my);
        ctx.lineTo(x2, y2);
        ctx.stroke();

        // reset dashes for any following drawing
        ctx.setLineDash([]);
        ctx.lineDashOffset = 0;
    }

    // draw rays
    // start from the last incremented value of r
    var minRayRadius = r + MAXWEIGHT;
    var maxrayEnd = rayStart * (0, _utils.randomInRange)(1.1, 2);
    var rayStart = void 0,
        rayEnd = void 0;

    var rayStyle = (0, _utils.randItem)(['INNER', 'OUTER']);

    // bigger circle = room for more rays
    var rayCount = void 0;
    if (rayStyle === 'OUTER') {
        rayCount = (0, _utils.randomInt)(60, 120);
    } else {
        rayCount = (0, _utils.randomInt)(40, 80);
    }

    console.log(rayCount + ' rays');
    var rays = [];
    // use the last center, because that corresponds to the r value we are using
    var rayCenter = centers[centers.length - 1];

    // linecap for rays is always butt, for precise origin
    ctx.lineCap = 'butt';
    var dottedFraction = void 0; // will pass to dottedLine with various values

    // step through the rays
    for (var i = 0; i < rayCount; i++) {
        ctx.strokeStyle = getContrastColor();

        var theta = i * TWOPI / rayCount;
        var _rayEnd = minRayRadius * (0, _utils.randomInRange)(1.1, 2);
        var _cos = void 0,
            _sin = void 0;
        _cos = Math.cos(theta);
        _sin = Math.sin(theta);

        var _start = void 0,
            _end = void 0;
        if (rayStyle === 'INNER') {
            _start = minRayRadius;
            _end = _rayEnd;
        } else if (rayStyle === 'OUTER') {
            _start = LONG * 1.44;
            _end = _rayEnd;
        } else {
            return;
        }

        var rayWidth = void 0;

        // rays have alternating thickness and dottedness
        if (i % 2) {
            dottedFraction = 0;
            rayWidth = (0, _utils.randomInRange)(1, MAXWEIGHT);
        } else {
            dottedFraction = (0, _utils.randomInRange)(0.15, 0.33);
            rayWidth = (0, _utils.randomInRange)(1, MAXWEIGHT / 2);
        }

        // draw with dotted line util
        dottedLine([rayCenter.x + _cos * _start, rayCenter.y + _sin * _start], [rayCenter.x + _cos * _end, rayCenter.y + _sin * _end], rayWidth, dottedFraction);
    }

    // prepare linecap for rings
    // prefer square, use round sometimes
    ctx.lineCap = (0, _utils.randItem)(['round', 'square', 'square', 'square', 'square']);

    // then shuffle rings to interleave
    rings = (0, _utils.shuffle)(rings);

    // for each ring, draw it
    rings.forEach(function (ring, i) {
        // draw this ring

        var dash = ring.thickness * (0, _utils.randomInRange)(0.5, 5);

        // sometimes set dashes, others do continuous lines
        if (Math.random() < 0.5) {
            ctx.setLineDash([dash, dash * (0, _utils.randomInRange)(0, 3) + ring.thickness]);
            ctx.lineDashOffset = -spacing; // to get shadow around dashes
        } else {
            ctx.setLineDash([]);
        }

        // draw a shadow with bg color and extra thickness
        ctx.beginPath();
        var cap = spacing / ring.r; // extend the shadow a bit around the end
        ctx.arc(ring.x, ring.y, ring.r, ring.start - cap, ring.end + cap, ring.reverse);
        ctx.lineWidth = ring.thickness + 2 * spacing;
        ctx.strokeStyle = bg;
        ctx.stroke();

        // draw the fg ring with a rando color
        ctx.lineDashOffset = 0;
        ctx.beginPath();
        ctx.arc(ring.x, ring.y, ring.r, ring.start, ring.end, ring.reverse);
        ctx.lineWidth = ring.thickness;
        ctx.strokeStyle = ring.color;
        ctx.stroke();
    });

    // clear dash settings
    ctx.setLineDash([]);
    ctx.lineDashOffset = 0;

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            // apply noise from supplied canvas
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            // create noise pattern and apply
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, cw / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 37 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

exports.plants = plants;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.blush,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true,

    splitting: 'auto',
    budding: 'auto',
    stopping: 'auto',
    flowering: 'auto',
    divergence: 'auto', // degrees
    growthDecay: 'auto',
    curvature: 'auto',
    straightening: 'auto',
    thinning: 'auto',
    leaning: 'auto',
    roughness: 'auto',
    knobbiness: 'auto'
};

var PI = Math.PI;

// Main function
function plants(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // Props

    // hello world
    console.log('--------------------------------------\nPlants');

    var SPLITTING = (0, _utils.mapKeywordToVal)({
        'low': 0.2,
        'med': 0.3,
        'high': 0.4
    })(opts.splitting, 'splitting');
    var BUDDING = (0, _utils.mapKeywordToVal)({
        'low': 0.2,
        'med': 0.3,
        'high': 0.5
    })(opts.budding, 'budding');
    var STOPPING = (0, _utils.mapKeywordToVal)({
        'low': 0.1,
        'med': 0.2,
        'high': 0.3
    })(opts.stopping, 'stopping');
    var FLOWERING = (0, _utils.mapKeywordToVal)({
        'none': 0,
        'low': 0.25,
        'med': 0.6,
        'high': 0.8,
        'all': 1
    })(opts.flowering, 'flowering');
    var DIVERGENCE = (0, _utils.mapKeywordToVal)({
        'low': [15, 30],
        'med': [30, 60],
        'high': [60, 90]
    })(opts.divergence, 'divergence') * PI / 180; //opts.divergence * PI / 180; // input is in degrees
    var GROWTHDECAY = (0, _utils.mapKeywordToVal)({
        'low': 0.9,
        'med': 0.8,
        'high': 0.7
    })(opts.growthDecay, 'decay');
    var CURVATURE = (0, _utils.mapKeywordToVal)({
        'low': [0, 0.05],
        'med': [0.05, 0.1],
        'high': [0.1, 0.15]
    })(opts.curvature, 'curvature');
    var STRAIGHTENING = (0, _utils.mapKeywordToVal)({
        'low': 1,
        'med': 0.85,
        'high': [0.7, 0.8]
    })(opts.straightening, 'straightening');
    var THINNING = (0, _utils.mapKeywordToVal)({
        'low': [0.97, 1],
        'med': [0.92, 0.95],
        'high': [0.85, 0.9]
    })(opts.thinning, 'thinning');
    var LEANING = (0, _utils.mapKeywordToVal)({
        'low': [0, 0.15],
        'med': [0.15, 0.25],
        'high': [0.25, 0.35]
    })(opts.leaning, 'leaning');
    var ROUGHNESS = (0, _utils.mapKeywordToVal)({
        'off': 0,
        'low': 0.15,
        'med': 0.2,
        'high': 0.3
    })(opts.roughness, 'roughness');
    var KNOBBINESS = (0, _utils.mapKeywordToVal)({
        'off': 0,
        'low': [0.1, 0.15],
        'med': [0.2, 0.3],
        'high': [0.25, 0.35]
    })(opts.knobbiness, 'knobbiness');

    // color funcs
    var randomFill = function randomFill() {
        return "#" + Math.random().toString(16).slice(2, 8);
    };
    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // play with these random seeds
    var a = void 0,
        b = void 0,
        c = void 0;
    a = Math.random();
    b = Math.random();
    c = Math.random();

    // shared colors
    var fg = void 0; // hold on…
    var bg = getSolidFill(); // pick bg

    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);
    fg = getContrastColor(); // …now set fg in contrast to bg
    var accentColor = getContrastColor();

    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, cw, ch);

    // directly draw from a to b
    function drawAbsoluteLineSegment(a, b) {
        ctx.beginPath();
        ctx.moveTo.apply(ctx, _toConsumableArray(a));
        ctx.lineTo.apply(ctx, _toConsumableArray(b));
        ctx.stroke();

        console.log('drawLineSegment from ' + a + ' to ' + b);
    }

    // draw from x, y, by transforming the canvas and moving
    // "horizontally" for length.
    function drawLineSegment(x, y, angle, length) {
        ctx.translate(x, y);
        ctx.rotate(-angle);

        // draw "horizontally" from a to b
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(length, 0);
        ctx.stroke();

        var x2 = void 0,
            y2 = void 0;
        x2 = length * Math.cos(angle);
        y2 = length * Math.sin(angle);

        // reset transforms
        ctx.setTransform(1, 0, 0, 1, 0, 0);

        return [x2, y2];
    }

    // draw from a to b, by transforming the canvas and moving
    // "horizontally" across.
    // Draw with a trace of dots.
    // Use ROUGHNESS for jitter, and KNOBBINESS to scatter extra dots
    // around endpoints.
    function drawPlantSegment(x, y, angle, length) {
        var size = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 3;
        var curvature = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0.2;
        var color = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : fg;

        // translate to a, point toward b
        ctx.translate(x, y);
        ctx.rotate(-angle);

        // draw "horizontally" from a to b
        ctx.beginPath();
        ctx.moveTo(0, 0);

        // min size of tracing dot in case thinning takes us too far down
        size = Math.max(size, 0.75);

        length *= (0, _utils.randomInRange)(0.75, 1.25); // randomize length

        var steps = Math.round(length);
        var inc = length / steps;
        var _x = void 0,
            _y = void 0;
        for (var i = 0; i < steps; i++) {
            _x = inc * i;
            _y = curvature * length * Math.sin(i / steps * PI);
            _y += (0, _utils.randomInRange)(-1, 1) * ROUGHNESS * size; // jitter
            (0, _shapes.drawCircle)(ctx, _x, _y, size / 2, { fill: color });
        }

        var x2 = void 0,
            y2 = void 0;
        x2 = x + length * Math.cos(-angle);
        y2 = y + length * Math.sin(-angle);

        if (KNOBBINESS > 0) {
            // draw cluster near the ends
            var bx = void 0,
                by = void 0;
            var knobLength = size * 2;

            var knobCount = 20;

            // near end
            for (var i = 0; i < knobCount; i++) {
                bx = (0, _utils.randomInRange)(0, knobLength);
                by = KNOBBINESS * (0, _utils.randItem)([-1, 1]) * (knobLength - bx);
                (0, _shapes.drawCircle)(ctx, bx, by, size / 2, { fill: color });
            }
            // far end
            for (var i = 0; i < knobCount; i++) {
                bx = (0, _utils.randomInRange)(0, knobLength);
                by = KNOBBINESS * (0, _utils.randItem)([-1, 1]) * (knobLength - bx);
                (0, _shapes.drawCircle)(ctx, length - bx, by, size / 2, { fill: color });
            }
        }

        // reset transforms
        ctx.setTransform(1, 0, 0, 1, 0, 0);

        //console.log(`traceSegment from ${x},${y} to ${x2},${y2}, angle ${angle * 180/PI} len ${length}`);

        return [x2, y2];
    }

    // draw a bud or flower
    function drawTip(x, y, angle, size, color) {
        if (Math.random() < FLOWERING) {
            drawFlower.apply(undefined, arguments);
        } else {
            drawBud.apply(undefined, arguments);
        }
    }

    // closed, solid fg colored bud
    function drawBud(x, y, angle, size, color) {
        ctx.translate(x, y);
        ctx.rotate(-angle);

        color = color || 'red';

        ctx.beginPath();

        ctx.lineWidth = size;
        ctx.lineCap = 'round';

        var _x = size * 2;
        var len = size * (0, _utils.randomInRange)(3, 5);
        var height = size * 2;

        // draw leaf shape with two simple curves
        ctx.moveTo(_x, 0);
        ctx.quadraticCurveTo(_x + len / 2, height, _x + len, 0);
        ctx.quadraticCurveTo(_x + len / 2, -height, _x, 0);

        ctx.strokeStyle = fg;
        ctx.fillStyle = fg;

        ctx.fill();
        ctx.stroke();

        // reset transforms
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.setLineDash([]);
    }

    // flower with contrasting fill
    function drawFlower(x, y, angle, size, color) {
        ctx.translate(x, y);
        ctx.rotate(-angle);

        color = color || 'red';

        ctx.beginPath();

        ctx.lineWidth = size;
        ctx.lineCap = 'round';

        var _x = size * 2;
        var len = size * (0, _utils.randomInRange)(7, 10);
        var height = size * 4;

        // draw leaf shape with two simple curves
        ctx.moveTo(_x, 0);
        ctx.quadraticCurveTo(_x + len / 2, height, _x + len, 0);
        ctx.quadraticCurveTo(_x + len / 2, -height, _x, 0);

        ctx.strokeStyle = fg;
        ctx.fillStyle = color;

        ctx.fill();
        ctx.stroke();

        // center stroke
        ctx.lineWidth *= (0, _utils.randomInRange)(0.6, 0.8);

        var dash = len * (0, _utils.randomInRange)(0.3, 0.7);
        ctx.setLineDash([dash, (0, _utils.randomInRange)(len * 0.3, dash)]);
        ctx.beginPath();
        ctx.moveTo(_x, 0);
        ctx.lineTo(_x + len, 0);
        ctx.stroke();

        //drawCircle(ctx, size * 1.5, 0, size * 3, {fill: color, stroke: fg});


        // reset transforms
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.setLineDash([]);
    }

    // --------------------------------------
    // Test objects
    // --------------------------------------

    // random points
    var p1 = void 0,
        p2 = void 0;
    p1 = [(0, _utils.randomInRange)(0, cw), (0, _utils.randomInRange)(0, ch)];
    p2 = [(0, _utils.randomInRange)(0, cw), (0, _utils.randomInRange)(0, ch)];

    // draw the test points
    // drawCircle(ctx, ...p1, 10, {fill:null, stroke:'red'});
    // drawCircle(ctx, ...p2, 10, {fill:null, stroke:'blue'});

    var v = (0, _utils.getVector)(p1, p2);

    // test segment renderers
    // ctx.strokeStyle = '#39c';
    // drawLineSegment(p1[0], p1[1], v.angle, v.length);

    // ctx.strokeStyle = '#39c';
    // traceSegment(p1[0], p1[1], v.angle, v.length, 3, -0.2);

    // console.log(`Test with angle ${v.angle} (${v.angle * 180/PI})`)


    // --------------------------------------
    // Real stuff
    // --------------------------------------


    // background lines:
    // --------------------------------------

    var vines = [];
    var vineCount = cw / (0, _utils.randomInRange)(15, 30);
    var vineColor = getContrastColor();
    var vineWidth = cw / (0, _utils.randomInRange)(600, 1200);
    vineWidth = Math.max(vineWidth, 1);

    ctx.strokeStyle = vineColor;
    ctx.lineWidth = vineWidth;
    ctx.globalAlpha = (0, _utils.randomInRange)(0.2, 0.4);

    for (var i = 0; i < vineCount; i++) {
        var vx = cw / vineCount * (i + 1 / 2);
        var vh = (0, _utils.randomInRange)(ch * 0.05, ch * 0.5);
        drawLineSegment(vx, 0, -PI / 2, vh);
        (0, _shapes.drawCircle)(ctx, vx, vh, cw / vineCount * (0, _utils.randomInRange)(0.5, 0.75), { fill: vineColor });

        // draw more dots up the vine
        // each higher than the last
        // offset slightly left/right

        var maxDots = 4;
        var last = 1;
        var seed = 1;

        for (var j = 0; j < maxDots; j++) {
            seed = Math.random();
            if (seed < last) {
                (0, _shapes.drawCircle)(ctx, vx + (0, _utils.randomInRange)(-cw / vineCount, cw / vineCount), vh * seed, cw / vineCount * (0, _utils.randomInRange)(0.5, 0.75), { fill: vineColor });

                last = seed;
            }
        }
    }
    ctx.globalAlpha = 1;

    // branch setup
    // --------------------------------------

    // Set up initial branches
    var branches = [];
    var branchCount = Math.round(cw / 100);

    // Define initial branch properties
    for (var i = 0; i < branchCount; i++) {
        branches.push({
            x: cw / branchCount * (i + 1 / 2),
            y: ch + (0, _utils.randomInRange)(0, 70),
            angle: PI / 2 + (0, _utils.randomInRange)(-PI / 8, PI / 8),
            width: SCALE / 100 * (0, _utils.randomInRange)(0.5, 0.75),
            budSize: SCALE / 100 * (0, _utils.randomInRange)(0.33, 0.5),
            curvature: CURVATURE,
            lean: (0, _utils.randomInRange)(-1, 1),
            color: 'color',
            stepCount: (0, _utils.randomInt)(5, 7),
            length: ch / 2 / 6 / GROWTHDECAY //SCALE / 10 / GROWTHDECAY
        });
    }

    // branch loop
    // --------------------------------------


    while (branches.length) {
        branches.forEach(function (branch, i) {
            // main branch propagation logic

            var curveSign = branch.stepCount % 2 ? 1 : -1;

            // remove dead branches
            if (branch.stepCount <= 0) {
                // remove dead branches
                branches.splice(i, 1);
                drawTip(branch.x, branch.y, branch.angle, branch.budSize, accentColor);
                return;
            }

            // remaining branches continue and draw,
            // then decide to split or bud


            // draw main branch

            // first in background as mask
            /*traceSegment(
                branch.x,
                branch.y,
                branch.angle,
                branch.length,
                branch.width * 3,
                branch.curvature * curveSign,
                bg
            );*/

            // then in fg

            var _drawPlantSegment = drawPlantSegment(branch.x, branch.y, branch.angle, branch.length, branch.width, branch.curvature * curveSign, fg);

            var _drawPlantSegment2 = _slicedToArray(_drawPlantSegment, 2);

            branch.x = _drawPlantSegment2[0];
            branch.y = _drawPlantSegment2[1];


            var splitSign = void 0;
            splitSign = curveSign * -1;

            // gap between new branch and base branch
            var splitGap = branch.width * 2;

            if (Math.random() < SPLITTING && branch.stepCount > 1) {
                // split a new branch sometimes

                // debug: highlight branch point
                //drawCircle(ctx, branch.x, branch.y, branch.width * 5, {fill:null,stroke:'#ace'});

                // only kink new branch
                var splitAngle = branch.angle - DIVERGENCE * splitSign;

                // ok fine kink both branches a little
                var kinkFactor = branch.lean > 0 ? 1 : -1;
                kinkFactor *= 0.3;

                branch.angle += kinkFactor * DIVERGENCE;
                splitAngle += kinkFactor * DIVERGENCE;

                // push a clean copy of the branch as a new branch.
                // add a little gap along the vector before starting the new branch
                // reverse the curvature so its ready for the next step
                branches.push(Object.assign({}, branch, {
                    x: branch.x + splitGap * Math.cos(splitAngle),
                    y: branch.y - splitGap * Math.sin(splitAngle),
                    angle: splitAngle,
                    width: branch.width * THINNING,
                    curvature: -branch.curvature
                }));
            } else if (Math.random() < BUDDING && branch.stepCount > 1) {
                // add a bud
                //branch.angle -= diverge * splitSign;
                drawTip(branch.x, branch.y, branch.angle + DIVERGENCE, branch.budSize, accentColor);
            } else if (Math.random() < STOPPING) {
                // stop and bud
                branch.stepCount = 0; // will draw next pass
            }

            // update the branch
            branch.stepCount--;
            branch.length *= GROWTHDECAY; // reduce length each time
            branch.curvature *= STRAIGHTENING; // straighten out each time
            branch.width *= THINNING; // thin out each time
            branch.angle += branch.lean * LEANING;
        });
    }

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            // apply noise from supplied canvas
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            // create noise pattern and apply
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, w / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 38 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

exports.scales = scales;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// Accepts array @options, with elements [opt, weight].
// Returns an array with each @opt inserted @weight times.
// This is a very stupid way to pick randItem from enumerable options with
// different weights for each item.
function weightedPickList(options) {
    var list = [];
    options.forEach(function (weighted, i) {
        var _weighted = _slicedToArray(weighted, 2),
            opt = _weighted[0],
            weight = _weighted[1];

        for (var n = 0; n < weight; n++) {
            list.push(opt);
        }
    });
    return list;
}

// how to pick scale styles
var STYLES = weightedPickList([['patches', 2], ['fields', 5], ['stripes', 1]]);
// how much of the palette to use
var COLORDEPTHS = ['small', 'medium', 'medium', 'large'];

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.north_beach,
    addNoise: 0.04,
    noiseInput: null,
    dust: false,
    skew: 1, // normalized skew
    clear: true,

    style: 'auto', // how to arrange scales
    colorDepth: 'auto', // how much of the palette to use
    edges: 'auto' // consistent edge coloring
};

var PI = Math.PI;

// Main function
function scales(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // Modes and styles
    // --------------------------------------

    var STYLE = opts.style === 'auto' ? (0, _utils.randItem)(STYLES) : opts.style;
    var COLORDEPTH = opts.colorDepth === 'auto' ? (0, _utils.randItem)(COLORDEPTHS) : opts.colorDepth;
    var EDGES = opts.edges === 'auto' ? Math.random() < 0.5 : opts.edges;

    console.log('Scales: ' + STYLE + ', ' + COLORDEPTH + ' colors, edges: ' + EDGES);

    // Color funcs
    // --------------------------------------

    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // shared colors
    var bg = getSolidFill();

    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);

    // shared foregrounds
    var fg = getContrastColor();
    var fg2 = getContrastColor();
    var fg3 = getContrastColor();
    //fg3 = fg;

    // fill background
    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, cw, ch);

    // set default stroke
    ctx.strokeStyle = fg;

    // Draw Stuff
    // --------------------------------------

    // scale styles
    // --------------------------------------

    ctx.lineCap = 'round';

    var scaleFunctions = [function (x, y, r, c1, c2, c3) {
        // 2C simple circle
        (0, _shapes.drawCircle)(ctx, x, y, r * 1.0, { fill: c1 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.9, { fill: c2 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.85, { fill: c1 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.75, { fill: c2 });
    }, function (x, y, r, c1, c2, c3) {
        // 2C thin lines
        (0, _shapes.drawCircle)(ctx, x, y, r * 1.0, { fill: c1 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.9, { fill: c2 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.75, { fill: c1 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.65, { fill: c2 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.5, { fill: c1 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.4, { fill: c2 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.25, { fill: c1 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.15, { fill: c2 });
    }, function (x, y, r, c1, c2, c3) {
        // 2C evenly spaced rings
        (0, _shapes.drawCircle)(ctx, x, y, r * 1.0, { fill: c1 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.8, { fill: c2 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.6, { fill: c1 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.4, { fill: c2 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.2, { fill: c1 });
    }, function (x, y, r, c1, c2, c3) {
        // 3C thin middle ring
        (0, _shapes.drawCircle)(ctx, x, y, r * 1.0, { fill: c1 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.9, { fill: c2 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.6, { fill: c3 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.5, { fill: c2 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.2, { fill: c3 });
    }, function (x, y, r, c1, c2, c3) {
        // 3C twin middle ring
        (0, _shapes.drawCircle)(ctx, x, y, r * 1.0, { fill: c1 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.9, { fill: c2 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.7, { fill: c3 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.6, { fill: c2 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.5, { fill: c3 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.4, { fill: c2 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.2, { fill: c3 });
    }, function (x, y, r, c1, c2, c3) {
        // 3C dots
        var lineWidth = r * 0.25;
        ctx.lineWidth = lineWidth;
        ctx.setLineDash([0, lineWidth * 1.33]);
        (0, _shapes.drawCircle)(ctx, x, y, r * 1.0, { fill: c1 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.9, { fill: c2 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.55, { fill: null, stroke: c3 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.2, { fill: c1 });
        // reset line dashes for other renderers
        ctx.setLineDash([]);
    }, function (x, y, r, c1, c2, c3) {
        // 3C double dots
        var lineWidth = r * 0.175;
        ctx.lineWidth = lineWidth;
        ctx.setLineDash([0, lineWidth * 1.5]);
        (0, _shapes.drawCircle)(ctx, x, y, r * 1.0, { fill: c1 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.9, { fill: c2 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.675, { fill: null, stroke: c3 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.425, { fill: null, stroke: c3 });
        (0, _shapes.drawCircle)(ctx, x, y, r * 0.2, { fill: c3 });
        ctx.setLineDash([]);
    }];

    var scaleRenderer = (0, _utils.randItem)(scaleFunctions);
    //scaleRenderer = scaleFunctions[scaleFunctions.length-1];


    // grid stuff
    // --------------------------------------

    var v_spacing = 0.3; // .5 or less
    var h_spacing = 0.915; //

    // map spacing from v to h
    // .1 -> .75
    // .2 -> .8
    // .23 -> .845
    // .25 -> .85
    // .28 -> .90
    // .3 -> .915
    // .3333 -> .93 // .3333 and above shows full center dots
    // .4 -> .96
    // .5 -> 1


    var ref = (0, _utils.randomInt)(10, 15); // horizontal reference count
    ref = Math.round(cw / (0, _utils.randomInRange)(60, 90));
    var size = Math.round(cw / ref);
    var xcount = Math.ceil(cw / size * 1 / h_spacing) + 2;
    var ycount = Math.ceil(ch / size) * 1 / v_spacing + 2;
    var count = xcount * ycount;

    var pts = [];
    var x = void 0,
        y = void 0;
    for (var j = 0; j < ycount; j++) {
        for (var i = 0; i <= xcount; i++) {
            x = size * i * h_spacing; // + size / 2;
            if (j % 2) x += size / 2 * h_spacing;
            y = j * size * v_spacing; // + size / 2;
            pts.push([x, y]);
        }
    }

    // end grid
    // --------------------------------------


    // Create a function which is a periodic transform of x, y
    function createTransform() {
        var rateMin = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
        var rateMax = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;

        var rate1 = (0, _utils.randomInRange)(0, rateMax / 2);
        var rate2 = (0, _utils.randomInRange)(0, rateMax / 2);
        var rate3 = (0, _utils.randomInRange)(rateMax / 2, rateMax);
        var rate4 = (0, _utils.randomInRange)(rateMax / 2, rateMax);

        var phase1 = (0, _utils.randomInRange)(-PI, PI);
        var phase2 = (0, _utils.randomInRange)(-PI, PI);
        var phase3 = (0, _utils.randomInRange)(-PI, PI);
        var phase4 = (0, _utils.randomInRange)(-PI, PI);

        var c1 = (0, _utils.randomInRange)(0, 1);
        var c2 = (0, _utils.randomInRange)(0, 1);
        var c3 = (0, _utils.randomInRange)(0, 1);
        var c4 = (0, _utils.randomInRange)(0, 1);
        return function (xnorm, ynorm) {
            var t1 = Math.sin(xnorm * rate1 * 2 * PI + phase1);
            var t2 = Math.sin(ynorm * rate2 * 2 * PI + phase2);
            var t3 = Math.sin(xnorm * rate3 * 2 * PI + phase3);
            var t4 = Math.sin(ynorm * rate4 * 2 * PI + phase4);
            return (c1 * t1 + c2 * t2 + c3 * t3 + c4 * t4) / (c1 + c2 + c3 + c4);
        };
    }

    // a set of independent transforms to use while rendering
    var trans = {
        style: createTransform(0, 3),
        color: createTransform(0, 3)
    };

    var xnorm = void 0,
        ynorm = void 0;

    var renderSet = [].concat(scaleFunctions);
    renderSet.sort(function () {
        return Math.random() - 0.5;
    });

    var clusterNodes = [];
    if (STYLE === 'patches') {
        // Scatter a point for each rendering style we have
        // At render time, we will check to see which clusterNode a given scale
        // is closest to, then use the renderer with the same index as its
        // closest node.
        renderSet.forEach(function (p, i) {
            // Use x,y between 0 and 1 because we will compare to normalize coords
            clusterNodes.push([(0, _utils.randomInRange)(0, 1), (0, _utils.randomInRange)(0, 1)]);
        });
    }

    // set up vars for color cycling across styles
    var styleCount = renderSet.length;
    var c1 = fg,
        c2 = fg2,
        c3 = fg3;

    // How many times through the style set?
    // Run through more times for large COLORDEPTH

    var CYCLES = 1;
    if (COLORDEPTH === 'large') {
        CYCLES = 2;
    }

    // Finally: step through the points in the scale placements, and draw
    // a scale at each point
    pts.forEach(function (p, i) {
        x = p[0];
        y = p[1];
        xnorm = x / cw;
        ynorm = y / ch;

        var renderIndex = 0;

        //console.log(Math.floor(ynorm * (scaleFunctions.length - 1)));

        if (STYLE === 'patches') {
            // pick renderer closest to this point
            var minR = 2; // max squared dimension for normalized vals
            var R = void 0;
            clusterNodes.forEach(function (n, i) {
                var dx = xnorm - n[0];
                var dy = ynorm - n[1];
                R = dx * dx + dy * dy;
                if (R < minR) {
                    minR = R;
                    renderIndex = i;
                }
                //console.log(`renderer ${i}: ${R}`);
            });
            //console.log(`picked renderer ${renderIndex} with distance ${R}`);
            scaleRenderer = renderSet[renderIndex];

            // Define colors from the contrast palette,
            // aligned to the render styles.
            // Stepping through by index this way ensures that adjacent
            // styles share some colors
            if (COLORDEPTH !== 'small') {
                c1 = contrastPalette[(renderIndex + 0) % contrastPalette.length];
                c2 = contrastPalette[(renderIndex + 1) % contrastPalette.length];
                c3 = contrastPalette[(renderIndex + 2) % contrastPalette.length];
            }
            if (EDGES) {
                c1 = bg;
            }
        } else if (STYLE === 'fields') {

            // field term is periodic function, pushed into postive vals
            var f = (trans.style(xnorm, ynorm) + 1) / 2;
            var _renderIndex = Math.round(f * (renderSet.length - 1) * CYCLES);

            scaleRenderer = renderSet[_renderIndex % renderSet.length];

            // Define colors from the contrast palette,
            // aligned to the render styles.
            // Stepping through by index this way ensures that adjacent
            // styles share some colors
            if (COLORDEPTH !== 'small') {
                c1 = contrastPalette[(_renderIndex + 0) % contrastPalette.length];
                c2 = contrastPalette[(_renderIndex + 1) % contrastPalette.length];
                c3 = contrastPalette[(_renderIndex + 2) % contrastPalette.length];
            }
            if (EDGES) {
                c1 = bg;
            }
        } else {
            // STYLE === 'stripes'
            // draw in bands based on ynorm
            renderIndex = Math.round(ynorm * (renderSet.length - 1));
            scaleRenderer = renderSet[renderIndex];

            // Define colors from the contrast palette,
            // aligned to the render styles.
            // Stepping through by index this way ensures that adjacent
            // styles share some colors
            if (COLORDEPTH !== 'small') {
                c1 = contrastPalette[(renderIndex + 0) % contrastPalette.length];
                c2 = contrastPalette[(renderIndex + 1) % contrastPalette.length];
                c3 = contrastPalette[(renderIndex + 2) % contrastPalette.length];
            }
            if (EDGES) {
                c1 = bg;
            }
        }

        scaleRenderer(x, y, size / 2, c1, c2, c3);
    });

    // debug: draw the reference nodes
    // ctx.font = '14px sans-serif';
    // ctx.textAlign = 'center';
    // ctx.textBaseline = 'middle'
    // clusterNodes.forEach((n, i)=>{
    //     drawCircle(ctx, cw * n[0], ch * n[1], 10, {fill: 'black'});
    //     ctx.fillStyle = 'white';
    //     ctx.fillText(i, cw * n[0], ch * n[1]);
    // });


    // Finish up
    // --------------------------------------

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            // apply noise from supplied canvas
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            // create noise pattern and apply
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, w / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 39 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.sweater = sweater;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _hexScatter = __webpack_require__(4);

var _hexScatter2 = _interopRequireDefault(_hexScatter);

var _speckle = __webpack_require__(8);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.admiral,
    addNoise: 0.04,
    noiseInput: null,
    clear: true,
    style: 'auto', // from STYLES
    mixWeight: false,
    isolate: true
};

var PI = Math.PI;
var TWOPI = PI * 2;
var STYLES = ['normal']; // TODO

var DEBUG = false;

// Main function
function sweater(options) {
    var startTime = new Date().getTime();
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);
    var LONG = Math.max(cw, ch);
    var SHORT = Math.min(cw, ch);
    var AREA = cw * ch;
    var ASPECT = LONG / SHORT;

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d', { willReadFrequently: true });

    // modes and styles
    var STYLE = opts.style === 'auto' ? (0, _utils.randItem)(STYLES) : opts.style;

    console.log('==================================\nSweater:', STYLE);

    // color funcs
    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // setup

    // shared colors
    var bg = getSolidFill();

    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    //contrastPalette.sort(()=>(randomInRange(-1, 1)));
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);
    var colorCount = contrastPalette.length;

    // draw background
    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, cw, ch);

    // rings

    /*
    Approach:
    - choose some center points
    - draw nested sets of rings around each point
    - each ring has a solid stroke for a base color, and a dashed stroke
    - these create a radial checkerboard pattern
    */

    // max line weight depends on canvas size
    //const MAXWEIGHT = SCALE / (50 + LONG/100);
    //const MAXWEIGHT = SCALE / 20;
    var MAXWEIGHT = SCALE / 10;
    ctx.lineWidth = MAXWEIGHT;
    var MINWEIGHT = MAXWEIGHT / 2.5;
    console.log('max thickness', MAXWEIGHT, ' min thickness', MINWEIGHT.toPrecision(2));

    var centers = []; // array of center points
    var rings = []; // array of all rings

    // pick a few center points
    // more for large layouts
    var centerCount = (0, _utils.randomInt)(2, 2 + SCALE / 400);

    // center vars
    // Scatter points coarsely
    // These numbers aren't great
    var MARGIN = SHORT / 12;
    var pts = (0, _hexScatter2.default)(SHORT * 0.5, cw - MARGIN * 2, ch - MARGIN * 2);

    pts.forEach(function (p, i) {
        centers.push({ x: p[0], y: p[1] });
        DEBUG && (0, _shapes.drawCircle)(ctx, p[0], p[1], 30, { fill: 'red' });
    });

    // put a single center somewhere way out, radially from the center
    var alpha = (0, _utils.randomInRange)(0, TWOPI);
    var dist = LONG * (0, _utils.randomInRange)(1, 4);
    centers = [{ x: cw / 2 + dist * Math.cos(alpha), y: ch / 2 + dist * Math.sin(alpha) }];

    // Limit centers, since hexscatter has a lot of overscan and does
    // poorly when cell size is large compared to container.
    // Allow more centers for stretched layouts.
    centers = (0, _utils.shuffle)(centers);
    //let maxCenters = Math.ceil(ASPECT);
    //centers = centers.slice(0, maxCenters);

    ctx.lineCap = 'butt'; //

    var STRETCHSET = [1, 1, 1, 1.618, 1.618, 2];

    // Step through the centers and create ring clusters for each

    function doCenters() {
        var centers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
        var thickness = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MAXWEIGHT;
        var CHECKER = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

        var skipStrokeThreshold = CHECKER ? 0 : 0.2;

        centers.forEach(function (center, i) {
            // intial r
            var r = dist * (0, _utils.randomInRange)(1.2, 1.6);
            var R = r; // keep original value, as we step inward

            // set initial stretch style
            var STRETCH = (0, _utils.randItem)(STRETCHSET);

            // baseline thickness is passed in as @thickness

            // Assume dash length will equal thickness
            // Find a value near thickness that will give a whole number
            // of dashes
            var C = r * 2 * PI;
            var n = C / thickness;
            var N = Math.round(n);
            var dash = C / N; // the dash length for whole number
            var gap = dash * STRETCH; // set gap relative to dash
            thickness = dash; // reset thickness to the gap

            var skipStroke = 0;

            var ringColor = void 0;
            if (CHECKER) {
                STRETCH = 1; // force pure checker
                ringColor = function ringColor(i) {
                    return i % 2 ? 'black' : 'white';
                };
            } else {
                ringColor = getSolidFill;
            }

            var ring = 0;

            // make several rings
            while (r > SCALE / 20) {
                ring++;
                // create a ring
                var arcLength = PI * 2;
                var arcOffset = 0;

                // recalculate dashes for new r
                C = r * 2 * PI;
                dash = C / N;
                gap = dash * STRETCH;
                thickness = dash;

                // don't know why this fudge is needed. Rounding?
                ctx.lineWidth = thickness + 2;

                // Stroke skipping:
                // Sometimes, set skipStroke to skip several lines. Then
                // decrement the skip count as you go. Pick skip count and
                // skip likelihood to have a nice mix of contiguous drawn
                // and skipped lines.
                // When starting a skip sequence, reset the STRETCH style,
                // so the following band has its own style.
                if (skipStroke) {
                    skipStroke--;
                } else {
                    // sometimes set skipping and stretch.
                    // most of the time, do nothing, and just draw
                    if (Math.random() < skipStrokeThreshold) {
                        skipStroke = (0, _utils.randomInt)(2, 4);
                        if (!CHECKER) STRETCH = (0, _utils.randItem)(STRETCHSET);
                    }
                }

                // draw the solid ring, then draw dashed on top

                ctx.setLineDash([]); // solid ring
                ctx.beginPath();
                ctx.arc(center.x, center.y, r, 0, 2 * PI);
                ctx.strokeStyle = ringColor(ring);
                if (!skipStroke) ctx.stroke();

                // dashed ring
                ctx.setLineDash([dash, gap]);

                // draw the fg ring with a rando color
                ctx.lineDashOffset = 0;
                ctx.beginPath();
                ctx.arc(center.x, center.y, r, 0, 2 * PI);
                ctx.strokeStyle = ringColor(ring + 1);
                if (!skipStroke) ctx.stroke();

                // increment r by ring thickness
                r = r - thickness;
            }
        });
    }

    // do the centers with normal settings
    var renderThickness = (0, _utils.randomInRange)(MINWEIGHT, MAXWEIGHT);
    doCenters(centers, renderThickness, false);

    // redraw the centers overlaying with dark/light colors
    ctx.globalCompositeOperation = 'overlay';
    ctx.globalAlpha = (0, _utils.randomInt)(2, 5) / 100;
    doCenters(centers, renderThickness / (0, _utils.randomInt)(4, 8), true);
    ctx.globalCompositeOperation = 'normal';
    ctx.globalAlpha = 1;

    console.log(rings.length + ' rings around ' + centers.length + ' centers');

    // func to draw a set of parallel square-patterned stripes
    var drawStripes = function drawStripes(cx, cy) {
        var N = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 6;
        var angle = arguments[3];
        var thickness = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : MAXWEIGHT * .66;

        ctx.lineWidth = thickness;

        var norm = angle + PI;
        var x1 = cx;

        for (var i = 0; i < N; i++) {
            // solid line for bg
            ctx.strokeStyle = getSolidFill();
            ctx.setLineDash([]);
            ctx.beginPath();
            ctx.moveTo(0, cy + i * thickness);
            ctx.lineTo(cw, cy + i * thickness);
            ctx.stroke();

            // dashed line for checkers
            ctx.strokeStyle = getSolidFill();
            ctx.setLineDash([thickness, thickness]);
            ctx.beginPath();
            ctx.moveTo(0, cy + i * thickness);
            ctx.lineTo(cw, cy + i * thickness);
            ctx.stroke();
        }
    };

    // draw horizontal stripes somewhere
    //drawStripes(cw/2, ch - SCALE/4, randomInt(4,8), 0, MAXWEIGHT * randomInRange(0.5, 0.8));

    // clear dash settings
    ctx.setLineDash([]);
    ctx.lineDashOffset = 0;

    // donegal
    // do custom donegal with larger dots than the default

    // coarse sampled speckles to break edges
    (0, _speckle.speckle)(el, SCALE * (0, _utils.randomInRange)(.0015, .0040), 4, 'sample');
    // random speckles for donegal look
    (0, _speckle.speckle)(el, SCALE * (0, _utils.randomInRange)(.0020, .0040), (0, _utils.randomInt)(12, 24), getSolidFill);
    // fine sampled speckles to break edges more
    (0, _speckle.speckle)(el, SCALE * (0, _utils.randomInRange)(.001, .002), 3, 'sample');

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            // apply noise from supplied canvas
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            // create noise pattern and apply
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, cw / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }

    var endTime = new Date().getTime();
    console.log('Rendered in ' + (endTime - startTime) + 'ms');
}

/***/ }),
/* 40 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.tricycles = tricycles;

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _utils = __webpack_require__(0);

var _shapes = __webpack_require__(3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var DEFAULTS = {
    container: 'body',
    palette: _palettes2.default.de_stijl,
    style: 'auto',
    addNoise: 0.04,
    noiseInput: null,
    clear: true
};

var PI = Math.PI;
var TWOPI = PI * 2;

var STYLES = ['simple', 'complex']; // or auto

// Main function
function tricycles(options) {
    var opts = Object.assign({}, DEFAULTS, options);

    var container = opts.container;
    var cw = container.offsetWidth;
    var ch = container.offsetHeight;
    var SCALE = Math.min(cw, ch);
    var LONG = Math.max(cw, ch);
    var SHORT = Math.min(cw, ch);
    var AREA = cw * ch;
    var ASPECT = LONG / SHORT;

    // Find or create canvas child
    var el = container.querySelector('canvas');
    var newEl = false;
    if (!el) {
        container.innerHTML = '';
        el = document.createElement('canvas');
        newEl = true;
    }
    if (newEl || opts.clear) {
        el.width = cw;
        el.height = ch;
    }

    var ctx = el.getContext('2d');

    // opts
    // --------------------------------------
    var STYLE = STYLES.indexOf(opts.style) >= 0 ? opts.style : 'auto';

    // Color funcs
    // --------------------------------------

    var getSolidFill = (0, _utils.getSolidColorFunction)(opts.palette);

    // shared colors
    var bg = getSolidFill();

    // get palette of non-bg colors
    var contrastPalette = [].concat(opts.palette);
    contrastPalette.splice(opts.palette.indexOf(bg), 1);
    var getContrastColor = (0, _utils.getSolidColorFunction)(contrastPalette);

    var getContrastSequence = function getContrastSequence(i) {
        return contrastPalette[i % contrastPalette.length];
    };

    // shared foregrounds
    var fg = getContrastColor();
    var fg2 = getContrastColor();
    var fg3 = getContrastColor();

    // fill background
    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, cw, ch);

    // set default stroke
    ctx.strokeStyle = fg;

    var LINE1 = Math.max(SCALE / 400, 1);
    var LINE2 = LINE1 / 2;
    var LINE3 = LINE1 / 3;

    ctx.lineWidth = LINE1;

    // Utils
    // --------------------------------------

    function avgPoints(points) {
        var avg = [0, 0];
        avg[0] = points.reduce(function (m, v) {
            return m + v[0];
        }, 0) / points.length;
        avg[1] = points.reduce(function (m, v) {
            return m + v[1];
        }, 0) / points.length;
        return avg;
    }

    function circumcenter(a, b, c) {
        var ax = a[0];
        var ay = a[1];
        var bx = b[0];
        var by = b[1];
        var cx = c[0];
        var cy = c[1];

        // midpoints
        var midAB = avgPoints([a, b]);
        var midAC = avgPoints([a, c]);

        // slopes
        var mAB = (by - ay) / (bx - ax);
        var mAC = (cy - ay) / (cx - ax);
        // invert for perpendicular
        mAB = -1 / mAB;
        mAC = -1 / mAC;

        // offsets
        var bAB = midAB[1] - mAB * midAB[0];
        var bAC = midAC[1] - mAC * midAC[0];

        var CCx;
        var CCy;

        // algebra!
        CCx = (bAC - bAB) / (mAB - mAC);
        CCy = mAB * CCx + bAB;

        var dx = CCx - ax;
        var dy = CCy - ay;
        var r = Math.sqrt(dx * dx + dy * dy);

        return { x: CCx, y: CCy, r: r };
    }

    function drawTriPoints(ctx, p1, p2, p3, color) {
        ctx.beginPath();
        ctx.moveTo.apply(ctx, _toConsumableArray(p1));
        ctx.lineTo.apply(ctx, _toConsumableArray(p2));
        ctx.lineTo.apply(ctx, _toConsumableArray(p3));
        ctx.closePath();
        ctx.strokeStyle = color;
        ctx.stroke();
    }

    // function to draw @n radial lines out from a point
    function radiateFromPoint(p) {
        var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 36;
        var color = arguments[2];

        var step = TWOPI / n;
        var R = LONG * 3;
        var offset = (0, _utils.randomInRange)(0, PI);

        ctx.strokeStyle = color;
        for (var i = 0; i < n; i++) {
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(p.x + R * Math.cos(i * step + offset), p.y + R * Math.sin(i * step + offset));
            ctx.stroke();
        }
    }

    // function to draw many circles around a point
    function outwardRings(p) {
        var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 36;
        var color = arguments[2];

        var outerR = LONG * 2;
        var step = outerR / n;
        var expansion = 1.02;

        for (var i = 0; i < n; i++) {
            (0, _shapes.drawCircle)(ctx, p.x, p.y, i * step, { stroke: color });
            step *= expansion;
        }
    }

    var decorators = [radiateFromPoint, outwardRings];

    // Draw Stuff
    // --------------------------------------

    // Draw some anchors. We will step through, looking at three at a time,
    // and define circles. Adjacent circles will have two anchors in common.
    var anchors = [];

    // point placement function
    var quadrants = function quadrants() {
        var anchors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

        var margin = 0.1 * SHORT;
        var minx = margin;
        var maxx = cw - margin;
        var miny = margin;
        var maxy = ch - margin;
        anchors.push([(0, _utils.randomInt)(minx, cw / 2), (0, _utils.randomInt)(miny, ch / 2)]);
        anchors.push([(0, _utils.randomInt)(cw / 2, maxy), (0, _utils.randomInt)(miny, ch / 2)]);
        anchors.push([(0, _utils.randomInt)(minx, cw / 2), (0, _utils.randomInt)(ch / 2, maxy)]);
        anchors.push([(0, _utils.randomInt)(cw / 2, maxx), (0, _utils.randomInt)(ch / 2, maxy)]);
        anchors = (0, _utils.shuffle)(anchors);
        return anchors;
    };

    // point placement function
    var ring = function ring() {
        var anchors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

        var steps = (0, _utils.randomInt)(8, 24);
        var inc = TWOPI / steps;
        var startAngle = (0, _utils.randomInRange)(TWOPI);

        // baseline radius of the ellipse that plots the anchors
        var radiusFraction = (0, _utils.randomInRange)(20, 30) / 100;

        var offset = void 0;
        var _x = void 0,
            _y = void 0;

        // go around the ellipse defined by canvas, dropping anchors
        for (var i = 0; i < steps; i++) {
            // alternate moving in and out by the offset fraction
            offset = i % 2 ? 1 : -1;
            offset *= (0, _utils.randomInRange)(0, 20) / 100;

            _x = cw / 2 + cw * (radiusFraction + offset) * Math.cos(i * inc + startAngle);
            _y = ch / 2 + ch * (radiusFraction + offset) * Math.sin(i * inc + startAngle);

            anchors.push([_x, _y]);
        }

        // For every 10 anchors we have, drop 1
        var skipCount = Math.floor(steps / 10);
        while (skipCount--) {
            anchors.splice((0, _utils.randomInt)(anchors.length - 1), 1);
        }
        return anchors;
    };

    // point placement function
    // TODO fix params
    var alternate = function alternate() {
        var anchors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

        var a = void 0,
            b = void 0,
            stepCount = void 0;
        var _x = void 0,
            _y = void 0;
        var MAGIC_COUNT = 6;
        var BIG_PROBABILITY = 0.125;
        var BIG_OFFSET = 1.5;
        var OFFSET_RANGE = [0.1, 0.4];
        // debug
        if (Math.random() < 0.5) {
            // left right
            a = [0, (0, _utils.randomInRange)(ch)];
            b = [cw, (0, _utils.randomInRange)(ch)];
        } else {
            // top bottom
            a = [(0, _utils.randomInRange)(cw), 0];
            b = [(0, _utils.randomInRange)(cw), ch];
        }

        var v = (0, _utils.getVector)(a, b);

        stepCount = Math.round(MAGIC_COUNT * v.length / SHORT);

        _x = v.x;
        _y = v.y;

        var offset = void 0;

        var orthogonal = void 0;

        for (var i = 0; i < stepCount; i++) {
            _x += v.length / stepCount * Math.cos(v.angle);
            _y += v.length / stepCount * Math.sin(v.angle);

            //drawCircle(ctx, _x, _y, 5, {fill:'green'});

            orthogonal = i % 2 ? PI / 2 : -PI / 2;
            orthogonal += v.angle;

            offset = SCALE * _utils.randomInRange.apply(undefined, OFFSET_RANGE);
            // sometimes make big steps pop out for variety
            if (Math.random() < BIG_PROBABILITY) {
                offset *= BIG_OFFSET;
            }

            anchors.push([_x + offset * Math.cos(orthogonal), _y + offset * Math.sin(orthogonal)]);
        }

        ctx.beginPath();
        ctx.moveTo.apply(ctx, _toConsumableArray(a));
        ctx.lineTo.apply(ctx, _toConsumableArray(b));
        ctx.stroke();

        // let split = randomInt(anchors.length);
        // anchors = anchors.slice(0, split).concat(anchors.slice(split, -1));
        return anchors;
    };

    // run setup functions according to style prop
    var setupFuncs = [];
    console.log('tricycles:', STYLE);
    if (STYLE === 'simple') {
        quadrants(anchors);
    } else if (STYLE === 'complex') {
        alternate(anchors);
    } else {
        // auto case
        (0, _utils.randItem)([quadrants, alternate])(anchors);
    }

    // set up circles
    var circles = [];

    // space between circles and background drawings
    var margin = SCALE / (0, _utils.randomInt)(20, 60);

    // draw fewer rays when there will be many circles
    var rayCount = 150 / Math.log(anchors.length);
    var decorationThreshold = 0.66 / Math.log(anchors.length);

    // step through anchors:
    // define circles
    for (var i = 0; i < anchors.length - 2; i++) {
        var c = circumcenter.apply(undefined, _toConsumableArray(anchors.slice(i, i + 3)));

        var color = getContrastColor();
        c.color = color;

        // add circle to collection
        circles.push(c);
    }

    // now step through circles and draw background decorations
    ctx.lineWidth = LINE3;
    circles.forEach(function (c) {
        ctx.strokeStyle = c.color;
        var decorationCount = Math.round(rayCount + rayCount * c.r / SCALE);

        // for few circles, decorate all. For more, only some
        if (circles.length <= 3) {
            (0, _utils.randItem)(decorators)(c, decorationCount, c.color);
        } else if (Math.random() < decorationThreshold) {
            (0, _utils.randItem)(decorators)(c, decorationCount, c.color);
        }
    });

    // now step through circles and draw bg mask over decorations
    circles.forEach(function (c) {
        margin = SCALE / (0, _utils.randomInt)(20, 60);
        (0, _shapes.drawCircle)(ctx, c.x, c.y, c.r + margin, { stroke: null, fill: bg });
    });

    // step through anchors to draw triangles
    for (var i = 0; i < anchors.length - 2; i++) {
        var _c = circles[i];
        var _color = _c.color;

        ctx.lineWidth = LINE2;
        ctx.setLineDash([LINE2 * 9, LINE2 * 6]);
        drawTriPoints.apply(undefined, [ctx].concat(_toConsumableArray(anchors.slice(i, i + 3)), [_color]));
        ctx.lineWidth = LINE1;
        ctx.setLineDash([]);

        // // center to circle spoke
        // ctx.strokeStyle = color;
        // ctx.beginPath();
        // ctx.moveTo(c.x, c.y);
        // ctx.lineTo(...anchors[i]);
        // ctx.stroke();
    }

    // now step through circles and draw the rings
    ctx.lineWidth = LINE1;
    circles.forEach(function (c) {
        (0, _shapes.drawCircle)(ctx, c.x, c.y, c.r, { stroke: c.color, fill: null });
        // draw center
        // drawCircle(ctx, c.x, c.y, SCALE/200, {fill: c.color});
    });

    // ---

    // step through anchors
    // draw connecting bar between shared anchors
    // alternates based on triangle pairs
    ctx.lineWidth = LINE1;
    // for (var i = 0; i < anchors.length - 2; i++) {
    //     let idx = (i % 2) ? i : i + 1;

    //     ctx.strokeStyle = fg;
    //     ctx.beginPath();
    //     ctx.moveTo(...anchors[idx]);
    //     ctx.lineTo(...anchors[idx + 1]);
    //     ctx.stroke();
    // }


    // ---
    // draw all anchors on top of everything
    anchors.forEach(function (p) {
        (0, _shapes.drawCircle)(ctx, p[0], p[1], SCALE / 100, { fill: fg });
    });

    // Finish up
    // --------------------------------------

    // add noise
    if (opts.addNoise) {
        if (opts.noiseInput) {
            // apply noise from supplied canvas
            _noiseutils2.default.applyNoiseCanvas(el, opts.noiseInput);
        } else {
            // create noise pattern and apply
            _noiseutils2.default.addNoiseFromPattern(el, opts.addNoise, w / 3);
        }
    }

    // if new canvas child was created, append it
    if (newEl) {
        container.appendChild(el);
    }
}

/***/ }),
/* 41 */,
/* 42 */,
/* 43 */,
/* 44 */,
/* 45 */,
/* 46 */,
/* 47 */,
/* 48 */,
/* 49 */,
/* 50 */,
/* 51 */,
/* 52 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


__webpack_require__(7);

var _noiseutils = __webpack_require__(2);

var _noiseutils2 = _interopRequireDefault(_noiseutils);

var _palettes = __webpack_require__(1);

var _palettes2 = _interopRequireDefault(_palettes);

var _colorbrewer = __webpack_require__(9);

var _colorbrewer2 = _interopRequireDefault(_colorbrewer);

var _waterline = __webpack_require__(11);

var _shapestack = __webpack_require__(13);

var _shapescape = __webpack_require__(16);

var _duos = __webpack_require__(27);

var _lines = __webpack_require__(17);

var _waves = __webpack_require__(18);

var _grid = __webpack_require__(19);

var _truchet = __webpack_require__(20);

var _truchetCurves = __webpack_require__(28);

var _grille = __webpack_require__(29);

var _circles = __webpack_require__(21);

var _mesh = __webpack_require__(22);

var _walk = __webpack_require__(23);

var _bands = __webpack_require__(24);

var _field = __webpack_require__(10);

var _fieldShape = __webpack_require__(30);

var _trails = __webpack_require__(25);

var _fragments = __webpack_require__(26);

var _clouds = __webpack_require__(31);

var _grads = __webpack_require__(32);

var _doodle = __webpack_require__(33);

var _pillars = __webpack_require__(35);

var _rings = __webpack_require__(36);

var _plants = __webpack_require__(37);

var _scales = __webpack_require__(38);

var _sweater = __webpack_require__(39);

var _tricycles = __webpack_require__(40);

var _utils = __webpack_require__(0);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/* ======================================
BEGIN STYLES
====================================== */

// renderers
var appPalettes = Object.assign({ default: null }, _palettes2.default);

// populate the selector for colorbrewer palettes


// utils
if (_colorbrewer2.default) {
    var cbnames = Object.keys(_colorbrewer2.default);
    cbnames.forEach(function (pname) {
        appPalettes[pname] = _colorbrewer2.default[pname][6];
    });
}

var selectEl = document.querySelector('#paletteSelector');
var pnames = Object.keys(appPalettes);
pnames.forEach(function (pname) {
    var option = document.createElement('option');
    option.value = pname;
    option.innerHTML = pname.replace(/_/g, ' ');
    if (pname === "default") {
        option.innerHTML = "default colors";
    }
    selectEl.appendChild(option);
});

var lastCustom = [];

var parseCustomPalette = function parseCustomPalette(e) {
    var hexPattern = /#?[0-9a-f]{3,6}/;
    var palette = e.target.value.split(',');
    palette = palette.map(function (s) {
        s = s.trim().replace(/['"']/g, '');
        if (hexPattern.test(s) && !s.startsWith('#')) {
            s = '#' + s;
        }
        return s;
    });
    console.log('parsed', palette.toString());
    if (lastCustom.toString() !== palette.toString()) {
        lastCustom = palette;
        document.querySelector('.customs').innerHTML += renderPalette(palette);
    }
};

var custom = document.querySelector('#customColors');
custom.addEventListener('blur', parseCustomPalette);
custom.addEventListener('keypress', function (e) {
    var kode = e.which || e.keyCode;
    if (kode === 13 || kode === 9) {
        // ENTER or TAB
        parseCustomPalette(e);
    }
});

// Generate HTML for a paltte
var renderPalette = function renderPalette(palette) {
    var pname = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'custom';

    var markup = '';
    markup += '<div class="palette">';
    markup += '<div class="palette_label">' + pname + '</div>';
    palette.forEach(function (color) {
        markup += '<div class="swatch" style="background-color:' + color + '"></div>';
    });
    markup += '</div>';
    return markup;
};

// Loop through all the preset palettes, render them, add to page
var paletteMarkup = '';
var pnames = Object.keys(appPalettes);
pnames.forEach(function (pname) {
    var palette = appPalettes[pname];
    if (palette && palette.length) {
        paletteMarkup += renderPalette(palette, pname);
    }
});
document.querySelector('.presets').innerHTML = paletteMarkup;

// draw one to start, take renderer from hash if it is valid

var h = window.location.hash.slice(1);
if (h && RENDERERS.hasOwnProperty(h)) {
    initRenderer = h;
}

// setRenderer(initRenderer, document.querySelector("[data-renderer='" + initRenderer + "']"));

/***/ })
/******/ ]);