Creating noisy choatic wave like animations in canvas

Question

I'm trying to achieve choatic waves on the screen as if, your computer was about to explode. In photoshop, the concept was created by a noise filter and then pushing a wave filter through the noise to give it this appearance I've created the noise using `<canvas>` element but would anyone have any ideas on how to push a wave through the noise or any other way to get this desired effect? I have 4 example jsfiddles that could be a starting point: Thanks to Ken for these examples: really close starting point that i found JSfiddle Color noise JSFiddle bluescreen noise JSFiddle flicker blue noise JS: ``` var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); // a variant using fixed canvas size but strecthes the result. // emulates interference/bad reception // using a different "noise" algo canvas.width = canvas.height = 256; function resize() { canvas.style.width = window.innerWidth + 'px'; canvas.style.height = window.innerHeight + 'px'; } resize(); window.onresi…

Accepted Answer

To add waves you could extend the noise code I wrote there with the following:

Live demo

```
// add a var to global/parent scope
var offset = 0;

// modify method like this:
function noise(ctx) {

var w = ctx.canvas.width,
        h = ctx.canvas.height,
        idata = ctx.getImageData(0, 0, w, h),
        buffer32 = new Uint32Array(idata.data.buffer),
        len = buffer32.length,
        i = 0,
        pr = 456 * Math.random(),
        prs = 716 * Math.random();;

for(; i < len;) {
        buffer32[i++] = (((pr % 255)|0) << 24) | 0x440000;
        pr += prs * 1.2;
    }

ctx.putImageData(idata, 0, 0);
    
    // wave (utilizes GPU in modern browsers)
    for(i = 0; i < w; i += 2) {
        var y = i * Math.sin((i + (offset++)) /100);
        ctx.drawImage(ctx.canvas, i,0, 1, h,  i, y, 1, h);
    }
}
```

What happens here is that it renders first the noise, then it scans the canvas horizontally and offset them based on a more or less random sinus offset. We add to the global variable to animate it.

The slicing used to be slower in the past but in modern browsers with GPU hardware support this should run pretty fast.

All the values I used in the original code and this version are pretty much random. Just play around with offsets, sizes etc. to see if you get the result you are after.

You can change contrast by altering the last part on the "alpha" line:

```
0x440000
```

Just note that colors are arranged as ABGR in low-level buffers on little-endian machines (like the Intel CPU).

Update

Here is a more colorful version:

Demo (more colors)

The only thing changed is this line:

```
buffer32[i++] = (((pr % 255)|0) << 24) | 0x770000 + (Math.random() * 16777216)|0;
```

(I am sure it can be improved in many ways, but just play around with it).

Saw the new link (starting point) in question - it's quite a bit different than what I imagined (based on the posted image). You would need an entirely different approach for that..

Hope this helps! :)

Creating noisy choatic wave like animations in canvas

Solution

Problem