foldi

Step 5

• Create a System._update() function to iterate over items and update their properties.
• Create System._draw() and System.getCSSText() functions to update items' style properties and render them in the browser's viewport.
• Add requestAnimFrame to create an animation loop.

foldi

Step 4

• Create an Item class.

foldi

Step 3

• Create a System.add() method to add items to World.
• Should throw an Error: Item class does not exist.

foldi

Step 2

• Create a World class.
• Create Utils to hold utility functions.

foldi

Step 1

• Create project files.
• Create System class.
• Should throw an Error: 'undefined' is not a constructor (evaluating 'new exports.World(world)')

foldi

Particle System + Repellers

foldi

Particle System + Attractors

foldi

Particle System

foldi

Camera

In the above example, we have a fixed, third-person perspective of our World. But Flora can also provide a first-person perspective from the point of view of an Agent. Setting 'controlCamera' to 'true' on an agent will force Flora's camera to track that agent. Of course, there can only be one agent controlling the World's Camera.

foldi

A small World

Putting it all together, we can observe Agents navigate a World with multiple Stimuli and Proximity objects.