30:T629,hcurve = { const {T, TR, R, RB, B, BL, L, LT} = directions; // Only store forward direction // ┏━┓ ┏━┓ R B R B // ┃ ┗━┛ ┃ T R T B // ┃ ┏━┓ ┃ T B L B // ┗━┛ ┗━┛ T L T L const gridLookup = [ R, B, R, B, T, R, T, B, T, B, L, B, T, L, T, L, ]; function makeHGrid(k) { const size = 4 * 2 ** k; const grid = []; for(let y = 0; y < size; y++) { for (let x = 0; x < size; x++) { grid.push(gridLookup[(y%4)*4 + (x%4)]); } } return grid; } function gridToHCurve(grid, x, y, subgridsize) { const gridsize = Math.sqrt(grid.length); const idx = x + y * gridsize; // ┗━┛ ┗━┛ => ┃ ┗━┛ ┃ // ┏━┓ ┏━┓ => ┃ ┏━┓ ┃ // Or: // T L T L => T R T B // R B R B T B L B grid[idx-1] = T; grid[idx+0] = R; grid[idx+1] = T; grid[idx+2] = B; grid[idx+gridsize-1] = T; grid[idx+gridsize+0] = B; grid[idx+gridsize+1] = L; grid[idx+gridsize+2] = B; if (subgridsize > 4) { subgridsize /= 2; gridToHCurve(grid, x-subgridsize, y-subgridsize, subgridsize) gridToHCurve(grid, x+subgridsize, y-subgridsize, subgridsize) gridToHCurve(grid, x-subgridsize, y+subgridsize, subgridsize) gridToHCurve(grid, x+subgridsize, y+subgridsize, subgridsize) } return grid; } return function hcurve(k) { const size = 4 * 2 ** k; return gridToHCurve(makeHGrid(k), size / 2 - 1, size / 2 - 1, size / 2) } }31:Ta8a,hicurve = { const {T, TR, R, RB, B, BL, L, LT} = directions; // Only store forward direction // ┏━┓ ┏━┓ ┏━━━━━┓ R B R B R R R B // ┃ ┗━┛ ┃ ┗━┓ ┏━┛ T R T B T L B L // ┃ ┏━┓ ┃ ┏━┛ ┗━┓ T B L B R T R B // ┗━┛ ┗━┛ ┗━━━━━┛ T L T L T L L L // ┏━━━━━┓ ┏━┓ ┏━┓ R R R B R B R B // ┗━┓ ┏━┛ ┃ ┗━┛ ┃ T L B L T R T B // ┏━┛ ┗━┓ ┃ ┏━┓ ┃ R T R B T B L B // ┗━━━━━┛ ┗━┛ ┗━┛ T L L L T L T L const gridLookup = [ R, B, R, B, R, R, R, B, T, R, T, B, T, L, B, L, T, B, L, B, R, T, R, B, T, L, T, L, T, L, L, L, R, R, R, B, R, B, R, B, T, L, B, L, T, R, T, B, R, T, R, B, T, B, L, B, T, L, L, L, T, L, T, L, ]; function makeHIGrid(k) { const size = 4 * 2 ** k; const grid = []; for(let y = 0; y < size; y++) { for (let x = 0; x < size; x++) { grid.push(gridLookup[(y%8)*8 + (x%8)]); } } return grid; } function gridToHICurve(grid, x, y, subgridsize, I) { const gridsize = Math.sqrt(grid.length); const idx = x + y * gridsize; if (I) { // ┃ ┏━ => ┗━━━ // ━┛ ┗━ => ━┓ ┏━ // ━┓ ┏━ => ━┛ ┗━ // ━┛ ┃ => ━━━┓ // Or: // B R R R // L T => L B // B R => T R // L T L L const g = gridsize grid[idx - g] = R; grid[idx + 0] = L; grid[idx + g] = T; grid[idx + 2*g] = L; grid[idx - g + 1] = R; grid[idx + 0 + 1] = B; grid[idx + g + 1] = R; grid[idx + 2*g + 1] = L; } else { // ┗━┛ ┗━━ => ┃ ┗━┛ ┏ // ━━┓ ┏━┓ => ┛ ┏━┓ ┃ // Or: // T L T L => T R T B // R B R B T B L B grid[idx-1] = T; grid[idx+0] = R; grid[idx+1] = T; grid[idx+2] = B; grid[idx+gridsize-1] = T; grid[idx+gridsize+0] = B; grid[idx+gridsize+1] = L; grid[idx+gridsize+2] = B; } if (subgridsize > 4) { subgridsize /= 2; gridToHICurve(grid, x-subgridsize, y-subgridsize, subgridsize, false) gridToHICurve(grid, x+subgridsize, y-subgridsize, subgridsize, true) gridToHICurve(grid, x-subgridsize, y+subgridsize, subgridsize, true) gridToHICurve(grid, x+subgridsize, y+subgridsize, subgridsize, false) } return grid; } return function hicurve(k) { const size = 4 * 2 ** k; return gridToHICurve(makeHIGrid(k), size / 2 - 1, size / 2 - 1, size / 2, false) } }32:T2d64,class Curve { constructor(grid, width, height){ this.grid = grid; if (width === undefined || height === undefined) { const size = Math.sqrt(grid.length); width = size; height = size; } this.width = width; this.height = height; this.fill = d3.interpolateSpectral; this.stroke = (i) => d3.interpolateSpectral(1-i); } static hcurve(k){ return new this(hcurve(k)); } static hicurve(k) { return new this(hicurve(k)); } static hilbert(k) { const side = 4 * 2 ** k; const size = side*side; const indices = [], grid = []; for (let x = 0; x < side; x++) { for(let y = 0; y < side; y++) { grid.push(hilbertindices(x, y, size)); indices.push(0); } } for(let i = 0; i < grid.length; i++) { const idx = grid[i]; indices[idx] = i; grid[i] = 0; } const {T, R, B, L} = directions; for(let i = 0, idx = 0, nidx = 0, x = 0, y = 0; i < grid.length-1; i++) { nidx = indices[i+1]; switch(nidx - idx) { case 1: grid[idx] = R; break; case -1: grid[idx] = L; break; case side: grid[idx] = B; break case -side: grid[idx] = T; break; } idx = nidx; } if (grid[side-1] === 0) grid[side-1] = R; else grid[grid.length-side] = B; return new this(grid); } setFillColor(lerpColor){ this.fill = lerpColor; return this; } setStrokeColor(lerpColor){ this.stroke = lerpColor; return this; } skewHorizontal(step, offset) { const {grid, width, height} = this; const {T, TR, R, RB, B, BL, L, LT} = directions; const newGrid = grid.slice(); if (step > 0) { for (let y = 0; y < height; y++) { const yoffset = ((y+offset+height)%height) / step | 0; const nyoffset = ((y+1+offset+height)%height) / step | 0; const pyoffset = ((y-1+offset+height)%height) / step | 0; const line = y*width; for (let x = 0; x < width; x++) { let v = grid[x + y*width]; if (yoffset !== nyoffset){ if(v === B) { v = BL; } else if (v === RB) { v = B; } } if (yoffset !== pyoffset) { if (v === T) { v = TR; } else if (v === LT) { v = T; } } newGrid[((x - yoffset + width)%width) + line] = v; } } } else { step = -step; for (let y = 0; y < height; y++) { const yoffset = ((y+offset+height)%height) / step | 0; const nyoffset = ((y+1+offset+height)%height) / step | 0; const pyoffset = ((y-1+offset+height)%height) / step | 0; const line = y*width; for (let x = 0; x < width; x++) { let v = grid[x + y*width]; if (yoffset !== nyoffset) { if(v === B) { v = RB } else if (v === BL) { v = B } } if (yoffset !== pyoffset) { if(v === T) { v = LT } else if (v === TR) { v = T; } } newGrid[((x + yoffset + width)%width) + line] = v; } } } this.grid = newGrid; return this; } skewVertical(step, offset) { const {grid, width, height} = this; const {T, TR, R, RB, B, BL, L, LT} = directions; const newGrid = grid.slice(); if (step > 0) { for (let x = 0; x < width; x++) { const xoffset = ((x+width+offset)%width) / step | 0; const nxoffset = ((x+1+width+offset)%width) / step | 0; const pxoffset = ((x-1+width+offset)%width) / step | 0; for (let y = 0; y < height; y++) { let v = grid[x + y*width]; if (xoffset !== nxoffset){ if (v === R) { v = RB; } else if (v === TR) { v = R; } } if (xoffset !== pxoffset) { if (v === L) { v = LT; } else if (v === BL) { v = L; } } newGrid[x + ((y+xoffset)%height)*width] = v; } } } else if (step < 0) { step = -step; for (let x = 0; x < width; x++) { const xoffset = ((x+width+offset)%width) / step | 0; const nxoffset = ((x+1+width+offset)%width) / step | 0; const pxoffset = ((x-1+width+offset)%width) / step | 0; for (let y = 0; y < height; y++) { let v = grid[x + y*width]; if (xoffset !== nxoffset) { if (v === RB) { v = R; } else if (v === R) { v = TR; } } if (xoffset !== pxoffset) { if (v === LT) { v = L; } else if (v === L) { v = BL; } } newGrid[x + ((y-xoffset+width)%height)*width] = v; } } } this.grid = newGrid; return this; } translate(dx, dy){ const {grid, width, height} = this; const newGrid = grid.slice(); while(dy < 0) dy += height; dy = dy % height; while (dx < 0) dx += width; dx = dx % width; for (let y = 0; y < height; y++) { const line = ((y + dy + height)%height)*width; for (let x = 0; x < width; x++) { let v = grid[x + y*width]; newGrid[((x + dx + width)%width) + line] = v; } } this.grid = newGrid; return this; } clockwise() { const {grid, width, height} = this; const newGrid = grid.slice(); for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const x1 = height - 1 - y; const y1 = x * width; let v = grid[x + y*width]; newGrid[x1 + y1] = (v >>> 6) + (v << 2) & 0xFF; } } this.grid = newGrid; this.width = height; this.height = width; return this; } cclockwise() { const {grid, width, height} = this; const newGrid = grid.slice(); for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const x1 = height - 1 - y; const y1 = x * width; let v = grid[x1 + y1]; newGrid[x + y*width] = (v << 6) + (v >>> 2) & 0xFF; } } this.grid = newGrid; this.width = height; this.height = width; return this; } toIndices(){ const {grid, width, height} = this; const gridToLine = []; const lineToGrid = []; // initiate a numerical array without holes. for(let i = 0; i < grid.length; i++) { gridToLine.push(0); lineToGrid.push(0); } const {T, TR, R, RB, B, BL, L, LT} = directions; for(let i = 0, x = 0, y = 0, idx = 0; i < grid.length; i++) { gridToLine[idx] = i; lineToGrid[i] = idx; const direction = grid[idx]; switch (direction) { case T: y -= 1; break; case TR: y -= 1; x += 1; break; case R: x += 1; break case RB: x += 1; y += 1; break; case B: y += 1; break; case BL: y += 1; x -= 1; break; case L: x -= 1; break; case LT: x -= 1; y -= 1; break; } x = (x + width)%width; y = (y + height)%height; idx = x + y*width; } return {gridToLine, lineToGrid}; } *draw(scale, steps){ const {grid, width, height} = this; const {T, TR, R, RB, B, BL, L, LT} = directions; const step = scale * 5; const w = step * width; const h = step * height; const strokeCtx = DOM.context2d(w, h, 1); const gradientCtx = DOM.context2d(w, h, 1); const outCtx = DOM.context2d(w, h, 1); gradientCtx.fillStyle = "white"; gradientCtx.fillRect(0, 0, w, h); strokeCtx.lineWidth = Math.floor(scale * 2); strokeCtx.lineCap = "round" let x = 0, y = 0, px = 0, py = 0;; for(let i = 0, idx = 0; i < grid.length; i++) { strokeCtx.strokeStyle = this.stroke(i / grid.length); if (Math.abs(px-x) > step) px = x + (px < x ? step : -step); if (Math.abs(py-y) > step) py = y + (py < y ? step : -step) strokeCtx.beginPath(); strokeCtx.moveTo(px + step/2, py + step/2); strokeCtx.lineTo(x + step/2, y + step/2); strokeCtx.moveTo(px + step/2 + w, py + step/2); strokeCtx.lineTo(x + step/2 + w, y + step/2); strokeCtx.moveTo(px + step/2 - w, py + step/2); strokeCtx.lineTo(x + step/2 - w, y + step/2); strokeCtx.moveTo(px + step/2, py + step/2 + h); strokeCtx.lineTo(x + step/2, y + step/2 + h); strokeCtx.moveTo(px + step/2, py + step/2 - h); strokeCtx.lineTo(x + step/2, y + step/2 - h); strokeCtx.stroke(); px = x = (x + w)%w; py = y = (y + h)%h; gradientCtx.fillStyle = this.fill(i / grid.length); gradientCtx.fillRect(x, y, step, step); const direction = grid[idx]; switch (direction) { case T: y -= step; break; case TR: y -= step; x += step; break; case R: x += step; break case RB: x += step; y += step; break; case B: y += step; break; case BL: y += step; x -= step; break; case L: x -= step; break; case LT: x -= step; y -= step; break; } x = (x + w)%w; y = (y + h)%h; idx = (x/step) + (y/step)*width; if (i%steps === 0) { outCtx.drawImage(gradientCtx.canvas, 0, 0); outCtx.drawImage(strokeCtx.canvas, 0, 0); yield outCtx.canvas } } outCtx.drawImage(gradientCtx.canvas, 0, 0); outCtx.drawImage(strokeCtx.canvas, 0, 0); return outCtx.canvas; } *line(scale, steps = 1){ const {grid, width, height} = this; const {T, TR, R, RB, B, BL, L, LT} = directions; const step = scale * 5; const w = step * width; const h = step * height; const strokeCtx = DOM.context2d(w, h, 1); const gradientCtx = DOM.context2d(w, h, 1); const outCtx = DOM.context2d(w, h, 1); const drawSegment = (x0, y0, dx, dy) => { outCtx.beginPath(); outCtx.moveTo(x0, y0); outCtx.lineTo(x0 + dx, y0 + dy); outCtx.moveTo(x0 + w, y0); outCtx.lineTo(x0 + w + dx, y0 + dy); outCtx.moveTo(x0 - w, y0); outCtx.lineTo(x0 - w + dx, y0 + dy); outCtx.moveTo(x0, y0 + h); outCtx.lineTo(x0 + dx, y0 + dy + h); outCtx.moveTo(x0, y0 - h); outCtx.lineTo(x0 + dx, y0 + dy - h); outCtx.stroke(); }; outCtx.lineWidth = Math.floor(scale * 1.5); outCtx.lineCap = "round"; outCtx.fillStyle = "#EEE"; outCtx.fillRect(0, 0, w, h); outCtx.strokeStyle = "#FFF"; for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const x0 = x*step + step/2, y0 = y*step + step/2; drawSegment(x0, y0, 0, 0); } } outCtx.strokeStyle = "black"; for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const x0 = x*step + step/2, y0 = y*step + step/2; const idx = x + y*width; const direction = grid[idx]; if (direction & T) drawSegment(x0, y0, 0, -step); if (direction & TR) drawSegment(x0, y0, step, -step); if (direction & R) drawSegment(x0, y0, step, 0); if (direction & RB) drawSegment(x0, y0, step, step); if (direction & B) drawSegment(x0, y0, 0, step); if (direction & BL) drawSegment(x0, y0, -step, step); if (direction & L) drawSegment(x0, y0, -step, 0); if (direction & LT) drawSegment(x0, y0, -step, -step); } yield outCtx.canvas } } }33:[] 2e:{"title":"Skewed Curves","cells":[{"id":0,"value":"md`# Skewed Curves\n\nSo I wondered... can we \"skew\" curves? Assuming we take care not to have a disconnected result?\n\nAnswer: yeah, kinda. But that problem with disconnecting happens really quickly.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"Curve.hcurve(5)\n .setFillColor(d3.interpolateInferno)\n .setStrokeColor(() => \"#8884\")\n .skewHorizontal(2, 0)\n .skewVertical(1, 0)\n .cclockwise()\n .draw(1, 256)","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"// Added a Hilbert curve too this time\nCurve.hilbert(5)\n .skewHorizontal(4, 3)\n .skewHorizontal(-4, 1)\n .translate(1, 0)\n .draw(1, 256)","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"Curve.hcurve(4)\n .skewHorizontal(-2, 16)\n.translate(8, 0)\n .draw(2, 32)","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"// Turns out that repeated skewing by 45 degrees is equivalent to a rotation\nCurve.hcurve(4)\n .skewHorizontal(1,1)\n .skewVertical(1,1)\n .skewHorizontal(1,0)\n .draw(2,32)","pinned":true,"hidden":false,"mode":"ojs"},{"id":809,"value":"Curve.hcurve(4)\n .clockwise()\n .draw(2,32)","pinned":true,"hidden":false,"mode":"ojs"},{"id":447,"value":"// This breaks because geometry - the wrap-around doesn't align properly\nCurve.hicurve(4)\n .skewHorizontal(2, 0)\n .skewVertical(2, 0)\n .draw(2, 256)","pinned":true,"hidden":false,"mode":"ojs"},{"id":974,"value":"// Small-scale version. This probably can be fixed somehow, but it\n// needs someone a bit smarter than me to figure out.\nCurve.hicurve(0)\n .skewHorizontal(2, 0)\n .skewVertical(2,0)\n .draw(5, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1030,"value":"// The drawing code assumes everything tiles perfectly\n{\nconst {T} = directions\nreturn new Curve([T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T])\n .skewHorizontal(1, 0)\n .skewVertical(2, 1)\n .skewVertical(4, 3)\n .draw(4, 1)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1102,"value":"// The line drawing code does not, btw.\n{\nconst {T} = directions\nreturn new Curve([T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T,T])\n .skewHorizontal(1, 0)\n .skewVertical(2, 1)\n .skewVertical(4, 3)\n .line(4, 1)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"directions = ({\n T: 1,\n TR: 2,\n RT: 2,\n R: 4,\n RB: 8,\n BR: 8,\n B: 16,\n BL: 32,\n LB: 32,\n L: 64,\n LT: 128,\n TL: 128\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1118,"value":"hilbertindices = function(x, y, size) {\n let d = 0;\n for (let s = size >> 1; s > 0; s >>= 1) {\n var rx = +((x & s) > 0);\n var ry = +((y & s) > 0);\n d += s * s * ((3 * rx) ^ ry);\n\n if (ry === 0) {\n if (rx === 1) {\n x = s - 1 - x;\n y = s - 1 - y;\n }\n var t = x;\n x = y;\n y = t;\n }\n }\n return d;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1136,"value":"{\n let grid = [];\n const size = 4\n for(let x = 0; x < size; x++) {\n for (let y = 0; y < size; y++) {\n grid.push(hilbertindices(x, y, size*size));\n }\n }\n return grid;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":611,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":889,"value":"md`## Tests`","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"testGrid1 = {\n const {T, TR, R, RB, B, BL, L, LT} = directions;\n return [\n R, R, RB, B,\n TR, R, B, B,\n T, T, L, BL,\n T, LT, L, L,\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"new Curve(testGrid1)\n .draw(5, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":876,"value":"new Curve(testGrid1)\n .line(5, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"new Curve(testGrid1)\n .translate(0,2)\n .draw(5, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":873,"value":"new Curve(testGrid1)\n .translate(0,2)\n .line(5, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"new Curve(testGrid1)\n .translate(2,0)\n .draw(5, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":870,"value":"new Curve(testGrid1)\n .translate(2,0)\n .line(5, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":902,"value":"new Curve(testGrid1 )\n .translate(2,2)\n .draw(5, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":906,"value":"new Curve(testGrid1)\n .translate(2,2)\n .line(5, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":919,"value":"testGrid2 = {\n const {T, TR, R, RB, B, BL, L, LT} = directions;\n return [\n R, R, R, B,\n B, L, L, L,\n R, R, R, B,\n B, L, L, L,\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"new Curve(testGrid2)\n .line(5, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1343,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":932,"value":"new Curve(testGrid2)\n .skewHorizontal(1,3)\n .draw(5, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":925,"value":"new Curve(testGrid2)\n .skewHorizontal(1,3)\n .line(5, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":965,"value":"new Curve(testGrid2)\n .skewVertical(2,0)\n .draw(5, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":967,"value":"new Curve(testGrid2)\n .skewVertical(2,0)\n .line(5, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":959,"value":"new Curve(testGrid2)\n .skewHorizontal(1,3)\n .skewVertical(2,0)\n .draw(5, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":963,"value":"new Curve(testGrid2)\n .skewVertical(2,0)\n .skewHorizontal(1,3)\n .line(5, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":957,"value":"// Still bugged\nCurve.hicurve(1)\n .skewHorizontal(2, 1)\n .skewVertical(2, 1)\n .draw(3, 6)","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require('d3-scale-chromatic', 'd3-color')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}