josh/lifeEngine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added population chart to statistics panel

Browse Source
This commit is contained in:
Max Robinson
2021-02-08 17:19:10 -07:00
parent 7087c5b4ae
commit 382794bf3f
10 changed files with 614 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
dist/index.html vendored
View File

@@ -7,6 +7,7 @@
<link rel="stylesheet" href="./css/style.css"> <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"> <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 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> </head>
<body> <body>
@@ -225,8 +226,13 @@
<p id='org-record'>Highest count: </p> <p id='org-record'>Highest count: </p>
<p id='avg-mut'>Average Mutation Rate: </p> <p id='avg-mut'>Average Mutation Rate: </p>
<p id='largest-org'>Largest Organism: </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>
<div class='right-half'></div>
</div> </div>
<div id='challenges' class='tab'> <div id='challenges' class='tab'>

454
dist/js/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

24
src/Controllers/ControlPanel.js
View File

@@ -1,5 +1,6 @@
const Hyperparams = require("../Hyperparameters"); const Hyperparams = require("../Hyperparameters");
const Modes = require("./ControlModes"); const Modes = require("./ControlModes");
const StatsPanel = require("./StatsPanel");
class ControlPanel { class ControlPanel {
constructor(engine) { constructor(engine) {
@@ -17,16 +18,22 @@ class ControlPanel {
this.editor_controller = this.engine.organism_editor.controller; this.editor_controller = this.engine.organism_editor.controller;
this.env_controller.setControlPanel(this); this.env_controller.setControlPanel(this);
this.editor_controller.setControlPanel(this); this.editor_controller.setControlPanel(this);
this.stats_panel = new StatsPanel();
this.stats_panel.render();
} }
defineMinMaxControls(){ defineMinMaxControls(){
$('#minimize').click ( function() { $('#minimize').click ( function() {
$('.control-panel').css('display', 'none'); $('.control-panel').css('display', 'none');
$('.hot-controls').css('display', 'block'); $('.hot-controls').css('display', 'block');
}); this.stats_panel.stopAutoRender();
}.bind(this));
$('#maximize').click ( function() { $('#maximize').click ( function() {
$('.control-panel').css('display', 'grid'); $('.control-panel').css('display', 'grid');
$('.hot-controls').css('display', 'none'); $('.hot-controls').css('display', 'none');
if (this.id == 'stats') {
self.stats_panel.startAutoRender();
}
}); });
} }
@@ -76,19 +83,24 @@ class ControlPanel {
} }
defineTabNavigation() { defineTabNavigation() {
this.tab_id = 'about';
var self = this; var self = this;
$('.tabnav-item').click(function() { $('.tabnav-item').click(function() {
$('.tab').css('display', 'none'); $('.tab').css('display', 'none');
var tab = '#'+this.id+'.tab'; var tab = '#'+this.id+'.tab';
self.engine.organism_editor.is_active = (this.id == 'editor'); 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'); $(tab).css('display', 'grid');
}); });
} }
defineHyperparameterControls() { defineHyperparameterControls() {
$('#food-prod-prob').change(function() { $('#food-prod-prob').change(function() {
var food_prob = Hyperparams.foodProdProb = $('#food-prod-prob').val();
Hyperparams.foodProdProb = $('#food-prod-prob').val();;
}.bind(this)); }.bind(this));
$('#lifespan-multiplier').change(function() { $('#lifespan-multiplier').change(function() {
Hyperparams.lifespanMultiplier = $('#lifespan-multiplier').val(); Hyperparams.lifespanMultiplier = $('#lifespan-multiplier').val();
@@ -199,7 +211,9 @@ class ControlPanel {
case "drop-org": case "drop-org":
self.setMode(Modes.Clone); self.setMode(Modes.Clone);
self.env_controller.org_to_clone = self.engine.organism_editor.getCopyOfOrg(); 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; break;
case "drag-view": case "drag-view":
self.setMode(Modes.Drag); self.setMode(Modes.Drag);
@@ -215,6 +229,7 @@ class ControlPanel {
var env = this.engine.env; var env = this.engine.env;
$('#reset-env').click( function() { $('#reset-env').click( function() {
this.engine.env.reset(); this.engine.env.reset();
this.stats_panel.clearData();
}.bind(this)); }.bind(this));
$('#auto-reset').change(function() { $('#auto-reset').change(function() {
env.auto_reset = this.checked; 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); $('#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"); $('#largest-org').text("Largest Organism: " + this.engine.env.largest_cell_count + " cells");
$('#reset-count').text("Auto reset count: " + this.engine.env.reset_count); $('#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)
} }
} }

5
src/Controllers/EditorController.js
View File

@@ -10,6 +10,7 @@ class EditorController extends CanvasController{
this.mode = Modes.None; this.mode = Modes.None;
this.edit_cell_type = null; this.edit_cell_type = null;
this.highlight_org = false; this.highlight_org = false;
this.new_species = false;
this.defineCellTypeSelection(); this.defineCellTypeSelection();
this.defineEditorDetails(); this.defineEditorDetails();
} }
@@ -41,8 +42,10 @@ class EditorController extends CanvasController{
else else
this.env.addCellToOrg(this.mouse_c, this.mouse_r, this.edit_cell_type); 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.env.removeCellFromOrg(this.mouse_c, this.mouse_r);
this.new_species = true;
this.setBrainPanelVisibility(); this.setBrainPanelVisibility();
this.setMoveRangeVisibility(); this.setMoveRangeVisibility();
this.updateDetails(); this.updateDetails();

20
src/Controllers/EnvironmentController.js
View File

@@ -10,8 +10,7 @@ class EnvironmentController extends CanvasController{
super(env, canvas); super(env, canvas);
this.mode = Modes.Drag; this.mode = Modes.Drag;
this.org_to_clone = null; this.org_to_clone = null;
this.species_to_clone = null; this.add_new_species = false;
this.make_new_species = false;
this.defineZoomControls(); this.defineZoomControls();
this.scale = 1; this.scale = 1;
} }
@@ -121,16 +120,19 @@ class EnvironmentController extends CanvasController{
case Modes.Clone: case Modes.Clone:
if (this.org_to_clone != null){ if (this.org_to_clone != null){
var new_org = new Organism(this.mouse_c, this.mouse_r, this.env, this.org_to_clone); var new_org = new Organism(this.mouse_c, this.mouse_r, this.env, this.org_to_clone);
if (this.make_new_species){ if (this.add_new_species){
this.species_to_clone = FossilRecord.addSpecies(new_org, null) FossilRecord.addSpeciesObj(new_org.species);
this.make_new_species = false; new_org.species.start_tick = this.env.total_ticks;
this.add_new_species = false;
new_org.species.population = 0;
} }
else { else if (this.org_to_clone.species.extinct){
new_org.species = this.species_to_clone; FossilRecord.resurrect(this.org_to_clone.species);
this.species_to_clone.addPop();
} }
if (new_org.isClear(this.mouse_c, this.mouse_r)){ 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; break;

77
src/Controllers/StatsPanel.js Normal file
View 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;

7
src/Environments/OrganismEditor.js
View File

@@ -4,6 +4,7 @@ const GridMap = require('../Grid/GridMap');
const Renderer = require('../Rendering/Renderer'); const Renderer = require('../Rendering/Renderer');
const CellStates = require('../Organism/Cell/CellStates'); const CellStates = require('../Organism/Cell/CellStates');
const EditorController = require("../Controllers/EditorController"); const EditorController = require("../Controllers/EditorController");
const Species = require('../Stats/Species');
class OrganismEditor extends Environment{ class OrganismEditor extends Environment{
constructor() { constructor() {
@@ -44,6 +45,7 @@ class OrganismEditor extends Environment{
else if (this.organism.anatomy.canAddCellAt(loc_c, loc_r)){ 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.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) { removeCellFromOrg(c, r) {
@@ -58,16 +60,18 @@ class OrganismEditor extends Environment{
if (prev_cell != null) { if (prev_cell != null) {
if (this.organism.anatomy.removeCell(loc_c, loc_r)) { if (this.organism.anatomy.removeCell(loc_c, loc_r)) {
this.changeCell(c, r, CellStates.empty, null); 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); this.grid_map.fillGrid(CellStates.empty);
var center = this.grid_map.getCenter(); var center = this.grid_map.getCenter();
this.organism = new Organism(center[0], center[1], this, orig_org); this.organism = new Organism(center[0], center[1], this, orig_org);
this.organism.updateGrid(); this.organism.updateGrid();
this.controller.updateDetails(); this.controller.updateDetails();
this.controller.new_species = false;
} }
getCopyOfOrg() { getCopyOfOrg() {
@@ -81,6 +85,7 @@ class OrganismEditor extends Environment{
this.organism = new Organism(center[0], center[1], this, null); this.organism = new Organism(center[0], center[1], this, null);
this.organism.anatomy.addDefaultCell(CellStates.mouth, 0, 0); this.organism.anatomy.addDefaultCell(CellStates.mouth, 0, 0);
this.organism.updateGrid(); this.organism.updateGrid();
this.organism.species = new Species(this.organism.anatomy, null, 0);
} }
} }

1
src/Environments/WorldEnvironment.js
View File

@@ -121,6 +121,7 @@ class WorldEnvironment extends Environment{
this.renderer.renderFullGrid(this.grid_map.grid); this.renderer.renderFullGrid(this.grid_map.grid);
this.total_mutability = 0; this.total_mutability = 0;
this.total_ticks = 0; this.total_ticks = 0;
FossilRecord.clear_record();
this.OriginOfLife(); this.OriginOfLife();
} }

37
src/Stats/FossilRecord.js
View File

@@ -5,8 +5,8 @@ const FossilRecord = {
this.extant_species = []; this.extant_species = [];
this.extinct_species = []; this.extinct_species = [];
// if an organism has fewer than this cumulative pop, discard them // if an organism has fewer than this cumulative pop, discard them on extinction
this.discard_pop = 5; this.min_discard = 5;
}, },
setEnv: function(env) { setEnv: function(env) {
@@ -15,31 +15,54 @@ const FossilRecord = {
addSpecies: function(org, ancestor) { addSpecies: function(org, ancestor) {
// console.log("Adding Species") // 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); this.extant_species.push(new_species);
org.species = new_species; org.species = new_species;
return new_species; return new_species;
}, },
addSpeciesObj: function(species) {
// console.log("Adding Species")
this.extant_species.push(species);
return species;
},
fossilize: function(species) { fossilize: function(species) {
// console.log("Extinction")
species.end_tick = this.env.total_ticks; species.end_tick = this.env.total_ticks;
for (i in this.extant_species) { for (i in this.extant_species) {
var s = this.extant_species[i]; var s = this.extant_species[i];
if (s == species) { if (s == species) {
this.extant_species.splice(i, 1); this.extant_species.splice(i, 1);
if (species.cumulative_pop <= this.discard_pop) { if (species.cumulative_pop < this.min_pop) {
return false; return false;
} }
this.extinct_species.push(s); this.extinct_species.push(s);
// console.log("Extant:", this.extant_species.length) // console.log("Extant species:", this.extant_species.length)
// console.log("Extinct:", this.extinct_species.length) // console.log("Extinct species:", this.extinct_species.length)
return true; 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() { clear_record: function() {
this.species = []; this.extant_species = [];
this.extinct_species = [];
// console.log("Cleared", this.extant_species, this.extinct_species)
}, },
} }

7
src/Stats/Species.js
View File

@@ -7,7 +7,7 @@ class Species {
this.start_tick = start_tick; this.start_tick = start_tick;
this.end_tick = -1; this.end_tick = -1;
this.color = '#asdfasdf'; this.color = '#asdfasdf';
this.name = "crabuloid"; this.name = '_' + Math.random().toString(36).substr(2, 9);;
this.extinct = false; this.extinct = false;
} }
@@ -20,11 +20,14 @@ class Species {
this.population--; this.population--;
if (this.population <= 0) { if (this.population <= 0) {
this.extinct = true; this.extinct = true;
// console.log("Extinction");
const FossilRecord = require("./FossilRecord"); const FossilRecord = require("./FossilRecord");
FossilRecord.fossilize(this); FossilRecord.fossilize(this);
} }
} }
lifespan() {
return this.end_tick - this.start_tick;
}
} }
module.exports = Species; module.exports = Species;