25:["$","title",null,{"children":"geometric.angleReflect | mheard03 | Observable"}] 49:Tb81,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, 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(); }4a:[] 29:{"id":"9f166ca2b5a53878","slug":null,"title":"geometric.angleReflect","thumbnail":"271f08de5b10b1fe901c794f93d3924af23978e352903ec24426049eb52dd4ca","access_level":"public","create_time":"$D2022-12-28T17:47:32.428Z","update_time":"$D2022-12-28T18:11:47.631Z","view_time":null,"first_public_time":"$D2022-12-28T17:47:32.428Z","has_unpublished_edits":null,"fork":{"id":"6cebf0e38ea7dca7","slug":"geometric-anglereflect","title":"geometric.angleReflect","owner":{"id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens"}},"stars":0,"starred":false,"owner":{"type":"team","id":"02d4ccf8951f2f02","login":"mheard03","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ae42ada5dc924d7cd620a4ae3bb6279a3e82fb649668ee6c0729bdada1ebf016","tier":"starter_2024","bio":"","following":false},"version":217,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6afb6cac5f188ec0","login":"mheard03","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ae42ada5dc924d7cd620a4ae3bb6279a3e82fb649668ee6c0729bdada1ebf016","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6afb6cac5f188ec0","login":"mheard03","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ae42ada5dc924d7cd620a4ae3bb6279a3e82fb649668ee6c0729bdada1ebf016","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"mutable mirrorX = 12;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"mutable mirrorY = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"mutable mirrorTheta = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"mutable projectorY = 12;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"tableTheta = -80","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"vars = {\n return {\n projector: { x: 5, y: projectorY, theta: geometric.angleReflect(tableTheta, mirrorTheta) },\n mirror: { x: mirrorX, y: mirrorY, theta: mirrorTheta },\n table: { x: 16, y: 58, theta: tableTheta }\n }\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"svgVars = {\n const margin = 5;\n const svgHeight = 400;\n const svgWidth = svgHeight * 60 / 40;\n\n const transformX = d3.scaleLinear().domain([40, 0]).range([margin, svgWidth + 2 * margin]);\n const transformY = d3.scaleLinear().domain([60, 0]).range([margin, svgHeight + 2 * margin]);\n const transform = (obj) => ({\n x: transformX(obj.x),\n y: transformY(obj.y),\n theta: geometric.angleToRadians(obj.theta)\n });\n \n return {\n projector: transform(vars.projector),\n mirror: transform(vars.mirror),\n table: transform(vars.table)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"geometric.angleReflect(80, 0);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"relection = geometric.angleReflect(incidence, surface);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"surface","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"geometric.angleToRadians(90)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`## Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"width = Math.min(innerWidth, 400)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 400;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"radius = 10;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"geometric = require(\"geometric@2\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null