Controls

Drag nodes to affect fabric.

Overview

This simulation is based on a tutorial by Jared Counts. We maintain a grid of nodes connected to their neighbours. As the nodes move, they are kept within a maximum distance from 4 adjacent nodes by running several iterations of a constraints solver. Each timestep, every node is pulled towards the bottom of the canvas to simulate gravity and towards the positive x-direction to simulate wind. By keeping the left column of nodes static, we can create a cloth simulation that looks like a flag flapping in the wind.

Wind

A 2D structure of values is mapped to the nodes of the flag and every timestep we shift the wind values along the fabric. There are two wind modes: uniform and noise. Uniform wind applies a repeating bell curve to the flag. The speed variable determines how quickly a wave passes through the fabric and strength determines the amplitude. The noise wind uses 2D simplex noise from the perlin.js library. Using only the absolute values of the noise, we can create abrupt gusts in the field. The strength variable sets the magnitude of the wind.