Skip to content

Instantly share code, notes, and snippets.

@foldi
foldi / README.md
Last active December 18, 2015 09:49
FloraJS - Sensor + Stimulus

Sensors and Stimuli

Agents can carry an unlimited amount of Sensors that react to Flora's Stimulus types. The following Stimulus types are available:

  • Cold
  • Heat
  • Food
  • Light
  • Oxygen
@foldi
foldi / README.md
Last active December 18, 2015 09:49
FloraJS - Proximity liquid

Proximity

FloraJS has some built in Proximity objects that exert a force on Agents that come in direct contact or land within the object's range of influence.

  • Liquid
  • Attractor
  • Repeller

In the example below, we create a Liquid object and an Agent that follows the mouse. You can click and drag to place the Liquid anywhere in the World. Use your mouse to make the Agent pass through the Liquid.

@foldi
foldi / README.md
Last active December 18, 2015 09:49
FloraJS - Agents flock to mouse

In the example below, Agents flock to the mouse. We've also adjusted the 'width' and 'height' properties.

@foldi
foldi / README.md
Last active December 18, 2015 09:49
FloraJS - Agents flock to Walker

Flocking

Agents can also organize in flocks. The following properties affect flocking behavior.

  • flocking {boolean} default: false
  • desiredSeparation {number} default: width * 2
  • separateStrength {number} default: 0.3
  • alignStrength {number} default: 0.2
  • cohesionStrength {number} default: 0.1
@foldi
foldi / README.md
Last active December 18, 2015 09:49
FloraJS - Agent seeks Walker

Targets

In the Agent example above, the Agent targeted the mouse. By saving a reference to a new Walker and passing at as a 'seekTarget' for a new Agent, we can make the Agent seek the Walker.

@foldi
foldi / README.md
Last active December 18, 2015 09:49
FloraJS - Walker

Walkers

Walkers are a step down on the evolutionary chain from Agents. They have no seeking, steering or directional behavior and just randomly explore their World. Use Walkers to create wandering objects or targets for Agents to seek.

Walkers carry two properties that directly affect how they 'walk'.

  • isPerlin {boolean} default: true
  • isRandom {boolean} default: false

By default, Walkers use an algorithm called Perlin Noise (http://en.wikipedia.org/wiki/Perlin_noise) to navigate their World. Below is an example.

@foldi
foldi / README.md
Last active December 18, 2015 09:49
FloraJS - World update

The System and its Worlds

Every Flora system starts with one System and one World. While a System may have many Worlds, by default, Flora's system uses the <body> as the only World.

In the example above, immediately after the system starts, a Agent is created and appended to the World (or <body>).

Worlds carry two properties that directly affect their elements.

  • gravity {Vector} default: new Vector(0, 1)
  • c (coefficient of friction) {number} 0.01
@foldi
foldi / README.md
Last active December 18, 2015 09:49
FloraJS - Simple

Simple System

FloraJS has two major components, a set of classes for elements in a natural system, and a renderer called Burner to draw those elements to the DOM.

To setup a simple Flora system, reference the Burner and Flora .js files from scripts tag in the <head> of your document. Also, reference the Burner and Flora .css files from link tags.

In the body, add a <script> tag and create a new system. Pass the system a function that describes the elements in your world.

You should see a block fall and bounce off the bottom of your browser window.

@foldi
foldi / README.md
Last active December 18, 2015 09:49
FloraJS - Agent follows mouse

Agents

Agents are basic Flora elements that respond to forces like gravity, attraction, repulsion, etc. They can also chase after other Agents, organize with other Agents in a flocking behavior, and steer away from obstacles.

Agents are highly configurable. For a complete list of options see the docs at http://www.florajs.com/docs/symbols/Agent.html

For an example of the Agent's seek behavior, set 'followMouse' to 'true' when creating the Agent.

/**
* Randomly reorders the contents of an array in place.
* @author blixt (https://github.com/blixt)
* @param {Array.<Object>} arr An array.
* @returns {Array.<Object>} The same array that was passed in,
* now shuffled.
*/
function shuffleArray(arr) {
var i, j, item;