site logo
LIAM AXON

Blanketball

Jun 17, 2021
tags: gadget, coding, simulation, threejs

This project is a natural extension of my previous project of simulating a ball and string. It uses the same simulation techniques, but applies them to a square of frabtic instead of a line of rope. The fabric and the spheres are simulated as a collection of "vertices" that satisfy a system of constraints. Even collision detection is represented as a constraint between vertices. This makes for a common framework that simplifies the code. You can interact with the balls by clicking them, and play with the settings!

In this project, I discovered the limitations of the Jakobsen method for fixing the constraints. The Jakobsen method iteratively improves how well a scene follows a system of constraints, but it may require a large number of iterations, or "passes", to do so. For example, while the fabric should start out taut, it actually sags a bit under the weight of gravity. This means that the constraints that define the fabric are not completely satisfied. Play around with "constraint passes" setting, and notice how the fabric becomes more slack when you decrease the number of constraint passes.

Another setting that requires a bit of explanation is the "time step" of the simulation. This is how much (game) time passes each time the simulation updates. The smaller the time step, the more accurate the simulation. If the simulation is causing problems on your browser, a larger time step might fix this. The physics are implemented with a constant time step in mind, so the scene may react strangely when the time step is changed.

Click here to open the gadget.

screenshot of gadget