Fixed up chart

This commit is contained in:
Max Robinson
2021-02-10 18:09:18 -07:00
parent 382794bf3f
commit 7b19798be9
14 changed files with 318 additions and 563 deletions

View File

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

View File

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

View File

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

View File

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

View 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;

View 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;

View 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;

View 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;

View File

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

View File

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