Better example image

[linonetwo]

It is known that simplex noise is used in landscape generation. But your example image looks rather like a white noise.

Can you change it to a better image, so game developers can trust this lib is for them?

[linonetwo]

https://stackblitz.com/edit/open-simplex-noise-example?file=index.js

(noise3D(x / 50, y / 50, 0) + 1) * 128;

I found passing x y as non-integer, will result in a good image. Why? Shouldn't it be int?

[linonetwo]

So the example should be

import { makeNoise3D } from "open-simplex-noise";

const [width, height] = [300, 300];
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(width, height);
const noise3D = makeNoise3D(2);

for (let x = 0; x < width; x++) {
  for (let y = 0; y < height; y++) {
    const i = (x + y * width) * 4;
    const value = (noise3D(x / 50, y / 50, 0) + 1) * 128;
    imageData.data[i] = value;
    imageData.data[i + 1] = value;
    imageData.data[i + 2] = value;
    imageData.data[i + 3] = 255;
  }
}
ctx.putImageData(imageData, 0, 0);

[joshforisha]

Hi, thanks for the issue. Yes, it's true that this type of noise generation is often used for things like landscape generation, as well as many other applications. What you're describing in this issue and #8 is an application more about fractal noise, which involves scaling (what you're doing with x / 50 and y / 50) and adding layers together with various parameters to get different results.

I've authored another library, joshforisha/fractal-noise-js (NPM: fractal-noise), focused on supplying fractal functions for that type of application. It's intended to be used independently of any specific underlying noise generation algorithm, however, hence the separation of this library from that.

Having said all that, I think you're right about providing an example for this application—or at least details I've mentioned here—so I'll be expanding the README soon.

[linonetwo]

Wow, that looks exactly what I want. I didn't know about this, I thought that effect on the right can only get from Perlin noise.
Seems you can get that from simple ValueNoise...

So I can use it like this?

import { makeNoise3D } from "open-simplex-noise";

makeCylinderSurface(width, height, makeNoise3D, { frequency: 0.04, octaves: 2 })

[linonetwo]

Got it, use it like https://stackblitz.com/edit/open-simplex-noise-example-fractal?file=index.js

import { makeNoise3D } from "open-simplex-noise";
import { makeCylinderSurface } from "fractal-noise";

const [width, height] = [300, 300];
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(width, height);
const noise3D = makeNoise3D(0);

const data = makeCylinderSurface(width, height, noise3D, { frequency: 0.04, octaves: 2 })

for (let x = 0; x < width; x++) {
  for (let y = 0; y < height; y++) {
    const i = (x + y * width) * 4;
    const value = (data[x][y] + 0.5) * 128;
    imageData.data[i] = value;
    imageData.data[i + 1] = value;
    imageData.data[i + 2] = value;
    imageData.data[i + 3] = 255;
  }
}
ctx.putImageData(imageData, 0, 0);

[linonetwo]

This looks very promising, thank you for making this!