Added population chart to statistics panel
This commit is contained in:
8
dist/index.html
vendored
8
dist/index.html
vendored
@@ -7,6 +7,7 @@
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -225,8 +226,13 @@
|
||||
<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>
|
||||
|
||||
</div>
|
||||
<div class='right-half'>
|
||||
<div id="chartContainer" style="height: 180px; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
<div class='right-half'></div>
|
||||
|
||||
</div>
|
||||
<div id='challenges' class='tab'>
|
||||
|
||||
454
dist/js/bundle.js
vendored
454
dist/js/bundle.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,5 +1,6 @@
|
||||
const Hyperparams = require("../Hyperparameters");
|
||||
const Modes = require("./ControlModes");
|
||||
const StatsPanel = require("./StatsPanel");
|
||||
|
||||
class ControlPanel {
|
||||
constructor(engine) {
|
||||
@@ -17,16 +18,22 @@ 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();
|
||||
}
|
||||
|
||||
defineMinMaxControls(){
|
||||
$('#minimize').click ( function() {
|
||||
$('.control-panel').css('display', 'none');
|
||||
$('.hot-controls').css('display', 'block');
|
||||
});
|
||||
this.stats_panel.stopAutoRender();
|
||||
}.bind(this));
|
||||
$('#maximize').click ( function() {
|
||||
$('.control-panel').css('display', 'grid');
|
||||
$('.hot-controls').css('display', 'none');
|
||||
if (this.id == 'stats') {
|
||||
self.stats_panel.startAutoRender();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -76,19 +83,24 @@ class ControlPanel {
|
||||
}
|
||||
|
||||
defineTabNavigation() {
|
||||
this.tab_id = 'about';
|
||||
var self = this;
|
||||
$('.tabnav-item').click(function() {
|
||||
$('.tab').css('display', 'none');
|
||||
var tab = '#'+this.id+'.tab';
|
||||
self.engine.organism_editor.is_active = (this.id == 'editor');
|
||||
if (this.id == 'stats') {
|
||||
self.stats_panel.startAutoRender();
|
||||
}
|
||||
self.id = this.id;
|
||||
|
||||
$(tab).css('display', 'grid');
|
||||
});
|
||||
}
|
||||
|
||||
defineHyperparameterControls() {
|
||||
$('#food-prod-prob').change(function() {
|
||||
var food_prob =
|
||||
Hyperparams.foodProdProb = $('#food-prod-prob').val();;
|
||||
Hyperparams.foodProdProb = $('#food-prod-prob').val();
|
||||
}.bind(this));
|
||||
$('#lifespan-multiplier').change(function() {
|
||||
Hyperparams.lifespanMultiplier = $('#lifespan-multiplier').val();
|
||||
@@ -199,7 +211,9 @@ class ControlPanel {
|
||||
case "drop-org":
|
||||
self.setMode(Modes.Clone);
|
||||
self.env_controller.org_to_clone = self.engine.organism_editor.getCopyOfOrg();
|
||||
self.env_controller.make_new_species = true;
|
||||
self.env_controller.add_new_species = self.editor_controller.new_species;
|
||||
self.editor_controller.new_species = false;
|
||||
// console.log(self.env_controller.add_new_species)
|
||||
break;
|
||||
case "drag-view":
|
||||
self.setMode(Modes.Drag);
|
||||
@@ -215,6 +229,7 @@ class ControlPanel {
|
||||
var env = this.engine.env;
|
||||
$('#reset-env').click( function() {
|
||||
this.engine.env.reset();
|
||||
this.stats_panel.clearData();
|
||||
}.bind(this));
|
||||
$('#auto-reset').change(function() {
|
||||
env.auto_reset = this.checked;
|
||||
@@ -264,6 +279,7 @@ class ControlPanel {
|
||||
$('#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)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ class EditorController extends CanvasController{
|
||||
this.mode = Modes.None;
|
||||
this.edit_cell_type = null;
|
||||
this.highlight_org = false;
|
||||
this.new_species = false;
|
||||
this.defineCellTypeSelection();
|
||||
this.defineEditorDetails();
|
||||
}
|
||||
@@ -41,8 +42,10 @@ class EditorController extends CanvasController{
|
||||
else
|
||||
this.env.addCellToOrg(this.mouse_c, this.mouse_r, this.edit_cell_type);
|
||||
}
|
||||
if (this.right_click)
|
||||
else if (this.right_click)
|
||||
this.env.removeCellFromOrg(this.mouse_c, this.mouse_r);
|
||||
|
||||
this.new_species = true;
|
||||
this.setBrainPanelVisibility();
|
||||
this.setMoveRangeVisibility();
|
||||
this.updateDetails();
|
||||
|
||||
@@ -10,8 +10,7 @@ class EnvironmentController extends CanvasController{
|
||||
super(env, canvas);
|
||||
this.mode = Modes.Drag;
|
||||
this.org_to_clone = null;
|
||||
this.species_to_clone = null;
|
||||
this.make_new_species = false;
|
||||
this.add_new_species = false;
|
||||
this.defineZoomControls();
|
||||
this.scale = 1;
|
||||
}
|
||||
@@ -121,16 +120,19 @@ class EnvironmentController extends CanvasController{
|
||||
case Modes.Clone:
|
||||
if (this.org_to_clone != null){
|
||||
var new_org = new Organism(this.mouse_c, this.mouse_r, this.env, this.org_to_clone);
|
||||
if (this.make_new_species){
|
||||
this.species_to_clone = FossilRecord.addSpecies(new_org, null)
|
||||
this.make_new_species = false;
|
||||
if (this.add_new_species){
|
||||
FossilRecord.addSpeciesObj(new_org.species);
|
||||
new_org.species.start_tick = this.env.total_ticks;
|
||||
this.add_new_species = false;
|
||||
new_org.species.population = 0;
|
||||
}
|
||||
else {
|
||||
new_org.species = this.species_to_clone;
|
||||
this.species_to_clone.addPop();
|
||||
else if (this.org_to_clone.species.extinct){
|
||||
FossilRecord.resurrect(this.org_to_clone.species);
|
||||
}
|
||||
|
||||
if (new_org.isClear(this.mouse_c, this.mouse_r)){
|
||||
this.env.addOrganism(new_org)
|
||||
this.env.addOrganism(new_org);
|
||||
new_org.species.addPop();
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
77
src/Controllers/StatsPanel.js
Normal file
77
src/Controllers/StatsPanel.js
Normal file
@@ -0,0 +1,77 @@
|
||||
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;
|
||||
@@ -4,6 +4,7 @@ const GridMap = require('../Grid/GridMap');
|
||||
const Renderer = require('../Rendering/Renderer');
|
||||
const CellStates = require('../Organism/Cell/CellStates');
|
||||
const EditorController = require("../Controllers/EditorController");
|
||||
const Species = require('../Stats/Species');
|
||||
|
||||
class OrganismEditor extends Environment{
|
||||
constructor() {
|
||||
@@ -44,6 +45,7 @@ class OrganismEditor extends Environment{
|
||||
else if (this.organism.anatomy.canAddCellAt(loc_c, loc_r)){
|
||||
this.changeCell(c, r, state, this.organism.anatomy.addDefaultCell(state, loc_c, loc_r));
|
||||
}
|
||||
this.organism.species = new Species(this.organism.anatomy, null, 0);
|
||||
}
|
||||
|
||||
removeCellFromOrg(c, r) {
|
||||
@@ -58,16 +60,18 @@ class OrganismEditor extends Environment{
|
||||
if (prev_cell != null) {
|
||||
if (this.organism.anatomy.removeCell(loc_c, loc_r)) {
|
||||
this.changeCell(c, r, CellStates.empty, null);
|
||||
this.organism.species = new Species(this.organism.anatomy, null, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setOrganismToCopyOf(orig_org){
|
||||
setOrganismToCopyOf(orig_org) {
|
||||
this.grid_map.fillGrid(CellStates.empty);
|
||||
var center = this.grid_map.getCenter();
|
||||
this.organism = new Organism(center[0], center[1], this, orig_org);
|
||||
this.organism.updateGrid();
|
||||
this.controller.updateDetails();
|
||||
this.controller.new_species = false;
|
||||
}
|
||||
|
||||
getCopyOfOrg() {
|
||||
@@ -81,6 +85,7 @@ class OrganismEditor extends Environment{
|
||||
this.organism = new Organism(center[0], center[1], this, null);
|
||||
this.organism.anatomy.addDefaultCell(CellStates.mouth, 0, 0);
|
||||
this.organism.updateGrid();
|
||||
this.organism.species = new Species(this.organism.anatomy, null, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -121,6 +121,7 @@ class WorldEnvironment extends Environment{
|
||||
this.renderer.renderFullGrid(this.grid_map.grid);
|
||||
this.total_mutability = 0;
|
||||
this.total_ticks = 0;
|
||||
FossilRecord.clear_record();
|
||||
this.OriginOfLife();
|
||||
}
|
||||
|
||||
|
||||
@@ -5,8 +5,8 @@ const FossilRecord = {
|
||||
this.extant_species = [];
|
||||
this.extinct_species = [];
|
||||
|
||||
// if an organism has fewer than this cumulative pop, discard them
|
||||
this.discard_pop = 5;
|
||||
// if an organism has fewer than this cumulative pop, discard them on extinction
|
||||
this.min_discard = 5;
|
||||
},
|
||||
|
||||
setEnv: function(env) {
|
||||
@@ -15,31 +15,54 @@ const FossilRecord = {
|
||||
|
||||
addSpecies: function(org, ancestor) {
|
||||
// console.log("Adding Species")
|
||||
var new_species = new Species(org.anatomy, ancestor, this.env.total_ticks)
|
||||
var new_species = new Species(org.anatomy, ancestor, this.env.total_ticks);
|
||||
this.extant_species.push(new_species);
|
||||
org.species = new_species;
|
||||
return new_species;
|
||||
},
|
||||
|
||||
addSpeciesObj: function(species) {
|
||||
// console.log("Adding Species")
|
||||
this.extant_species.push(species);
|
||||
return species;
|
||||
},
|
||||
|
||||
fossilize: function(species) {
|
||||
// console.log("Extinction")
|
||||
species.end_tick = this.env.total_ticks;
|
||||
for (i in this.extant_species) {
|
||||
var s = this.extant_species[i];
|
||||
if (s == species) {
|
||||
this.extant_species.splice(i, 1);
|
||||
if (species.cumulative_pop <= this.discard_pop) {
|
||||
if (species.cumulative_pop < this.min_pop) {
|
||||
return false;
|
||||
}
|
||||
this.extinct_species.push(s);
|
||||
// console.log("Extant:", this.extant_species.length)
|
||||
// console.log("Extinct:", this.extinct_species.length)
|
||||
// console.log("Extant species:", this.extant_species.length)
|
||||
// console.log("Extinct species:", this.extinct_species.length)
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
resurrect: function(species) {
|
||||
// console.log("Resurrecting species")
|
||||
if (species.extinct) {
|
||||
for (i in this.extinct_species) {
|
||||
var s = this.extinct_species[i];
|
||||
if (s == species) {
|
||||
this.extinct_species.splice(i, 1);
|
||||
this.extant_species.push(species);
|
||||
species.extinct = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
clear_record: function() {
|
||||
this.species = [];
|
||||
this.extant_species = [];
|
||||
this.extinct_species = [];
|
||||
// console.log("Cleared", this.extant_species, this.extinct_species)
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ class Species {
|
||||
this.start_tick = start_tick;
|
||||
this.end_tick = -1;
|
||||
this.color = '#asdfasdf';
|
||||
this.name = "crabuloid";
|
||||
this.name = '_' + Math.random().toString(36).substr(2, 9);;
|
||||
this.extinct = false;
|
||||
}
|
||||
|
||||
@@ -20,11 +20,14 @@ class Species {
|
||||
this.population--;
|
||||
if (this.population <= 0) {
|
||||
this.extinct = true;
|
||||
// console.log("Extinction");
|
||||
const FossilRecord = require("./FossilRecord");
|
||||
FossilRecord.fossilize(this);
|
||||
}
|
||||
}
|
||||
|
||||
lifespan() {
|
||||
return this.end_tick - this.start_tick;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Species;
|
||||
Reference in New Issue
Block a user