Javascript 2D Perlin & Simplex noise functions
JavaScript
1,719
19 commits
updated Nov 2, 2022
This is a simple library for 2d & 3d perlin noise and simplex noise in javascript. Noise is pretty.
The library is pretty fast (10M queries / sec). But its still way slower than using a shader. For example, if you try and update an entire screen's worth of pixels, it'll be slow.
The code is based on Stefan Gustavson's implementation. Do whatever you want with it, etc.
noise.seed(Math.random());
for (var x = 0; x < canvas.width; x++) {
for (var y = 0; y < canvas.height; y++) {
// All noise functions return values in the range of -1 to 1.
// noise.simplex2 and noise.perlin2 for 2d noise
var value = noise.simplex2(x / 100, y / 100);
// ... or noise.simplex3 and noise.perlin3:
var value = noise.simplex3(x / 100, y / 100, time);
image[x][y].r = Math.abs(value) * 256; // Or whatever. Open demo.html to see it used with canvas.
}
}
The library exposes an object called noise with the following properties:
1,957 followers · starred Mar 2013
25,142 followers · starred Jun 2019
2,493 followers · starred Aug 2016
705 followers · starred Feb 2017
Javascript 2D Perlin & Simplex noise functions
JavaScript
1,719
19 commits
updated Nov 2, 2022
This is a simple library for 2d & 3d perlin noise and simplex noise in javascript. Noise is pretty.
The library is pretty fast (10M queries / sec). But its still way slower than using a shader. For example, if you try and update an entire screen's worth of pixels, it'll be slow.
The code is based on Stefan Gustavson's implementation. Do whatever you want with it, etc.
noise.seed(Math.random());
for (var x = 0; x < canvas.width; x++) {
for (var y = 0; y < canvas.height; y++) {
// All noise functions return values in the range of -1 to 1.
// noise.simplex2 and noise.perlin2 for 2d noise
var value = noise.simplex2(x / 100, y / 100);
// ... or noise.simplex3 and noise.perlin3:
var value = noise.simplex3(x / 100, y / 100, time);
image[x][y].r = Math.abs(value) * 256; // Or whatever. Open demo.html to see it used with canvas.
}
}
The library exposes an object called noise with the following properties:
1,957 followers · starred Mar 2013
25,142 followers · starred Jun 2019
2,493 followers · starred Aug 2016
705 followers · starred Feb 2017