Fixed up chart

dist/css/style.css

@@ -226,6 +226,12 @@ button:hover{
     margin: 5px;
 }
 
+#chartContainer {
+    height: 200px; 
+    width: 100%;
+}
+
+
 .hot-controls {
     position: fixed;
     bottom: 10px;

dist/index.html

@@ -51,10 +51,6 @@
 				</div>
 				<br>
 				<button id='resize'>Resize and Reset</button>
-				<div class='icon-links'>
-					<a href="https://www.youtube.com/channel/UCwBhBDsqiQflTMLy2epbQVw"><i class="fa fa-youtube"></i></a>
-					<a href="https://twitter.com/max_romana"><i class="fa fa-twitter"></i></a>
-				</div>
 			</div>
 
 			<div id='tab-container' class='control-set'>
@@ -92,6 +88,10 @@
 							<a href="https://github.com/MaxRobinsonTheGreat/EvolutionSimulator/blob/master/V2README.md">readme</a>.
 						</p>
 					</div>
+					<div class='icon-links'>
+						<a href="https://www.youtube.com/channel/UCwBhBDsqiQflTMLy2epbQVw"><i class="fa fa-youtube"></i></a>
+						<a href="https://twitter.com/max_romana"><i class="fa fa-twitter"></i></a>
+					</div>
 				</div>
 
 				<div id='editor' class='tab'>
@@ -226,12 +226,16 @@
 						<p id='org-record'>Highest count: </p>
 						<p id='avg-mut'>Average Mutation Rate: </p>
 						<p id='largest-org'>Largest Organism: </p>
-						<button id='update-chart'>Update Chart</button>
+						<label for="chart-option">Chart: </label>
+						<select name="chart-option" id="chart-option">
+							<option value="population">Population</option>
+							<option value="species">Species</option>
+							<option value="mut-rate">Mutation Rate</option>
+						</select>
 
 					</div>
 					<div class='right-half'>
-						<div id="chartContainer" style="height: 180px; width: 100%;">
+						<div id="chartContainer"></div>
-						</div>
 					</div>
 					
 				</div>

src/Controllers/ControlPanel.js

@@ -1,6 +1,6 @@
 const Hyperparams = require("../Hyperparameters");
 const Modes = require("./ControlModes");
-const StatsPanel = require("./StatsPanel");
+const StatsPanel = require("../Stats/StatsPanel");
 
 class ControlPanel {
     constructor(engine) {
@@ -18,11 +18,11 @@ class ControlPanel {
         this.editor_controller = this.engine.organism_editor.controller;
         this.env_controller.setControlPanel(this);
         this.editor_controller.setControlPanel(this);
-        this.stats_panel = new StatsPanel();
+        this.stats_panel = new StatsPanel(this.engine.env);
-        this.stats_panel.render();
     }
 
     defineMinMaxControls(){
+        var self = this;
         $('#minimize').click ( function() {
             $('.control-panel').css('display', 'none');
             $('.hot-controls').css('display', 'block');
@@ -31,7 +31,7 @@ class ControlPanel {
         $('#maximize').click ( function() {
             $('.control-panel').css('display', 'grid');
             $('.hot-controls').css('display', 'none');
-            if (this.id == 'stats') {
+            if (self.tab_id == 'stats') {
                 self.stats_panel.startAutoRender();
             }
         });
@@ -78,6 +78,8 @@ class ControlPanel {
                 var rows = $('#row-input').val();
                 this.engine.env.resizeGridColRow(cell_size, cols, rows);
             }
+            this.engine.env.reset();
+            this.stats_panel.reset();
             
         }.bind(this));
     }
@@ -88,13 +90,13 @@ class ControlPanel {
         $('.tabnav-item').click(function() {
             $('.tab').css('display', 'none');
             var tab = '#'+this.id+'.tab';
+            $(tab).css('display', 'grid');
             self.engine.organism_editor.is_active = (this.id == 'editor');
+            self.stats_panel.stopAutoRender();
             if (this.id == 'stats') {
                 self.stats_panel.startAutoRender();
             }
-            self.id = this.id;
+            self.tab_id = this.id;
-            
-            $(tab).css('display', 'grid');
         });
     }
 
@@ -134,7 +136,7 @@ class ControlPanel {
             Hyperparams.useGlobalMutability = !this.checked;
         });
         $('#global-mutation').change( function() {
-            Hyperparams.globalMutability = $('#global-mutation').val();
+            Hyperparams.globalMutability = parseInt($('#global-mutation').val());
         });
         $('.mut-prob').change( function() {
             switch(this.id){
@@ -191,7 +193,7 @@ class ControlPanel {
             $('#cell-selections').css('display', 'none');
             $('#organism-options').css('display', 'none');
             self.editor_controller.setDetailsPanel();
-            switch(this.id){
+            switch(this.id) {
                 case "food-drop":
                     self.setMode(Modes.FoodDrop);
                     break;
@@ -229,7 +231,7 @@ class ControlPanel {
         var env = this.engine.env;
         $('#reset-env').click( function() {
             this.engine.env.reset();
-            this.stats_panel.clearData();
+            this.stats_panel.reset();
         }.bind(this));
         $('#auto-reset').change(function() {
             env.auto_reset = this.checked;
@@ -271,15 +273,8 @@ class ControlPanel {
 
     update() {
         $('#fps-actual').text("Actual FPS: " + Math.floor(this.engine.actual_fps));
-        var org_count = this.engine.env.organisms.length;
-        $('#org-count').text("Organism count:  " + org_count);
-        if (org_count > this.organism_record) 
-            this.organism_record = org_count;
-        $('#org-record').text("Highest count: " + this.organism_record);
-        $('#avg-mut').text("Average Mutation Rate: " + Math.round(this.engine.env.averageMutability() * 100) / 100);
-        $('#largest-org').text("Largest Organism: " + this.engine.env.largest_cell_count + " cells");
         $('#reset-count').text("Auto reset count: " + this.engine.env.reset_count);
-        this.stats_panel.updateData(this.engine.env.total_ticks, this.engine.env.organisms.length)
+        this.stats_panel.updateDetails();
     }
 
 }

src/Controllers/StatsPanel.js

@@ -1,77 +0,0 @@
-const FossilRecord = require("../Stats/FossilRecord");
-
-class StatsPanel {
-    constructor() {
-        this.defineControls();
-        this.clearData();
-        this.last_update_tick = 0;
-        this.update_every = 100;
-
-        // maps species to their index in chart's data storage
-        this.species_index_map = [];
-        this.index_counter = 0;
-        this.min_display = 10;
-    }
-
-    startAutoRender(){
-        this.render_loop = setInterval(function(){this.render();}.bind(this), 1000);
-    }
-
-    stopAutoRender() {
-        clearInterval(this.render_loop);
-    }
-
-    defineControls() {
-        $('#update-chart').click( function() {
-            this.render();
-        }.bind(this));
-    }
-
-    updateData(tick, population_size) {
-        if (tick - this.last_update_tick >= this.update_every){
-            // this.data[0].dataPoints.push({x: tick, y:population_size});
-            this.last_update_tick = tick;
-
-            for (var species of FossilRecord.extant_species) {
-                if (species.cumulative_pop < this.min_display){
-                    continue;
-                }
-                
-                if (this.species_index_map[species.name] == null) {
-                    console.log("new species")
-                    this.species_index_map[species.name] = this.index_counter;
-                    this.index_counter++;
-                    this.data.push({
-                        type: "line",
-                        markerType: "none",
-                        dataPoints: []
-                    });
-                }
-                var data_index = this.species_index_map[species.name];
-                this.data[data_index].dataPoints.push({x:tick, y:species.population});
-            }
-        }
-    }
-    
-    render() {
-        this.chart.render();
-    }
-
-    clearData() {
-        this.data = [{
-            type: "line",
-            markerType: "none",
-            dataPoints: []
-        }];
-        this.chart = new CanvasJS.Chart("chartContainer", {
-            title:{
-                text: "Population" 
-            },
-            data: this.data
-        });
-        this.render();
-    }
-    
-}
-
-module.exports = StatsPanel;

src/Engine.js

@@ -5,7 +5,7 @@ const ColorScheme = require('./Rendering/ColorScheme');
 
 const render_speed = 60;
 
-class Engine{
+class Engine {
     constructor(){
         this.fps = 60;
         this.env = new WorldEnvironment(5);

src/Environments/WorldEnvironment.js

@@ -22,11 +22,11 @@ class WorldEnvironment extends Environment{
         this.largest_cell_count = 0;
         this.reset_count = 0;
         this.total_ticks = 0;
+        this.data_update_rate = 100;
         FossilRecord.setEnv(this);
     }
 
     update(delta_time) {
-        this.total_ticks ++;
         var to_remove = [];
         for (var i in this.organisms) {
             var org = this.organisms[i];
@@ -38,6 +38,10 @@ class WorldEnvironment extends Environment{
             this.generateFood();
         }
         this.removeOrganisms(to_remove);
+        this.total_ticks ++;
+        if (this.total_ticks % this.data_update_rate == 0) {
+            FossilRecord.updateData();
+        }
     }
 
     render() {
@@ -77,6 +81,9 @@ class WorldEnvironment extends Environment{
     averageMutability() {
         if (this.organisms.length < 1)
             return 0;
+        if (Hyperparams.useGlobalMutability) {
+            return Hyperparams.globalMutability;
+        }
         return this.total_mutability / this.organisms.length;
     }
 
@@ -129,7 +136,6 @@ class WorldEnvironment extends Environment{
         this.renderer.cell_size = cell_size;
         this.renderer.fillShape(rows*cell_size, cols*cell_size);
         this.grid_map.resize(cols, rows, cell_size);
-        this.reset();
     }
 
     resizeFillWindow(cell_size) {
@@ -138,7 +144,6 @@ class WorldEnvironment extends Environment{
         var cols = Math.floor(this.renderer.width / cell_size);
         var rows = Math.floor(this.renderer.height / cell_size);
         this.grid_map.resize(cols, rows, cell_size);
-        this.reset();
     }
 }
 

src/Stats/Charts/ChartController.js

@@ -0,0 +1,55 @@
+const FossilRecord = require("../FossilRecord");
+
+class ChartController {
+    constructor(title) {
+        this.data = [];
+        this.chart = new CanvasJS.Chart("chartContainer", {
+            zoomEnabled: true,
+            title:{
+                text: title
+            },
+            data: this.data
+        });
+        this.chart.render();
+        this.data
+    }
+
+    setData() {
+        alert("Must override updateData!");
+    }
+
+    render() {
+        this.chart.render();
+    }
+
+    updateData() {
+        var r_len = FossilRecord.tick_record.length;
+        var newest_t = -1;
+        var oldest_t = 0;
+        if (this.data[0].dataPoints.length>0) {
+            newest_t = this.data[0].dataPoints[this.data[0].dataPoints.length-1].x;
+            newest_t = this.data[0].dataPoints[0].x;
+        }
+        if (newest_t < FossilRecord.tick_record[r_len-1]) {
+            this.addNewest();
+        }
+        if (oldest_t < FossilRecord.tick_record[0]) {
+            this.removeOldest();
+        }
+    }
+
+    addNewest() {
+        alert("Must override addNewest!");
+    }
+
+    removeOldest() {
+        alert("Must override addNewest!");
+    }
+
+    clear() {
+        this.data.length = 0;
+        this.chart.render();
+    }
+}
+
+module.exports = ChartController;

src/Stats/Charts/MutationChart.js

@@ -0,0 +1,41 @@
+const FossilRecord = require("../FossilRecord");
+const ChartController = require("./ChartController");
+
+class MutationChart extends ChartController {
+    constructor() {
+        super("Mutation Rate");
+    }
+
+    setData() {
+        this.clear();
+        this.data.push({
+                type: "line",
+                markerType: "none",
+                color: 'black',
+                showInLegend: true, 
+                name: "pop1",
+                legendText: "Average Mutation Rate",
+                dataPoints: []
+            }
+        );
+        for (var i in FossilRecord.tick_record) {
+            var t = FossilRecord.tick_record[i];
+            var p = FossilRecord.av_mut_rates[i];
+            this.data[0].dataPoints.push({x:t, y:p});
+        }
+        // console.log(this.data)
+    }
+
+    addNewest() {
+        var i = FossilRecord.tick_record.length-1;
+        var t = FossilRecord.tick_record[i];
+        var p = FossilRecord.av_mut_rates[i];
+        this.data[0].dataPoints.push({x:t, y:p});
+    }
+
+    removeOldest() {
+        this.data[0].dataPoints.shift();
+    }
+}
+
+module.exports = MutationChart;

src/Stats/Charts/PopulationChart.js

@@ -0,0 +1,41 @@
+const FossilRecord = require("../FossilRecord");
+const ChartController = require("./ChartController");
+
+class PopulationChart extends ChartController {
+    constructor() {
+        super("Population");
+    }
+
+    setData() {
+        this.clear();
+        this.data.push({
+                type: "line",
+                markerType: "none",
+                color: 'black',
+                showInLegend: true, 
+                name: "pop1",
+                legendText: "Total Population",
+                dataPoints: []
+            }
+        );
+        for (var i in FossilRecord.tick_record) {
+            var t = FossilRecord.tick_record[i];
+            var p = FossilRecord.pop_counts[i];
+            this.data[0].dataPoints.push({x:t, y:p});
+        }
+        // console.log(this.data)
+    }
+
+    addNewest() {
+        var i = FossilRecord.tick_record.length-1;
+        var t = FossilRecord.tick_record[i];
+        var p = FossilRecord.pop_counts[i];
+        this.data[0].dataPoints.push({x:t, y:p});
+    }
+
+    removeOldest() {
+        this.data[0].dataPoints.shift();
+    }
+}
+
+module.exports = PopulationChart;

src/Stats/Charts/SpeciesChart.js

@@ -0,0 +1,40 @@
+const FossilRecord = require("../FossilRecord");
+const ChartController = require("./ChartController");
+
+class SpeciesChart extends ChartController {
+    constructor() {
+        super("Species");
+    }
+    
+    setData() {
+        this.clear();
+        this.data.push({
+                type: "line",
+                markerType: "none",
+                color: 'black',
+                showInLegend: true, 
+                name: "spec",
+                legendText: "Number of Species",
+                dataPoints: []
+            }
+        );
+        for (var i in FossilRecord.tick_record) {
+            var t = FossilRecord.tick_record[i];
+            var p = FossilRecord.species_counts[i];
+            this.data[0].dataPoints.push({x:t, y:p});
+        }
+    }
+
+    addNewest() {
+        var i = FossilRecord.tick_record.length-1;
+        var t = FossilRecord.tick_record[i];
+        var p = FossilRecord.species_counts[i];
+        this.data[0].dataPoints.push({x:t, y:p});
+    }
+
+    removeOldest() {
+        this.data[0].dataPoints.shift();
+    }
+}
+
+module.exports = SpeciesChart;

src/Stats/FossilRecord.js

@@ -6,7 +6,10 @@ const FossilRecord = {
         this.extinct_species = [];
 
         // if an organism has fewer than this cumulative pop, discard them on extinction
-        this.min_discard = 5;
+        this.min_discard = 10;
+
+        this.record_size_limit = 500; // store this many data points
+        this.setData();
     },
 
     setEnv: function(env) {
@@ -59,10 +62,34 @@ const FossilRecord = {
         }
     },
 
+    setData() {
+        // all parallel arrays
+        this.tick_record = [0];
+        this.pop_counts = [1];
+        this.av_pop_counts = [1]
+        this.species_counts = [1];
+        this.av_mut_rates = [5];
+    },
+
+    updateData() {
+        var tick = this.env.total_ticks;
+        this.tick_record.push(tick);
+        this.pop_counts.push(this.env.organisms.length);
+        this.species_counts.push(this.extant_species.length);
+        this.av_mut_rates.push(this.env.averageMutability());
+        if (this.tick_record.length > this.record_size_limit) {
+            this.tick_record.shift();
+            this.pop_counts.shift();
+            this.av_pop_counts.shift();
+            this.species_counts.shift();
+            this.av_mut_rates.shift();
+        }
+    },
+
     clear_record: function() {
         this.extant_species = [];
         this.extinct_species = [];
-        // console.log("Cleared", this.extant_species, this.extinct_species)
+        this.setData();
     },
 
 }

src/Stats/Species.js

@@ -6,8 +6,13 @@ class Species {
         this.cumulative_pop = 1;
         this.start_tick = start_tick;
         this.end_tick = -1;
-        this.color = '#asdfasdf';
+        this.color = Math.floor(Math.random()*16777215).toString(16);
-        this.name = '_' + Math.random().toString(36).substr(2, 9);;
+        if (ancestor != null) {
+            // needs to be reworked, maybe removed
+            var mutator = Math.floor(Math.random()*16777215)-8000000;
+            this.color = (mutator + parseInt(ancestor.color, 16)).toString(16);
+        }
+        this.name = '_' + Math.random().toString(36).substr(2, 9);
         this.extinct = false;
     }
 

src/Stats/StatsPanel.js

@@ -0,0 +1,65 @@
+const PopulationChart = require("./Charts/PopulationChart");
+const SpeciesChart = require("./Charts/SpeciesChart");
+const MutationChart = require("./Charts/MutationChart");
+
+
+const ChartSelections = [PopulationChart, SpeciesChart, MutationChart];
+
+class StatsPanel {
+    constructor(env) {
+        this.defineControls();
+        this.chart_selection = 0;
+        this.setChart();
+        this.env = env;
+        this.last_reset_count=env.reset_count;
+    }
+
+    setChart(selection=this.chart_selection) {
+        this.chart_controller = new ChartSelections[selection]();
+        this.chart_controller.setData();
+        this.chart_controller.render();
+    }
+
+    startAutoRender() {
+        this.setChart();
+        this.render_loop = setInterval(function(){this.updateChart();}.bind(this), 1000);
+    }
+
+    stopAutoRender() {
+        clearInterval(this.render_loop);
+    }
+
+    defineControls() {
+        $('#chart-option').change ( function() {
+            this.chart_selection = $("#chart-option")[0].selectedIndex;
+            this.setChart();
+        }.bind(this));
+    }
+
+    updateChart() {
+        if (this.last_reset_count < this.env.reset_count){
+            this.reset()
+        }
+        this.last_reset_count = this.env.reset_count;
+        this.chart_controller.updateData();
+        this.chart_controller.render();
+    }
+
+    updateDetails() {
+        var org_count = this.env.organisms.length;
+        $('#org-count').text("Organism count:  " + org_count);
+        if (org_count > this.organism_record) 
+            this.organism_record = org_count;
+        $('#org-record').text("Highest count: " + this.env.organism_record);
+        $('#avg-mut').text("Average Mutation Rate: " + Math.round(this.env.averageMutability() * 100) / 100);
+        $('#largest-org').text("Largest Organism: " + this.env.largest_cell_count + " cells");
+
+    }
+
+    reset() {
+        this.setChart();
+    }
+    
+}
+
+module.exports = StatsPanel;