31:T9cc,{ const { size = 500, duration = 2000, fps = 30, lineWidth = 1, pointRadius = 1.5, pointColor = '#000', lineColor = '#000', bgColor = '#fff', dpr = Math.min(2, window.devicePixelRatio || 1) } = options; const l = points; const c = DOM.context2d(size, size, dpr); c.canvas.style.maxWidth = '100%'; c.lineWidth = lineWidth; const { PI, cos, sin } = Math, TAU = PI * 2; const sites = new Float64Array(l * 2); // Slight displacement to prevent points from covering the same spot. const wiggle = 1e-5; const voronoi = new Delaunay(sites).voronoi([1, 1, size - 1, size - 1]); function update(t) { const [r0, r1] = viewof radius.value; for (let n = 0; n < l; n++) { const tn = (n + t) / l; const a = tn * TAU * viewof rounds.value - PI / 2 - tn * wiggle; const r = ((r0 + (r1 - r0) * (cos(tn * TAU * viewof loops.value) / 2 + .5)) / 2) * size; sites[n * 2] = size / 2 + cos(a) * r; sites[n * 2 + 1] = size / 2 + sin(a) * r; } } console.log("UPDATE"); update(1); voronoi.update(); var [areaMin, areaMax] = [0, Infinity]; if (!auto_domain) { const [domainMin, domainMax] = domain; areaMin = (domainMin * size * size) / Math.sqrt(sites.length); areaMax = (domainMax * size * size) / Math.sqrt(sites.length); } else { [areaMin, areaMax] = getMinMaxArea(voronoi); } var interpolation = d3.hasOwnProperty(color_theme) ? d3[color_theme] : d3.interpolateBlues; var scaleFnc = d3.hasOwnProperty(transformScale) ? d3[transformScale] : d3.scaleSequential; var color = scaleFnc(interpolation).domain( reverse_color ? [areaMin, areaMax] : [areaMax, areaMin] ); function drawFrame(t) { update(t); voronoi.update(); var i = 0; for (const cell of voronoi.cellPolygons()) { const area = Math.abs(d3.polygonArea(cell)); c.beginPath(); voronoi.renderCell(i, c); c.strokeStyle = c.fillStyle = color(area); c.fill(); // c.stroke(); i++; } if (viewof drawPoints.value) { c.beginPath(); voronoi.delaunay.renderPoints(c, pointRadius); c.fillStyle = pointColor; c.fill(); } return c.canvas; } if (gif) return yield* renderGif(invalidation, drawFrame, duration, { preview: drawFrame(0), fps, filename: `valking-woronoi-${(Date.now() / 1000) | 0}` }); while (true) yield drawFrame((Date.now() / duration) % 1); }32:[] 2f:{"title":"Valking Woronoi : coloring","cells":[{"id":0,"value":"// Walking Voronoi\nmd`# Valking Woronoi : coloring\n\nThis is my fork from [Fabian Iwand's notebook](https://observablehq.com/@mootari/valking-woronoi). I simply added coloring (proportionnal to cell's area).\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"viewof gif = radius,loops,rounds,points,drawPoints, // Reset checkbox on changes\n Object.defineProperty(\n md`Tweak the sliders below. Once you find a configuration that you like, turn it into a GIF!`,\n 'value',\n { get() { return this.querySelector('input').checked } }\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"viewof radius = rangeSlider({\n title: 'Radius',\n value: [.2, .9],\n min: 0.01,\n precision: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"viewof domain = rangeSlider({\n title: 'Color domain',\n min: 0.001,\n max: 2,\n value: [.1, .9],\n precision: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"viewof auto_domain = Object.defineProperty(\n html` Automatic color domain`,\n 'value',\n {\n get() {\n return this.querySelector('input').checked;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"viewof color_theme = {\n const color_theme = radio({\n title: \"Color theme\",\n options: [\n { label: \"Yellow/Red\", value: \"interpolateYlOrRd\" },\n { label: \"Yellow/Brown\", value: \"interpolateYlOrBr\" },\n { label: \"Blue/Green\", value: \"interpolateBuGn\" },\n { label: \"Blue/Purple\", value: \"interpolateBuPu\" },\n { label: \"Green/Blue\", value: \"interpolateGnBu\" },\n { label: \"Red\", value: \"interpolateReds\" },\n { label: \"Blue\", value: \"interpolateBlues\" },\n { label: \"Green\", value: \"interpolateGreens\" },\n { label: \"Grey\", value: \"interpolateGreys\" },\n { label: \"Purple/Blue\", value: \"interpolatePuBu\" },\n { label: \"Red/Purple\", value: \"interpolateRdPu\" },\n { label: \"Cividis\", value: \"interpolateCividis\" },\n { label: \"Warm\", value: \"interpolateWarm\" }\n ],\n value: \"interpolateYlOrRd\"\n });\n color_theme.style.marginTop = \"8px\";\n return color_theme;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"viewof transformScale = {\n const transformScale = radio({\n title: \"Type of transform\",\n options: [\n { label: \"Default\", value: \"scaleSequential\" },\n { label: \"Log\", value: \"scaleSequentialLog\" },\n { label: \"Sqrt\", value: \"scaleSequentialSqrt\" }\n ],\n value: \"scaleSequentialLog\"\n });\n transformScale.style.marginTop = \"8px\";\n return transformScale;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"viewof reverse_color = Object.defineProperty(\n html` Reverse color`,\n 'value',\n {\n get() {\n return this.querySelector('input').checked;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"viewof loops = slider({ title: 'Loops', min: 0, max: 50, step: 1, value: 6 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"viewof rounds = slider({ title: 'Rounds', min: 1, max: 10, step: 1, value: 4 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"viewof points = slider({\n title: 'Points',\n min: 3,\n max: 300,\n step: 1,\n value: 114\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"viewof drawPoints = Object.defineProperty(\n html` Draw points`,\n 'value',\n {get() { return this.querySelector('input').checked }}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"// Want more control? Put additional options in here!\noptions = ({\n size: width * 0.5\n // lineWidth: 3,\n // bgColor: '#eee',\n // GIFs only. Live preview runs at ~60 fps.\n // duration: 1500\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"import { findExtremePoint } from \"@pierreleripoll/voronoi-stippling-cells-visualisation\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"getMinMaxArea = voronoi => {\n var min = Infinity;\n var max = 0;\n for (const cell of voronoi.cellPolygons()) {\n const area = ~~Math.abs(d3.polygonArea(cell));\n if (area > max) max = area;\n else if (area < min) min = area;\n }\n return [min, max];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"d3 = require(\"d3@5\", \"d3-delaunay@5\", \"d3-tricontour@0.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"import {renderGif} from '88a8246df5677bae'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"Delaunay = (await require('d3-delaunay@5.2')).Delaunay","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}