https://github.com/sya-ri/simplex-noise-demo
A web app for trying out texture generation using simplex-noise
https://github.com/sya-ri/simplex-noise-demo
chakra-ui perlin-noise react recoil simplex-noise typescript vite web-app
Last synced: 30 days ago
JSON representation
A web app for trying out texture generation using simplex-noise
- Host: GitHub
- URL: https://github.com/sya-ri/simplex-noise-demo
- Owner: sya-ri
- License: mit
- Created: 2022-06-27T03:02:50.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-08T22:38:56.000Z (over 3 years ago)
- Last Synced: 2025-02-21T14:49:41.629Z (over 1 year ago)
- Topics: chakra-ui, perlin-noise, react, recoil, simplex-noise, typescript, vite, web-app
- Language: TypeScript
- Homepage: https://gh.s7a.dev/simplex-noise-demo
- Size: 1.51 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# simplex-noise-demo
A web app for trying out texture generation using simplex-noise.
Thanks to [jwagner/simplex-noise.js](https://github.com/jwagner/simplex-noise.js) ❤️
## What's simplex-noise?
> Simplex noise is the result of an n-dimensional noise function comparable to Perlin noise ("classic" noise) but with fewer directional artifacts and, in higher dimensions, a lower computational overhead.
>
> https://en.wikipedia.org/wiki/Simplex_noise
> Perlin noise is a procedural texture primitive, a type of gradient noise used by visual effects artists to increase the appearance of realism in computer graphics. The function has a pseudo-random appearance, yet all of its visual details are the same size. This property allows it to be readily controllable; multiple scaled copies of Perlin noise can be inserted into mathematical expressions to create a great variety of procedural textures. Synthetic textures using Perlin noise are often used in CGI to make computer-generated visual elements – such as object surfaces, fire, smoke, or clouds – appear more natural, by imitating the controlled random appearance of textures in nature.
>
> https://en.wikipedia.org/wiki/Perlin_noise
## Web app
[https://gh.s7a.dev/simplex-noise-demo](https://gh.s7a.dev/simplex-noise-demo)
It uses Math.random, so you'll see a similar but different texture each time you load the page.
You can also regenerate it with the reload icon.
Press the gear icon to open the settings screen.
## Behavior overview
Several files are in the src folder, but you can understand simplex-noise texture generation by reading [NoisePreview.tsx](src/components/NoisePreview.tsx).
```tsx
export type NoisePreviewProps = {
width: number
height: number
stepX: number
stepY: number
cellWidth: number
cellHeight: number
simplex: SimplexNoise
}
const NoisePreview: FC = ({ width, height, stepX, stepY, cellWidth, cellHeight, simplex }) => {
return (
{Array.from({ length: height }, (_y, y) => (
{Array.from({ length: width }, (_x, x) => {
// Convert a value from -1 to 1 to 0 to 1.
// After that, multiply 0 to 1 by 100 and convert to a percentage.
const noise = simplex.noise2D(x * stepX, y * stepY)
return (
)
})}
))}
)
}
```
1. Generate a two-dimensional array by `width` and `height`.
2. Run `simplex.noise2D(x * stepX, y * stepY)` with indexes `x` and `y`.
3. `simplex#noise2D` returns one of the value -1 to 1.
4. Convert the value from 0 to 1 with `(noise + 1) / 2.0`.
5. hsl needs a percentage, so multiply by 100.
## License
This web app is released under the MIT License, see [LICENSE](LICENSE).