30:T10b9,{ const context = DOM.context2d(width, height, 1); function drawCatenary(points) { context.beginPath(); context.moveTo(...points[0]); for (let i = 1; i < points.length; i++) { context.lineTo(...points[i]); } context.stroke(); } function render() { const [x1, y1] = mutable p1; const [x2, y2] = mutable p2; const parameters = compute_parameters(x1, y1, x2, y2); const catenary = getCatenary(parameters); context.clearRect(0, 0, width, height); // draw axes context.strokeStyle = "rgb(200, 200, 200)"; context.beginPath(); context.moveTo(scale_x(-1), scale_y(0)); context.lineTo(scale_x(1), scale_y(0)); context.stroke(); context.beginPath(); context.moveTo(scale_x(0), scale_y(1)); context.lineTo(scale_x(0), scale_y(-1)); context.stroke(); if (catenary) { const {a, x0, y0} = parameters; // draw coordinate offset context.setLineDash([6, 4]); context.beginPath(); context.moveTo(scale_x(-1), scale_y(y0 + a)); context.lineTo(scale_x(1), scale_y(y0 + a)); context.stroke(); context.beginPath(); context.moveTo(scale_x(x0), scale_y(1)); context.lineTo(scale_x(x0), scale_y(-1)); context.stroke(); // draw circle context.beginPath(); context.arc(scale_x(x0), scale_y(y0 + 2 * a), a * height / 2, 0, 2 * Math.PI); context.stroke(); context.setLineDash([]); context.beginPath(); context.moveTo(scale_x(x0), scale_y(y0 + a)); context.lineTo(scale_x(x0), scale_y(y0 + 2 * a)); context.stroke(); } if (!catenary) { // draw overflow context.strokeStyle = "rgb(200, 0, 0)"; context.beginPath(); context.moveTo(scale_x(x1), scale_y(y1)); context.lineTo(scale_x(x2), scale_y(y2)); context.stroke(); } else { // draw catenary const num = 50; const points = new Array(num); for (let i = 0, step = (x2 - x1) / num; i <= num; i++) { let x = x1 + i * step; let y = catenary(x); points[i] = [scale_x(x), scale_y(y)]; } context.strokeStyle = "rgb(0, 0, 0)"; drawCatenary(points); // draw pearls if (pearls > 0) { const {a, x0} = parameters; const l1 = a * Math.sinh((x1 - x0) / a); context.fillStyle = "rgb(255, 255, 255)" for (let n = pearls + 1, step = length / n, s = l1 + step; n > 0; s += step, n--) { let x = a * Math.asinh(s / a) + x0; let y = catenary(x); context.beginPath(); context.arc(scale_x(x), scale_y(y), 4, 0, 2 * Math.PI); context.fill(); context.stroke(); } } } // draw anchors context.fillStyle = "rgb(0, 0, 0)"; context.beginPath(); context.arc(scale_x(x1), scale_y(y1), 4, 0, 2 * Math.PI); context.fill(); context.beginPath(); context.arc(scale_x(x2), scale_y(y2), 4, 0, 2 * Math.PI); context.fill(); } // event handling const grab_distance = 0.1; let mousedown = false; context.canvas.onmousedown = event => { mousedown = true; context.canvas.onmousemove(event); }; context.canvas.onmousemove = event => { if (!mousedown) return; const rect = event.target.getBoundingClientRect(); const click = [ (event.clientX - rect.left) / width * 2 - 1, -((event.clientY - rect.top) / height * 2 - 1), ]; const distance_p1 = distance(mutable p1, click); const distance_p2 = distance(mutable p2, click); let update = false; if (distance_p1 < grab_distance) { mutable p1 = click; context.canvas.style.cursor = "move"; update = true; } else if (distance_p2 < grab_distance) { mutable p2 = click; context.canvas.style.cursor = "move"; update = true; } if (mutable p2[0] < mutable p1[0]) { let tmp = mutable p1; mutable p1 = mutable p2; mutable p2 = tmp; } update && render(); }; context.canvas.onmouseup = event => { context.canvas.style.cursor = "default"; mousedown = false; }; // init render(); return context.canvas; }31:[] 2e:{"title":"Catenary simulation","cells":[{"id":0,"value":"md`# Catenary simulation\n\nIn physics and geometry, a [catenary](https://en.wikipedia.org/wiki/Catenary) is the curve that an idealized hanging chain or cable assumes under its own weight when supported only at its ends. \n\nMathematically, the catenary curve is the graph of the hyperbolic cosine function. The equation of a catenary in Cartesian coordinates has the form: \n\n${tex.block`y = a \\cosh \\bigg(\\dfrac{x - x_0}{a}\\bigg) + y_0`}\n\nWhen only the length ${tex`L`} of the catenary and the two anchor points (${tex`x_1, y_1`}) and (${tex`x_2, y_2`}) are given, the values for ${tex`a`}, ${tex`x_0`} and ${tex`y_0`} have to be found numerically.\n\nTo determine the parameters the implementation follows: \nhttps://www.mathematik.ch/anwendungenmath/kettenlinie/kettenlinie.php.\n\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"viewof length = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":773,"value":"viewof pearls = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"md`---` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"getCatenary = (parameters) => {\n if (parameters) {\n const {a, x0, y0} = parameters;\n return x => a * Math.cosh((x - x0) / a) + y0;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"function compute_parameters(x1, y1, x2, y2) {\n \n if (distance([x1, y1], [x2, y2]) > length) {\n return undefined;\n }\n \n const x = (x2 - x1) / 2;\n const y = (y2 - y1) / x;\n \n let b = 0, k = 1, steps = 100;\n let _b, _k;\n \n do {\n \n _b = compute_b(k, b, y);\n _k = compute_k(k, b, length / x);\n \n if (Math.abs(b - _b) < 0.00001 && Math.abs(k - _k) < 0.00001) {\n break;\n }\n \n b = _b;\n k = _k;\n --steps;\n \n } while (steps > 0);\n \n const a = x / _k;\n const x0 = (x1 + x2) / 2 + _b * x;\n const y0 = y1 - a * Math.cosh((x1 - x0) / a);\n \n return { a, x0, y0 }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"function compute_b(k, b, y) {\n let b1 = b + 1;\n let f0 = fb(k, b , y);\n let f1 = fb(k, b1, y);\n let g;\n \n let steps = 0;\n \n while (Math.abs(b1 - b) > 0.00001 && steps < 20) {\n g = b - f0 * (b1 - b) / (f1 - f0);\n f1 = f0;\n b1 = b;\n b = g;\n f0 = fb(k, b, y);\n steps++\n }\n return b\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"function compute_k(k, b, x) {\n let k1 = k + 1;\n let f0 = fk(k , b, x);\n let f1 = fk(k1, b, x);\n let g;\n \n let steps = 0;\n \n while (Math.abs(k1 - k) > 0.00001 && steps < 20) {\n g = k - f0 * (k1 - k) / (f1 - f0);\n if (g < 0) {\n g = -g\n }\n f1 = f0;\n k1 = k;\n k = g;\n f0 = fk(k, b, x);\n \n steps++\n }\n return k\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"function fb(k, b, y) {\n return (Math.cosh(k * (1 - b)) - Math.cosh(k * (-1 - b))) / k - y;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"function fk(k, b, x) {\n return (Math.sinh(k * (1 - b)) - Math.sinh(k * (-1 - b))) / k - x;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"mutable p1 = [-0.6, 0.6]","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"mutable p2 = [0.7, 0.1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"function scale_x(x) {\n return (x + 1) / 2 * width;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"function scale_y(y) {\n return (1 - y) / 2 * height;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"function distance([x1, y1], [x2, y2]) {\n return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"width = 640","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"height = 640","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}