CODEWITHSUNDEEP
javascriptprocessingprocessing.js
Voxel
Voxel

Reputation: 74

(ProcessingJS) Pixelating noise

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

Upvotes: -1

Views: 51

Answers (1)

Voxel
Voxel

Reputation: 74

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

Upvotes: 0

Related Questions