2014-03-10 03:57:59 +00:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
2014-08-17 03:23:48 +00:00
< title > terra.js< / title >
< link rel = "stylesheet" href = "main.css" >
< link href = 'http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel = 'stylesheet' type = 'text/css' >
2014-03-10 03:57:59 +00:00
< / head >
< body >
2014-08-17 03:23:48 +00:00
< div class = "fullPage splash" >
< div class = "vcent" > < / div >
< header id = "header" >
< h1 > terra.js < span > alpha< / span > < / h1 >
< p > A JavaScript framework for simple biological simulations and cellular automata.< / p >
2014-08-21 08:07:30 +00:00
< a data-scroll href = "#main" id = "scroller1" class = "downArrow" > ⬇< / a >
2014-08-17 03:23:48 +00:00
< / header >
< / div >
< nav >
< ul >
< li > < a data-scroll href = "#usage" > Usage< / a > < / li >
< li > < a data-scroll href = "#examples" > Examples< / a > < / li >
< li > < a data-scroll href = "#options" > Options< / a > < / li >
< li > < a data-scroll href = "#methods" > Methods< / a > < / li >
< li > < a href = "https://github.com/rileyjshaw/terra" > GitHub< / a > < / li >
< / ul >
< / nav >
< div id = "main" class = "main" >
< p > terra is a < strong > super customizable< / strong > framework for creating and analyzing biological simulations. It's open-source and licenced under MIT.< / p >
2014-08-17 06:23:48 +00:00
2014-08-17 03:23:48 +00:00
< h2 id = "usage" > Usage< / h2 >
2014-08-17 06:23:48 +00:00
< h3 > Including terra< / h3 >
< p > Getting started is as easy as including the script!< / p >
< pre > < code class = "language-markup" > < script src="path/to/terra.min.js"> < /script> < / code > < / pre >
< p > terra can also be used as a module with most popular module systems. < a class = "question" target = "_blank" href = "https://github.com/umdjs/umd" > ?< / a > < / p >
< h3 > Creating creatures< / h3 >
2014-08-21 08:07:30 +00:00
< p > Let's create a simple creature using the creatureFactory. Each creature requires a type.< / p >
2014-08-17 06:23:48 +00:00
< pre > < code class = "language-javascript" > terra.creatureFactory.register({
type: 'firstCreature'
});< / code > < / pre >
< p > This creature is valid, but it's pretty boring. To make a more interesting creature, let's override some of the default < a data-scroll href = "#options" > options< / a > and < a data-scroll href = "#methods" > methods< / a > .< / p >
< pre > < code class = "language-javascript" > terra.creatureFactory.register({
2014-08-17 03:23:48 +00:00
type: 'secondCreature',
2014-08-21 08:07:30 +00:00
color: [120, 0, 240],
sustainability: 6,
reproduceLv: 1
2014-08-17 06:23:48 +00:00
});< / code > < / pre >
2014-08-21 08:07:30 +00:00
< p > We've just created a purple creature that only eats if 6 or more plants are around it. These creatures basically seek out an edge or corner and die there.< / p >
2014-08-17 06:23:48 +00:00
2014-08-21 08:07:30 +00:00
< h3 > Creating the environment< / h3 >
< p > To run a simulation, we'll need to create an environment. Let's make a 25x25 grid, populate 10% of the space with our lonely purple creature, and fill the rest with simple plants.< / p >
< pre > < code class = "language-javascript" > var ex1 = new terra.Terrarium(25, 25, 'ex1');
ex1.populate([['secondCreature', 10], ['simplePlant', 90]]);< / code > < / pre >
2014-08-17 06:23:48 +00:00
2014-08-21 08:07:30 +00:00
< h3 > Running a simulation< / h3 >
2014-08-17 06:23:48 +00:00
2014-08-21 08:07:30 +00:00
< p > Terrariums have a few methods that allow you to interact with the simulation. Let's animate it and see how it does for the first 300 steps.< / p >
< pre id = "ex1End" > < code class = "language-javascript" > ex1.animate(300);< / code > < / pre >
2014-08-17 03:23:48 +00:00
2014-08-21 08:07:30 +00:00
< p > That's all there is to it! Though it's possible to generate complex behaviours by simply overriding default values, the real fun comes when you realize that < a data-scroll href = "#" > the creature constructor is fully customizable< / a > ...< / p >
2014-08-17 03:23:48 +00:00
< h2 id = "examples" > Examples< / h2 >
2014-08-17 06:23:48 +00:00
2014-08-17 03:23:48 +00:00
< h3 id = "gol" > Conway's Game of Life < a class = "question" target = "_blank" href = "http://en.wikipedia.org/wiki/Conway's_Game_of_Life" > ?< / a > < / h3 >
2014-08-17 06:23:48 +00:00
< pre > < code class = "language-javascript" > terra.creatureFactory.register({
type: 'GoL',
colorFn: function () { return this.alive ? this.color + ',1' : '0,0,0,0'; },
wait: function () {},
isDead: function () { return false; },
queue: function (neighbors) {
var surrounding = _.filter(neighbors, function (spot) {
return spot.creature.alive;
}).length;
2014-08-21 08:07:30 +00:00
this.alive = surrounding === 3 || surrounding === 2 & & this.alive;
2014-08-17 06:23:48 +00:00
return false;
}
}, function () {
2014-08-21 08:07:30 +00:00
this.alive = Math.random() < 0.5;
2014-08-17 06:23:48 +00:00
});< / code > < / pre >
2014-08-17 03:23:48 +00:00
2014-08-21 08:07:30 +00:00
< h3 id = "cyclic" > Cyclic Cellular Automaton < a class = "question" target = "_blank" href = "http://en.wikipedia.org/wiki/Cyclic_cellular_automaton" > ?< / a > < / h3 >
2014-08-17 06:23:48 +00:00
< pre > < code class = "language-javascript" > terra.creatureFactory.register({
type: 'cyclic',
2014-08-21 08:07:30 +00:00
colors: ['255,0,0,1', '255,96,0,1', '255,191,0,1', '223,255,0,1', '128,255,0,1', '32,255,0,1', '0,255,64,1', '0,255,159,1', '0,255,255,1', '0,159,255,1', '0,64,255,1', '32,0,255,1', '127,0,255,1', '223,0,255,1', '255,0,191,1', '255,0,96,1'],
2014-08-17 06:23:48 +00:00
colorFn: function () { return this.colors[this.state];},
wait: function () {},
isDead: function () { return false; },
queue: function (neighbors) {
2014-08-21 08:07:30 +00:00
var next = (this.state + 1) % 16;
2014-08-17 06:23:48 +00:00
var changing = _.some(neighbors, function (spot) {
return spot.creature.state === next;
});
if (changing) this.state = next;
}
}, function () {
2014-08-21 08:07:30 +00:00
this.state = Math.floor(Math.random() * 16);
2014-08-17 06:23:48 +00:00
});< / code > < / pre >
2014-08-17 03:23:48 +00:00
2014-08-21 08:07:30 +00:00
< h2 id = "options" > Default Options< / h2 >
< p > The following options can be passed in an object to terra.creatureFactory.register( ) as the first argument.< / p >
2014-08-17 03:23:48 +00:00
< h3 > Required< / h3 >
2014-08-21 08:07:30 +00:00
< ul class = "defaults" >
< li >
< h4 > < span class = "token keyword" > string< / span > type< / h4 >
< p > Creature type, to be used later in < a data-scroll href = "#populate" class = "token function" > populate( )< / a > .< / p >
< / li >
2014-08-17 03:23:48 +00:00
< / ul >
< h3 > Optional< / h3 >
2014-08-21 08:07:30 +00:00
< ul class = "defaults" >
< li >
< h4 > < span class = "token keyword" > int [3]< / span > color< / h4 >
< p > RGB components of a creature's display color.< / p >
< ul >
< li > Range: [0, 255]< / li >
< li > Default: random< / li >
< / ul >
< / li >
< li >
< h4 > < span class = "token keyword" > float< / span > initialEnergy< / h4 >
< p > Energy level that a creature has at the start of its life.
< ul >
< li > Range: (0, maxEnergy]< / li >
< li > Default: 50< / li >
< / ul >
< / li >
< li >
< h4 > < span class = "token keyword" > float< / span > maxEnergy< / h4 >
< p > Maximum energy that a creature can have; excess energy is discarded.< / p >
< ul >
< li > Default: 100< / li >
< li > Minimum: 0< / li >
< / ul >
< / li >
< li >
< h4 > < span class = "token keyword" > int< / span > metabolism< / h4 >
< p > < / p >
< / li >
< li >
< h4 > < span class = "token keyword" > int< / span > size< / h4 >
< p > < / p >
< / li >
< li >
< h4 > < span class = "token keyword" > int< / span > actionRadius< / h4 >
< p > Defines a creature's vision and movement range for each step.< / p >
< ul >
< li > Default: 1< / li >
< li > Minimum: 1< / li >
< / ul >
< / li >
< li >
< h4 > < span class = "token keyword" > int< / span > sustainability: < / h4 >
< p > Amount of visible food sources required for a creature to eat. Default: 2.< / p >
< / li >
< li >
< h4 > < span class = "token keyword" > float< / span > reproduceLv: 0.7< / h4 >
< p > < / p >
< / li >
< li >
< h4 > < span class = "token keyword" > float< / span > moveLv: 0.2< / h4 >
< p > < / p >
< / li >
< li >
< h4 > < span class = "token keyword" > char< / span > character< / h4 >
< p > < / p >
< / li >
2014-08-17 03:23:48 +00:00
< / ul >
< h2 id = "methods" > Methods< / h2 >
2014-08-21 08:07:30 +00:00
< ul class = "defaults" >
2014-08-17 03:23:48 +00:00
< li > queue< / li >
< li > reproduce< / li >
< li > move< / li >
< li > wait< / li >
< li > isDead< / li >
< li > boundEnergy< / li >
2014-08-21 08:07:30 +00:00
< li > colorFn< / li >
2014-08-17 03:23:48 +00:00
< / ul >
< / div >
< footer > Created with ❤ by < a href = "http://rileyjshaw.com" > rileyjshaw< / a > . Inspired by < a href = "http://eloquentjavascript.net/" > Marijn Haverbeke< / a > and < a href = "https://www.wolframscience.com/" > Stephen Wolfram< / a > .< / footer >
< script src = "terra.demo.min.js" > < / script >
2014-03-10 03:57:59 +00:00
< / body >
< / html >
