2c:null 2d:["$","title",null,{"children":"Voronoi Shiver | Bob Kerns | Observable"}] 32:T404,md`# Voronoi Shiver >>## CONTENT WARNING: >>>### Some (unsynchronized) flashing and cyclical motion. >>> People with epilepsy or very prone to seasickness may not wish to continue. (Or I may be overly cautious?) I first saw this in something my wife was trying with a 3D voronoi fracturing that was undergoing skew transformations. The sudden shifts as the voronoi distances change produced a striking "shivering" effect. This illustrates the effect and cause in 2D, through the use of gradients. The gradients are oriented from smallest to largest edge. This can change rather suddenly as edges appear and disappear, as well as grow and shrink with the deformation. I think the result is kinda pretty, especially in Christmas mode. I haven't figured out yet how to make it not revert to Christmas mode in full screen—when \`width\` changes, it's a whole new ballgame and everything gets recalculated. UPDATE: Wife and daughter both reacted with 'ugh, makes me seasick'. I'll turn off some of the motion by default...' `33:Ta12,viewof params = { const ids = idGen('control'); const specs = {}; const rows = param_specs.filter(s => s.type === 'row'); const singles = param_specs.filter(s => s.type !== 'row'); const register = s => (specs[s.key || ids.next()] = s); singles.forEach(register); rows.forEach(r => r.row.forEach(register)); const theRoot = html`

Param	Value	X	Y

`; console.log('here'); d3.select(theRoot) .call(root => root .select('tbody') .selectAll('tr') .data(rows, r => r.key) .join('tr') .attr('class', d => d.label) .selectAll('td') .data(row => { return [ html`${row.label}`, html`-, - `, ...row.row.map( s => html`` ) ]; }) .join('td') .append(d => d) ) .call(root => root .select('.checkboxes.root') .selectAll('div') .data(singles, d => d.key) .join('div') .attr('class', d => d.key) .append(d => html`${d.label}`) .append( d => html`` ) ); const root = form(theRoot); const fmt = (k, v) => typeof v === 'number' ? v.toFixed(specs[k].decimal || 0) : String(v); const result = html`

${root}

`; const update = raw => { const values = Object.keys(raw).reduce( (a, k) => ((a[k] = scaleInput(specs[k], root.value[k])), a), {} ); Object.keys(raw).map(k => { d3.select(root) .select(`.${k}.fill.value`) .text(fmt(k, values[k])); }); return values; }; Promise.resolve().then(async () => { for await (const values of Generators.input(root)) { result.value = update(root.value); } }); result.value = update(root.value); return result; }34:T1226,runner = data => { const { canvas } = data; let p = viewof params.value; viewof params.addEventListener("input", () => { p = params.value; // scaleForm(param_scales)(viewof params.value); }); const fn = function* runner(data) { const { particles, height, context, phase, xoffset, yoffset } = data; const [pphx, pphy, sphx, sphy] = [phase.x, phase.y, phase.sx, phase.sy]; const pi_2 = Math.PI * 2; const pi_2_1000 = pi_2 / 1000; const it = Date.now(); const ph = f => t => (t * f * pi_2_1000) % pi_2; // Calculate how far we are from original phase, so we can correct // from restarts. const [osphx, osphy] = [sphx - ph(p.xskewf)(it), sphy - ph(p.yskewf)(it)]; const [opphx, opphy] = [pphx - ph(p.xpanf)(it), pphy - ph(p.ypanf)(it)]; while (true) { context.canvas.style.background = p.christmas ? "lightblue" : "darkgrey"; context.strokeStyle = "blue"; const t = Date.now(); const [tsphx, tsphy] = [ph(p.xskewf)(t + osphx), ph(p.yskewf)(t + osphy)]; const [tpphx, tpphy] = [ph(p.xpanf)(t + opphx), ph(p.ypanf)(t + opphy)]; // Remember our current phase phase.x = tpphx; phase.y = tpphy; phase.sx = tsphx; phase.sy = tsphy; const tskew = [Math.sin(tsphx) * p.xskew, Math.sin(tsphy) * p.yskew]; const tpan = [Math.sin(tpphx) * p.xpan, Math.sin(tpphy) * p.ypan]; const xlate = ([dx, dy]) => ([x, y, ox, oy]) => [x + dx, y + dy, ox, oy]; const skew = ([sx, sy]) => ([x, y, dx, dy]) => [ x + sx * y, y + sy * x, dx, dy ]; const askew = skew(tskew); const axlate1 = xlate([-width * xoffset, -height * yoffset]); const axlate2 = xlate([width * (xoffset - 1), height * (yoffset - 1)]); const pan = xlate([p.xpan, p.ypan]); const txform = p => pan(axlate2(askew(axlate1(p)))); const tparticles = particles.map(txform); const delaunay = new d3.Delaunay.from(tparticles); const voronoi = delaunay.voronoi([0, 0, width, height]); context.save(); context.clearRect(0, 0, width, height); if (p.christmas) { var bck = context.createLinearGradient( 0, -Math.sin(t / 1000) * height, width, Math.sin(t / 1000) * height ); bck.addColorStop(0, "blue"); bck.addColorStop( 0.33 * (0.2 * Math.sin(8 + (0.8 * t) / 1000) + 1), "green" ); bck.addColorStop( 0.5 * (0.4 * Math.sin(4 + (0.4 * t) / 1000) + 1), "orange" ); bck.addColorStop( 0.67 * (0.2 * Math.sin(11 + (0.6 * t) / 1000) + 1), "pink" ); bck.addColorStop(1, "yellow"); context.fillStyle = bck; context.rect(0, 0, width, height); context.fill(); } context.beginPath(); if (p.cells) { for (let i = 0; i < particles.length; i++) { context.beginPath(); const poly = voronoi.cellPolygon(i); if (poly) { const [min, max, rect] = minmaxPoly(poly); const [dx, dy] = [max[0] - min[0], max[1] - min[1]]; var grd = context.createLinearGradient( min[0] - 3 * dx, min[1] - 3 * dy, max[0] + 3 * dx, max[1] + 3 * dy ); if (p.christmas) { grd.addColorStop(0, "#e0e0f0"); grd.addColorStop(0.33, "#e0e0e0"); grd.addColorStop( 0.5, i % 11 === 0 ? "blue" : i % 7 === 0 ? "yellow" : i % 2 === 0 ? "green" : "red" ); grd.addColorStop(0.67, "darkgrey"); grd.addColorStop(1, "darkgrey"); } else { grd.addColorStop(0, "#e0e0f0"); grd.addColorStop(0.33, "#e0e0e0"); grd.addColorStop(0.67, "#202020"); grd.addColorStop(1, "#000020"); } context.fillStyle = grd; voronoi.renderCell(i, context); context.fill(); } } context.strokeStyle = "blue"; context.beginPath(); voronoi.render(context); context.stroke(); if (p.points) { delaunay.renderPoints(context); context.fill(); } } try { yield canvas; } catch (e) { console.error("Canvas err", e); } finally { } } }; const run = canvas.runner || (canvas.runner = fn(data)); return run; }35:T61e,param_specs = [ { key: 'skewf', type: 'row', label: 'Skew Freq', row: [ { key: 'xskewf', type: 'range', min: 0, max: 2, value: 0.02, decimal: 3 }, { key: 'yskewf', type: 'range', min: 0, max: 2, value: 0.033, decimal: 3 } ] }, { key: 'skew', type: 'row', label: 'Skew Range', row: [ { key: 'xskew', type: 'range', min: 0, max: 1, value: 0.25, decimal: 3 }, { key: 'yskew', type: 'range', min: 0, max: 1, value: 0.25, decimal: 3 } ] }, { key: 'pan', type: 'row', label: 'Pan Position', row: [ { key: 'xpan', type: 'range', min: -width, max: width, value: 0, decimal: 0 }, { key: 'ypan', type: 'range', min: -width, max: width, value: 0, decimal: 0 } ] }, { key: 'panf', type: 'row', label: 'Pan Freq', row: [ { key: 'xpanf', type: 'range', min: 0, max: 2, value: 0, decimal: 3 }, { key: 'ypanf', type: 'range', min: 0, max: 2, value: 0, decimal: 3 } ] }, { key: 'amp', type: 'row', label: 'Pan Range', row: [ { key: 'xamp', type: 'range', min: 0, max: 0.5, value: 0, decimal: 3 }, { key: 'yamp', type: 'range', min: 0, max: 0.5, value: 0, decimal: 3 } ] }, { key: 'points', type: 'checkbox', value: false, label: 'Draw points' }, { key: 'cells', type: 'checkbox', value: true, label: 'Draw cells' }, { key: 'christmas', type: 'checkbox', value: true, label: 'Christmas' } ]36:[] 30:{"id":"736bd7e95d86fe14","slug":"voronoi-shiver","title":"Voronoi Shiver","thumbnail":"6d725dd2b04f9325a7f5cd89cdab79be6b293d64aa6bf95b03f677814042aba0","access_level":"public","create_time":"$D2019-12-05T09:21:41.438Z","update_time":"$D2019-12-08T01:25:55.832Z","view_time":null,"first_public_time":"$D2019-12-06T13:37:59.954Z","has_unpublished_edits":null,"fork":{"id":"fe9ad230801481be","slug":"fullscreen-canvas","title":"Fullscreen Canvas","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a2a391e81ef70f60","login":"bobkerns","name":"Bob Kerns","avatar_url":"https://avatars-next.observableusercontent.com/d3d634f0561198d48f6c5a897f4009b95f14b0014fb7d85f3b6cc5415336b639","tier":"starter_2024"},"version":988,"publish_version":988,"role":null,"authored":false,"authors":[{"type":"individual","id":"c30fe465bb675dbe","login":"bobkerns","name":"Bob Kerns","avatar_url":"https://avatars-next.observableusercontent.com/d3d634f0561198d48f6c5a897f4009b95f14b0014fb7d85f3b6cc5415336b639","tier":null}],"members":[{"type":"individual","id":"c30fe465bb675dbe","login":"bobkerns","name":"Bob Kerns","avatar_url":"https://avatars-next.observableusercontent.com/d3d634f0561198d48f6c5a897f4009b95f14b0014fb7d85f3b6cc5415336b639","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"be3638d16a9fe9f4","slug":"generative-art","title":"Generative Art","owner":{"id":"a2a391e81ef70f60","login":"bobkerns","name":"Bob Kerns"}},"type":"notebook","body":{"titling":"auto","title":"Voronoi Shiver","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"fullscreen = {\n const button = html`