31:[] 2f:{"title":"Variable Stroke Width I","cells":[{"id":0,"value":"md`# Variable Stroke Width I\n\nExperimenting with [Tubefy](http://owl3d.com/svg/tubefy/articles/article1.html). This notebook re-implements two plots from [this article](http://owl3d.com/svg/vsw/articles/vsw_article.html) by [owl3d.com](http://owl3d.com/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"mutable n = 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"svg1 = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"(svg1.onclick = () => (mutable n = n == 4 ? 200 : 4))","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"vsw1 = {\n let p0 = svg1.getElementById(\"path\");\n let T = p0.getTotalLength();\n let dash = T / n; // basic dash unit\n let SW = p0.getAttribute(\"stroke-widths\").match(/\\d+/g); // grab stroke-widths into an array\n let n_1 = n - 1;\n for (let i = 0; i < n; i++) {\n let p = i / n_1;\n let sw = lerp(p, SW[0], SW[1]); // current stroke width\n let da = (i + 1) * dash + \",\" + T; // current dash array\n let c = toCss(lerpA(p, [0, 0, 255], [0, 255, 255])); // current colour to trace dashes\n let newP = p0.cloneNode(true);\n newP.setAttribute(\n \"style\",\n `stroke-width:${sw};stroke-dasharray:${da};stroke:${c}`\n );\n svg1.getElementById(\"g\").appendChild(newP);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"svg2 = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"(svg2.onclick = () => (mutable n = n == 4 ? 200 : 4))","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"vsw2 = {\n let p0 = svg2.getElementById(\"path\");\n let T = p0.getTotalLength();\n let dt = T / n; // basic dash unit\n let dash = dt + 1 + \",\" + T; // basic dash unit increase by 1 to cover seams\n let SW = p0.getAttribute(\"stroke-widths\").match(/\\d+/g); // grab stroke-widths into an array\n p0.setAttribute('stroke-dasharray', dash);\n let n_1 = n - 1;\n for (let i = 0; i < n; i++) {\n let p = i / n_1;\n let sw = lerp(p, SW[0], SW[1]); // current stroke width\n let off = -i * dt; // current dash offset\n let c = toCss(lerpA(p, [0, 0, 255], [0, 255, 255])); // current colour to trace dashes\n let newP = p0.cloneNode(true);\n newP.setAttribute(\n \"style\",\n `stroke-width:${sw};stroke-dashoffset:${off};stroke:${c}`\n );\n svg2.getElementById(\"g\").appendChild(newP);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"lerp = (p, a, b) => Number(a) + (b - a) * p","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"lerpA = (p, a, b) => a.map((x, i) => lerp(p, x, b[i]));","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"toCss = a => \"rgb(\" + a.map(d => Math.round(d)).join() + \")\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}