Simulating Grass Using Box2D

Someone asked if the FlexJoint introduced in a previous post could be used to simulate grass or other thin filaments.

Building off the existing framework, I will show an example of how it might be done.

While we could just model a few hundred individual blades of grass and call it a day but our processors might have something to say about that.

A more efficient method would be to model only a sparse array of grass blades then fill in the gaps graphically.

A blade of grass is constructed from three thin boxes connected by three RevoluteJoints. These joints are calculated as FlexJoints at every timestep. We clone these stands evenly across the ground.

Tip: You can simulate wind by adding horizontal gravity in the World initialization: var world = new b2World( new b2Vec2( 1, 10 ), true ) 


Try the Demo

To fill-in-the-blanks we use the real filaments as a template. Translating the graphics along the x-axis would not give a natural look as they would be all move in unison.

Calculating the distance between each joint and the centre of the filament gets us a delta value. This delta value can be reduced to minimize the amount of “sway” or subtracted to create a mirror image.


The Result

With only a few copies of the real filaments we get a fairly realistic looking effect at a fraction of the processor cost.


Try the Demo

With optimization and more variance this approach could be a viable low cost alternative to simulating filaments in Box2D.


Leave a Comment