Matrix digital rain · qwen3.8-27b

Write an index.html with a matrix rain, then test it in the browser.

Wait — there's a logic bug in the trail drawing. `col.y` moves downward. topRow = floor(col.y/CELL). When col.y is negative, topRow is also negative, and we're drawing rows from topRow onward, with k=0 being the first visible row. But the "head" should be at the position of col.y, i.e., the bottom edge of the moving rain. In my drawing, I'm making k=0 (the topmost row) the head, and the trail extends below it. But the leading character in Matrix rain is at the bottom edge (the direction of movement). Actually, the leading character is at the head of the streak — the streak extends upward from the head. Let me reconsider: the head moves downward. The fading trail should extend upward from the head. In my drawing, I'm drawing rows topRow through topRow+trail-1 — meaning the trail extends downward from the head, which is wrong: the head should be at the bottom edge of the streak.

Fix: draw the head at topRow, and the trail should extend upward: rows topRow-k for k=0..trail-1. Also, pruning and recycling: when topRow - trail > height/CELL, recycle the column (the entire streak is off the bottom of the screen).

Furthermore, the isHead logic has leftover cruft (dead code). Let's clean this up.

Also, glyph memory keyed by row index: rows increase as the column falls. When col.y goes back to negative after recycling, the row resets. Pruning: delete entries where row < topRow - trail - 4 (above the trail).

Let's rewrite the step function.

Also, the head glyph should be freshly randomized more often (the head glyph changes every frame — that's fine, it's the new row every time). Actually, since the head is at a new row every frame, it gets a new glyph. Good.

One more thing: if the headRow's glyph is stable per row — no problem.

Next, testing in the browser.

Initial frame — columns are starting from above the viewport (staggered negative y up to -800px), so it's temporarily pitch black. This is fine but takes a while. For visual appeal, let's stagger some columns to start within the viewport. Actually, "vary the starting positions of the columns" — some columns should be displayed in the middle of the screen. I'll decide to randomize the starting y between -innerHeight and innerHeight*0.5.

I'll wait a few seconds and take another screenshot.

Wait a sec: with 40% probability, y = -rand*(H+400) + H, which is in the range [H-(H+400), H] = [-400, H]. Okay, some are on-screen.

The rain looks fine: columns are moving independently, bright leading characters, fading trails. Next, test pause/resume and restart. Click Pause, take a screenshot twice (should be identical), then Resume, and then Restart.

Paused (the button currently shows "Resume"). Take two screenshots with a time gap to confirm the freeze.

Wait a sec — comparing with the pause frame: it's nearly identical, but there are slight changes? Looking closely: at the bottom of frame 2, I can see new glyphs appearing at the bottom edge (in frame 1 "タノシコ" vs in frame 2 "タノシコク"?). Actually, the frames look almost identical. The difference in the bottom row might be the residual fade from the last drawn frame before the pause... actually stopLoop cancels the RAF, so no more frames get drawn. But between the click and the first screenshot, one last RAF might have been executed. Screenshot 1 (click) and Screenshot 2 (now) look nearly identical — a small change at the bottom edge. This is probably the last frame that got processed before the cancel. No problem.

Now, resume, verify continuation, and then restart.

Resume succeeded — the columns shifted slightly downward (continuing from the paused state). Next is the restart test: click Restart and check whether the old trail gets cleared.

On restart, the old trail gets cleared — clean black screen, rain starts up again. Verify that it reappears, and quickly test resize. Resize: can't easily resize the viewport with the browser tools. The resize handler sets the canvas dimensions to innerWidth/innerHeight and rebuilds the columns — standard approach. Trust this.

Sample once more to confirm the rain after restart.

All verified. Done. Let me summarize.