Fix #20: add trails

app/display.js

@@ -1,8 +1,13 @@
 var _ = require('./util.js');
 
-module.exports = function (canvas, grid, cellSize) {
+module.exports = function (canvas, grid, cellSize, trails, background) {
   var ctx = canvas.getContext('2d');
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  if (trails && background) {
+    ctx.fillStyle = 'rgba(' + background + ',' + (1 - trails) + ')';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  } else if (trails) {
+    throw "Background must also be set for trails";
+  } else ctx.clearRect(0, 0, canvas.width, canvas.height);
 
   _.each(grid, function (column, x) {
     _.each(column, function (creature, y) {

app/dom.js

@@ -1,6 +1,6 @@
 // Creates an HD canvas element on page and
 // returns a reference to the element
-var createCanvasElement = function (width, height, cellSize, id, insertAfter) {
+var createCanvasElement = function (width, height, cellSize, id, insertAfter, background) {
   width *= cellSize;
   height *= cellSize;
 
@@ -30,6 +30,7 @@ var createCanvasElement = function (width, height, cellSize, id, insertAfter) {
     ctx.font = 'bold ' + cellSize + 'px Arial';
 
     if (id) canvas.id = id;
+    if (background) canvas.style.background = 'rgb(' + background + ')';
 
     return canvas;
   }

app/terrarium.js

@@ -7,17 +7,24 @@ var dom = require('./dom.js');
  * Terrarium constructor function
  * @param {int} width             number of cells in the x-direction
  * @param {int} height            number of cells in the y-direction
- * @param {string} id             id assigned to the generated canvas
+ * @param {object} options
- * @param {int} cellSize          pixel width of each cell (default 10)
+ *   @param {string} id             id assigned to the generated canvas
- * @param {string} insertAfter    id of the element to insert the canvas after
+ *   @param {int} cellSize          pixel width of each cell (default 10)
+ *   @param {string} insertAfter    id of the element to insert the canvas after
+ *   @param {float} trails          a number from [0, 1] indicating whether trails should
+ *                                    be drawn (0 = no trails, 1 = neverending trails)
+ *                                    "background" option is required if trails is set
+ *   @param {array} background      an RGB triplet for the canvas' background
  */
-function Terrarium(width, height, id, cellSize, insertAfter) {
+function Terrarium(width, height, options) {
-  cellSize = cellSize || 10;
+  var cellSize = options.cellSize || 10;
-  this.cellSize = cellSize;
   this.width = width;
   this.height = height;
+  this.cellSize = cellSize;
+  this.trails = options.trails;
+  this.background = options.background;
+  this.canvas = dom.createCanvasElement(width, height, cellSize, options.id, options.insertAfter, this.background);
   this.grid = [];
-  this.canvas = dom.createCanvasElement(width, height, cellSize, id, insertAfter);
   this.nextFrame = false;
   this.hasChanged = false;
 }
@@ -190,7 +197,7 @@ Terrarium.prototype.step = function (steps) {
  * Updates the canvas to reflect the current grid
  */
 Terrarium.prototype.draw = function () {
-  display(this.canvas, this.grid, this.cellSize);
+  display(this.canvas, this.grid, this.cellSize, this.trails, this.background);
 };
 
 /**

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "terra",
-  "version": "1.2.0-beta",
+  "version": "1.3.0-beta",
   "homepage": "https://github.com/rileyjshaw/terra",
   "authors": [
     "rileyjshaw <i@rileyjshaw.com>"

dist/terra.js

@@ -220,9 +220,14 @@ module.exports = factory;
 },{"./util.js":6}],3:[function(require,module,exports){
 var _ = require('./util.js');
 
-module.exports = function (canvas, grid, cellSize) {
+module.exports = function (canvas, grid, cellSize, trails, background) {
   var ctx = canvas.getContext('2d');
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  if (trails && background) {
+    ctx.fillStyle = 'rgba(' + background + ',' + (1 - trails) + ')';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  } else if (trails) {
+    throw "Background must also be set for trails";
+  } else ctx.clearRect(0, 0, canvas.width, canvas.height);
 
   _.each(grid, function (column, x) {
     _.each(column, function (creature, y) {
@@ -246,7 +251,7 @@ module.exports = function (canvas, grid, cellSize) {
 },{"./util.js":6}],4:[function(require,module,exports){
 // Creates an HD canvas element on page and
 // returns a reference to the element
-var createCanvasElement = function (width, height, cellSize, id, insertAfter) {
+var createCanvasElement = function (width, height, cellSize, id, insertAfter, background) {
   width *= cellSize;
   height *= cellSize;
 
@@ -276,6 +281,7 @@ var createCanvasElement = function (width, height, cellSize, id, insertAfter) {
     ctx.font = 'bold ' + cellSize + 'px Arial';
 
     if (id) canvas.id = id;
+    if (background) canvas.style.background = 'rgb(' + background + ')';
 
     return canvas;
   }
@@ -302,17 +308,24 @@ var dom = require('./dom.js');
  * Terrarium constructor function
  * @param {int} width             number of cells in the x-direction
  * @param {int} height            number of cells in the y-direction
- * @param {string} id             id assigned to the generated canvas
+ * @param {object} options
- * @param {int} cellSize          pixel width of each cell (default 10)
+ *   @param {string} id             id assigned to the generated canvas
- * @param {string} insertAfter    id of the element to insert the canvas after
+ *   @param {int} cellSize          pixel width of each cell (default 10)
+ *   @param {string} insertAfter    id of the element to insert the canvas after
+ *   @param {float} trails          a number from [0, 1] indicating whether trails should
+ *                                    be drawn (0 = no trails, 1 = neverending trails)
+ *                                    "background" option is required if trails is set
+ *   @param {array} background      an RGB triplet for the canvas' background
  */
-function Terrarium(width, height, id, cellSize, insertAfter) {
+function Terrarium(width, height, options) {
-  cellSize = cellSize || 10;
+  var cellSize = options.cellSize || 10;
-  this.cellSize = cellSize;
   this.width = width;
   this.height = height;
+  this.cellSize = cellSize;
+  this.trails = options.trails;
+  this.background = options.background;
+  this.canvas = dom.createCanvasElement(width, height, cellSize, options.id, options.insertAfter, this.background);
   this.grid = [];
-  this.canvas = dom.createCanvasElement(width, height, cellSize, id, insertAfter);
   this.nextFrame = false;
   this.hasChanged = false;
 }
@@ -485,7 +498,7 @@ Terrarium.prototype.step = function (steps) {
  * Updates the canvas to reflect the current grid
  */
 Terrarium.prototype.draw = function () {
-  display(this.canvas, this.grid, this.cellSize);
+  display(this.canvas, this.grid, this.cellSize, this.trails, this.background);
 };
 
 /**

gulpfile.js

@@ -53,7 +53,7 @@ gulp.task('scripts', ['lint'], function() {
     .pipe(source('terra.js'))
     .pipe(gulp.dest(paths.dist.scripts))
     .pipe($.rename('terra.min.js'))
-    //.pipe($.streamify( $.uglify() ))
+    .pipe($.streamify( $.uglify() ))
     .pipe(gulp.dest(paths.dist.scripts))
 });
 
@@ -76,7 +76,7 @@ gulp.task('sass', function () {
 gulp.task('js_concat', ['demo'], function () {
   return gulp.src(paths.demo.extraScripts.concat(paths.demo.temp + '/*.js'))
     .pipe($.concat('terra.demo.min.js'))
-    //.pipe($.streamify( $.uglify() ))
+    .pipe($.streamify( $.uglify() ))
     .pipe(gulp.dest(paths.dist.demo))
 });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "terra",
-  "version": "1.2.0-beta",
+  "version": "1.3.0-beta",
   "description": "A JavaScript library for simple biological simulations and cellular automata.",
   "main": "dist/terra.min.js",
   "scripts": {