31:[] 2f:{"title":"geometric.pointOnLine, geometric.pointWithLine","cells":[{"id":0,"value":"md`# geometric.pointOnLine, geometric.pointWithLine\n\nBoth [geometric.pointOnLine](https://github.com/HarryStevens/geometric#pointOnLine)(point, line) and [geometric.pointWithLine](https://github.com/HarryStevens/geometric#pointWithLine)(point, line) test whether a point is colinear with a line. However, pointOnLine will return true only if the point is also located on the line segment.\n\nDrag the slider below to see how the position of the circle affects the output of these functions: the circle will be blue if both are true, while it will be red if only pointWithLine is true.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"withLine = geometric.pointWithLine(point, line);","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"onLine = geometric.pointOnLine(point, line);","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"viewof x = Inputs.range([0, width], {\n label: \"x\",\n step: .5\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"{\n const svg = d3.select(DOM.svg(width, height));\n \n svg.append(\"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 .style(\"stroke\", \"black\");\n \n svg.append(\"circle\")\n .attr(\"cx\", point[0])\n .attr(\"cy\", point[1])\n .attr(\"r\", 5)\n .attr(\"class\", onLine ? \"on\" : withLine ? \"with\" : \"\");\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"point = [x, center[1]];","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"line = {\n const a = [center[0] - 100, center[1]],\n b = [center[0] + 100, center[1]];\n return [a, b];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`## Style`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"center = [width / 2, height / 2];","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"height = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"geometric = require(\"geometric@2\");","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}