As the title states, I want to know how to pixelate noise. I am using the code below to optimize performance:
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;
};
How would I make it pixelated? (I am going for a pixel-art style in my game, so I don't want the clouds to look too realistic.)
I figured out how to do it, I simply spaced them out and used rect() instead of editing the pixels to create that "pixelated" effect.
Code:
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;
};