(ProcessingJS) 像素化噪声

Question

如标题所述，我想知道如何像素化噪声。我正在使用下面的代码来优化性能：

var totalXoff = 0.0;

var draw = function() {
    background(0, 255, 255);

    if (!this.loadPixels){ return; }
    
    this.loadPixels();
    var pixels=this.imageData.data;
    
    var xoff = 0.0+totalXoff;
    for (var x = 0; x < width; x++) {
        var yoff = 0.0;
        for (var y = 0; y < height/2; y++) {
            var bright = map(noise(xoff, yoff), 0, 1, 0, 255);
            var index = (y * width + x) * 4;
            pixels[index] = bright*2-(y/2*2.55);
            pixels[index + 1] = 255;
            pixels[index + 2] = 255;
            pixels[index + 3] = 255;
            yoff += 0.01;
        }
        xoff += 0.01;
    }
    
    this.updatePixels();
    totalXoff += 0.0025;
};

如何让它像素化？（我打算在我的游戏中使用 pixel-art 风格，所以我不希望云看起来太逼真。）

Answer 1

我想出了怎么做，我只是将它们隔开并使用 rect() 而不是编辑像素来创建“像素化”效果。

代码：

var totalXoff = 0.0;

var draw = function() {
    background(0, 255, 255);

    var xoff = 0.0+totalXoff;
    for (var x = 0; x < width; x+=10) {
        var yoff = 0.0;
        for (var y = 0; y < height/2; y+=10) {
            var bright = map(noise(xoff, yoff), 0, 1, 0, 255);
            fill(bright*2.5-(y/1.5*2.55), 255, 255);
            rect(x, y, 10, 10);
            yoff += 0.01;
        }
        xoff += 0.01;
    }
        
    totalXoff += 0.0025;
};

(ProcessingJS) 像素化噪声

(ProcessingJS) Pixelating noise

javascript

processing

processing.js