{ const height = width; const saturation = args.saturation; const seed = args.seed; const hue_amplitude = args.hue_amplitude; const hue_phase = args.hue_phase; const background = args.background; const background_phase = args.background_phase; const border = args.border; const grid_alpha = args.grid_alpha; const should_shuffle = args.shuffle; const tile_size = args.tile_size; const curve_thickness = args.curve_thickness / 100; const curves_per_tile = args.curves_per_tile; const twist = args.twist / 100; const scramble = args.scramble / 100; const segments = curves_per_tile + 1; // Using a scratch canvas avoids a nasty interaction between clipping and // anti-aliasing. const tileCanvas = document.createElement("canvas"); tileCanvas.width = tile_size; tileCanvas.height = tile_size; const tileContext = tileCanvas.getContext("2d"); const rForm = makeRandomGenerator("form:" + seed); const rScramble = makeRandomGenerator("scramble:" + seed); const rScramble2 = makeRandomGenerator("scramble2:" + seed); const rShuffle = makeRandomGenerator("shuffle:" + seed); const rTwist = makeRandomGenerator("twist:" + seed); const context = DOM.context2d(width, height); context.fillStyle = "#fff"; context.fillRect(0, 0, width, height); const curveWidth = Math.max(2, (tile_size / segments) * curve_thickness + 1); function shuffle(a) { for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(rShuffle.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; } function circle(x, y, r, style) { tileContext.beginPath(); tileContext.arc(x, y, r, 0, 2 * Math.PI); tileContext.lineWidth = curveWidth; tileContext.strokeStyle = border; tileContext.stroke(); tileContext.lineWidth -= 2; tileContext.strokeStyle = style; tileContext.stroke(); } function part(i, x, y, flip) { const hue = ((flip ? segments - i : i) / curves_per_tile) * hue_amplitude + hue_phase; circle(x, y, (tile_size * i) / segments, "#fff0c9"); } for (let y = 0; y < height; y += tile_size) { for (let x = 0; x < width; x += tile_size) { const curves = []; const otx = rForm.random() < 0.5 ? 0 : tile_size; const oty = rForm.random() < 0.5 ? 0 : tile_size; for (let i = 1; i <= Math.floor(segments / 2); i++) { // We do this outside of the if for more stability. const stx = rScramble2.random() < 0.5 ? 0 : tile_size; const sty = rScramble2.random() < 0.5 ? 0 : tile_size; const should_scramble = i > 1 && rScramble.random() < scramble; const tx = should_scramble ? stx : otx; const ty = should_scramble ? sty : oty; const should_twist = rTwist.random() < twist; const k = segments - i; const twist_i = k != i && rTwist.random() < 0.5 && should_twist; const twist_k = k != i && !twist_i && should_twist; function do_twist(twist_this, z) { return twist_this ? tile_size - z : z; } curves.push([twist_i ? k : i, do_twist(twist_i, tx), ty]); if (k != i) { curves.push([twist_k ? i : k, do_twist(twist_k, tx), ty]); curves.unshift([ twist_k ? i : k, do_twist(twist_k, tile_size - tx), tile_size - ty ]); } curves.unshift([ twist_i ? k : i, do_twist(twist_i, tile_size - tx), tile_size - ty ]); } if (should_shuffle) shuffle(curves); // draw tile const parity = ((x + y) / tile_size) % 2; const bkg2 = d3.hsl(background); bkg2.h += background_phase; tileContext.fillStyle = "#fff0c9"; tileContext.fillRect(0, 0, tile_size, tile_size); tileContext.fillStyle = "#fff0c9"; tileContext.fillRect( parity ? 0 : tile_size / 2, 0, tile_size / 2, tile_size / 2 ); tileContext.fillRect( parity ? tile_size / 2 : 0, tile_size / 2, tile_size / 2, tile_size / 2 ); for (let j = 0; j < curves.length; ++j) { let [i, tx, ty] = curves[j]; part(i, tx, ty, ((x + y + tx + ty) / tile_size) % 2); } context.drawImage(tileCanvas, x, y); context.save(); context.globalAlpha = grid_alpha; context.beginPath(); context.rect(x, y, tile_size, tile_size); context.strokeStyle = border; context.stroke(); context.restore(); } } yield context.canvas; }