31:T521,lines = { // First set of lines const minLineLength = 1 / linesPerRow; const maxLineLength = Math.max(minLineLength, growthScale); const gap = minLineLength * 5 * lineGap; const easeFn = d3[ease]; const firstSet = math .linspace(linesPerRow, true) .map((u) => [ u, 0, u, math.clamp01(math.lerp(minLineLength, maxLineLength, easeFn(u))) ]); let lines = [firstSet]; let canAddMore = true; while (canAddMore) { const lastLine = lines[lines.length - 1]; const nextLine = lastLine .map(([u1, v1, u2, v2], i) => { const currentLength = v2 - v1; if (v2 + currentLength + gap < 1) { return [u1, v1 + gap + currentLength, u2, v2 + gap + currentLength]; } }) .filter(Boolean); lines.push(nextLine); // const [u1, v1, u2, v2] = nextLine[0]; // if (v2 + (v2 - v1 + gap) > 1) { // canAddMore = false; // } // const [u1, v1, u2, v2] = nextLine[Math.floor(linesPerRow * 0.25)]; // if (v2 + (maxLineLength + gap) > 1) { // canAddMore = false; // } if (nextLine.length < Math.round(linesPerRow * 0.33)) { canAddMore = false; } } lines = lines.flat(); return lines.map(([u1, v1, u2, v2]) => [u1, 1 - v1, u2, 1 - v2]); // Change into (0, -1) axis }32:[] 2f:{"title":"043 One way to arrange lines","cells":[{"id":0,"value":"# 043 One way to arrange lines","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"svg`\n \n \n ${\n showBorder &&\n svg``\n }\n ${lines.map(line)}\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"viewof randomize = Inputs.button(\"🎲 Random Easing\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"viewof ease = {\n randomize;\n\n return Inputs.select(eases, {\n label: \"Easing\",\n value: random.pick(eases)\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"viewof showBorder = Inputs.toggle({ label: \"Draw border\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"viewof lineGap = Inputs.range([0, 1], {\n label: \"Line Gap\",\n value: 0.5,\n step: 0.05\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"viewof growthScale = Inputs.range([0, 1], {\n label: \"Growth Scale\",\n value: 0.3,\n step: 0.05\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"viewof linesPerRow = Inputs.range([20, 120], {\n label: \"Lines per row\",\n value: 75,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"viewof strokeScale = Inputs.range([0, 1], {\n label: \"Stroke\",\n value: 0.25,\n step: 0.05\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"viewof marginScale = Inputs.range([0, 1], {\n label: \"Margin\",\n value: 0.25,\n step: 0.05\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"function line([u1, v1, u2, v2]) {\n const x1 = math.lerp(0, bounds.width, u1);\n const y1 = math.lerp(0, bounds.width, v1);\n const x2 = math.lerp(0, bounds.width, u2);\n const y2 = math.lerp(0, bounds.width, v2);\n\n return svg``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"height = Math.round(width / 1.6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"maxSize = Math.min(height, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"strokeWidth = math.lerp(1, Math.round(maxSize / 50), strokeScale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"bounds = {\n const margin = math.lerp(0, maxSize / 4, marginScale) + strokeWidth / 2;\n\n const marginH = (width - maxSize) / 2 + margin;\n const marginV = (height - maxSize) / 2 + margin;\n return {\n width: maxSize - 2 * margin,\n height: maxSize - 2 * margin,\n margin: {\n top: marginV,\n left: marginH,\n right: marginH,\n bottom: marginV\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"palette = chromotome.get(\"dt04\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"svg = htl.svg","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"eases = Object.keys(d3)\n .filter((k) => k.startsWith(\"ease\"))\n // .filter((k) => k.endsWith(\"Out\") || k.endsWith(\"Linear\"))\n .filter((k) => !k.endsWith(\"In\"))\n .filter((k) => !k.includes(\"InOut\"))\n .filter((k) => !k.includes(\"Elastic\"))\n .filter((k) => !k.includes(\"Back\"))\n .filter((k) => !k.includes(\"Bounce\"))\n .filter((k) => !k.includes(\"Exp\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"import { CSMath as math, CSRandom as random } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"chromotome = import(\n \"https://unpkg.com/chromotome@1.19.1/dist/index.esm.js?module\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":414,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}