Update 2014-08-17T06:23:48.030Z

index.html

@@ -29,34 +29,92 @@
 
   <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>
-    <p>terra is still in Alpha version, which means...</p>
+
     <h2 id="usage">Usage</h2>
-    <p>To get started, we'll create a simple creature using the creatureFactory. Each creature requires a type and a color.</p>
-    <pre>creatureFactory.register({
-  type: 'firstCreature',
-  color: [220, 85, 79]
-});</pre>
-    <p>This creature is valid, but it's just inheriting the default behaviours. 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>creatureFactory.register({
+
+    <h3>Including terra</h3>
+    <p>Getting started is as easy as including the script!</p>
+    <pre><code class="language-markup">&lt;script src="path/to/terra.min.js"&gt;&lt;/script&gt;</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>Now that we've included the script, 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: [41, 128, 185],
   metabolism: 1,
   sustainability: 3,
   reproduceLv: 0.60,
   etc...
-});</pre>
+});</code></pre>
   <p>We've just created a creature that will ____.</p>
+
+  <h3>Creating the environment</h3>
   <p>To run a simulation, we'll need to create an environment. Let's make a 25x25 grid and populate 40% of the space with our first creature and 20% with our second.</p>
-  <pre>var ex1 = new Terrarium(25, 25, 'ex1');
-ex1.populate([['firstCreature', 40], ['secondCreature', 20]]);</pre>
+  <pre><code class="language-javascript">var ex1 = new terra.Terrarium(25, 25, 'ex1');
+ex1.populate([['firstCreature', 40], ['secondCreature', 20]]);</code></pre>
+
+  <h3>Running a simulation</h3>
+
+  <p>Terrariums have a few methods that allow you to interact with the simulation. The most important are <code class="language-javascript">step</code> and <code class="language-javascript">draw</code>.</p>
+  <pre><code class="language-javascript">function stepAndDraw () {
+  // run the next step of the simulation
+  ex1.step();
+  // update its display
+  ex1.draw();
+}
+
+// start an interval to update the simulation twice per second
+var updater = setInterval(stepAndDraw, 500);</code></pre>
+
+  <p><code class="language-javascript">step</code> can take an argument for the number of steps to run through. If we want to see how our environment is doing in 1000 steps, we can simply run:</p>
+  <pre><code class="language-javascript">ex1.step(1000);
+ex1.draw();</code></pre>
+
+
 
 
     <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>
     <p>terra can also run cellular automata. </p>
-    <pre><code>
+    <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>
 
-    </code></pre>
+    <h3 id="cyclic">Cyclic Cellular Automata</h3>
+    <pre><code class="language-javascript">terra.creatureFactory.register({
+  type: 'cyclic',
+  colors: ['255,0,0,1', '255,217,0,1', '72,255,0,1', '0,255,145,1', '0,145,255,1', '72,0,255,1', '255,0,217,1'],
+  colorFn: function () { return this.colors[this.state];},
+  wait: function () {},
+  isDead: function () { return false; },
+  queue: function (neighbors) {
+    var next = (this.state + 1) % 7;
+    var changing = _.some(neighbors, function (spot) {
+      return spot.creature.state === next;
+    });
+    if (changing) this.state = next;
+  }
+}, function () {
+  this.state = Math.floor(Math.random() * 7);
+});</code></pre>
 
     <h2 id="options">Options</h2>
     <p>The following options can be passed in an object to creatureFactory.register( ) as the first argument.</p>

main.css

@@ -1 +1 @@
-.fullPage,body,html{height:100%;width:100%}body{margin:0;font-family:Open Sans,sans-serif;color:#bbb;background:#222}a{color:#bbb}.main{line-height:1.5em;width:50%;padding-top:1.5em;margin:0 auto;font-size:24px}.main canvas{display:block;float:right}.vcent{height:100%;display:inline-block;vertical-align:middle}.sticky nav{position:fixed;top:0;left:0}.sticky .main{margin-top:60px}.splash{position:relative;overflow:hidden;font-size:0;text-align:center;background:#222}.splash canvas{position:absolute;top:0;left:0}header{z-index:1;position:relative;width:20em;display:inline-block;vertical-align:middle;font-size:1rem;color:#fff;background:rgba(0,0,0,.7)}header h1 span{vertical-align:super;font-size:16px}header p{line-height:normal;font-size:1rem}header .downArrow{display:block;font-size:24px;padding-bottom:1em;text-decoration:none;color:#fff}nav{height:60px;line-height:60px;width:100%;font-size:0;background:#bbb;-webkit-box-shadow:0 1px 2px #444;box-shadow:0 1px 2px #444}nav a{text-decoration:none;color:#222}nav ul{margin:0;padding:0 30%;list-style:none;font-size:1rem;text-align:justify}nav ul:after{content:"";display:inline-block;width:100%}nav li{display:inline-block}h2{margin-top:1.5em}a.question{font-size:.6em;text-decoration:none;color:#6e6e6e}footer{height:96px;line-height:96px;margin-top:5em;text-align:center;background:#111;-webkit-box-shadow:-6px 0 6px #222 inset;box-shadow:-6px 0 6px #222 inset}
+code[class*=language-],pre[class*=language-]{color:#f8f8f2;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.important{font-weight:700}.token.entity{cursor:help}.fullPage,body,html{height:100%;width:100%}body{margin:0;font-family:Open Sans,sans-serif;color:#bbb;background:#222}a{color:#bbb}.main{line-height:1.5em;width:50%;padding-top:1.5em;margin:0 auto;font-size:24px}.main canvas{display:block;float:right}.vcent{height:100%;display:inline-block;vertical-align:middle}.sticky nav{position:fixed;top:0;left:0}.sticky .main{margin-top:60px}.splash{position:relative;overflow:hidden;font-size:0;text-align:center;background:#222}.splash canvas{position:absolute;top:0;left:0}header{z-index:1;position:relative;width:20em;display:inline-block;vertical-align:middle;font-size:1rem;color:#fff;background:rgba(0,0,0,.7)}header h1 span{vertical-align:super;font-size:16px}header p{line-height:normal;font-size:1rem}header .downArrow{display:block;font-size:24px;padding-bottom:1em;text-decoration:none;color:#fff}nav{height:60px;line-height:60px;width:100%;font-size:0;background:#bbb;-webkit-box-shadow:0 1px 2px #444;box-shadow:0 1px 2px #444}nav a{text-decoration:none;color:#222}nav ul{margin:0;padding:0 30%;list-style:none;font-size:1rem;text-align:justify}nav ul:after{content:"";display:inline-block;width:100%}nav li{display:inline-block}h2{margin-top:1.5em}pre{font-size:16px}a.question{font-size:18px;font-weight:700;text-decoration:none;color:#6e6e6e}footer{height:96px;line-height:96px;margin-top:5em;text-align:center;background:#111;-webkit-box-shadow:-6px 0 6px #222 inset;box-shadow:-6px 0 6px #222 inset}