28:null 29:["$","title",null,{"children":"Colored Shimmy | David Reed | Observable"}] 2e: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; } }2f: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; // } }30:[] 2c:{"id":"454e31000156e3fe","slug":"colored-shimmy","title":"Colored Shimmy","thumbnail":"a77b4033779dd5ce4e571644c579b710f1a2c54b49950f38f279edb90c4cc101","access_level":"public","create_time":"$D2019-10-12T14:40:28.338Z","update_time":"$D2019-10-12T19:44:32.769Z","view_time":null,"first_public_time":"$D2019-10-12T15:47:03.847Z","has_unpublished_edits":null,"fork":{"id":"6d09e79678b5f436","slug":"shimmy","title":"Shimmy","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":14,"starred":false,"owner":{"type":"team","id":"16fca9b51e50cf39","login":"dvreed77","name":"David Reed","avatar_url":"https://avatars-next.observableusercontent.com/46631d8bc55556464c08f40c4d487a92abc8a8c0f4a57847959ded7697df382a","tier":"starter_2024"},"version":469,"publish_version":469,"role":null,"authored":false,"authors":[{"type":"individual","id":"cde8a6fb945a9633","login":"dvreed77","name":"David Reed","avatar_url":"https://avatars-next.observableusercontent.com/46631d8bc55556464c08f40c4d487a92abc8a8c0f4a57847959ded7697df382a","tier":null}],"members":[{"type":"individual","id":"cde8a6fb945a9633","login":"dvreed77","name":"David Reed","avatar_url":"https://avatars-next.observableusercontent.com/46631d8bc55556464c08f40c4d487a92abc8a8c0f4a57847959ded7697df382a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"colorScale = d3.scaleSequential(d3.interpolateOranges).domain([0, Math.pow(config.s, 3)]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"colorScale2 = d3.scaleSequential(d3.interpolateRdYlBu).domain([-1, 1]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"function area(bound) {\n return (bound[1]-bound[0]) * (bound[3] - bound[2])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"d3 = require(\"d3@5\", \"d3-hexbin@0.2\", \"d3-delaunay@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"