Splats

Usage

To trigger multiple random splats accross the canvas call the multipleSplats method. It has an optional amount property to set how many splats to trigger.

simulation.multipleSplats(5);

This will spawn 5 random splats on the canvas.

Specific location

To splat at a specific location you can call the splatAtLocation method. Where x and y are the coordinates in the HTML element where the splat should occur, and dx and dy represent the directional components of the splat's force.

const x = container.clientWidth / 2;
const y = container.clientHeight / 2;
const dx = 0;
const dy = 100;
 
simulation.splatAtLocation(x, y, dx, dy);

This will splat at the center of the canvas with a force of 100 upwards.

Type Table

Examples

Here are some examples on how you can easily replicate behaviour that was built-in in version 0.6.* and below.

Trigger random splats when pressing space

const amount = 5;
 
window.addEventListener('keydown', function (event) {
  if (event.code === 'Space') {
    simulation.multipleSplats(Math.random() * amount * 4 + amount);
  }
});

Trigger splats on initial load

import WebGLFLuidEnhanced from 'webgl-fluid-enhanced';
 
const amount = 10;
const smulation = new WebGLFLuidEnhanced();
 
simulation.start();
 
simulation.multipleSplats(amount);