Making a photo flow with one fragment shader and a GIF writer

说明与用途

OohAlive 允许在照片上绘制箭头以创建流动效果并导出 GIF。已修复重复帧、冻结像素闪烁和内存泄漏测试问题。

问题

The GIF export produced duplicate frames, shimmering frozen pixels, and a memory‑leaking test.

结果

The project now produces correct GIF loops, eliminates shimmering in frozen areas, and runs memory‑safe tests.

工作流

• 1. Draw arrows on the photo to define flow vectors.
• 2. Render two copies of the photo offset by half a loop and cross‑fade them.
• 3. Apply a freeze brush mask to set flow to zero where needed.
• 4. Export the animation by calling the same draw function used for preview.
• 5. Encode frames to GIF, ensuring a single palette lookup table for the entire GIF.
• 6. Run automated tests using Buffer.compare instead of deepEqual to avoid memory growth.

证据

My first GIF had 40 frames, and frame 20 was identical to frame 0.

来源

I measured a window on the frozen boat across the decoded GIF and found 1,070 changed values out of about 4,600.

来源

The exported file went from 2.1 MB to 887 KiB.

来源

A test compared two screenshots with assert.deepEqual. When they differed, Node tried to print both PNG buffers as a diff and the process kept growing until I killed it.

来源