added checkbox to toggle fading of previous generations, for #2

Author: rvosa

index.html

@@ -98,7 +98,9 @@ <h3>Evolution</h3-->
                 <br />
                 <div style="text-align: right">
                     <label for="drawTree">Update tree</label>
-                    <div id="drawTree"></div>
+                    <div id="drawTree"></div><br />
+                    <label for="drawFade">Fade previous</label>
+                    <div id="drawFade"></div>
                 </div>
                 <br /><br />
                 <svg id="svg"></svg>

uilib.js

@@ -52,6 +52,7 @@ var UI = function() {
 
     // make checkbox
     $('#drawTree').replaceWith('<input type="checkbox" id="drawTree" checked="checked" />');
+    $('#drawFade').replaceWith('<input type="checkbox" id="drawFade" checked="checked" />');
 
     // collect all controls in an accordion
     $("#controls").accordion({ collapsible: true, active: false });
@@ -278,12 +279,18 @@ UI.prototype.colorArea = function(ctx,startX,startY,rgb,imageData){
  * Fades the previous generation of individuals on the canvas
  */
 UI.prototype.fade = function() {
-    var imgData = this.evoCtx.getImageData(0,0,window.innerWidth,window.innerHeight);
-    var pix = imgData.data;
-    for ( var i = 0; i < pix.length; i += 4 ) {
-        pix[i+3] *= 0.9;
+    var fade = this.getBoolean('drawFade');
+    if ( fade ) {
+        var imgData = this.evoCtx.getImageData(0, 0, window.innerWidth, window.innerHeight);
+        var pix = imgData.data;
+        for (var i = 0; i < pix.length; i += 4) {
+            pix[i + 3] *= 0.9;
+        }
+        this.evoCtx.putImageData(imgData, 0, 0);
+    }
+    else {
+        this.evoCtx.clearRect(0,0, window.innerWidth, window.innerHeight);
     }
-    this.evoCtx.putImageData(imgData,0,0);
 };
 
 /**