react-webgl-fluid

http://x8bitrain.github.io/react-webgl-fluid

A React implementation of Pavel Dobryakov's 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 <script> 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

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):

yarn start

To lint all JavaScript files in the src folder:

yarn lint

To build static HTML and JS files for production or whatever rly)))

webpack -p