Creating a noisy voice wave, such as animation in a canvas

Question

I'm trying to get frequent waves on the screen, as if your computer is about to explode. In Photoshop, the concept was created by a noise filter, and then by clicking on the wave filter through the noise to give it a look I created the noise using an element <canvas>, but does anyone have ideas on how to click the waves through the noise or any other way to get this desired effect?

I have 4 jsfiddles examples that can be the starting point: Thanks Ken for these examples:

really close the starting point i found

JSfiddle color noise

JSFiddle bluescreen noise

JSFiddle flickering 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.onresize = resize;

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;
        pr += prs * 1.2;
    }

    ctx.putImageData(idata, 0, 0);
}

var toggle = true;

// added toggle to get 30 FPS instead of 60 FPS
(function loop() {
    toggle = !toggle;
    if (toggle) {
        requestAnimationFrame(loop);
        return;
    }
    noise(ctx);
    requestAnimationFrame(loop);
})();

HTML

<canvas id="canvas"></canvas>

CSS

html, body {
    background:#0000cc;
    margin:0;
}
#canvas {
    position:fixed;
    background:#0000dd;
    opacity: .2;
}

reference question

Answer 1

, , , :

-

// 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);
    }
}

, , , . .

, GPU .

, , . , .., , , .

, "":

0x440000

, ABGR (, Intel).

:

( )

:

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

( , , ).

( ), , - , ( ). .

, !:)