'WebGL Fluid Simulation' where you can freely create colorful light vortices on the browser and observe the movement of the fluid

' WebGL Fluid Simulation ', developed as open source and released

under the MIT license on GitHub, uses WebGL to display three-dimensional computer graphics on a web browser, and it is possible to create multicolored complex vortices by fluid simulation. Tool to draw patterns on web browser. You can make as many swirls of light as you like for free.

WebGL Fluid Simulation

GitHub-Pavel Do Great / WebGL-Fluid-Simulation: Play with fluids in your browser (works even on mobile)

In 'WebGL Fluid Simulation', you can see what kind of light swirl can actually be created by looking at the following movie.

Create a swirl of light with 'WebGL Fluid Simulation'-YouTube

This is what you get when you access WebGL Fluid Simulation .

When you click it, a ball of light appears ...

If you drag on the browser as it is, a colorful light vortex will be emitted from the coordinates where the mouse pointer is drawn to draw a complex marble pattern.

By operating the numerical value, slide bar and check button from the menu at the upper right, you can freely adjust the light vortex to your liking. The adjustment elements in the menu are as follows.
・ Sim resolution (resolution of simulation)
・ Dye resolution (color resolution)
・ Density diffusion
・ Velocity diffusion (directional diffusion)
・ Pressure diffusion
・ Vorticity (vortex strength)
Splat radius
・ Shading (shading)
・ Colorful (color)
-Paused (pause)
・ Random splat (spatter randomly)
・ Bloom (light)
・ Capture

For example, when I set the density diffusion to 1 as the maximum, the density of light particles has increased dramatically, and the shape of the vortex disappears due to excessive glare.

When the vorticity is set to 0, no small vortex is created at all, so a round light ball appears. It's like a jellyfish swimming in the sea, which is mysterious.

The colorful check box is on by default, but turning it off will make the color of the vortex a single color. The color of the vortex changes little by little with each click.

If you select the paused checkbox, the sphere of light that appears when you click will not swirl and will stay that way. For example, after writing 'G' as shown in the following image,

Clicking again on the paused checkbox unchecked, the 'G' turned into a whirlpool in an instant.

Random splat is something that multiple light spheres appear on the screen with every click and become a vortex.

If you uncheck the 'enabled' check box from Bloom, the glow of the light will disappear and you can enjoy only the color swirl.

In Capture, you can change the 'background color' from the color palette. The image below shows the background color changed from the default black to red.

You can also make the background transparent by clicking on 'Transpared' in Capture. If it is read by an image processing tool such as Photoshop, it can be expected to be applied as an effect material.

If you want to save the created whirlpool screen, you can save it as a PNG format image by clicking 'Take Screenshot' from Capture.

In addition, access was possible from the browser of the smartphone, and it was possible to create a whirlpool freely by tapping or swiping with a finger instead of clicking. However, since the screen of a smartphone is smaller than that of a PC, it has been difficult to make complex and colorful swirl patterns.

In addition, you can see how the generation of the vortex changes significantly by moving the numerical value and the slide bar from the upper right, so please make sure to touch it yourself.

in Review,   Web Application, Posted by log1i_yk