165 lines
7.1 KiB
HTML
165 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charste="UTF-8">
|
|
<title>Evolution Simulator</title>
|
|
<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>
|
|
</head>
|
|
<body>
|
|
<script src="../bundle.js"></script>
|
|
|
|
<div id='env'>
|
|
<canvas id='env-canvas'></canvas>
|
|
</div>
|
|
<div class='control-panel'>
|
|
<div id='speed-controller' class='control-set'>
|
|
<h2>Simulation Speed</h2>
|
|
<input id="slider" type="range" min="1" max="300" value="60">
|
|
<button id='pause-button'><i class="fa fa-pause"></i></button>
|
|
<p id='fps'>Target FPS: 60</p>
|
|
<p id='fps-actual'></p>
|
|
<br>
|
|
<button id='reset-env'>Reset Environment</button>
|
|
<label for="auto-reset">Auto Reset</label>
|
|
<input type="checkbox" id="auto-reset" checked>
|
|
<br>
|
|
<p id='reset-count'>Auto reset count: </p>
|
|
<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 simulates an evolving ecosystem and organisms that are made of cells. Different colored cells do different things.</p>
|
|
<!-- <div id='cell-selections'>
|
|
<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='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='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='wall' title="Wall: Not part of an organism. BLocks movement and reproduction."></div>
|
|
</div> -->
|
|
</div>
|
|
<div class='right-half'>
|
|
<p></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id='editor' class='tab'>
|
|
<div class='left-half'>
|
|
<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="food" 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>
|
|
|
|
<br><br/>
|
|
<button id="clear-walls" title="Clear All Walls"><i class="fa fa-window-close"></i></button>
|
|
|
|
</div>
|
|
<div class='right-half' id='editor-panel'>
|
|
<button class="edit-mode-btn" id="select" title="Select organism from world"><i class="fa fa-hand-pointer-o"></i></button>
|
|
<button class="edit-mode-btn" id="edit" title="Edit organism"><i class="fa fa-pencil"></i></button>
|
|
<button class="edit-mode-btn" id="drop-org" title="Drop organism in world"><i class="fa fa-plus"></i></button>
|
|
<div id='editor-env'>
|
|
<canvas id='editor-canvas'></canvas>
|
|
</div>
|
|
<div id='cell-selections'>
|
|
<div class='cell-type' id='mouth' title="Mouth: Eats adjacent food."></div>
|
|
<div class='cell-type' id='producer' title="Producer: Produces adjacent food."></div>
|
|
<div class='cell-type' id='mover' title="Mover: Allows for movement and rotation."></div>
|
|
<div class='cell-type' id='killer' title="Killer: Harms oranisms in adjacent cells."></div>
|
|
<div class='cell-type' id='armor' title="Armor: Negates affects of killer cell."></div>
|
|
<button id='clear-editor'>Clear</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div id='hyperparameters' class='tab'>
|
|
<div class='left-half'>
|
|
<h2>Hyperparameters</h2>
|
|
<h4>Food Production vs Lifespan</h4>
|
|
<label for="food-prod-prob">Probability of producing food:</label>
|
|
<input type="number" id="food-prod-prob" min=".001" max="100" value=4 step="1">
|
|
<br>
|
|
<label for="lifespan-multiplier">Lifespan multiplier:</label>
|
|
<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" checked>
|
|
<h4>Organism Rotation</h4>
|
|
<label for="mover-rot">Movers can rotate</label>
|
|
<input type="checkbox" id="mover-rot" checked>
|
|
<br>
|
|
<label for="offspring-rot">Offspring rotate</label>
|
|
<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">
|
|
|
|
</div>
|
|
<div class='right-half'>
|
|
<br><br/>
|
|
<h4>Mutation Rate</h4>
|
|
<label for="evolved-mutation">Use evolved mutation rate</label>
|
|
<input type="checkbox" id="evolved-mutation" checked> </br>
|
|
<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">
|
|
<h4>Mutation Type Probabilities</h4>
|
|
<label for="add-prob">Add Cell:</label>
|
|
<input class="mut-prob" type="number" id="add-prob" min="0" max="100" value=33>
|
|
<label for="change-prob">Change Cell:</label>
|
|
<input class="mut-prob" type="number" id="change-prob" min="0" max="100" value=33>
|
|
<label for="remove-prob">Remove Cell:</label>
|
|
<input class="mut-prob" type="number" id="remove-prob" min="0" max="100" value=33>
|
|
<br/>
|
|
<label for="movers-produce">Movers can produce food</label>
|
|
<input type="checkbox" id="movers-produce">
|
|
<br/>
|
|
<label for="food-blocks">Food blocks reproduction</label>
|
|
<input type="checkbox" id="food-blocks" checked>
|
|
|
|
</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>
|
|
<p id='largest-org'>Largest Organism: </p>
|
|
</div>
|
|
<div class='right-half'></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |