https://github.com/mo2men-dev/flow-field-javascript
An Implementation of the Flow Field Using Perlin Noise In Javascript Displayed in HTML Canvas.
https://github.com/mo2men-dev/flow-field-javascript
Last synced: about 1 month ago
JSON representation
An Implementation of the Flow Field Using Perlin Noise In Javascript Displayed in HTML Canvas.
- Host: GitHub
- URL: https://github.com/mo2men-dev/flow-field-javascript
- Owner: Mo2men-dev
- Created: 2022-09-28T00:45:24.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-30T16:21:06.000Z (over 3 years ago)
- Last Synced: 2025-01-26T08:41:43.661Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://perlin-noise-flowfield.netlify.app/
- Size: 20.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Perlin Noise - Flowfield
## Demo
https://perlin-noise-flowfield.netlify.app/
## Description
This is a simple implementation of the Flowfield using Perlin Noise and Javascript.
## How To Use
To play around with the code :
1. Clone the Repo:
```
git clone https://github.com/Mo2men-dev/flow-field-javascript
```
2. Run `yarn` or `npm install` in the terminal.
3. Run the server
## Modules
- [The Vector module](https://gist.github.com/jjgrainger/808640fcb5764cf92c3cad960682c677)
## Dependencies
- [@chriscourses/perlin-noise](https://www.npmjs.com/package/@chriscourses/perlin-noise)
## Resources
These are videos that helped out a lot and good if you want to understand how it all works .
- [Coding Challenge #24: Perlin Noise Flow Field](https://www.youtube.com/watch?v=BjoM9oKOAKY)
- [The Beauty of Code: Flow Fields](https://www.youtube.com/watch?v=na7LuZsW2UM)
- [I.2: Introduction - Perlin Noise and p5.js Tutorial](https://www.youtube.com/watch?v=Qf4dIN99e2w)
- [Perlin Flow Fields in JavaScript + P5js](https://www.youtube.com/watch?v=sZBfLgfsvSk)