在画布中创建像动画一样的嘈杂杂波

Question

我正在尝试在屏幕上实现混乱的波动，就好像您的计算机即将爆炸一样。在 Photoshop 中，这个概念是由噪声过滤器创建的，然后通过噪声推动一个滤波器以使其具有这种外观 我已经使用<canvas> 元素创建了噪声，但是有人对如何推动一个通过噪音或任何其他方式来获得这种预期的效果？

我有 4 个示例 jsfiddles 可以作为起点： 感谢Ken 提供这些示例：

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.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

要添加波浪，您可以使用以下代码扩展我在那里编写的噪声代码：

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

这里发生的是它首先渲染噪声，然后水平扫描画布并根据或多或少的随机正弦偏移来偏移它们。我们添加到全局变量以对其进行动画处理。

过去切片速度较慢，但​​在支持 GPU 硬件的现代浏览器中，它应该运行得非常快。

我在原始代码和这个版本中使用的所有值都是随机的。只需调整偏移量、大小等，看看是否能得到你想要的结果。

您可以通过更改“alpha”行的最后一部分来更改对比度：

0x440000

请注意，在 little-endian 机器（如 Intel CPU）的低级缓冲区中，颜色按 ABGR 排列。

更新

这是一个更丰富多彩的版本：

Demo (more colors)

唯一改变的是这一行：

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

（我相信它可以在很多方面进行改进，但只是玩弄它）。

看到有问题的新链接（起点） - 它与我想象的（基于发布的图像）有很大不同。你需要一种完全不同的方法。

希望这会有所帮助！ :)