(ProcessingJS) Pixelating noise

Question

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

We are unable to help with "how to..." or "how do I...", we can help you fix errors, but we cannot provide you research - that's a you job :) — Can O' Spam, May 06 '22 at 14:47
@CanO'Spam Literally everybody posts how-to questions; when I scroll through 30 questions, only 5 or 6 of them are asking for help with errors. Being realistic, asking how to do something specific is the whole point of StackOverflow. — Voxel, May 06 '22 at 15:00
How to's tend to attract downvotes and get flagged requiring details or clarity, focus, debug details etc. - we are here to help fix issues, not to write and provide detailed FAQ's on topics, we are here to help fix errors in your code, but we cannot (and at least shouldn't for free) spend valuable time, possible hours, writing these FAQ's and documentations — Can O' Spam, May 06 '22 at 15:04
Double checking what I was saying to make sure I'm not providing incorrect information; [the tour](https://stackoverflow.com/tour) would suggest that the question you have asked is indeed off-topic for SO as you show what you have, but ask about an addition to it (`How would I make it pixelated?`) - this could be on topic, if you provide the code you have done to attempt this which is not working, but as it stands, that code is not there and as such `Don't ask about... Questions you haven't tried to find an answer for (show your work!)` I'm afraid fits here — Can O' Spam, May 06 '22 at 15:11
Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, May 06 '22 at 17:54
If my memory serves me well, a basic blur is just an averaging the values of several pixels in close proximity. You already know how to use the `pixels` array. You need to create a similar array and a method that fills the new array with blurred values, then load this array instead of the first one (or some variation on this method). Does that makes sens to you? Also, if you're blurring images while drawing them, yeah you'll drain your cpu, but if your images are static (like a cloud drawing) you can pixelate it once and re-use the pixelated one in every frame, thus calculating it only once. — laancelot, May 08 '22 at 00:19
Note that, as noted in the tag for Processing.js, this library doesn't exist anymore: I archived it in December of 2018. Don't use it for new projects, use something like p5js instead. — Mike 'Pomax' Kamermans, May 11 '22 at 00:49

score 0 · Accepted Answer · answered May 09 '22 at 20:31

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

(ProcessingJS) Pixelating noise

1 Answers1