[Example] Matrix Rain

examples/index.js

@@ -1,12 +1,13 @@
-import { helloWorld } from './hello-world.js';
-import { addition } from './addition.js';
-import { inspector } from './inspector.js';
-import { promise } from './promise.js';
-import { generator } from './generator.js';
-import { syntaxError } from './syntax-error.js';
-import { runtimeError } from './runtime-error.js';
-import { randomHistogram } from './random-histogram.js';
-import { mandelbrotSet } from './mandelbrot-set.js';
+import {helloWorld} from "./hello-world.js";
+import {addition} from "./addition.js";
+import {inspector} from "./inspector.js";
+import {promise} from "./promise.js";
+import {generator} from "./generator.js";
+import {syntaxError} from "./syntax-error.js";
+import {runtimeError} from "./runtime-error.js";
+import {randomHistogram} from "./random-histogram.js";
+import {mandelbrotSet} from "./mandelbrot-set.js";
+import {matrixRain} from "./matrix-rain.js";
 
 export const examples = [
   helloWorld,
@@ -18,4 +19,5 @@ export const examples = [
   runtimeError,
   randomHistogram,
   mandelbrotSet,
+  matrixRain,
 ];

examples/matrix-rain.js

@@ -0,0 +1,66 @@
+const code = `const width = 60;
+const height = 25;
+const columns = d3.range(width).map(() => createColumn(height));
+
+{
+  frame;
+
+  // Create a new buffer.
+  const buffer = d3.range(width * height).map(() => " ");
+
+  // Update all columns.
+  for (let i = columns.length - 1; i >= 0; --i) {
+    const column = columns[i];
+    const {lifespan, length, chars} = column;
+    const n = chars.length;
+    if (lifespan < 0) columns[i] = createColumn(height);
+    else if (lifespan <= n) chars[n - lifespan] = " ";
+    else {
+      for (let j = length - 1; j < n; ++j) chars[j] = randomChar();
+      chars.push(randomChar());
+    }
+    column.lifespan -= 1;
+  }
+
+  // Update the buffer.
+  for (let i = 0; i < columns.length; ++i) {
+    const column = columns[i];
+    const {y, chars} = column;
+    for (let j = 0; j < chars.length; ++j) buffer[(y + j) * width + i] = chars[j];
+  }
+
+  // Render the buffer.
+  let output = "";
+  for (let i = 0; i < height; ++i) {
+    for (let j = 0; j < width; ++j) output += buffer[i * width + j];
+    output += i === height - 1 ? "" : "\\n";
+  }
+  output = output.split("\\n").map(d => "  " + d).join("\\n");
+  doc(output);
+}
+
+function createColumn(height) {
+  const lifespan = d3.randomInt(height)();
+  const length = d3.randomInt(lifespan)();
+  const chars = d3.range(length).map(randomChar);
+  const y = d3.randomInt(0, 10)();
+  return {lifespan, length, chars, y};
+}
+
+function randomChar() {
+  return String.fromCharCode(d3.randomInt(32, 127)());
+}
+
+const frame = (async function* () {
+  for (let i = 0; true; ++i) {
+    yield i;
+    await new Promise((resolve) => setTimeout(resolve, 1000 / 15));
+  }
+})();
+
+const d3 = require("d3");`;
+
+export const matrixRain = {
+  name: "Matrix Rain",
+  code,
+};

src/App.jsx

@@ -42,7 +42,7 @@ export default function App() {
       <h1>Observable Script</h1>
       <div style={{display: "flex"}}>
         <ul style={{width: "200px", margin: 0, height: "calc(100vh - 85px)", overflow: "auto"}}>
-          {examples.map(({name, code}) => (
+          {examples.map(({name}) => (
             <li
               key={name}
               style={{textDecoration: selected === name ? "underline" : "none", cursor: "pointer"}}