2f:T72c,draw = { let ctx = canvas.getContext("2d"); ctx.fillStyle = "lightgray"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "black"; for (let p of points) { ctx.beginPath(); ctx.fillStyle = p.notsmooth ? "green" : "black"; ctx.arc(p.x, p.y, 5, 0, Math.PI * 2); ctx.fill(); } let n = points.length; if (n > 1) { if (show.indexOf("o") >= 0) { ctx.strokeStyle = "#222"; ctx.lineWidth = 0.7; ctx.beginPath(); let p = points[n - 1]; ctx.moveTo(p.x, p.y); for (let p of points) ctx.lineTo(p.x, p.y); ctx.stroke(); } let m = controlPoints.length; if (show.indexOf("c") >= 0) { ctx.strokeStyle = "blue"; ctx.lineWidth = 1; ctx.beginPath(); let a = controlPoints[1]; ctx.moveTo(a.x, a.y); for (let i = 0; i < m; i += 3) { let b = controlPoints[(i + 2) % m]; let c = controlPoints[(i + 3) % m]; let d = controlPoints[(i + 4) % m]; ctx.lineTo(b.x, b.y); ctx.lineTo(c.x, c.y); ctx.lineTo(d.x, d.y); } ctx.stroke(); } if (show.includes("s")) { ctx.strokeStyle = "green"; ctx.fillStyle = "#0F05"; ctx.beginPath(); for (let p of subdiv) ctx.lineTo(p.x, p.y); ctx.closePath(); ctx.stroke(); ctx.fill(); } if (show.indexOf("b") >= 0) { ctx.lineWidth = 1.5; ctx.strokeStyle = "red"; ctx.fillStyle = "#F005"; ctx.beginPath(); let a = controlPoints[1]; ctx.moveTo(a.x, a.y); for (let i = 0; i < m; i += 3) { let b = controlPoints[(i + 2) % m]; let c = controlPoints[(i + 3) % m]; let d = controlPoints[(i + 4) % m]; ctx.bezierCurveTo(b.x, b.y, c.x, c.y, d.x, d.y); } ctx.stroke(); ctx.fill(); } } }30:T793,interaction = { let selected = -1; let moved = false; let mouse; canvas.oncontextmenu = () => { return false; }; // Disable context menu canvas.onmousedown = function (event) { mouse = Vec(event.offsetX, event.offsetY); mouse.notsmooth = false; selected = -1; let i = 0; for (let p of mutable points) { if (p.dist(mouse) < 8) { selected = i; break; } i++; } if (selected < 0) { // new point const pts = mutable points; const n = pts.length; if (n > 2) { // Find closest line segment where to insert let minDist = Number.POSITIVE_INFINITY; let closest = -1; for (let i = 0; i < n; i++) { const p = pts[(i - 1 + n) % n]; const q = pts[i]; const d = mouse.distSegment(p, q); if (d < minDist) { [minDist, closest] = [d, i]; } } mutable points = [ ...pts.slice(0, closest), mouse, ...pts.slice(closest) ]; } else { mutable points = mutable points.concat([mouse]); } } else { moved = false; } }; canvas.onmousemove = function (event) { moved = true; if (selected < 0) return; let newMouse = Vec(event.offsetX, event.offsetY); let { notsmooth } = mutable points[selected]; mutable points[selected] = mutable points[selected].add( newMouse.sub(mouse) ); mutable points[selected].notsmooth = notsmooth; mutable points = mutable points; mouse = newMouse; }; canvas.onmouseup = function (event) { if (!moved && selected != -1) { // click on point if (event.button != 0) { mutable points.splice(selected, 1); } else { mutable points[selected].notsmooth = !mutable points[selected] .notsmooth; } } selected = -1; mutable points = mutable points; }; }31:[] 2d:{"title":"Draw Polygon","cells":[{"id":0,"value":"title = md`# Draw Polygon\n__Interaction__:\n 1. Drag a point to change the shape of the polygon.\n 2. Click on an empty area to add a new point to the polygon.\n 3. Click a point with left button to toggle from/to smooth and non-smooth interpolation.\n 4. Click a point with right button to remove it.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"viewof list1 = html` \n \n \n \n \n \n \n

\n ${viewof show}\n

\n ${viewof clear}\n

\n ${json}\n

\n ${png}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"canvas = DOM.canvas(width, (width * 8) / 16)","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"viewof show = checkbox({\n title: \"Show\",\n options: [\n { value: \"o\", label: \"Original polygon\" },\n //{ value: \"c\", label: \"Control polygon\" },\n { value: \"b\", label: \"Smooth polygon\" }\n //{ value: \"s\", label: \"Chaikin subdivision\" }\n ],\n value: [\"o\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof clear = {\n let clear = html``;\n clear.onclick = () => {\n mutable points = [];\n };\n return clear;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"json = {\n //if (!country) return md``;\n return md`\n\n ${DOM.download(\n new Blob([JSON.stringify(points).replaceAll(',\"notsmooth\":false', \"\")], {\n type: \"application/json\"\n }),\n `Polygon.json`,\n \"Save as JSON\"\n )}\n\n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"png = downloadHtmlAsImage(canvas, { filename: \"Polygon\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"viewof edgeRatio = slider({\n min: 0, \n max: 1, \n step: 0.01, \n value : 0.3,\n format: \".0%\",\n description: \"distance to control point as a ratio of the polygon edge length\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"mutable points = [Vec(211, 386), Vec(153, 202), Vec(507, 156), Vec(676, 299)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"JSON.stringify(points)","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"controlPoints = smoothControlPoints(points, edgeRatio)","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"subdiv = {\n let curve = new Curve();\n for (let p of points) {\n curve.push(p);\n if (p.notsmooth) curve.push(p);\n }\n for (let i = 0; i < 4; i++) curve = curve.chaikin(true);\n return curve;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"function smoothControlPoints(points, edgeRatio = 0.333) {\n let cp = [];\n let n = points.length;\n if (n > 1) {\n let eprev = points[0].sub(points[n - 1]);\n let lenprev = eprev.mag();\n eprev = eprev.scale(1 / lenprev);\n for (let i = 0; i < n; i++) {\n let inext = (i + 1) % n;\n let enext = points[inext].sub(points[i]);\n let lennext = enext.mag();\n enext = enext.scale(1 / lennext);\n let tangent = eprev.add(enext).normalize();\n if (tangent.dot(enext) < 0) tangent = Vec(0, 0).sub(tangent);\n if (points[i].notsmooth) {\n cp.push(points[i], points[i], points[i]);\n } else {\n cp.push(\n points[i].sub(tangent.scale(lenprev * edgeRatio)),\n points[i],\n points[i].add(tangent.scale(lennext * edgeRatio))\n );\n }\n eprev = enext;\n lenprev = lennext;\n }\n }\n return cp;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { Vec, Vector, Curve } from \"@esperanc/2d-geometry-utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"import { slider, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"import { serialize, rasterize } from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"import { downloadHtmlAsImage } from \"@saneef/download-html-as-image\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"import { list } from \"@stwind/input-list\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}