mirror of
https://github.com/rileyjshaw/terra.git
synced 2024-11-21 04:54:23 +00:00
190 lines
7.5 KiB
HTML
190 lines
7.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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'>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
<a data-scroll href="#main" id="scroller1" class="downArrow">⬇</a>
|
|
</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>
|
|
|
|
<h2 id="usage">Usage</h2>
|
|
|
|
<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>
|
|
<p>Let's create a simple creature using the creatureFactory. Each creature requires a type.</p>
|
|
<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({
|
|
type: 'secondCreature',
|
|
color: [120, 0, 240],
|
|
sustainability: 6,
|
|
reproduceLv: 1
|
|
});</code></pre>
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<h3>Running a simulation</h3>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<h2 id="examples">Examples</h2>
|
|
|
|
<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>
|
|
<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;
|
|
this.alive = surrounding === 3 || surrounding === 2 && this.alive;
|
|
return false;
|
|
}
|
|
}, function () {
|
|
this.alive = Math.random() < 0.5;
|
|
});</code></pre>
|
|
|
|
<h3 id="cyclic">Cyclic Cellular Automaton <a class="question" target="_blank" href="http://en.wikipedia.org/wiki/Cyclic_cellular_automaton">?</a></h3>
|
|
<pre><code class="language-javascript">terra.creatureFactory.register({
|
|
type: 'cyclic',
|
|
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'],
|
|
colorFn: function () { return this.colors[this.state];},
|
|
wait: function () {},
|
|
isDead: function () { return false; },
|
|
queue: function (neighbors) {
|
|
var next = (this.state + 1) % 16;
|
|
var changing = _.some(neighbors, function (spot) {
|
|
return spot.creature.state === next;
|
|
});
|
|
if (changing) this.state = next;
|
|
}
|
|
}, function () {
|
|
this.state = Math.floor(Math.random() * 16);
|
|
});</code></pre>
|
|
|
|
<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>
|
|
|
|
<h3>Required</h3>
|
|
<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>
|
|
</ul>
|
|
|
|
<h3>Optional</h3>
|
|
<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>
|
|
</ul>
|
|
|
|
<h2 id="methods">Methods</h2>
|
|
<ul class="defaults">
|
|
<li>queue</li>
|
|
<li>reproduce</li>
|
|
<li>move</li>
|
|
<li>wait</li>
|
|
<li>isDead</li>
|
|
<li>boundEnergy</li>
|
|
<li>colorFn</li>
|
|
</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>
|
|
</body>
|
|
</html>
|