31:Tb87,chart = { const svg = d3.select(DOM.svg(width, height)); svg.append("rect").attr("width", width).attr("height", height); const center = [width / 2, height / 2]; let surfaceAnglePrev = 0, surfaceAngle = 0, surfaceAngleChange = 0, surfaceStartPoint, surfaceEndPoint, startAngle = 235, reflectedAngle, distance = 200, startPoint, reflectedPoint; const surfaceDragGenerator = d3.drag() .on("drag", d => { surfaceAnglePrev = surfaceAngle; surfaceAngle = geometric.lineAngle([[Math.round(d3.event.x), Math.round(d3.event.y)], center]); surfaceAngleChange = surfaceAngle - surfaceAnglePrev; update(); }); const surfaceLine = svg.append("line") .attr("class", "surface-line"); const surfaceHandle = svg.append("circle") .attr("class", "surface-handle") .attr("r", radius) .call(surfaceDragGenerator); const startDragGenerator = d3.drag() .on("drag", d => { let x = Math.round(d3.event.x), y = Math.round(d3.event.y); startPoint = [ x < radius ? radius : x > width - radius ? width - radius : x, y < radius ? radius : y > height - radius ? height - radius : y ]; distance = geometric.lineLength([center, startPoint]); startAngle = geometric.lineAngle([center, startPoint]); update(); }); const startLine = svg.append("line") .attr("class", "start-angle") .attr("x2", center[0]) .attr("y2", center[1]); const startHandle = svg.append("circle") .attr("class", "start-handle") .attr("r", radius) .call(startDragGenerator); const reflectedLine = svg.append("line") .attr("class", "reflect-angle") .attr("x2", center[0]) .attr("y2", center[1]) .attr("marker-start", "url(#arrow)"); update(); function update(){ surfaceStartPoint = geometric.pointTranslate(center, surfaceAngle, -120); surfaceEndPoint = geometric.pointTranslate(center, surfaceAngle, 120); startAngle += surfaceAngleChange; reflectedAngle = geometric.angleReflect(startAngle - 180 + 720, surfaceAngle); // subtract 180 from start angle so that it begins at start point startPoint = geometric.pointTranslate(center, startAngle, distance); reflectedPoint = geometric.pointTranslate(center, reflectedAngle, distance); surfaceLine .attr("x1", surfaceStartPoint[0]) .attr("y1", surfaceStartPoint[1]) .attr("x2", surfaceEndPoint[0]) .attr("y2", surfaceEndPoint[1]); surfaceHandle .attr("transform", "translate(" + surfaceStartPoint + ")"); startLine .attr("x1", startPoint[0]) .attr("y1", startPoint[1]); startHandle .attr("transform", "translate(" + startPoint + ")"); reflectedLine .attr("x1", reflectedPoint[0]) .attr("y1", reflectedPoint[1]); } return svg.node(); }32:[] 2f:{"title":"geometric.angleReflect","cells":[{"id":32,"value":"md`# geometric.angleReflect\n\n[geometric.angleReflect](https://github.com/HarryStevens/geometric#angleReflect)(incidence, surface) returns the angle of reflection given a starting angle, also known as the angle of incidence, and the angle of the surface off of which it is reflected.\n\nThe blue line represents the angle of incidence, the red line the angle of reflection, and the black line the surface. You can change the angle of incidence by dragging the blue circle, and the angle of the surface by dragging the black circle.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"reflection = geometric.angleReflect(incidence, surface);","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"incidence = {\n while (true){\n const lineEl = d3.select(\".start-angle\");\n let line = [[0, 0], [0, 0]];\n if (lineEl._groups[0][0]){\n const x1 = +lineEl.attr(\"x1\"),\n y1 = +lineEl.attr(\"y1\"),\n x2 = +lineEl.attr(\"x2\"),\n y2 = +lineEl.attr(\"y2\");\n \n line = [[x1, y1], [x2, y2]];\n }\n yield geometric.lineAngle(line);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"surface = {\n while (true){\n const lineEl = d3.select(\".surface-line\");\n let line = [[0, 0], [0, 0]];\n if (lineEl._groups[0][0]){\n const x1 = +lineEl.attr(\"x1\"),\n y1 = +lineEl.attr(\"y1\"),\n x2 = +lineEl.attr(\"x2\"),\n y2 = +lineEl.attr(\"y2\");\n \n line = [[x1, y1], [x2, y2]];\n }\n yield geometric.lineAngle(line); \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`## Style`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"width = Math.min(innerWidth, 400)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = 400;","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"radius = 10;","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"geometric = require(\"geometric@2\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}