p5.js中的梯度嘈杂问题

Question

目标

在插图和其他平面设计作品中，经常可以看到两种颜色之间的渐变效果，通过添加噪点/噪声来产生特殊的效果（尤其是示例3）。

我的研究表明，在Illustrator等软件中有许多解决方案可以实现这种效果，但我想使用p5js或vanilla js画布重新创建它。

(来源: https://medium.com/@stefanhrlemann/how-to-create-noisy-risograph-style-gradients-and-textures-in-photoshop-in-3-ways-394d6012a93a)

我的尝试

我已经尝试创建渐变并在其上使用像素数组设置特定颜色的随机噪声，但只能部分地达到所需效果:

function draw() {
    setGradient(0, 0, width, height, color(0, 0, 0), color(255, 255 ,255));
    setNoise();
}

function setNoise() {
    loadPixels();
    for (let x = 0; x < width; x++ ) {
        for (let y = 0; y < height; y++ ) {
            if (random(1) > 0.9) {
                const index = (x + y * width) * 4;
                pixels[index] = 255;
                pixels[index + 1] = 255;
                pixels[index + 2] = 255;
                pixels[index + 3] = 255;
            }
        }
    }
    updatePixels();
}

function setGradient(x, y, w, h, c1, c2) {
    noFill();
    for (let i = y; i <= y + h; i++) {
        let inter = map(i, y, y + h, 0, 1);
        let c = lerpColor(c1, c2, inter);
        stroke(c);
        line(x, i, x + w, i);
    }
}

你觉得呢？这是正确的方法还是有更好/更简单的解决方案？

- iamrobin.

Answer 1

您需要将噪声与渐变混合。您不能直接混合 ImageData，您需要先将其转换为位图（可以放在画布上）。因此，您可能更喜欢您的教程中提到的 覆盖 混合方法，而是选择 强光 混合方法，它会反转我们图层的顺序。

const w = 300;
const h = 300;
const canvas = document.getElementById( 'canvas' );
const ctx = canvas.getContext( '2d' );
// some colored noise
const data = Uint32Array.from( {length: w*h }, () => Math.random() * 0xFFFFFFFF );
const img = new ImageData( new Uint8ClampedArray( data.buffer ), w, h );

ctx.putImageData( img, 0, 0 );
// first pass to convert our noise to black and transparent
ctx.globalCompositeOperation = "color";
ctx.fillRect( 0, 0, w, h );

ctx.globalCompositeOperation = "hard-light";
ctx.fillStyle = ctx.createLinearGradient( 0, 0, 0, h );
ctx.fillStyle.addColorStop( 0.1, 'white' );
ctx.fillStyle.addColorStop( 0.9, 'black' );
ctx.fillRect( 0, 0, w, h );

canvas { background: lime; }

<canvas id="canvas" height="300"></canvas>

但是混合需要你有一个不透明的场景。如果你想要透明度，那么你必须使用合成：

const w = 300;
const h = 300;
const canvas = document.getElementById( 'canvas' );
const ctx = canvas.getContext( '2d' );
// some black and transparent noise
const data = Uint32Array.from( {length: w*h }, () => Math.random() > 0.5 ? 0xFF000000 : 0 );
const img = new ImageData( new Uint8ClampedArray( data.buffer ), w, h );

ctx.putImageData( img, 0, 0 );

ctx.fillStyle = ctx.createLinearGradient( 0, 0, 0, h );
ctx.fillStyle.addColorStop( 0.1, 'transparent' );
ctx.fillStyle.addColorStop( 0.9, 'black' );
// apply transparency gradient on noise (dim top)
ctx.globalCompositeOperation = "destination-in";
ctx.fillRect( 0, 0, w, h );
// apply black of the gradient on noise (darken bottom)
ctx.globalCompositeOperation = "multiply";
ctx.fillRect( 0, 0, w, h ); 

// optionally change the color of the noise
ctx.globalCompositeOperation = "source-atop";
ctx.fillStyle = "red";
ctx.fillRect( 0, 0, w, h );

canvas { background: lime; }

<canvas id="canvas" height="300"></canvas>

- Kaiido

---

这正是我一直在寻找的。单独的话，我永远想不出这个解决方案。非常感谢。 - iamrobin.