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

beautification, title, reset hyperparams

Browse Source
This commit is contained in:
MaxRobinsonTheGreat
2020-07-22 16:10:39 -06:00
parent b0292ae0e6
commit f0e725a8fa
7 changed files with 153 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

82
dist/css/style.css vendored
View File

@@ -1,16 +1,11 @@
body{ body{
background: black; background: #3a4b68;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
canvas {
/* display: block; */
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -30,7 +25,7 @@ canvas {
width: 100%; width: 100%;
bottom: 0; bottom: 0;
position: fixed; position: fixed;
background-color: gray; background-color: #3a4b68;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
/* grid-template-rows: repeat(2, 1fr); */ /* grid-template-rows: repeat(2, 1fr); */
@@ -40,11 +35,39 @@ canvas {
margin: 5px; margin: 5px;
padding: 5px; padding: 5px;
border: 10px; border: 10px;
border-color: black; border-radius: 15px;
background-color: lightgray; background-color: #e1e3ec;
grid-row: 1; grid-row: 1;
} }
img {
image-rendering: pixelated;
width: 60%;
border-radius: 10px;
}
button {
border: none;
color: black;
background-color: #9099c2;
border-radius: 8px;
padding: 5px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
button:hover{
background-color: #81d2c7;
}
.icon-links {
font-size: 35px;
position: fixed;
bottom: 10px;
right: 20px;
}
#speed-controller { #speed-controller {
grid-column: 1; grid-column: 1;
} }
@@ -59,19 +82,20 @@ canvas {
.tabnav { .tabnav {
overflow: hidden; overflow: hidden;
background-color: #333; background-color: #416788;
border-radius: 15px;
} }
.tabnav p { .tabnav p {
float: left; float: left;
color: #f2f2f2; color: white;
text-align: center; text-align: center;
padding: 14px 16px; padding: 14px 16px;
text-decoration: none; text-decoration: none;
font-size: 17px; font-size: 18px;
user-select: none; user-select: none;
} }
.tabnav p:hover { .tabnav p:hover {
background-color: rgb(121, 121, 121); background-color: #81d2c7;
color: black; color: black;
} }
@@ -82,7 +106,7 @@ canvas {
padding: 10px padding: 10px
} }
.tab#editor { .tab#about {
display: grid; display: grid;
} }
@@ -103,8 +127,6 @@ canvas {
display: flex; display: flex;
} }
.edit-mode-btn { .edit-mode-btn {
/* border-color: gray; */
background-color: white;
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
@@ -115,12 +137,18 @@ canvas {
#editor-env { #editor-env {
height: 195px; height: 195px;
width: 195px; width: 195px;
/* padding: 10px; */
/* float: left; */
} }
#cell-selections { #cell-selections {
display: none; display: none;
} }
#cell-legend {
display: flex;
width: max-content;
padding: 10px;
align-items: center;
background-color: #121D29;
border-radius: 10px;
}
.cell-type { .cell-type {
width: 30px; width: 30px;
height: 30px; height: 30px;
@@ -129,12 +157,14 @@ canvas {
margin: 1px; margin: 1px;
} }
.cell-legend-type { .cell-legend-type {
width: 30px; width: 50px;
height: 30px; height: 50px;
border: solid black;
border-width: 2px;
margin: 1px; margin: 1px;
} }
.cell-legend-hover {
border-color: black;
border: 5px;
}
#mouth{ #mouth{
background-color: orange; background-color: orange;
} }
@@ -150,6 +180,12 @@ canvas {
#armor{ #armor{
background-color: purple; background-color: purple;
} }
#food{
background-color: green;
}
#wall{
background-color: gray;
}
#editor-mode-cont{ #editor-mode-cont{
padding-top: 20px; padding-top: 20px;
} }

72
dist/html/index.html vendored
View File

@@ -20,18 +20,17 @@
<button id='pause-button'><i class="fa fa-pause"></i></button> <button id='pause-button'><i class="fa fa-pause"></i></button>
<p id='fps'>Target FPS: 60</p> <p id='fps'>Target FPS: 60</p>
<p id='fps-actual'></p> <p id='fps-actual'></p>
<br>
<button id='reset-env'>Reset Environment</button> <button id='reset-env'>Reset Environment</button>
<label for="auto-reset">Auto Reset</label> <label for="auto-reset">Auto Reset</label>
<input type="checkbox" id="auto-reset" checked> <input type="checkbox" id="auto-reset" checked>
<br> <br>
<p id='reset-count'>Auto reset count: </p> <p id='reset-count'>Auto reset count: </p>
<h2>Grid Size</h2> <br>
<h3>Grid Size</h3>
<label for="cell-size">Cell Size:</label> <label for="cell-size">Cell Size:</label>
<input type="number" id="cell-size" min="1" max="100" value=5 step="1"> <input type="number" id="cell-size" min="1" max="100" value=3 step="1">
<label for="fill-window">Fill Window</label> <label for="fill-window">Fill Window</label>
<input type="checkbox" id="fill-window" checked> <input type="checkbox" id="fill-window" checked>
<br>
<div class='col-row-input'> <div class='col-row-input'>
<label for="col-input">Columns:</label> <label for="col-input">Columns:</label>
<input type="number" id="col-input" min="1" value=100 step="1"> <input type="number" id="col-input" min="1" value=100 step="1">
@@ -41,6 +40,10 @@
</div> </div>
<br> <br>
<button id='resize'>Resize and Reset</button> <button id='resize'>Resize and Reset</button>
<div class='icon-links'>
<a href="https://github.com/MaxRobinsonTheGreat/EvolutionSimulatorV2"><i class="fa fa-github"></i></a>
<a href="https://twitter.com/max_romana"><i class="fa fa-twitter"></i></a>
</div>
</div> </div>
<div id='tab-container' class='control-set'> <div id='tab-container' class='control-set'>
@@ -48,26 +51,32 @@
<div class="tabnav"> <div class="tabnav">
<p class='tabnav-item' id='about'>About</p> <p class='tabnav-item' id='about'>About</p>
<p class='tabnav-item' id='editor'>Editor</p> <p class='tabnav-item' id='editor'>Editor</p>
<p class='tabnav-item' id='hyperparameters'>Hyperparameters</p> <p class='tabnav-item' id='hyperparameters'>Rule Tuning</p>
<p class='tabnav-item' id='stats'>Stats</p> <p class='tabnav-item' id='stats'>Stats</p>
</div> </div>
<div id='about' class='tab'> <div id='about' class='tab'>
<div class='left-half'> <div class='left-half'>
<h2>Welcome to the Life Engine</h2> <img src="../img/title.png" alt="Life Engine">
<p>The Life Engine simulates an evolving ecosystem and organisms that are made of cells. Different colored cells do different things.</p> <p>The Life Engine is a virtual ecosystem that allows organisms to grow, spread, and compete.</p>
<!-- <div id='cell-selections'> <p>Each organism is made up by a structure of cells, which provide different benefits based on their color.</p>
</div>
<div class='right-half'>
<h4>Cell Types</h4>
<div id='cell-legend'>
<div class='cell-legend-type' id='mouth' title="Mouth: Eats adjacent food."></div> <div class='cell-legend-type' id='mouth' title="Mouth: Eats adjacent food."></div>
<div class='cell-legend-type' id='producer' title="Producer: Produces adjacent food."></div> <div class='cell-legend-type' id='producer' title="Producer: Produces adjacent food."></div>
<div class='cell-legend-type' id='mover' title="Mover: Allows for movement and rotation."></div> <div class='cell-legend-type' id='mover' title="Mover: Allows for movement and rotation."></div>
<div class='cell-legend-type' id='killer' title="Killer: Harms oranisms in adjacent cells."></div> <div class='cell-legend-type' id='killer' title="Killer: Harms oranisms in adjacent cells."></div>
<div class='cell-legend-type' id='armor' title="Armor: Negates affects of killer cell."></div> <div class='cell-legend-type' id='armor' title="Armor: Negates affects of killer cell."></div>
<div class='cell-legend-type' id='food' title="Food: Not part of an organism. Once an organism has eaten enough food, it will reproduce."></div> <div class='cell-legend-type' id='food' title="Food: Not part of an organism. Once an organism has eaten enough food, it will reproduce."></div>
<div class='cell-legend-type' id='wall' title="Wall: Not part of an organism. BLocks movement and reproduction."></div> <div class='cell-legend-type' id='wall' title="Wall: Not part of an organism. Blocks movement and reproduction."></div>
</div> --> </div>
</div> <br>
<div class='right-half'> <p>Hover over each color to learn what it does. For a more in depth explanation of the simulation, view the
<p></p> <a href="https://github.com/MaxRobinsonTheGreat/EvolutionSimulatorV2/blob/master/README.md">readme</a>.
</p>
</div> </div>
</div> </div>
@@ -75,9 +84,9 @@
<div class='left-half'> <div class='left-half'>
<h2>Editor</h2> <h2>Editor</h2>
<button class="edit-mode-btn" id="wall" title="Drop/Remove Wall"><i class="fa fa-square"></i></button> <button class="edit-mode-btn" id="wall-drop" title="Drop/Remove Wall"><i class="fa fa-square"></i></button>
<button class="edit-mode-btn" id="food" title="Drop/Remove Food"><i class="fa fa-cutlery"></i></button> <button class="edit-mode-btn" id="food-drop" title="Drop/Remove Food"><i class="fa fa-cutlery"></i></button>
<button class="edit-mode-btn" id="kill" title="Click to kill"><i class="fa fa-bolt"></i></button> <button class="edit-mode-btn" id="click-kill" title="Click to kill"><i class="fa fa-bolt"></i></button>
<br><br/> <br><br/>
<button id="clear-walls" title="Clear All Walls"><i class="fa fa-window-close"></i></button> <button id="clear-walls" title="Clear All Walls"><i class="fa fa-window-close"></i></button>
@@ -103,49 +112,50 @@
</div> </div>
<div id='hyperparameters' class='tab'> <div id='hyperparameters' class='tab'>
<div class='left-half'> <div class='left-half'>
<h2>Hyperparameters</h2> <h2>Rule Tuning</h2>
<h4>Food Production vs Lifespan</h4> <h4>Food Production vs Lifespan</h4>
<label for="food-prod-prob">Probability of producing food:</label> <label for="food-prod-prob" title='The probability that a producer cell will produce food each tick.'>Probability of producing food:</label>
<input type="number" id="food-prod-prob" min=".001" max="100" value=4 step="1"> <input type="number" id="food-prod-prob" min=".001" max="100" value=4 step="1">
<br> <br>
<label for="lifespan-multiplier">Lifespan multiplier:</label> <label for="lifespan-multiplier" title='An organism lives for this many ticks per cell in its body.'>Lifespan multiplier:</label>
<input type="number" id="lifespan-multiplier" min="1" max="10000" value=100 step="1"> <input type="number" id="lifespan-multiplier" min="1" max="10000" value=100 step="1">
<br> <br>
<label for="fixed-ratio">Use fixed ratio</label> <label for="fixed-ratio" title='When on, the food production probability and lifespan multiplier obey a fixed ratio.'>Use fixed ratio</label>
<input type="checkbox" id="fixed-ratio" checked> <input type="checkbox" id="fixed-ratio" checked>
<h4>Organism Rotation</h4> <h4>Organism Rotation</h4>
<label for="mover-rot">Movers can rotate</label> <label for="mover-rot" title='Movers rotate randomly when they change directions.'>Movers can rotate</label>
<input type="checkbox" id="mover-rot" checked> <input type="checkbox" id="mover-rot" checked>
<br> <br>
<label for="offspring-rot">Offspring rotate</label> <label for="offspring-rot" title='Offspring will randomly rotate'>Offspring rotate</label>
<input type="checkbox" id="offspring-rot" checked> <input type="checkbox" id="offspring-rot" checked>
<br> <br>
<h4>Killer Cell Effects</h4> <h4>Killer Cell Effects</h4>
<label for="insta-kill">One touch kill</label> <label for="insta-kill" title='When on, killer cells immediatly kill organisms they touch. When off, organisms have as much health as they have cells and only take 1 damage from killer cells.'>One touch kill</label>
<input type="checkbox" id="insta-kill"> <input type="checkbox" id="insta-kill">
</div> </div>
<div class='right-half'> <div class='right-half'>
<br><br/> <br><br/>
<h4>Mutation Rate</h4> <h4>Mutation Rate</h4>
<label for="evolved-mutation">Use evolved mutation rate</label> <label for="evolved-mutation" title='When on, each organism has its own mutation rate that can increase or decrease. When off, all organisms have the same mutation rate.'>Use evolved mutation rate</label>
<input type="checkbox" id="evolved-mutation" checked> </br> <input type="checkbox" id="evolved-mutation" checked> </br>
<label class="global-mutation-in" for="global-mutation">Global mutation rate: </label> <label class="global-mutation-in" for="global-mutation">Global mutation rate: </label>
<input class="global-mutation-in" type="number" id="global-mutation" min="1" max="100" value=5 step="1"> <input class="global-mutation-in" type="number" id="global-mutation" min="1" max="100" value=5 step="1">
<h4>Mutation Type Probabilities</h4> <h4 title='When an organism mutates, it can choose from one of the following mutation types.'>Mutation Type Probabilities</h4>
<label for="add-prob">Add Cell:</label> <label for="add-prob" title='A new cell will stem from an existing one'>Add Cell:</label>
<input class="mut-prob" type="number" id="add-prob" min="0" max="100" value=33> <input class="mut-prob" type="number" id="add-prob" min="0" max="100" value=33>
<label for="change-prob">Change Cell:</label> <label for="change-prob" title='A currently existing cell will change its color.'>Change Cell:</label>
<input class="mut-prob" type="number" id="change-prob" min="0" max="100" value=33> <input class="mut-prob" type="number" id="change-prob" min="0" max="100" value=33>
<label for="remove-prob">Remove Cell:</label> <label for="remove-prob" title='An existing cell will be removed.'>Remove Cell:</label>
<input class="mut-prob" type="number" id="remove-prob" min="0" max="100" value=33> <input class="mut-prob" type="number" id="remove-prob" min="0" max="100" value=33>
<br/> <br/>
<label for="movers-produce">Movers can produce food</label> <label for="movers-produce" title='When on, movers can produce food from producer cells. When off, producer cells are disabled on mover organisms.'>Movers can produce food</label>
<input type="checkbox" id="movers-produce"> <input type="checkbox" id="movers-produce">
<br/> <br/>
<label for="food-blocks">Food blocks reproduction</label> <label for="food-blocks" title='When on, reproduction will fail if offspring intersect with food. When off, offspring will remove blocking food.'>Food blocks reproduction</label>
<input type="checkbox" id="food-blocks" checked> <input type="checkbox" id="food-blocks" checked>
<br>
<button id='reset-rules'>Reset all rules</button>
</div> </div>
</div> </div>
<div id='stats' class='tab'> <div id='stats' class='tab'>

BIN
dist/img/title.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 560 B

37
src/Controllers/ControlPanel.js
View File

@@ -29,12 +29,12 @@ class ControlPanel {
$('#fps').text("Target FPS: "+this.fps); $('#fps').text("Target FPS: "+this.fps);
}.bind(this); }.bind(this);
$('#pause-button').click(function() { $('#pause-button').click(function() {
$('#pause-button').find("i").toggleClass("fa fa-pause");
$('#pause-button').find("i").toggleClass("fa fa-play");
if (this.engine.running) { if (this.engine.running) {
$('#pause-button').text("Play");
this.engine.stop(); this.engine.stop();
} }
else if (!this.engine.running){ else if (!this.engine.running){
$('#pause-button').text("Pause");
this.engine.start(this.fps); this.engine.start(this.fps);
} }
}.bind(this)); }.bind(this));
@@ -146,6 +146,29 @@ class ControlPanel {
$('#food-blocks').change( function() { $('#food-blocks').change( function() {
Hyperparams.foodBlocksReproduction = this.checked; Hyperparams.foodBlocksReproduction = this.checked;
}); });
$('#reset-rules').click( function() {
Hyperparams.setDefaults();
$('#food-prod-prob').val(Hyperparams.foodProdProb);
$('#lifespan-multiplier').val(Hyperparams.lifespanMultiplier);
$('#fixed-ratio').prop('checked', true);
$('#mover-rot').prop('checked', Hyperparams.moversCanRotate);
$('#offspring-rot').prop('checked', Hyperparams.offspringRotate);
$('#insta-kill').prop('checked', Hyperparams.instaKill);
$('#evolved-mutation').prop('checked', !Hyperparams.useGlobalMutability);
$('#add-prob').val(Hyperparams.addProb);
$('#change-prob').val(Hyperparams.changeProb);
$('#remove-prob').val(Hyperparams.removeProb);
$('#movers-produce').prop('checked', Hyperparams.moversCanProduce);
$('#food-blocks').prop('checked', Hyperparams.foodBlocksReproduction);
if (!Hyperparams.useGlobalMutability) {
$('.global-mutation-in').css('display', 'none');
$('#avg-mut').css('display', 'block');
}
else {
$('.global-mutation-in').css('display', 'block');
$('#avg-mut').css('display', 'none');
}
});
} }
defineModeControls() { defineModeControls() {
@@ -154,13 +177,13 @@ class ControlPanel {
var prev_mode = self.env_controller.mode; var prev_mode = self.env_controller.mode;
$('#cell-selections').css('display', 'none'); $('#cell-selections').css('display', 'none');
switch(this.id){ switch(this.id){
case "food": case "food-drop":
self.setMode(Modes.FoodDrop); self.setMode(Modes.FoodDrop);
break; break;
case "wall": case "wall-drop":
self.setMode(Modes.WallDrop); self.setMode(Modes.WallDrop);
break; break;
case "kill": case "click-kill":
self.setMode(Modes.ClickKill); self.setMode(Modes.ClickKill);
break; break;
case "select": case "select":
@@ -175,8 +198,8 @@ class ControlPanel {
self.env_controller.org_to_clone = self.engine.organism_editor.getCopyOfOrg(); self.env_controller.org_to_clone = self.engine.organism_editor.getCopyOfOrg();
break; break;
} }
$('.edit-mode-btn').css('background-color', 'white'); $('.edit-mode-btn').css('background-color', '#9099c2');
$('#'+this.id).css('background-color', 'lightblue'); $('#'+this.id).css('background-color', '#81d2c7');
}); });

2
src/Engine.js
View File

@@ -7,7 +7,7 @@ const render_speed = 60;
class Engine{ class Engine{
constructor(){ constructor(){
this.fps = 60; this.fps = 60;
this.env = new Environment(5); this.env = new Environment(3);
this.organism_editor = new OrganismEditor(); this.organism_editor = new OrganismEditor();
this.controlpanel = new ControlPanel(this); this.controlpanel = new ControlPanel(this);
this.env.OriginOfLife(); this.env.OriginOfLife();

39
src/Hyperparameters.js
View File

@@ -1,27 +1,28 @@
const Neighbors = require("./Grid/Neighbors"); const Neighbors = require("./Grid/Neighbors");
const Hyperparams = { const Hyperparams = {
lifespanMultiplier: 100, setDefaults: function() {
foodProdProb: 4, this.lifespanMultiplier= 100;
foodProdProbScalar: 4, this.foodProdProb= 4;
killableNeighbors: Neighbors.adjacent, this.foodProdProbScalar= 4;
edibleNeighbors: Neighbors.adjacent, this.killableNeighbors= Neighbors.adjacent;
growableNeighbors: Neighbors.adjacent, this.edibleNeighbors= Neighbors.adjacent;
this.growableNeighbors= Neighbors.adjacent;
useGlobalMutability: false,
globalMutability: 5,
addProb: 33, this.useGlobalMutability= false;
changeProb: 33, this.globalMutability= 5;
removeProb: 33, this.addProb= 33;
this.changeProb= 33;
this.removeProb= 33;
this.moversCanRotate= true;
this.offspringRotate= true;
moversCanRotate: true, this.foodBlocksReproduction= true;
offspringRotate: true, this.moversCanProduce= false;
foodBlocksReproduction: true, this.instaKill= false;
moversCanProduce: false, },
instaKill: false,
// calculates the optimal ratio where a producer cell is most likely to produce 1 food in its lifespan * a scalar of my choice :) // calculates the optimal ratio where a producer cell is most likely to produce 1 food in its lifespan * a scalar of my choice :)
calcProducerFoodRatio : function(lifespan_fixed=true) { calcProducerFoodRatio : function(lifespan_fixed=true) {
@@ -54,4 +55,6 @@ const Hyperparams = {
} }
} }
Hyperparams.setDefaults();
module.exports = Hyperparams; module.exports = Hyperparams;