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

grid resizing and auto reset

Browse Source
This commit is contained in:
MaxRobinsonTheGreat
2020-07-19 17:33:09 -06:00
parent ebb39df34a
commit a5a559e61b
7 changed files with 411 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
dist/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

27
dist/css/style.css vendored
View File

@@ -7,7 +7,8 @@ body{
}
canvas {
display: block;
/* display: block; */
}
* {
@@ -16,21 +17,22 @@ canvas {
}
#env {
position: absolute;
position: fixed;
top: 0;
bottom: 300px; /* must correspond to control-panel height*/
width: 100%;
width: 100%;
text-align: center;
}
.control-panel {
height: 300px;
width: 100%;
bottom: 0;
position: absolute;
position: fixed;
background-color: gray;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
/* grid-template-rows: repeat(2, 1fr); */
}
.control-set {
@@ -39,21 +41,19 @@ canvas {
border: 10px;
border-color: black;
background-color: lightgray;
grid-row: 1;
}
#speed-controller {
grid-column: 1;
grid-row: 1;
}
#stats {
grid-column: 1;
grid-row: 2;
.col-row-input {
display: none;
}
#tab-container {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.tabnav {
@@ -77,14 +77,11 @@ canvas {
.tab {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1;
}
.tab#hyperparameters {
display: none;
padding: 10px
}
.tab#editor {
.tab#about {
display: grid;
}

56
dist/html/index.html vendored
View File

@@ -21,20 +21,44 @@
<p id='fps-actual'></p>
<br/>
<button id='reset-env'>Reset Environment</button>
</div>
<div id='stats' class='control-set'>
<h2>Stats</h2>
<p id='org-count'>Organism count: </p>
<p id='org-record'>Highest count: </p>
<p id='avg-mut'>Average Mutation Rate: </p>
<label for="auto-reset">Auto Reset</label>
<input type="checkbox" id="auto-reset" checked>
<br><br/>
<h2>Grid Size</h2>
<label for="cell-size">Cell Size:</label>
<input type="number" id="cell-size" min="1" max="100" value=5 step="1">
<label for="fill-window">Fill Window</label>
<input type="checkbox" id="fill-window" checked>
<br/>
<div class='col-row-input'>
<label for="col-input">Columns:</label>
<input type="number" id="col-input" min="1" value=100 step="1">
<br/>
<label for="row-input">Rows:</label>
<input type="number" id="row-input" min="1" value=100 step="1">
</div>
<br/>
<button id='resize'>Resize and Reset</button>
</div>
<div id='tab-container' class='control-set'>
<div class="tabnav">
<p class='tabnav-item' id='about'>About</p>
<p class='tabnav-item' id='editor'>Editor</p>
<p class='tabnav-item' id='hyperparameters'>Hyperparameters</p>
<p class='tabnav-item' id='stats'>Stats</p>
</div>
<div id='about' class='tab'>
<div class='left-half'>
<h2>Welcome to the Life Engine</h2>
<p>The life engine is a simulation of a living ecosystem, and allows organisms to survive, reproduce, spread, and compete in a very simple world. The world is a grid, and organisms are made up of cells that occupy different grid locations. Different colored cells do different things for the organism.</p>
<p>To understand more about how the simulation works, take a look at the readme (LINK).</p>
</div>
<div class='right-half'>
<p></p>
</div>
</div>
<div id='editor' class='tab'>
@@ -80,7 +104,7 @@
<input type="number" id="lifespan-multiplier" min="1" max="10000" value=100 step="1">
<br/>
<label for="fixed-ratio">Use fixed ratio</label>
<input type="checkbox" id="fixed-ratio" name="scales" checked>
<input type="checkbox" id="fixed-ratio" checked>
<br><br/>
<h4>Mutation Probabilities</h4>
<label for="add-prob">Add Cell:</label>
@@ -97,16 +121,26 @@
<div class='right-half'>
<h4>Organism Rotation</h4>
<label for="mover-rot">Movers can rotate</label>
<input type="checkbox" id="mover-rot" name="scales" checked>
<input type="checkbox" id="mover-rot" checked>
<br/>
<label for="offspring-rot">Offspring rotate</label>
<input type="checkbox" id="offspring-rot" name="scales" checked>
<input type="checkbox" id="offspring-rot" checked>
<br/>
<h4>Killer Cell Effects</h4>
<label for="insta-kill">One touch kill</label>
<input type="checkbox" id="insta-kill" name="scales">
<input type="checkbox" id="insta-kill" >
</div>
</div>
<div id='stats' class='tab'>
<div class='left-half'>
<h2>Stats</h2>
<p id='org-count'>Organism count: </p>
<p id='org-record'>Highest count: </p>
<p id='avg-mut'>Average Mutation Rate: </p>
</div>
<div class='right-half'></div>
</div>
</div>
</div>
</body>

29
src/Controllers/ControlPanel.js
View File

@@ -6,6 +6,7 @@ class ControlPanel {
constructor(engine) {
this.engine = engine;
this.defineEngineSpeedControls();
this.defineGridSizeControls();
this.defineTabNavigation();
this.defineHyperparameterControls();
this.defineModeControls();
@@ -39,6 +40,29 @@ class ControlPanel {
}.bind(this));
}
defineGridSizeControls() {
$('#fill-window').change(function() {
if (this.checked)
$('.col-row-input').css('display' ,'none');
else
$('.col-row-input').css('display' ,'block');
});
$('#resize').click(function() {
var cell_size = $('#cell-size').val();
var fill_window = $('#fill-window').is(":checked");
if (fill_window) {
this.engine.env.resizeFillWindow(cell_size);
}
else {
var cols = $('#col-input').val();
var rows = $('#row-input').val();
this.engine.env.resizeGridColRow(cell_size, cols, rows);
}
}.bind(this));
}
defineTabNavigation() {
var self = this;
$('.tabnav-item').click(function() {
@@ -146,10 +170,13 @@ class ControlPanel {
}
});
var env = this.engine.env;
$('#reset-env').click( function() {
this.engine.env.reset();
}.bind(this));
$('#auto-reset').change(function() {
env.auto_reset = this.checked;
});
$('#kill-all').click( function() {
this.engine.env.clearOrganisms();
}.bind(this));

19
src/Environments/Environment.js
View File

@@ -17,6 +17,7 @@ class Environment{
this.organisms = [];
this.walls = [];
this.total_mutability = 0;
this.auto_reset = true;
}
update(delta_time) {
@@ -40,6 +41,8 @@ class Environment{
this.total_mutability -= this.organisms[i].mutability;
this.organisms.splice(i, 1);
}
if (this.organisms.length == 0 && this.auto_reset)
this.reset();
}
OriginOfLife() {
@@ -89,6 +92,22 @@ class Environment{
this.total_mutability = 0;
this.OriginOfLife();
}
resizeGridColRow(cell_size, cols, rows) {
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) {
this.renderer.cell_size = cell_size;
this.renderer.fillWindow('env');
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();
}
}
module.exports = Environment;

11
src/Grid/GridMap.js
View File

@@ -2,7 +2,11 @@ const Cell = require('../Organism/Cell/Cell');
const CellTypes = require('../Organism/Cell/CellTypes');
class GridMap {
constructor(cols, rows, cell_size, filltype=CellTypes.empty) {
constructor(cols, rows, cell_size) {
this.resize(cols, rows, cell_size);
}
resize(cols, rows, cell_size) {
this.grid = [];
this.cols = cols;
this.rows = rows;
@@ -10,8 +14,7 @@ class GridMap {
for(var c=0; c<cols; c++) {
var row = [];
for(var r=0; r<rows; r++) {
var cell = new Cell(filltype, c, r, c*cell_size, r*cell_size);
var cell = new Cell(CellTypes.empty, c, r, c*cell_size, r*cell_size);
row.push(cell);
}
this.grid.push(row);
@@ -20,7 +23,7 @@ class GridMap {
fillGrid(type) {
for (var col of this.grid) {
for (var cell of col){
for (var cell of col) {
cell.setType(type);
cell.owner = null;
}

14
src/Rendering/Renderer.js
View File

@@ -5,8 +5,7 @@ class Renderer {
this.cell_size = cell_size;
this.canvas = document.getElementById(canvas_id);
this.ctx = this.canvas.getContext("2d");
this.canvas.width = $('#'+container_id).width();
this.canvas.height = $('#'+container_id).height();
this.fillWindow(container_id)
this.height = this.canvas.height;
this.width = this.canvas.width;
this.cells_to_render = new Set();
@@ -14,6 +13,17 @@ class Renderer {
this.highlighted_cells = new Set();
}
fillWindow(container_id) {
this.fillShape($('#'+container_id).height(), $('#'+container_id).width());
}
fillShape(height, width) {
this.canvas.width = width;
this.canvas.height = height;
this.height = this.canvas.height;
this.width = this.canvas.width;
}
clear() {
this.ctx.fillStyle = 'white';
this.ctx.fillRect(0, 0, this.height, this.width);