Random Noise Demo

Exploring WASM Performance with Random Noise

Today I’m experimenting with WebAssembly for high-performance graphics. The goal is to see how fast we can generate and display random pixel data and in general how to get this onto a webpage.

The Challenge

Generating random colors for every pixel at 60+ FPS is computationally intensive. Let’s see how WASM performs:

Performance Results

As you can see from the demo above, the WASM implementation achieves:

• C++ FPS: ~100 FPS (logic/rendering)
• JavaScript FPS: ~60 FPS (display)
• Memory usage: Fixed 1.2MB pixel buffer

The key insight here is that we’re running the rendering logic at 120 FPS while only displaying at 60 FPS. This gives us headroom for more complex calculations.

Technical Implementation

The core rendering function is surprisingly simple:

void render(uint8_t* buffer) {
    for (int i = 0; i < CANVAS_WIDTH * CANVAS_HEIGHT * 4; i += 4) {
        buffer[i] = rand() % 256;     // Red
        buffer[i + 1] = rand() % 256; // Green
        buffer[i + 2] = rand() % 256; // Blue
        buffer[i + 3] = 255;          // Alpha
    }
}