Transforming simplex noise value to color

Question

I am trying to create a 256x256 heightmap using simplex noise. The noise function returns a value between -1 and 1 and this is my current attempt to turn that value into a gray value.

    import { SimplexNoise } from "three/examples/jsm/math/SimplexNoise";

    const ctx = document.createElement("canvas").getContext("2d");
    ctx.canvas.width = 256;
    ctx.canvas.height = 256;

    const simplex = new SimplexNoise();
    for(let y = 0; y < ctx.canvas.width; y++) {
        for(let x = 0; x < ctx.canvas.width; x++) {
            let noise = simplex.noise(x, y);
            noise = (noise + 1) / 2;
            ctx.fillStyle = `rgba(0, 0, 0, ${noise})`;
            ctx.fillRect(x, y, 1, 1)
        }
    }

This does not work and I do not know how to turn the noise value into a valid color to draw onto the canvas. Any help would be apreciated

baldrs · Accepted Answer · 2021-07-08 13:35:49Z

1

You are trying to set opacity of a black color, what you should do is to convert noise to grayscale by setting R G and B components to value from 0 to 255 by treating noise value as percentage, for example by getting it's absolute value and multiplying it by 255 while setting it's opacity to 1:

import { SimplexNoise } from "three/examples/jsm/math/SimplexNoise";

const ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = 256;
ctx.canvas.height = 256;

const simplex = new SimplexNoise();
for(let y = 0; y < ctx.canvas.width; y++) {
    for(let x = 0; x < ctx.canvas.width; x++) {
        let noise = simplex.noise(x, y);
        noise = (noise + 1) / 2;
        let color = Math.abs(noise) * 255;
        ctx.fillStyle = `rgba(${color}, ${color}, ${color}, 1)`;          
        ctx.fillRect(x, y, 1, 1)
    }
}

edited Jul 8, 2021 at 13:35

answered Jul 8, 2021 at 12:50

baldrs

2,1611 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robeart Over a year ago

Thanks this works! Although you made a little typo at fillstyle it should be color not noise.

baldrs Over a year ago

@Ropro yea, I was in a hurry, thanks for pointing that!

Collectives™ on Stack Overflow

Transforming simplex noise value to color

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related