2b:null 2c:["$","title",null,{"children":"043 One way to arrange lines | Saneef H. Ansari | Observable"}] 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:{"id":"6fc943957340a7bf","slug":"043-one-way-to-arrange-lines","title":"043 One way to arrange lines","thumbnail":"34d6d8ad5b7f3cd0c8999df60b47faeb7a57e3419093ef821832900174c32104","access_level":"public","create_time":"$D2022-01-08T07:18:06.881Z","update_time":"$D2022-09-29T11:55:14.991Z","view_time":null,"first_public_time":"$D2022-01-08T14:51:43.981Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":"starter_2024"},"version":417,"publish_version":417,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}],"members":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"1134e6403a7e016d","slug":"re-plicas-mixes","title":"re(plicas + mixes)","owner":{"id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari"}},"type":"notebook","body":{"title":"043 One way to arrange lines","cells":[{"id":0,"value":"# 043 One way to arrange lines","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"svg`\n \n \n ${\n showBorder &&\n svg``\n }\n ${lines.map(line)}\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"viewof randomize = Inputs.button(\"🎲 Random Easing\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"viewof showBorder = Inputs.toggle({ label: \"Draw border\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = Math.round(width / 1.6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"maxSize = Math.min(height, width)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"strokeWidth = math.lerp(1, Math.round(maxSize / 50), strokeScale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"palette = chromotome.get(\"dt04\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"svg = htl.svg","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"import { CSMath as math, CSRandom as random } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":414,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"