Question

我正试图在屏幕上实现选择性波浪，好像，你的计算机即将爆炸。在photoshop中，这个概念是由噪声滤波器创建的，然后通过噪声推动滤波器给它这个外观 noise screen 我用<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

请注意，颜色在小端机器（如Intel CPU）的低级缓冲区中排列为ABGR。

<强>更新

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

Demo (more colors)

唯一改变的是这一行：

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

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

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

希望这有帮助！：）

像帆布中的动画一样创建嘈杂的混沌波

1 个答案:

Live demo

Demo (more colors)