https://github.com/x8bitrain/react-webgl-fluid
Pavel Dobryakov's WebGL Fluid Simulation as a React Component
https://github.com/x8bitrain/react-webgl-fluid
Last synced: 10 months ago
JSON representation
Pavel Dobryakov's WebGL Fluid Simulation as a React Component
- Host: GitHub
- URL: https://github.com/x8bitrain/react-webgl-fluid
- Owner: x8BitRain
- Created: 2019-11-04T15:30:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T07:00:11.000Z (over 3 years ago)
- Last Synced: 2024-05-29T06:42:44.948Z (about 2 years ago)
- Language: JavaScript
- Homepage: http://x8bitrain.github.io/react-webgl-fluid
- Size: 563 KB
- Stars: 9
- Watchers: 3
- Forks: 5
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-webgl-fluid
http://x8bitrain.github.io/react-webgl-fluid
A React implementation of [Pavel Dobryakov's WebGL Fluid Simulation](https://github.com/PavelDoGreat/WebGL-Fluid-Simulation) as a component, not only is it a fun simulation to play with but when tweaked the settings to be less resource intensive and lower resolution, the simulation can be a cool UI element you could add to something like a navbar or page background like this: https://btr.pm/projects/
# How it works
Not a rewrite of the original script but just a basic, easy to use React component that adds a `` tag containing a modified version of the original when the component mounts, the script then hooks into a `<canvas>` component generated by React, then it renders the Fluid sim.
You can edit the simulation settings on line 28 of fluid-init.js [https://github.com/x8BitRain/react-webgl-fluid/blob/master/assets/js/fluid-init.js#L4](https://github.com/x8BitRain/react-webgl-fluid/blob/master/assets/js/fluid-init.js#L28)
# Main changes
The modifications to the original Fluid WebGL script are as follows:
- Removed code that initializes the control panel for changing the sim settings.
- Absolute paths to .png resources.
- Name of the canvas element the scripts hooks into from
`document.getElementsByTagName('canvas')[0];`
to
`document.getElementsByClassName('fluid-canvas')[0];`
- Altered sim configuration to be lower res and density, also background is white now.
- Inline style as a states so you can change the dimensions of the canvas on the fly with React.
## react-boilerplate
Build using a simple React boilerplate from Lewagon configured with:
- React, ReactDOM
- Webpack 4
- Babel with es2015 and react presets
- `.js` or `.jsx`
- main `application.scss` stylesheet is imported in `index.js` as a module to enjoy hot reloading
## Scripts
To start the local Webpack Dev Server (usually on port `8080`):
```bash
yarn start
```
To lint all JavaScript files in the `src` folder:
```bash
yarn lint
```
To build static HTML and JS files for production or whatever rly)))
```bash
webpack -p
```