2b:null 2c:["$","title",null,{"children":"Warp & Weft | Quadbits Studio | Observable"}] 31:T1bb6,cloth = (() => { const COUNT = 2 + Math.max(threads, 1); // an unsigned integer ≥ 3 const HALF_COUNT = Math.round(COUNT / 2); const SIZE = thickness * COUNT; const EDGE = SIZE - thickness; let ctx = DOM.context2d(2 * SIZE, 2 * SIZE); ctx.lineCap = "round"; ctx.lineWidth = thickness + tighten; // make sure it's an even value in order to prevent any visible seams ctx.shadowBlur = Math.floor(thickness / 4); ctx.shadowColor = tint; ctx.translate(SIZE, SIZE); ctx.canvas.addEventListener("click", start, false); Object.assign(ctx.canvas.style, { display: "block", width: `${2 * SIZE}px`, margin: "0 auto", background: `${tint} none` }); let components = ["weft", "warp"]; let counter = 0; let grid = [new Path2D(), new Path2D()]; let lift = grid.map(Number.call, Number)[invert ? "reverse" : "slice"](); for ( let i = 0, width = 2 * thickness /* 2 × SIZE ÷ COUNT */; i < COUNT; i++ ) { for (let j = 0; j < COUNT; j++) { grid[pattern(i, j)].rect( -SIZE + i * width, -SIZE + j * width, width, width ); } } let colorTable; let indexOf; function colorize() { let count = randomInt(2, COUNT - 1); let arc = Math.round(360 / count); let hue = randomInt(0, 90, true) + 30; colorTable = Array.from(Array(count), (_, i) => { let delta = arc * i + randomInt(-45, 46); let saturation = 60 + randomInt(0, 31); let lightness = 60 + randomInt(0, 41); return ( "hsl(" + [(hue + delta) % 360, saturation + "%", lightness + "%"].join(", ") + ")" ); }); indexOf = Array.from(Array(components.length - mirror), () => { let index = []; for ( let seed = randomInt(0, colorTable.length), i = seed; i < seed + HALF_COUNT - 1; i++ ) { index.push(i % colorTable.length); } shuffle(index); return index; }); if (mirror) { indexOf.push(indexOf.slice().shift()); } document.dispatchEvent( new CustomEvent("weave", { detail: Object.freeze( Object.fromEntries( components.map((_, i) => [ components[i], indexOf[i].map((r) => colorTable[r]) ]) ) ) }) ); } function jumble() { function init() { let bundle = Array.from( Array(HALF_COUNT - 1), () => Math.round(6 * (random() + 0.6)) * [-1, 1][randomInt(0, 2)] ); if (random() < 0.4) { bundle.sort((b, a) => { return Math.abs(a) - Math.abs(b); }); } else if (random() < 0.5) { bundle.sort((a, b) => { return Math.abs(a) - Math.abs(b); }); } for (let i = HALF_COUNT - 1 - (COUNT & 1 ? 1 : 0); i > 0; ) { bundle.push(-bundle[--i]); } return bundle; } for ( let r = 0, extent = Array.from(Array(fabric.length), init), threads = fabric[0].length; r < threads; r++ ) { for (let i = 0; i < fabric.length; i++) { let offset = extent[i][r]; let thread = fabric[i][r]; thread.inc(offset); thread.delay(Math.round(SIZE - (4 * SIZE) / Math.abs(offset))); } } } function weave() { ctx.clearRect(-SIZE, -SIZE, 2 * SIZE, 2 * SIZE); for (let i = 0; i < lift.length; i++) { ctx.save(); ctx.clip(grid[lift[i]]); for (let thread of fabric[i]) { thread.draw(); } ctx.shadowOffsetX = ctx.shadowOffsetY = thickness / 8; for (let thread of fabric[1 - i]) { thread.draw(); } ctx.restore(); } } let frame = null; let paused = true; let t = 0; let when; function play(ts) { if (paused) return; for ( let r = 0, threads = fabric[0].length, warps = fabric[1], wefts = fabric[0]; r < threads; r++ ) { warps[r].move(); wefts[r].move(); } weave(); t++; let callback = play; if (counter / 2 === COUNT - 2) { callback = pause; counter = 0; t = 0; } frame = requestAnimationFrame(callback); } function pause(ts) { if (when === 0) when = performance.now() + 1000; let callback = pause; if (ts >= when) { callback = play; colorize(); jumble(); when = 0; } frame = requestAnimationFrame(callback); } function start() { if (paused) { frame = requestAnimationFrame(play); when = 0; } paused = !paused; } function Thread(kind, x, y, r) { let component = components.indexOf(kind); let color = colorTable[indexOf[component][r]]; let delay = 0; let inc = 0; let o = 0; return Object.freeze({ delay(amount) { if (void 0 === amount) return; delay = amount; }, inc(amount) { if (void 0 === amount) return; inc = amount; }, move() { if (Math.abs(o) > 2 * SIZE) { color = colorTable[indexOf[component][r]]; o = -o; } if (t > delay) { o += inc; if (inc != 0 && Math.abs(o) < 0.1) { inc = o = 0; counter++; } } }, draw( zz = o * Math.sin((Math.PI / (SIZE - delay)) * Math.max(0, t - delay)), { x0, y0, x1, y1 } = component ? { x0: x, y0: -EDGE + zz, x1: x, y1: EDGE + zz } : { x0: -EDGE + zz, y0: y, x1: EDGE + zz, y1: y } ) { ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.strokeStyle = color; ctx.stroke(); } }); } if (!Array.prototype.toSpliced) { Array.prototype.toSpliced = function () { const duplicate = Array.from(this); this.splice.apply(duplicate, arguments); return duplicate; }; } function yarns(kind = "weft") { let head = [], tail = []; for ( let i = 0, action = "warp" === kind ? "reverse" : "valueOf"; i < HALF_COUNT - 1; i++ ) { let args = [kind, i]; head.push( Thread.apply( null, args.toSpliced( 1, 0, ...[0, -SIZE + thickness + ((i + 1) * 2 * SIZE) / COUNT][action]() ) ) ); if (COUNT & 1 && i === HALF_COUNT - 2) continue; tail.unshift( Thread.apply( null, args.toSpliced( 1, 0, ...[0, SIZE + thickness - ((i + 2) * 2 * SIZE) / COUNT][action]() ) ) ); } return head.concat(tail); } const shuttle = (e) => (mutable colors = e.detail); document.addEventListener("weave", shuttle); colorize(); /* {{{ warp and weft… */ var fabric = Array.from(components, yarns); /* }}} */ jumble(); start(); invalidation.then( () => ( frame && cancelAnimationFrame(frame), document.removeEventListener("weave", shuttle) ) ); return ctx.canvas; })()32:[] 2f:{"id":"a879e437b2a4e744","slug":"warp-and-weft","title":"Warp & Weft","thumbnail":"f45ba701134cb8cff00cf02b5dc5edd43b49f37ea74c319a823f74eef26b515b","access_level":"public","create_time":"$D2023-05-26T00:45:01.597Z","update_time":"$D2026-07-22T12:42:14.897Z","view_time":null,"first_public_time":"$D2023-05-26T00:45:01.597Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"57db707ac57c4c46","login":"quadbits","name":"Quadbits Studio","avatar_url":"https://avatars-next.observableusercontent.com/b3cdbe7333b9c0c791857786940f67bd782ddb4926310d9e33535abf8d2367f3","tier":"starter_2024"},"version":94,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null}],"members":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null,"role":"editor"},{"type":"team","id":"57db707ac57c4c46","login":"quadbits","name":"Quadbits Studio","avatar_url":"https://avatars-next.observableusercontent.com/b3cdbe7333b9c0c791857786940f67bd782ddb4926310d9e33535abf8d2367f3","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Warp & Weft","cells":[{"id":0,"value":"# Warp & Weft","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"

\n ${cloth}\n — Paul Slaymaker

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"viewof threads = Inputs.range([3, 15], { label: \"Threads\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof thickness = Inputs.range([8, 16], {\n label: \"Thickness\",\n step: /* must be even */ 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"viewof tighten = ((\n value,\n {\n args = [],\n extent = [0],\n option = { step: /* must be even */ 2 },\n options = {\n label: \"Tighten\",\n value: 0\n },\n type = \"range\"\n } = {}\n) => {\n if (value & 1) --value;\n if (value <= 2) {\n type = \"toggle\";\n extent.unshift(value);\n option = { extent };\n } else {\n extent.push(value);\n args.push(extent);\n }\n args.push(Object.assign(options, option));\n return Inputs[type].apply(null, args);\n})(Math.round(thickness / 4))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"viewof scale = this ||\n Inputs.toggle({\n label: \"Half-size\",\n value: overflow,\n disabled: !overflow\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof invert = Inputs.toggle({ label: \"Invert\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"viewof mirror = Inputs.toggle({ label: \"Mirror\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"display(colors.warp || [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"display(colors.weft || [], \"column\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"This notebook would not exist if I had not stumbled across Paul Slaymaker’s [stunning work](https://codepen.io/aymak) on CodePen: I was very impressed by his creativity and his ability to create mind-blowing animations that push our web browsers to the brink…","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"What’s more, he’d already written all the code needed to create the warp & weft animation I’d envisioned a while ago… I don’t know who he is or what his background is, only that he lives in Fayetteville, Arkansas. I thank him from the bottom of my heart for sharing his extensive knowledge.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"In porting the original code to Observable, I’ve made a few tweaks and improvements here and there — most notably the ability to set an odd number of threads…","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"$${annotate(\n `🎙`,\n `I’ve been revisiting the source code and managed to strip out much of the [original redundancy](/d/e54bcc895936cc9e) without taking much of a hit on the animation speed.`\n)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"((input) => (\n (input.value = overflow),\n ((toggle) =>\n toggle[[\"set\", \"remove\"][+overflow] + \"Attribute\"].apply(\n toggle,\n Array.from(Array(2 - overflow), () => \"disabled\")\n ))(input.querySelector(\"input\")),\n input.dispatchEvent(new Event(\"input\", { bubbles: true }))\n))(viewof scale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"overflow = cloth.offsetWidth > width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"((h, v) =>\n Object.assign(cloth.style, {\n marginTop: `${v}px`,\n marginRight: `${h}px`,\n marginBottom: `${v}px`,\n marginLeft: `${h}px`,\n transform: `scale(${1 / (scale + 1)})`\n }) && (cloth.style.margin + \"\").split(/ /).map(($_) => parseInt($_, 10)))(\n (width - cloth.offsetWidth) / 2,\n ((scale / -2) * cloth.offsetHeight) / (scale + 1)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"padding = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"function display(colors, direction = \"row\") {\n return html`

${colors\n .concat(\n colors\n .slice()\n .reverse()\n .slice(threads & 1 ? 1 : 0)\n )\n .map(\n (dye, i) =>\n ``\n )}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"mutable colors = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"tint = \"#234\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"pattern = (i, j) => (i + j) & 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"function shuffle(array) {\n let m = array.length,\n i;\n while (m) {\n i = Math.floor(random() * m--);\n array[i] = [array[m], (array[m] = array[i])].shift();\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"randomInt = (min, max, low) =>\n Math.floor((low ? random() : 1) * random() * (max - min) + min)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"random = (function () {\n const crypto = self[\"crypto\" || \"msCrypto\"];\n return crypto && crypto.getRandomValues\n ? () => crypto.getRandomValues(new Uint32Array(1))[0] / (0xffffffff + 1)\n : Math.random;\n})()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"import { annotate } from \"@galopin/misclib-routines\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"