Noisejs
Javascript 2D Perlin & Simplex noise functions
Install / Use
/learn @josephg/NoisejsREADME
NOISE!
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.
How to make noise:
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:
- simplex2(x, y): 2D Simplex noise function
- simplex3(x, y, z): 3D Simplex noise function
- perlin2(x, y): 2D Perlin noise function
- perlin3(x, y, z): 3D Perlin noise function
- seed(val): Seed the noise functions. Only 65536 different seeds are supported. Use a float between 0 and 1 or an integer from 1 to 65536.
Related Skills
node-connect
347.0kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
107.8kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
347.0kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
347.0kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
