2e:null 2f:["$","title",null,{"children":"Varying elliptical pen stroke along a Bezier curve | Theo Honohan | Observable"}] 34:T41a,{ const canvas = context.canvas; context.clearRect(0, 0, width, height); context.lineJoin = "round"; for (var j = 0; j < result.elements.length; j += 2) { let element_start = result.elements[j]; let num_elements = result.elements[j+1]; // console.log("Elements at offset: ", num_elements, element_start); for (var i = 0; i < num_elements; i += 1){ if (i !== num_elements-1) { let vertex_offset = i*2 + element_start*2; drawLine(result.vertices[vertex_offset], result.vertices[vertex_offset+1], result.vertices[vertex_offset+2], result.vertices[vertex_offset+3]); } else { let first_offset = i*2 + element_start*2; let second_offset = element_start*2; drawLine(result.vertices[first_offset], result.vertices[first_offset+1], result.vertices[second_offset], result.vertices[second_offset+1]); } } } // drawPath(contour) // drawPath(b); return canvas; }35:T8a9,class Path { constructor(points) { this.points = points; this.current = 0; this.set_active(0); } in_range(bearing) { let range = this.active_range(); let start = range[0]; let end = range[1]; console.log("start, end, bearing: ", start, end, bearing); if ((start >= bearing && bearing >= end) || ((start <= end) && (bearing <= start)) || ((start <= end) && (bearing >= end))) return true; else return false; } active_range() { return [br(this.points[py_mod(this.current-1, this.points.length)], this.points[this.current]), br(this.points[this.current], this.points[py_mod(this.current+1, this.points.length)])]; } set_active(bearing) { while (!this.in_range(bearing)) { console.log("setting active range") this.forward() } console.log("active vertex set to:", this.current); return this.points[this.current]; } shift_active(bearing) { console.log("shift: target bearing is ", bearing, ", current active range is ", this.active_range()); if (this.in_range(bearing)) { console.log("in range"); return false; } let range = this.active_range(); let start = range[0]; let end = range[1]; if (clockwise(bearing, end)) { console.log("shifting forward"); this.forward(); } else if (!clockwise(bearing, start)) { console.log("shifting back"); this.back() } else console.log("bearing error"); return true; } slope() { return br(this.points[this.current], this.points[py_mod(this.current+1, this.points.length)]) } forward() { this.current = py_mod(this.current+1, this.points.length); } back() { this.current = py_mod(this.current-1, this.points.length); } get() { return this.points[this.current]; } at_end() { return this.current == this.points.length -1; } }36:[] 32:{"id":"6ef042c2f38e68b2","slug":"varying-elliptical-pen-stroke-along-a-bezier-curve","title":"Varying elliptical pen stroke along a Bezier curve","thumbnail":"3cc2d0f7d669912fc915bc687a0b54ccd943deaa3a9d5d0d5bb603eb5641f0a4","access_level":"public","create_time":"$D2021-07-10T18:44:16.667Z","update_time":"$D2021-07-13T19:20:26.654Z","view_time":null,"first_public_time":"$D2021-07-13T19:21:32.737Z","has_unpublished_edits":null,"fork":{"id":"8fd3f32d69a15501","slug":"minkowski-sum-of-polygons-an-elliptical-pen-on-a-bezier-curv","title":"Minkowski sum of polygons: an elliptical pen on a Bezier curve","owner":{"id":"5e87216687e9e987","login":"theohonohan","name":"Theo Honohan"}},"stars":1,"starred":false,"owner":{"type":"team","id":"5e87216687e9e987","login":"theohonohan","name":"Theo Honohan","avatar_url":"https://avatars-next.observableusercontent.com/540b56e88e996da74166cc9a7f19d675ab61466950968a722a034b91d9772da7","tier":"starter_2024"},"version":733,"publish_version":733,"role":null,"authored":false,"authors":[{"type":"individual","id":"d8b135b8c3311b20","login":"theohonohan","name":"Theo Honohan","avatar_url":"https://avatars-next.observableusercontent.com/540b56e88e996da74166cc9a7f19d675ab61466950968a722a034b91d9772da7","tier":null}],"members":[{"type":"individual","id":"d8b135b8c3311b20","login":"theohonohan","name":"Theo Honohan","avatar_url":"https://avatars-next.observableusercontent.com/540b56e88e996da74166cc9a7f19d675ab61466950968a722a034b91d9772da7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Varying elliptical pen stroke along a Bezier curve","cells":[{"id":0,"value":"# Varying elliptical pen stroke along a Bezier curve","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"

Stroking a Bezier path with an ellipse, with the ellipse parameters changing along the path. The code flattens the Bezier curve and takes a simple discrete approach, using d3.polygonHull() to calculate each segment of the outline (spanning two ellipses).

\nThis implementation depends on https://github.com/mattdesl/adaptive-bezier-curve and https://github.com/memononen/tess2.js.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"viewof angle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"function translate(pts, coords) {\n let result = [];\n pts.map((c) => {\n result.push([c[0]+coords[0],c[1]+coords[1]]);\n });\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"hulls = {\n let result = [];\n let b = bl.points;\n for(let i = 0; i < b.length-1; i++) {\n let pen1 = translate(ellipse(0.6, 1.5, angle*bl.param[i]/100, bl.param[i]), b[i]);\n let pen2 = translate(ellipse(0.6, 1.5, angle*bl.param[i+1]/100, bl.param[i+1]), b[i+1]);\n\n result.push(d3.polygonHull(pen1.concat(pen2)));\n }\n\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"pen","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"h = hulls.map(flatten);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"hulls;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"hulls.map(drawPath);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"drawPath(hulls[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"function br(p1, p2) {\n // console.log(\"BR: \", p1, p2, Math.atan2(p2[1]-p1[1],p2[0]-p1[0]));\n return Math.atan2(p2[1]-p1[1],p2[0]-p1[0]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function point_add(p1, p2) {\n return [p1[0] + p2[0], p1[1] + p2[1]];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"function clockwise(currentAngle, targetAngle) {\n if (targetAngle < 0)\n targetAngle += Math.PI*2;\n if (currentAngle < 0)\n currentAngle += Math.PI*2;\n if (targetAngle < currentAngle) \n targetAngle += Math.PI*2;\n\n if ((targetAngle - currentAngle) < Math.PI)\n return true;\n else \n return false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function py_mod(a, b) {\n return ((a%b)+b) % b;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"bl = new BL(b);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"class BL {\n constructor(points) {\n this.points = points;\n this.param = [];\n for(let i = 0; i < points.length; i++) {\n this.param.push((points.length-i)*0.5+20);\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"function convolve(shape, pen) {\n let conv = [];\n let final = false;\n let v = shape.get();\n let a = pen.set_active(shape.slope());\n\n for (let i=0; i < 9000; i++) {\n conv.push(point_add(v, a));\n\n if (pen.shift_active(shape.slope()))\n {\n console.log(\"Shifted pen\");\n a = pen.get();\n } else {\n if (final == true && shape.current == 0)\n break;\n shape.forward();\n console.log(\"moved to next shape vertex\");\n v = shape.get();\n if (shape.at_end())\n final = true;\n }\n }\n return conv;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"shape = new Path(c);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"pen = new Path(ellipse(0.6, 1.5, angle, 30));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"function radians(t) {\n return(Math.PI * (t/180));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"function extrude(c1, c2) {\n let result = []\n \n for (let i = 0; i < (c1.length - 1); i += 1) {\n // triangle with base taken from c1\n result.push([[c1[i][0],c1[i][1]],\n [c1[i+1][0],c1[i+1][1]],\n [c2[i][0],c2[i][1]]]);\n result.push([[c2[i][0],c2[i][1]],\n [c2[i+1][0],c2[i+1][1]],\n [c1[i+1][0],c1[i+1][1]]]);\n }\n\n /* for (let i = 1; i < c1.length-1; i += 2) {\n // triangle with base taken from c1\n result.push([[c1[i][0],c1[i][1]],\n [c2[i+1][0],c2[i+1][1]],\n [c2[i][0],c2[i][1]],\n [c1[i+1][0],c1[i+1][1]]]);\n }\n let end = c1.length - 1;\n result.push([[c1[end][0],c1[end][1]],\n [c2[0][0],c2[0][1]],\n [c2[end][0],c2[end][1]],\n [c1[0][0],c1[0][1]]]);\n\n */\n \n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"ex = extrusion.map(drawTri);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"e = [flatten(hull),flatten(hull2)];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"extrusion = extrude(e1, e2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"hull = d3.polygonHull(e1.concat(e2));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"hull2 = d3.polygonHull(e0.concat(e1));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"drawPath(hull)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"drawPath(hull2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"[hull,hull2].map(drawPath);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"//drawPath(e1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"//drawPath(e0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"e1 = ell(500,300,1.0,1.0,0,200)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"e2 = ell(575,300,1.0,1.0,0,150)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"e0 = ell(300,100,1.2,0.8,45,50)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"function ell(x0, y0, a, b, phi, size) {\n let result = [];\n let p = radians(phi);\n a *= size;\n b *= size;\n \n for (let theta = 0; theta <= 360; theta += 5) {\n let t = radians(theta);\n let x = x0 + a * Math.cos(t) * Math.cos(p) - b * Math.sin(t) * Math.sin(p);\n let y = y0 + a * Math.cos(t) * Math.sin(p) + b * Math.sin(t) * Math.cos(p);\n \n result.push([x,y]);\n }\n result.reverse();\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"function ellipse(a, b, phi, size) {\n let result = [];\n let p = radians(phi);\n a *= size;\n b *= size;\n \n for (let theta = 0; theta < 360; theta += 10) {\n let t = radians(theta);\n let x = a * Math.cos(t) * Math.cos(p) - b * Math.sin(t) * Math.sin(p);\n let y = a * Math.cos(t) * Math.sin(p) + b * Math.sin(t) * Math.cos(p);\n \n result.push([x,y]);\n }\n result.reverse();\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"function square(a, b, phi, size) {\n let result = [];\n let p = radians(phi);\n a *= size;\n b *= size;\n \n for (let theta = 0; theta <= 360; theta += 90) {\n let t = radians(theta);\n let x = a * Math.cos(t) * Math.cos(p) - a * Math.sin(t) * Math.sin(p);\n let y = a * Math.cos(t) * Math.sin(p) + a * Math.sin(t) * Math.cos(p);\n \n result.push([x,y]);\n }\n result.reverse();\n return result;\n}\n \n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"width = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"context = DOM.context2d(800, 600);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"contour = convolve(shape, pen);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"function drawLine(x1, y1, x2, y2)\n {\n\n\n // context.clearRect(0, 0, width, height); \n // console.log(\"Drawline: \", x1, y1, \" to \", x2, y2);\n \n context.beginPath();\n context.moveTo(x1, y1);\n context.lineTo(x2, y2);\n // context.clip();\n context.stroke();\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"function drawSegs(p) {\n for (let i = 0; i < p.length; i += 1) {\n console.log(\"drawSegs: \", p[i][0], \" to \", p[i][1]);\n context.beginPath();\n context.moveTo(p[i][0][0], p[i][0][1]);\n context.lineTo(p[i][1][0], p[i][1][1]);\n context.stroke();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"function drawTri(p) {\n context.beginPath();\n context.moveTo(p[0][0], p[0][1]);\n for (let i = 1; i < p.length; i++) {\n // console.log(\"drawPath: \", x1, y1, \" to \", x2, y2);\n context.lineTo(p[i][0], p[i][1]);\n // context.clip();\n }\n context.closePath();\n context.stroke();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"function drawPath(p) {\n context.beginPath();\n context.moveTo(p[0][0], p[0][1]);\n for (let i = 1; i < p.length; i++) {\n // console.log(\"drawPath: \", x1, y1, \" to \", x2, y2);\n context.lineTo(p[i][0], p[i][1]);\n // context.clip();\n }\n context.closePath();\n context.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"bezier = require('https://bundle.run/adaptive-bezier-curve@1.0.3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"b = bezier([200,200],[900,500],[-400,500],[600,250]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"c = roundtrip(b);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"function roundtrip(polyline) {\n let new_array = [...polyline];\n let fwd_array = [...new_array];\n new_array.reverse();\n let ret_array = fwd_array.concat(new_array.slice(1,-1));\n return ret_array;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"Tess2 = require('https://bundle.run/tess2@1.0.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"flatten(contour)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"function flatten(a) {\n let result = [];\n for(let i = 0; i < a.length; i++) {\n result.push(a[i][0], a[i][1]);\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"result = { \n let contours = h;\n\n // Tesselate\n let res = Tess2.tesselate({\n\t contours: contours,\n\t windingRule: Tess2.WINDING_NONZERO,\n\t elementType: Tess2.BOUNDARY_CONTOURS,\n\t polySize: 3,\n\t vertexSize: 2\n });\n\n return res;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"