Fixed up chart
This commit is contained in:
@@ -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.render();
|
||||
this.stats_panel = new StatsPanel(this.engine.env);
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
$(tab).css('display', 'grid');
|
||||
self.tab_id = this.id;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
@@ -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);
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
55
src/Stats/Charts/ChartController.js
Normal file
55
src/Stats/Charts/ChartController.js
Normal file
@@ -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;
|
||||
41
src/Stats/Charts/MutationChart.js
Normal file
41
src/Stats/Charts/MutationChart.js
Normal file
@@ -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;
|
||||
41
src/Stats/Charts/PopulationChart.js
Normal file
41
src/Stats/Charts/PopulationChart.js
Normal file
@@ -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;
|
||||
40
src/Stats/Charts/SpeciesChart.js
Normal file
40
src/Stats/Charts/SpeciesChart.js
Normal file
@@ -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;
|
||||
@@ -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();
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
@@ -6,8 +6,13 @@ class Species {
|
||||
this.cumulative_pop = 1;
|
||||
this.start_tick = start_tick;
|
||||
this.end_tick = -1;
|
||||
this.color = '#asdfasdf';
|
||||
this.name = '_' + Math.random().toString(36).substr(2, 9);;
|
||||
this.color = Math.floor(Math.random()*16777215).toString(16);
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
65
src/Stats/StatsPanel.js
Normal file
65
src/Stats/StatsPanel.js
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user