(function () { var BACKGROUND = "#f9ece3"; var DEFAULT_PALETTE = "sequential12516026"; var COLS = 8; var ROWS = 8; var PALETTE_FILES = { diverging12541021: "dec01.txt", grouped12516024: "dec02.txt", sequential12512012: "dec03.txt", grouped12516017: "dec04.txt", category12516028: "dec05.txt", grouped12511007: "dec06-5.txt", grouped12516011: "dec07-4.txt", grouped12518022: "dec08-1.txt", sequential12519027: "dec09.txt", sequential12524016: "dec10.txt", grouped12521014: "dec11.txt", sequential12521025: "dec12-5.txt", category12526006: "dec13.txt", grouped12513018: "dec14.txt", grouped12516018: "dec15-1.txt", diverging12514031: "dec16.txt", category1252605: "dec17.txt", sequential13188028: "dec18-3.txt", sequential12516026: "dec19.txt", sequential12521019: "dec20-4.txt", grouped12512014: "dec21-1.txt", category12512013: "dec22.txt", grouped1251203: "dec23.txt", category12511021: "dec24-1.txt", category12512022: "dec25.txt" }; var paletteSelect = document.getElementById("palette"); var regenerateBtn = document.getElementById("regenerate"); var canvasWrap = document.getElementById("canvas-wrap"); var paletteKeys = Object.keys(PALETTE_FILES).sort(); var paletteCache = {}; var patternCache = {}; var canvas = null; var ctx = null; var busy = false; function assetUrl(name) { if (window.fil && window.fil.url) return window.fil.url(name); return "assets/" + encodeURIComponent(name); } function randomInt(min, max) { return min + Math.floor(Math.random() * (max - min)); } function shuffle(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var tmp = array[i]; array[i] = array[j]; array[j] = tmp; } return array; } function probabilityPick(pairs) { var table = []; for (var i = 0; i < pairs.length; i++) { var v = pairs[i][0]; var p = pairs[i][1]; for (var j = 0; j < p; j++) table.push(v); } return function () { return table[Math.floor(Math.random() * table.length)]; }; } function fillWithSquares(cols, rows) { var maxSize = Math.min(cols, rows) - 1; var pick = probabilityPick( (function () { var pairs = []; for (var n = 1; n <= maxSize; n++) pairs.push([n, 1]); return pairs; })() ); var cells = []; var occupied = []; var row, col; for (row = 0; row < rows; row++) { occupied[row] = []; for (col = 0; col < cols; col++) { cells.push({ col: col, row: row }); occupied[row][col] = false; } } shuffle(cells); var squares = []; function fit(size) { var icell, nr, nc, ok, k, cell; for (icell = 0; icell < cells.length; icell++) { cell = cells[icell]; row = cell.row; col = cell.col; if (col + size <= cols && row + size <= rows) { ok = true; for (nc = 0; ok && nc < size; nc++) { for (nr = 0; ok && nr < size; nr++) { if (occupied[row + nr][col + nc]) ok = false; } } if (ok) { for (nc = 0; nc < size; nc++) { for (nr = 0; nr < size; nr++) { occupied[row + nr][col + nc] = true; } } squares.push({ row: row, col: col, size: size }); for (k = cells.length - 1; k >= 0; k--) { if (occupied[cells[k].row][cells[k].col]) cells.splice(k, 1); } return true; } } } return false; } var tries = (rows * cols) * (rows * cols); while (tries-- > 0) { var size = pick(); if (fit(size) && cells.length === 0) break; } return squares; } function createMatrix(scale, rotation) { rotation = rotation || 0; var radian = (rotation * Math.PI) / 180; return { a: Math.cos(radian) * scale, b: Math.sin(radian) * scale, c: -Math.sin(radian) * scale, d: Math.cos(radian) * scale, e: 0, f: 0 }; } function svgPatternToCanvas(patternElement) { var cached = patternCache[patternElement]; if (cached) return Promise.resolve(cached); var idMatch = patternElement.match(/id="([^"]+)"/); if (!idMatch) return Promise.resolve(null); var id = idMatch[1]; var widthMatch = patternElement.match(/width="([^"]+)"/); var heightMatch = patternElement.match(/height="([^"]+)"/); var width = widthMatch ? widthMatch[1] : 100; var height = heightMatch ? heightMatch[1] : 100; var offscreen = document.createElement("canvas"); var offCtx = offscreen.getContext("2d"); var image = new Image(); var svgContent = ''; return new Promise(function (resolve) { image.onload = function () { var pattern = offCtx.createPattern(image, "repeat"); if (pattern && pattern.setTransform) { pattern.setTransform(createMatrix(0.5)); } patternCache[patternElement] = pattern; resolve(pattern); }; image.onerror = function () { resolve(null); }; image.src = "data:image/svg+xml," + encodeURIComponent(svgContent); }); } function patternsFromText(text) { var elements = text.replace(/\r?\n(?!