Skip to content

Instantly share code, notes, and snippets.

View index.html
<h1>Audio visualization</h1>
<script>
var numRows = 16, bars = [];
for (var i = 0; i < numRows * 2; i++) {
var bar = document.createElement('meter');
bar.min = -1;
document.body.appendChild(bar);
// Add a newline after each pair of bars.
if (i % 2) document.body.appendChild(document.createElement('br'));
View gist:5281034
/**
* 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;
@foldi
foldi / README.md
Last active Dec 18, 2015
FloraJS - Agent follows mouse
View README.md

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.

@foldi
foldi / README.md
Last active Dec 18, 2015
FloraJS - Simple
View README.md

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 Dec 18, 2015
FloraJS - World update
View README.md

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 Dec 18, 2015
FloraJS - Walker
View README.md

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 Dec 18, 2015
FloraJS - Agent seeks Walker
View README.md

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 Dec 18, 2015
FloraJS - Agents flock to Walker
View README.md

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 Dec 18, 2015
FloraJS - Agents flock to mouse
View README.md

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

@foldi
foldi / README.md
Last active Dec 18, 2015
FloraJS - Proximity liquid
View README.md

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.