30:T406,{ replay; const context = DOM.context2d(n, n, 1); const canvas = context.canvas; const image = context.createImageData(n, n); const {data} = image; const array = new Uint32Array(n2); canvas.style.maxWidth = "100%"; canvas.style.imageRendering = "pixelated"; function render(i) { const xy = d2xy(i); const [x, y] = xy; const j = (y * n + x); const {r, g, b} = color(array[i]); data[(j << 2) + 0] = r; data[(j << 2) + 1] = g; data[(j << 2) + 2] = b; data[(j << 2) + 3] = 255; return xy; } for (let i = 0; i < n2; ++i) { render(array[i] = i); } context.putImageData(image, 0, 0); { let i, j = array.length, t, x, y; while (j) { i = Math.random() * j-- | 0; t = array[j], array[j] = array[i], array[i] = t; ([x, y] = render(i)), context.putImageData(image, 0, 0, x, y, 1, 1); ([x, y] = render(j)), context.putImageData(image, 0, 0, x, y, 1, 1); if (j % 10 === 0) yield context.canvas; } } return context.canvas; }31:[] 2e:{"title":"Visualizing Order","cells":[{"id":0,"value":"md`# Visualizing Order\n\nThis animation, inspired by [Brian Lee’s analysis](http://www.moderndescartes.com/essays/shuffle_viz/) of TensorFlow, visualizes the order of a one-dimensional array of numbers using the space-filling [Hilbert curve](https://en.wikipedia.org/wiki/Hilbert_curve). Initially, the array is in ascending order ${tex`[0, 1, 2, \\ldots]`}. Then, the [Fisher–Yates shuffle](https://en.wikipedia.org/wiki/Fisher–Yates_shuffle) is applied; this unbiased shuffle algorithm starts at the back of the array, swapping each element with a random element in the unswapped region.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"viewof replay = html`