3f:null 40:["$","title",null,{"children":"PolyLine Noodling | Brian Boucheron | Observable"}] 46:T8f6,# PolyLine Noodling I'm fiddling around with a little canvas-based drawing surface (I guess I could try SVG, if I can make it perform well enough). The intended output for these drawings is the very low-fidelity [Line-us plotter](https://www.line-us.com), so fancy beautiful bezier curves are not necessary, but a simple raster-based drawing app also wont cut it. We'll use polylines! > **Note:** This is a work in progress and will probably be quite sloppy. ## Current Goals - pencil tool to draw polylines from mouse input - simplify polylines on mouseup - eraser tool to erase lines at 60fps by subtracting mousemove shape from intersected lines - import SVG - export SVG - use a quadtree to make erasing more efficient when there's lots of complex polylines to test - work on a "layer" object that can be translated, scaled, and rotated, with drag thumbs ## Work Timeline - figured out a circle line intersection. used chatgpt to get started with the algorithm, but didn't realize i really want to intersect a _line segment_ with a circle, not an infinite line. - figured out how to display and update a canvas in observable, to demo and debug - worked on line/line intersections, then line/polyline - decided i didn't need to do perfect circle intersections, and created a function to make circle approximates from line segments. needed an addPoints and rotatePoint function for this bit - used the new points math functions to create a function that makes the "eraser shape" needed for when the cursor is moving in erase mode, a rectangle capped with a semicircle. this is the shape that will be subtracted from all intersecting lines when erasing - used the line/line intersection to create polygon/polyline intersection - adapted the above to find all points of intersection between the erase shape and a polyline and then delete anything inside the shape and return new polylines - needed a "is the point inside the polygon" test for this, which i found some raycasting version of on the interwebs - tried some routines for hit testing lines efficiently, where the cursor can have a bigger radius for easier selecting of 1px lines - don't actually need this functionality. it's pretty slow with many long polylines, so i'd probably need a quadtree or some such anyways - 47:T525,{ const ratio = 0.333; const height = width * ratio; const ctx = DOM.context2d(width, height, 1); const canvas = ctx.canvas; let ccircle = [-100, -100, 50]; const lines = Array(20) .fill() .map(() => { return Array(2) .fill() .map(() => { return { x: getRandomInt(10, width - 10), y: getRandomInt(10, height - 10) }; }); }); canvas.ontouchmove = canvas.onmousemove = (event) => { event.preventDefault(); // otherwise it scrolls on mobile ccircle = [event.layerX, event.layerY, 50]; pupdate(); // ctx.canvas.dispatchEvent(new CustomEvent("input")); }; const pupdate = () => { ctx.fillStyle = "#f6f6f6"; ctx.fillRect(0, 0, width, height); let intersectPoints = []; for (const line of lines) { drawLine(line, "gray", ctx); const r = intersectLineCircle(line, ccircle); if (r) intersectPoints.push(...r); } ctx.beginPath(); ctx.arc(...ccircle, 0, Math.PI * 2, true); ctx.stroke(); for (const point of intersectPoints) { ctx.beginPath(); ctx.fillStyle = "red"; ctx.arc(point[0], point[1], 8 / 2, 0, 2 * Math.PI); ctx.fill(); } }; pupdate(); // Return the canvas so it's visible on screen return canvas; }48:T4fa,{ const ratio = 0.333; const height = width * ratio; const ctx = DOM.context2d(width, height, 1); const canvas = ctx.canvas; let ccircle = [-100, -100, 10]; const lines = Array(10) .fill() .map(() => { return Array(5) .fill() .map(() => { return { x: getRandomInt(10, width - 10), y: getRandomInt(10, height - 10) }; }); }); canvas.ontouchmove = canvas.onmousemove = (event) => { event.preventDefault(); // otherwise it scrolls on mobile ccircle = [event.layerX, event.layerY, 10]; pupdate(); //ctx.canvas.dispatchEvent(new CustomEvent("input")); }; const pupdate = () => { ctx.fillStyle = "#f6f6f6"; ctx.fillRect(0, 0, width, height); for (const line of lines) { // if (hitPolylineCircle(line, ccircle)) { if ( polylineCircleIntersection( line, { x: ccircle[0], y: ccircle[1] }, ccircle[2] ) ) { drawLine(line, "red", ctx); } else { drawLine(line, "gray", ctx); } } ctx.beginPath(); ctx.arc(...ccircle, 0, Math.PI * 2, true); ctx.stroke(); }; pupdate(); // Return the canvas so it's visible on screen return canvas; }49:T698,function distanceToLineSegment(p1, p2, p, r) { // Calculate the projection of the point onto the line const t = ((p.x - p1.x) * (p2.x - p1.x) + (p.y - p1.y) * (p2.y - p1.y)) / ((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2); // Clamp the projection to the bounds of the line segment const tClamped = Math.max(0, Math.min(1, t)); // Calculate the coordinates of the closest point const x = p1.x + tClamped * (p2.x - p1.x); const y = p1.y + tClamped * (p2.y - p1.y); // Calculate the distance between the point and the closest point const dist = Math.sqrt((p.x - x) ** 2 + (p.y - y) ** 2); return dist < r; } // ChatGPT prompt (after some other prompts about javascript functions): what is the fastest way to determine how close a point is to a line segment? // A: a decent function but it only tested distance to infinite lines, not segments // Q: i think that function shows the distance to an infinite line, not a line segment. rewrite it to take into account the start and end points of the line segment. // function distanceToLineSegment(p1, p2, p) { // // Calculate the projection of the point onto the line // const t = ((p.x - p1.x) * (p2.x - p1.x) + (p.y - p1.y) * (p2.y - p1.y)) / ((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2); // // Clamp the projection to the bounds of the line segment // const tClamped = Math.max(0, Math.min(1, t)); // // Calculate the coordinates of the closest point // const x = p1.x + tClamped * (p2.x - p1.x); // const y = p1.y + tClamped * (p2.y - p1.y); // // Calculate the distance between the point and the closest point // const dist = Math.sqrt((p.x - x) ** 2 + (p.y - y) ** 2); // return dist; // }4a:T5a2,function lineCircleIntersection(p1, p2, c, r) { // Calculate the distance between the line and the center of the circle const length = Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2); // Calculate the distance from the point to the line using the line equation const dist = Math.abs((c.x - p1.x) * (p2.y - p1.y) - (c.y - p1.y) * (p2.x - p1.x)) / length; // If the distance is less than the radius, the line and circle intersect return dist < r; } // ChatGPT prompt: write a javascript function that takes two arguments: a line segment of two points, and a circle. the function should return true if the line and circle intersect or false if they don't. it should be as fast as possible. // function lineCircleIntersection(p1, p2, c, r) { // // Calculate the distance between the line and the center of the circle // const dist = distanceToLine(c, p1, p2); // // If the distance is less than the radius, the line and circle intersect // return dist < r; // } // // This helper function calculates the distance from a point to a line segment // function distanceToLine(p, p1, p2) { // // Calculate the length of the line segment // const length = Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2); // // Calculate the distance from the point to the line using the line equation // const dist = Math.abs((p.x - p1.x) * (p2.y - p1.y) - (p.y - p1.y) * (p2.x - p1.x)) / length; // return dist; // }4b:T50f,function intersectLineCircle([p1, p2], [cx, cy, cr]) { // find all intersections between a simple line and a circle const a = (p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y); const b = 2 * ((p2.x - p1.x) * (p1.x - cx) + (p2.y - p1.y) * (p1.y - cy)); const c = cx * cx + cy * cy + p1.x * p1.x + p1.y * p1.y - 2 * (cx * p1.x + cy * p1.y) - cr * cr; const discriminant = b * b - 4 * a * c; if (discriminant < 0) { // no intersection return []; } else if (discriminant === 0) { // tangent only const u1 = -b / (2 * a); return [pointsLerp(p1, p2, u1)]; } else { // if the line were infinite, it'd definitely intersect const e = Math.sqrt(discriminant); const u1 = (-b + e) / (2 * a); const u2 = (-b - e) / (2 * a); let results = []; if ((u1 < 0 || u1 > 1) && (u2 < 0 || u2 > 1)) { if ((u1 < 0 && u2 < 0) || (u1 > 1 && u2 > 1)) { // entirely outside of the circle } else { // entirely inside the circle } } else { if (0 <= u1 && u1 <= 1) { // it enters results.push(pointsLerp(p1, p2, u1)); } if (0 <= u2 && u2 <= 1) { // it exits results.push(pointsLerp(p1, p2, u2)); } return results; } } }4c:T46c,viewof herps2 = { const ratio = 0.333; const height = width * ratio; const ctx = DOM.context2d(width, height, 1); const canvas = ctx.canvas; ctx.strokeStyle = "gray"; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.lineWidth = 1; const polyline = [ { x: 10, y: 300 }, { x: 200, y: 10 }, { x: 300, y: 250 }, { x: 400, y: 50 }, { x: 500, y: 250 }, { x: 600, y: 250 } ]; const line1 = [ { x: 800, y: 200 }, { x: 10, y: 200 } ]; const pupdate = () => { ctx.clearRect(0, 0, width, height); drawLine(line1, "gray", ctx); drawLine(polyline, "gray", ctx); const intersects = intersectLinePolyline(line1, polyline); for (const intersect of intersects) { ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc(intersect.x, intersect.y, 4, 0, 2 * Math.PI); ctx.fill(); } // if (intersect) { // ctx.fillStyle = "red"; // ctx.beginPath(); // ctx.arc(intersect.x, intersect.y, 4, 0, 2 * Math.PI); // ctx.fill(); // } }; pupdate(); // Return the canvas so it's visible on screen return ctx.canvas; }4d:T4d8,viewof herps1 = { const ratio = 0.333; const height = width * ratio; const ctx = DOM.context2d(width, height, 1); const canvas = ctx.canvas; ctx.strokeStyle = "gray"; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.lineWidth = 1; const polyline = [ { x: 10, y: 300 }, { x: 200, y: 10 }, { x: 300, y: 250 }, { x: 400, y: 50 }, { x: 500, y: 250 }, { x: 600, y: 250 } ]; const polyline2 = [ { x: 400, y: 10 }, { x: 200, y: 300 }, { x: 10, y: 100 }, { x: 100, y: 10 }, { x: 10, y: 50 }, { x: 400, y: 250 } ]; const pupdate = () => { ctx.clearRect(0, 0, width, height); drawLine(polyline, "gray", ctx); drawLine(polyline2, "gray", ctx); const intersects = intersectPolylinePolyline(polyline, polyline2); for (const intersect of intersects) { ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc(intersect.x, intersect.y, 4, 0, 2 * Math.PI); ctx.fill(); } // if (intersect) { // ctx.fillStyle = "red"; // ctx.beginPath(); // ctx.arc(intersect.x, intersect.y, 4, 0, 2 * Math.PI); // ctx.fill(); // } }; pupdate(); // Return the canvas so it's visible on screen return ctx.canvas; }4e:T650,/** * (adapted from https://www.algorithms-and-technologies.com/point_in_polygon/javascript) * Performs the even-odd-rule Algorithm (a raycasting algorithm) to find out whether a point is in a given polygon. * This runs in O(n) where n is the number of edges of the polygon. * * @param {Array} polygon an array representation of the polygon where polygon[i][0] is the x Value of the i-th point and polygon[i][1] is the y Value. * @param {Array} point an array representation of the point where point[0] is its x Value and point[1] is its y Value * @return {boolean} whether the point is in the polygon (not on the edge, just turn < into <= and > into >= for that) */ function pointInPolygon(polygon, point) { //A point is in a polygon if a line from the point to infinity crosses the polygon an odd number of times let odd = false; //For each edge (In this case for each point of the polygon and the previous one) for (let i = 0, j = polygon.length - 1; i < polygon.length; i++) { //If a line from the point into infinity crosses this edge if ( polygon[i].y > point.y !== polygon[j].y > point.y && // One point needs to be above, one below our y coordinate // ...and the edge doesn't cross our Y corrdinate before our x coordinate (but between our x coordinate and infinity) point.x < ((polygon[j].x - polygon[i].x) * (point.y - polygon[i].y)) / (polygon[j].y - polygon[i].y) + polygon[i].x ) { // Invert odd odd = !odd; } j = i; } //If the number of crossings was odd, the point is in the polygon '' return odd; }4f:T788,viewof demoErase = { const ratio = 0.333; const height = width * ratio; const ctx = DOM.context2d(width, height, 1); const canvas = ctx.canvas; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.lineWidth = 1; const line1 = [ { x: 100, y: 200 }, { x: 800, y: 100 } ]; const eraser = eraseShape(line1); let polyline = [ { x: 200, y: 300 }, { x: 200, y: 10 }, { x: 300, y: 150 }, { x: 400, y: 50 }, { x: 500, y: 250 }, { x: 600, y: 250 }, { x: 900, y: 50 } ]; // let point = { x: 0, y: 0 }; let drawing = false; canvas.ontouchstart = canvas.onmousedown = (event) => { event.preventDefault(); // otherwise it scrolls on mobile polyline = [{ x: event.layerX, y: event.layerY }]; drawing = true; pupdate(); ctx.canvas.dispatchEvent(new CustomEvent("input")); }; canvas.ontouchmove = canvas.onmousemove = (event) => { event.preventDefault(); // otherwise it scrolls on mobile if (drawing) polyline.push({ x: event.layerX, y: event.layerY }); pupdate(); ctx.canvas.dispatchEvent(new CustomEvent("input")); }; canvas.ontouchstop = canvas.onmouseup = (event) => { event.preventDefault(); // otherwise it scrolls on mobile polyline.push({ x: event.layerX, y: event.layerY }); drawing = false; pupdate(); ctx.canvas.dispatchEvent(new CustomEvent("input")); }; const pupdate = () => { ctx.clearRect(0, 0, width, height); // if (pointInPolygon(eraser, point)) { // ctx.fillStyle = "lightgreen"; // ctx.fillRect(0, 0, width, height); // } drawLine(line1, "black", ctx); drawLine(eraser, "gray", ctx); drawLine(polyline, "red", ctx); const cutted = subtractPolygonFromPolyLine(eraser, polyline); for (const zoot of cutted) { drawLine(zoot, "gray", ctx); } }; pupdate(); // Return the canvas so it's visible on screen return ctx.canvas; }50:T9b8,function subtractPolygonFromPolyLine(polygon, polyline) { // TODO: there's a bug somewhere in here, that seems to only happen on the right angles // of the eraser shape. it seems possible to pass through the polygon wall withough // registering an intersection. let lines = []; // start currentLine with first point let currentLine = [polyline[0]]; // for each polyline segment for (let i = 1; i < polyline.length; i++) { // test for intersection with polygon (can be 0, 1, or 2 results) const intersections = intersectLinePolyline( [polyline[i - 1], polyline[i]], polygon ); switch (intersections.length) { case 0: // push point to currentLine currentLine.push(polyline[i]); break; case 1: // finish the current line with the intersection point lines.push([...currentLine, intersections[0]]); // start the next line currentLine = [intersections[0], polyline[i]]; break; case 2: // orient the two points so the first is closest to the start of the line segment const sortedIntersections = sortPointsByDistance( polyline[i - 1], intersections[0], intersections[1] ); // push first point to the output line lines.push([...currentLine, sortedIntersections[0]]); // create a new output line with p1, p2 lines.push([sortedIntersections[0], sortedIntersections[1]]); // start a new output line with p2 currentLine = [sortedIntersections[1], polyline[i]]; break; default: // this should never happen, but... maybe it's part of the bug? if the intersection is // right on one of the points, it could register for both line segments that contain that point? console.log(`yikes: ${intersections.length}`); } } // stick the last point onto the end of the last line and push it to the results array currentLine.push = polyline[polyline.length - 1]; lines.push(currentLine); // throw out evens or odds, depending on if the first point was in or out of the polygon if (pointInPolygon(polygon, polyline[0])) { // if we started inside, throw out odds return lines.filter((n, i) => i % 2); } else { // else throw out evens return lines.filter((n, i) => !(i % 2)); } // throw out odds or evens depending on first point location // update passed in polyline with results[0] // return the rest }51:Tadc,{ const p1 = { x: 10, y: 10 }; const p2 = { x: 100, y: 100 }; const ang = getLineAngle([p1, p2]); const segments = 5; const r = 50; const stepAngle = 360 / segments / 2; const startAngle = ang + 180; console.time("indexed"); for (let i = 0; i < 10000; i++) { const firstPoint = addPoints(p1, rotatePoint({ x: 0, y: r }, ang)); let results = []; results[0] = firstPoint; results[1] = addPoints(p1, rotatePoint({ x: 0, y: r }, startAngle)); for (let i = 0; i <= segments; i++) { results[i + 2] = addPoints( p2, rotatePoint({ x: 0, y: r }, stepAngle * i + startAngle) ); } results[segments + 2] = firstPoint; } console.timeEnd("indexed"); console.time("pushed"); for (let i = 0; i < 10000; i++) { const firstPoint = addPoints(p1, rotatePoint({ x: 0, y: r }, ang)); let results = []; results.push(firstPoint); results.push(addPoints(p1, rotatePoint({ x: 0, y: r }, startAngle))); for (let i = 0; i <= segments; i++) { results.push( addPoints(p2, rotatePoint({ x: 0, y: r }, stepAngle * i + startAngle)) ); } results.push(firstPoint); } console.timeEnd("pushed"); console.time("unrolled"); for (let i = 0; i < 10000; i++) { const firstPoint = addPoints(p1, rotatePoint({ x: 0, y: r }, ang)); const gggg = [ firstPoint, addPoints(p1, rotatePoint({ x: 0, y: r }, startAngle)), addPoints(p2, rotatePoint({ x: 0, y: r }, stepAngle * 0 + startAngle)), addPoints(p2, rotatePoint({ x: 0, y: r }, stepAngle * 1 + startAngle)), addPoints(p2, rotatePoint({ x: 0, y: r }, stepAngle * 2 + startAngle)), addPoints(p2, rotatePoint({ x: 0, y: r }, stepAngle * 3 + startAngle)), addPoints(p2, rotatePoint({ x: 0, y: r }, stepAngle * 4 + startAngle)), addPoints(p2, rotatePoint({ x: 0, y: r }, stepAngle * 5 + startAngle)), firstPoint ]; } console.timeEnd("unrolled"); console.time("mapped"); for (let i = 0; i < 10000; i++) { const firstPoint = addPoints(p1, rotatePoint({ x: 0, y: r }, ang)); [ firstPoint, addPoints(p1, rotatePoint({ x: 0, y: r }, startAngle)), ...Array(segments + 1) .fill() .map((x, i) => { return addPoints( p2, rotatePoint({ x: 0, y: r }, stepAngle * i + startAngle) ); }), firstPoint ]; } console.timeEnd("mapped"); // return [ // firstPoint, // addPoints(p1, rotatePoint({ x: 0, y: r }, ang + 180)), // ...Array(segments + 1) // .fill() // .map((x, i) => { // return addPoints( // p2, // rotatePoint({ x: 0, y: r }, stepAngle * i + ang + 180) // ); // }), // firstPoint // ]; }52:[] 44:{"id":"201750110316d03c","slug":"polyline-noodling","title":"PolyLine Noodling","thumbnail":"c282572ef54ba1cc2b0acf1ecab26205d3ad43922b4ae735be9384fd3414a06c","access_level":"public","create_time":"$D2022-12-12T20:29:22.358Z","update_time":"$D2023-03-14T02:25:27.521Z","view_time":null,"first_public_time":"$D2022-12-12T20:29:22.358Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"24bdc4b70b7b529f","login":"beardicus","name":"Brian Boucheron","avatar_url":"https://avatars-next.observableusercontent.com/0a07f5175fb49155744162c8abe7b0d06b78dd862d4be46f87f276daea6f1ee3","tier":"starter_2024","bio":"I like cheese.","following":false},"version":1071,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"43b9095f7c6fca28","login":"beardicus","name":"Brian Boucheron","avatar_url":"https://avatars-next.observableusercontent.com/0a07f5175fb49155744162c8abe7b0d06b78dd862d4be46f87f276daea6f1ee3","tier":null,"bio":"I like cheese.","following":false}],"members":[{"type":"individual","id":"43b9095f7c6fca28","login":"beardicus","name":"Brian Boucheron","avatar_url":"https://avatars-next.observableusercontent.com/0a07f5175fb49155744162c8abe7b0d06b78dd862d4be46f87f276daea6f1ee3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"PolyLine Noodling","cells":[{"id":0,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1053,"value":"viewof tool = Inputs.select([\"draw\", \"erase\"], { label: \"Select one\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"viewof form = Inputs.form({\n option1: Inputs.checkbox([\"A\", \"B\"], {label: \"Select some\"}),\n option2: Inputs.range([0, 100], {label: \"Amount\", step: 1}),\n option3: Inputs.radio([\"A\", \"B\"], {label: \"Select one\"}),\n option4: Inputs.select([\"A\", \"B\"], {label: \"Select one\"})\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"form","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1034,"value":"function polylineCircleIntersection(polyline, circle, r) {\n for (let i = 1; i < polyline.length; i++) {\n if (distanceToLineSegment(polyline[i - 1], polyline[i], circle, r))\n return true;\n }\n return false;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"function getRandomInt(min, max) {\n return Math.floor(min + Math.random() * (max - min))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"function drawLine(line, color, ctx) {\n // draws a polyline, with differentiated nubbins for first point, midpoints, and last point\n ctx.strokeStyle = color;\n ctx.lineCap = \"round\";\n ctx.lineJoin = \"round\";\n ctx.lineWidth = 1;\n\n ctx.beginPath();\n for (let i = 0; i < line.length; i++) {\n ctx.lineTo(line[i].x, line[i].y); // the first lineTo() acts like a moveTo()\n }\n ctx.stroke();\n\n // draw some debug turds\n const blobSize = 3;\n\n // first point\n ctx.fillStyle = \"green\";\n ctx.beginPath();\n ctx.arc(line[0].x, line[0].y, blobSize / 2, 0, 2 * Math.PI);\n ctx.fill();\n\n // middle points\n ctx.fillStyle = color;\n for (let i = 1; i < line.length - 1; i++) {\n ctx.beginPath();\n ctx.arc(line[i].x, line[i].y, blobSize / 2, 0, 2 * Math.PI);\n ctx.fill();\n }\n\n // last point\n ctx.beginPath();\n ctx.fillStyle = \"red\";\n ctx.rect(\n line[line.length - 1].x - 2,\n line[line.length - 1].y - 2,\n blobSize,\n blobSize\n );\n ctx.fill();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"function intersectLinePolyline(line, polyline) {\n let results = [];\n for (let i = 1; i < polyline.length; i++) {\n const intersect = intersectLineLine(line, [polyline[i - 1], polyline[i]]);\n if (intersect) results.push(intersect);\n }\n return results;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"function intersectPolylinePolyline(a, b) {\n let results = [];\n for (let i = 1; i < a.length; i++) {\n for (let j = 1; j < b.length; j++) {\n const intersect = intersectLineLine([a[i - 1], a[i]], [b[j - 1], b[j]]);\n if (intersect) results.push(intersect);\n }\n }\n return results;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"function hitLineCircle([p1, p2], [cx, cy, cr]) {\n // find all intersections between a simple line and a circle\n const a = (p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y);\n const b = 2 * ((p2.x - p1.x) * (p1.x - cx) + (p2.y - p1.y) * (p1.y - cy));\n const c =\n cx * cx +\n cy * cy +\n p1.x * p1.x +\n p1.y * p1.y -\n 2 * (cx * p1.x + cy * p1.y) -\n cr * cr;\n const discriminant = b * b - 4 * a * c;\n\n if (discriminant > 0) {\n // if the line were infinite, there'd be an intersection, but we must go on\n const e = Math.sqrt(discriminant);\n const u1 = (-b + e) / (2 * a);\n const u2 = (-b - e) / (2 * a);\n\n if ((u1 > 0 && u1 < 1) || (u2 > 0 && u2 < 1)) {\n return true;\n }\n }\n return false;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":986,"value":"function hitPolylineCircle(polyline, circle) {\n for (let i = 1; i < polyline.length; i++) {\n if (hitLineCircle([polyline[i - 1], polyline[i]], circle)) return true;\n }\n return false;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"function intersectLineLine([a1, a2], [b1, b2]) {\n // https://github.com/thelonious/kld-intersections/blob/development/lib/Intersection.js\n const ua_t = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x);\n const ub_t = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x);\n const u_b = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y);\n\n if (u_b !== 0) {\n const ua = ua_t / u_b;\n const ub = ub_t / u_b;\n\n if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) {\n return { x: a1.x + ua * (a2.x - a1.x), y: a1.y + ua * (a2.y - a1.y) };\n }\n } else {\n return null; // prob should handle the coincident line case here, return an intersection point in the middle of the line segment\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"function pointsLerp(p1, p2, t) {\n // interpolate between two 2d points\n return [p1.x * (1.0 - t) + p2.x * t, p1.y * (1.0 - t) + p2.y * t];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"function lineArc(p, r, segments, angle, ctx) {\n // make a circle out of line segments\n\n ctx.beginPath();\n for (let i = 0; i <= segments; i++) {\n const newPoint = addPoints(\n p,\n rotatePoint({ x: 0, y: r }, (360 / segments / 2) * i + angle)\n );\n ctx.lineTo(newPoint.x, newPoint.y);\n // mark the first point\n if (i === 0) {\n ctx.fillStyle = \"green\";\n ctx.beginPath();\n ctx.arc(newPoint.x, newPoint.y, 2, 0, 2 * Math.PI);\n ctx.fill();\n }\n }\n ctx.stroke();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"function eraseShape([p1, p2]) {\n // takes a line (two points) and creates the shape needed to subtract from polylines\n const segments = 5;\n const r = 50;\n\n const lineAngle = getLineAngleRads([p1, p2]);\n const startAngle = lineAngle - Math.PI;\n const stepAngle = Math.PI / segments;\n\n const firstPoint = addPoints(p1, rotatePointRad({ x: 0, y: r }, lineAngle));\n\n let results = [];\n results[0] = firstPoint;\n results[1] = addPoints(p1, rotatePointRad({ x: 0, y: r }, startAngle));\n for (let i = 0; i <= segments; i++) {\n results[i + 2] = addPoints(\n p2,\n rotatePointRad({ x: 0, y: r }, startAngle + stepAngle * i)\n );\n }\n results[segments + 3] = firstPoint;\n\n return results;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"viewof herps = {\n const ratio = 0.333;\n const height = width * ratio;\n const ctx = DOM.context2d(width, height, 1);\n const canvas = ctx.canvas;\n\n ctx.strokeStyle = \"gray\";\n ctx.lineCap = \"round\";\n ctx.lineJoin = \"round\";\n ctx.lineWidth = 1;\n\n const line1 = [\n { x: 100, y: 200 },\n { x: 800, y: 100 }\n ];\n\n const eraser = eraseShape(line1);\n\n let point = { x: 0, y: 0 };\n canvas.ontouchmove = canvas.onmousemove = (event) => {\n event.preventDefault(); // otherwise it scrolls on mobile\n point = { x: event.layerX, y: event.layerY };\n\n pupdate();\n // ctx.canvas.dispatchEvent(new CustomEvent(\"input\"));\n };\n\n const pupdate = () => {\n ctx.clearRect(0, 0, width, height);\n if (pointInPolygon(eraser, point)) {\n ctx.fillStyle = \"lightgreen\";\n ctx.fillRect(0, 0, width, height);\n }\n drawLine(line1, \"gray\", ctx);\n drawLine(eraser, \"red\", ctx);\n };\n pupdate();\n\n // Return the canvas so it's visible on screen\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"$50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"function sortPointsByDistance(p1, p2, p3) {\n \n // Calculate the square of the distance from p1 to p2 and p3\n const d2 = (p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y);\n const d3 = (p1.x - p3.x) * (p1.x - p3.x) + (p1.y - p3.y) * (p1.y - p3.y);\n\n // Sort the points based on their distance from p1\n if (d2 < d3) {\n return [p2, p3];\n } else {\n return [p3, p2];\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"function addPoints(p1, p2) {\n return { x: p1.x + p2.x, y: p1.y + p2.y };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"function rotatePoint(p, angle) {\n // rotates a point around the origin\n // TODO: add an offset to rotate around arbitrary points\n\n // convert the angle from degrees to radians\n const radians = (angle * Math.PI) / 180;\n\n // do the cos sin thing just once\n const cos = Math.cos(radians);\n const sin = Math.sin(radians);\n\n return { x: p.x * cos - p.y * sin, y: p.x * sin + p.y * cos };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"function rotatePointRad(p, radians) {\n // rotates a point around the origin\n // TODO: add an offset to rotate around arbitrary points\n\n // do the cos sin thing just once\n const cos = Math.cos(radians);\n const sin = Math.sin(radians);\n\n return { x: p.x * cos - p.y * sin, y: p.x * sin + p.y * cos };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"function getLineAngle([p1, p2]) {\n // adapted from chatGPT's answer to the query \"write a javascript function that accepts a line\n // as two points with x and y coordinates, and returns the angle of the line\"\n\n // calculate the difference between the x coordinates and the y coordinates of the two points\n var xDiff = p2.x - p1.x;\n var yDiff = p2.y - p1.y;\n\n // use the atan2 function to find the angle of the line\n var angle = Math.atan2(yDiff, xDiff);\n\n // convert the angle from radians to degrees and return it\n return (angle * 180) / Math.PI;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"function getLineAngleRads([p1, p2]) {\n // adapted from chatGPT's answer to the query \"write a javascript function that accepts a line\n // as two points with x and y coordinates, and returns the angle of the line\"\n\n // calculate the difference between the x coordinates and the y coordinates of the two points\n var xDiff = p2.x - p1.x;\n var yDiff = p2.y - p1.y;\n\n // use the atan2 function to find the angle of the line\n return Math.atan2(yDiff, xDiff);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W52","stdlib":"1"}} 45:"$44:body"