31:T313f,logoSVG = html` `32:[] 2f:{"title":"Coding With Fire: Paths as Points","cells":[{"id":0,"value":"md`# Coding With Fire: Paths as Points\n\nTODO\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"letterToShow = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"animatedLetterToShow = Generators.observe(notify => {\n let i = 0;\n\n notify(i);\n let interval = setInterval(() => {\n i = i + 1;\n if (i === 13) i = 0;\n notify(i);\n }, 2500);\n return () => clearInterval(interval);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"ltr = d3\n .select(logoSVG)\n .selectAll(\"path\")\n .nodes()[animatedLetterToShow]","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"ltrpoints = getPoints(ltr)","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"viewof numPoints = slider({\n min: 5,\n max: 300,\n step: 1,\n description: \"Choose the number of points\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"canvas = {\n let ctx = DOM.context2d(width, height);\n let scale = 300;\n let tx = 100;\n let ty = 30;\n let radius = 5;\n\n ctx.lineWidth = 5;\n\n ctx.fillStyle = \"seagreen\";\n ctx.globalAlpha = 0.5;\n\n ctx.beginPath();\n ctx.moveTo(tx + ltrpoints[0].nx * scale, ty + ltrpoints[1].ny * scale);\n ltrpoints.forEach(d => {\n let x = tx + d.nx * scale;\n let y = ty + d.ny * scale;\n ctx.lineTo(x, y);\n });\n ctx.closePath();\n ctx.stroke();\n\n // ctx.fillRect(100, 100, 200, 200);\n ltrpoints.forEach(d => {\n let x = tx + d.nx * scale;\n let y = ty + d.ny * scale;\n ctx.beginPath();\n ctx.arc(x, y, radius, 0, 2 * Math.PI);\n // ctx.stroke();\n ctx.fill();\n });\n\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"ejcanvas = {\n let ctx = DOM.context2d(width, height);\n\n ctx.fillStyle = \"seagreen\";\n ctx.globalAlpha = 0.2;\n let lscale = 300;\n let m = 50;\n\n // ctx.fillRect(100, 100, 200, 200);\n ltrpoints.forEach((d, i) => {\n ctx.beginPath();\n ctx.arc(m + d.nx * lscale, m + d.ny * lscale, 20 - i * 0.1, 0, 2 * Math.PI);\n ctx.stroke();\n ctx.fill();\n });\n\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"function getPoints(pathElement) {\n let len = pathElement.getTotalLength();\n let points = [];\n let p;\n // TODO: replace this with a better example\n let min = { x: Infinity, y: Infinity };\n let max = { x: -Infinity, y: -Infinity };\n for (var i = 0; i < numPoints; i++) {\n p = pathElement.getPointAtLength((len * i) / numPoints);\n points.push({ x: p.x, y: p.y });\n if (p.x < min.x) min.x = p.x;\n if (p.y < min.y) min.y = p.y;\n if (p.x > max.x) max.x = p.x;\n if (p.y > max.y) max.y = p.y;\n }\n console.log(min, max);\n points.forEach(p => {\n p.nx = (p.x - min.x) / max.x;\n p.ny = (p.y - min.y) / max.y;\n });\n\n return points;\n}\n//.pathSegList()","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}