30:T447,{ const context = DOM.context2d(width, height); const coordinates = new Float64Array(points.length * 2); const d = new d3.Delaunay(coordinates) const voronoi = d.voronoi([0, 0, width, height]); while (true) { const z = performance.now() * 0.0001; context.clearRect(0, 0, width, height); for (let i = 0, j = -1; i < points.length; ++i) { const [x, y] = points[i]; const t = noise(x * config.f, y * config.f, z) * Math.PI; coordinates[++j] = x + config.l * Math.cos(t); coordinates[++j] = y + config.l * Math.sin(t); } voronoi.update(); for (let value of voronoi.cellPolygons()) { context.beginPath(); context.moveTo(value[0][0], value[0][1]); for( let idx=1 ; idx < value.length ; idx++ ){context.lineTo( value[idx][0] , value[idx][1] )} context.closePath() const bounds = boundingRect(value) const t = noise((bounds[0]+bounds[1])/2 * .001, (bounds[2]+bounds[3])/2 * .001, z+100); context.fillStyle = colorScale2(t) context.fill() } yield context.canvas; } }31:T441,{ const context = DOM.context2d(width, height); const coordinates = new Float64Array(points.length * 2); const d = new d3.Delaunay(coordinates) const voronoi = d.voronoi([0, 0, width, height]); // while (true) { const z = performance.now() * 0.0001; context.clearRect(0, 0, width, height); for (let i = 0, j = -1; i < points.length; ++i) { const [x, y] = points[i]; const t = noise(x * config.f, y * config.f, z) * Math.PI; coordinates[++j] = x + config.l * Math.cos(t); coordinates[++j] = y + config.l * Math.sin(t); } voronoi.update(); for (let value of voronoi.cellPolygons()) { context.beginPath(); context.moveTo(value[0][0], value[0][1]); for( let idx=1 ; idx < value.length ; idx++ ){context.lineTo( value[idx][0] , value[idx][1] )} context.closePath() context.fillStyle = colorScale(area(boundingRect(value))) context.strokeStyle = d3.interpolateOranges(0.5) // context.lineWidth = 3 context.fill() context.stroke() } yield context.canvas; // } }32:[] 2e:{"title":"Colored Shimmy","cells":[{"id":0,"value":"md`# Colored Shimmy\n\nAdding on top of [Mike Bostock’s notebook](/@mbostock/shimmy).\n\nUsed Simplex Noise to Color polygons. Trial below that uses area, but not as interesting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"viewof config = {\n const form = html``;\n form.oninput = () => {\n form.value = {\n s: form.s.valueAsNumber,\n l: form.l.valueAsNumber,\n f: form.f.valueAsNumber\n };\n form.os.value = `${form.value.s.toFixed(1)}px`;\n form.ol.value = `${form.value.l.toFixed(0)}px`;\n form.of.value = `${form.value.f.toFixed(3)}`;\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"colorScale = d3.scaleSequential(d3.interpolateOranges).domain([0, Math.pow(config.s, 3)]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"colorScale2 = d3.scaleSequential(d3.interpolateRdYlBu).domain([-1, 1]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"function boundingRect(pts) {\n const minX = d3.min(pts.map(d => d[0]))\n const maxX = d3.max(pts.map(d => d[0]))\n const minY = d3.min(pts.map(d => d[1]))\n const maxY = d3.max(pts.map(d => d[1]))\n\n return [minX, maxX, minY, maxY] \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"function area(bound) {\n return (bound[1]-bound[0]) * (bound[3] - bound[2])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"points = d3.hexbin()\n .radius(config.s)\n .extent([[-config.l, -config.l], [width + config.l, height + config.l]])\n .centers()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"noise = {\n const simplex = new (await require(\"simplex-noise@2\"));\n return simplex.noise3D.bind(simplex);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"d3 = require(\"d3@5\", \"d3-hexbin@0.2\", \"d3-delaunay@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}