Fix #20: add trails

This commit is contained in:
Riley Shaw 2014-09-27 14:46:24 -07:00
parent 3a7f953425
commit e96dfa005e
8 changed files with 53 additions and 1008 deletions

View File

@ -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) {

View File

@ -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;
}

View File

@ -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 {object} options
* @param {string} id id assigned to the generated canvas
* @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) {
cellSize = cellSize || 10;
this.cellSize = cellSize;
function Terrarium(width, height, options) {
var cellSize = options.cellSize || 10;
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);
};
/**

View File

@ -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>"

29
dist/terra.js vendored
View File

@ -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 {object} options
* @param {string} id id assigned to the generated canvas
* @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) {
cellSize = cellSize || 10;
this.cellSize = cellSize;
function Terrarium(width, height, options) {
var cellSize = options.cellSize || 10;
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);
};
/**

983
dist/terra.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -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))
});

View File

@ -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": {