31:T74f,{ const svg = d3.select(DOM.svg(width, height)) .style("overflow", "visible") svg.append("polygon") .attr("class", "left") .attr("points", [[0, 0], ...line, [0, height]]); svg.append("polygon") .attr("class", "right") .attr("points", [[width, 0], ...line, [width, height]]); let pt = [50, 50]; const dragGenerator = d3.drag() .on("start", _ => { handle.classed("active", 1); }) .on("drag", event => { let x = Math.round(event.x / roundTo) * roundTo, y = Math.round(event.y / roundTo) * roundTo; x = x < 0 ? 0 : x > width - 1 ? width - 1 : x; y = y < 0 ? 0 : y > height - 1 ? height - 1 : y; pt = [x, y]; handle .attr("cx", pt[0]) .attr("cy", pt[1]); circle .attr("cx", pt[0]) .attr("cy", pt[1]); }) .on("end", _ => { handle.classed("active", 0); }); for (let i = 0; i < width; i += roundTo){ svg.append("line") .attr("class", "grid") .attr("x1", i) .attr("x2", i) .attr("y1", 0) .attr("y2", height); } for (let i = 0; i < height; i += roundTo){ svg.append("line") .attr("class", "grid") .attr("y1", i) .attr("y2", i) .attr("x1", 0) .attr("x2", width); } svg.append("line") .attr("class", "line") .attr("x1", line[0][0]) .attr("y1", line[0][1]) .attr("x2", line[1][0]) .attr("y2", line[1][1]); const handle = svg.append("circle") .attr("class", "handle") .attr("r", radius) .attr("cx", pt[0]) .attr("cy", pt[1]) .call(dragGenerator); const circle = svg.append("circle") .attr("class", "point") .attr("r", 2) .attr("cx", pt[0]) .attr("cy", pt[1]); return svg.node(); }32:[] 2f:{"title":"geometric.pointLeftofLine, geometric.pointRightofLine, geometric.pointOnLine","cells":[{"id":0,"value":"md`# geometric.pointLeftofLine, geometric.pointRightofLine, geometric.pointOnLine`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"md`[Geometric.js](https://github.com/HarryStevens/geometric) provides three functions to determine where a point is with respect to a line in two-dimensional space.\n\nDrag the circle. The point is ${on ? \"on\" : left ? \"left of\" : \"right of\"} the line.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"on = geometric.pointOnLine(point, line);","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"left = geometric.pointLeftofLine(point, line);","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"right = geometric.pointRightofLine(point, line);","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"point = {\n while(true){\n const circle = d3.select(\".point\");\n if (circle._groups[0][0]){\n yield [+circle.attr(\"cx\"), +circle.attr(\"cy\")];\n }\n else {\n yield [0, 0]; \n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"line = [[0, 0], [150, 150]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"md`You can also paint pixel by pixel to test that the functions work. If the pixel is left of the line, it will be filled tomato; if it is right of the line, it will be filled steelblue; and if it is on the line, it will be filled lime.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"{\n restart; \n \n const svg = d3.select(DOM.svg(width, height));\n \n svg.append(\"line\")\n .attr(\"class\", \"line\")\n .attr(\"x1\", line[0][0])\n .attr(\"y1\", line[0][1])\n .attr(\"x2\", line[1][0])\n .attr(\"y2\", line[1][1]);\n \n for (let y = 0; y < height; y++){\n \n for (let x = 0; x < width; x++){\n \n const px = [x, y];\n \n svg.append(\"circle\")\n .attr(\"r\", 1)\n .attr(\"transform\", `translate(${px})`)\n .style(\"fill\", _ => {\n return geometric.pointLeftofLine(px, line) ? \"tomato\"\n : geometric.pointRightofLine(px, line) ? \"steelblue\"\n : \"lime\";\n }); \n \n if (x % 25 === 0) yield svg.node();\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"viewof restart = Inputs.button(\"Restart\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`## Style`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"{\n while (true) {\n d3.select(\".line\").classed(\"active\", on);\n d3.select(\".left\").classed(\"active\", left);\n d3.select(\".right\").classed(\"active\", right);\n yield null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"md `## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"width = 151;","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"height = 151;","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"radius = 10;","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"roundTo = 50;","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"md `## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"geometric = require(\"geometric@2\");","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}