30:[] 2e:{"title":"Hello, Bezier.js","cells":[{"id":0,"value":"md`# Hello, Bezier.js\n\nA powerful [library for manipulating Bézier curves](http://pomax.github.io/bezierjs/)! Try dragging the control points and sliders below to adjust the graduated outline.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"viewof offset1 = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}px start offset`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"viewof offset2 = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}px end offset`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"canvas = {\n const context = DOM.context2d(width, height);\n\n function update() {\n mutable points = mutable points;\n const curve = new Bezier(mutable points.flat());\n const outline = curve.outline(offset1, offset1, offset2, offset2);\n context.clearRect(0, 0, width, height);\n drawSkeleton(context, curve);\n drawCurve(context, curve);\n context.strokeStyle = \"red\";\n outline.curves.forEach(c => drawCurve(context, c));\n }\n\n return d3.select(context.canvas)\n .call(drag, {radius: 20, points: mutable points, update})\n .call(update)\n .node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"mutable points = [\n [0.75 * Math.min(640, width), 80], \n [0.40 * Math.min(640, width), 20], \n [0.15 * Math.min(640, width), 150]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"function drag(selection, {points, radius, update}) {\n\n function dragsubject() {\n let S = null;\n let R = radius;\n for (const p of points) {\n let r = Math.hypot(d3.event.x - p[0], d3.event.y - p[1]);\n if (r < R) R = r, S = p;\n }\n return {x: S[0], y: S[1], point: S};\n }\n\n function dragged() {\n d3.event.subject.point[0] = d3.event.x;\n d3.event.subject.point[1] = d3.event.y;\n }\n\n selection.call(d3.drag()\n .subject(dragsubject)\n .on(\"drag\", dragged)\n .on(\"start.update drag.update end.update\", update));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"function drawLine(ctx, p1, p2, offset) {\n offset = offset || { x:0, y:0 };\n var ox = offset.x;\n var oy = offset.y;\n ctx.beginPath();\n ctx.moveTo(p1.x + ox,p1.y + oy);\n ctx.lineTo(p2.x + ox,p2.y + oy);\n ctx.stroke();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"function drawPoint(ctx, p, offset) {\n offset = offset || { x:0, y:0 };\n var ox = offset.x;\n var oy = offset.y;\n ctx.beginPath();\n ctx.arc(p.x + ox, p.y + oy, 5, 0, 2*Math.PI);\n ctx.stroke();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"function drawCircle(ctx, p, r, offset) {\n offset = offset || { x:0, y:0 };\n var ox = offset.x;\n var oy = offset.y;\n ctx.beginPath();\n ctx.arc(p.x + ox, p.y + oy, r, 0, 2*Math.PI);\n ctx.stroke();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"function drawPoints(ctx, points, offset) {\n offset = offset || { x:0, y:0 };\n points.forEach(p => drawCircle(ctx, p, 3, offset));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"function drawSkeleton(ctx, curve, offset = {x: 0, y: 0}, nocoords) {\n var pts = curve.points;\n ctx.strokeStyle = \"lightgrey\";\n drawLine(ctx, pts[0], pts[1], offset);\n if (pts.length === 3) drawLine(ctx, pts[1], pts[2], offset);\n else drawLine(ctx, pts[2], pts[3], offset);\n ctx.strokeStyle = \"black\";\n if(!nocoords) drawPoints(ctx, pts, offset);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"function drawCurve(ctx, curve, offset) {\n offset = offset || { x:0, y:0 };\n var ox = offset.x;\n var oy = offset.y;\n ctx.beginPath();\n var p = curve.points, i;\n ctx.moveTo(p[0].x + ox, p[0].y + oy);\n if (p.length === 3) {\n ctx.quadraticCurveTo(\n p[1].x + ox, p[1].y + oy,\n p[2].x + ox, p[2].y + oy\n );\n }\n if (p.length === 4) {\n ctx.bezierCurveTo(\n p[1].x + ox, p[1].y + oy,\n p[2].x + ox, p[2].y + oy,\n p[3].x + ox, p[3].y + oy\n );\n }\n ctx.stroke();\n ctx.closePath();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"Bezier = require(\"bezier-js@2/bezier.js\").catch(() => window.Bezier)","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"d3 = require(\"d3-selection@1\", \"d3-drag@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}