869cc85d04
Adds a random organism generator that is accessible through the editor control panel. This generator gives the user to generate an entire world of random organisms for selection to act upon.
299 lines
15 KiB
HTML
299 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charste="UTF-8">
|
|
<title>The Life Engine</title>
|
|
<link rel="icon" href="./img/icon.png">
|
|
<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>
|
|
<script src="./js/bundle.js"></script>
|
|
|
|
<div id='env'>
|
|
<canvas id='env-canvas'></canvas>
|
|
</div>
|
|
<div class='control-panel'>
|
|
<div id='speed-controller' class='control-set'>
|
|
<div class='vertical-buttons'>
|
|
<button class="reset-view" title="Reset View"><i class="fa fa-video-camera"></i></button>
|
|
<button class="edit-mode-btn" id="drag-view" title="Drag View"><i class="fa fa-arrows"></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-drop" title="Drop/Remove Food"><i class="fa fa-cutlery"></i></button>
|
|
<button class="edit-mode-btn" id="click-kill" title="Click to kill"><i class="fa fa-bolt"></i></button>
|
|
<button id="clear-walls" title="Clear All Walls"><i class="fa fa-window-close"></i></button>
|
|
</div>
|
|
<h2>Simulation Speed</h2>
|
|
<input id="slider" type="range" min="1" max="300" value="60">
|
|
<button class='pause-button'><i class="fa fa-pause"></i></button>
|
|
<button class="headless" title="Toggle rendering"><i class="fa fa-eye-slash"></i></button>
|
|
<p id='fps'>Target FPS: 60</p>
|
|
<p id='fps-actual'></p>
|
|
<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>
|
|
<br>
|
|
<h3>Grid Size</h3>
|
|
<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>
|
|
<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'>Simulation Controls</p>
|
|
<p class='tabnav-item' id='stats'>Stats</p>
|
|
<p class='tabnav-item' id='challenges'>Challenges</p>
|
|
<button id="minimize" title="Minimze Control Panel"><i class="fa fa-minus-square"></i></button>
|
|
</div>
|
|
|
|
<div id='about' class='tab'>
|
|
<div class='left-half'>
|
|
<img src="./img/title.png" alt="Life Engine">
|
|
<p>The Life Engine is a virtual ecosystem that allows organisms to grow, spread, and compete.</p>
|
|
<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='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='eye' title="Eye: Observes cells and decides movement."></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>
|
|
<br>
|
|
<p>Hover over each color to learn what it does. For a more in depth explanation of the simulation, view the
|
|
<a href="https://github.com/MaxRobinsonTheGreat/EvolutionSimulatorV2#readme">readme</a> and you can explore the source code.
|
|
</p>
|
|
</div>
|
|
<div class='icon-links'>
|
|
<a href="https://www.youtube.com/channel/UCwBhBDsqiQflTMLy2epbQVw"><i class="fa fa-youtube"></i></a>
|
|
<a href="https://twitter.com/max_romana"><i class="fa fa-twitter"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id='editor' class='tab'>
|
|
<div class='left-half' id='editor-panel'>
|
|
<div class='editor-buttons'>
|
|
<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='randomize' title="Randomize"><i class="fa fa-random"></i></button>
|
|
<button class="edit-mode-btn" id="drop-org" title="Drop organism in world"><i class="fa fa-plus"></i></button>
|
|
</div>
|
|
<div id='editor-env'>
|
|
<canvas id='editor-canvas'></canvas>
|
|
</div>
|
|
<div id='cell-selections'>
|
|
<div style='grid-column: 1;'>
|
|
<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>
|
|
<div style='grid-column: 2;'>
|
|
<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>
|
|
<div class='cell-type' id='eye' title="Eye: Looks for cells to move away from or towards. Click again on a placed cell to rotate"></div>
|
|
</div>
|
|
|
|
<button id='clear-editor'>Clear</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class='right-half'>
|
|
<div id='organism-details' style="display:none;">
|
|
<h3>Organism Details</h3>
|
|
<p class='cell-count'>Cell count: </p>
|
|
<p id='move-range'>Move Range: </p>
|
|
<p id='mutation-rate'>Mutation Rate: </p>
|
|
<br>
|
|
|
|
<div class='brain-details'>
|
|
<h4>Brain</h4>
|
|
<p class='chase-types'>Move Towards: food</p>
|
|
<p class='retreat-types'>Move Away From: killer</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id='edit-organism-details' style="display:none;">
|
|
<h3>Edit Organism</h3>
|
|
<p class='cell-count'>Cell count: </p>
|
|
<div id='move-range-cont'>
|
|
<label for="move-range-edit" title='The number of cells to move before randomly changing direction. Overriden by brain decisions.'>Move Range:</label>
|
|
<input type="number" id="move-range-edit" min="1" max="100" value=3 step="1">
|
|
</div>
|
|
<br>
|
|
<div class='brain-details'>
|
|
<h4>Brain</h4>
|
|
<label for="observation-type-edit">Observation: </label>
|
|
<select name="observation-type-edit" id="observation-type-edit">
|
|
<option value="food">food</option>
|
|
<option value="mouth">mouth</option>
|
|
<option value="producer">producer</option>
|
|
<option value="mover">mover</option>
|
|
<option value="killer">killer</option>
|
|
<option value="armor">armor</option>
|
|
<option value="eye">eye</option>
|
|
</select>
|
|
|
|
<label for="reaction-edit">Reaction: </label>
|
|
<select name="reaction-edit" id="reaction-edit">
|
|
<option value="0">ignore</option>
|
|
<option value="1">move away</option>
|
|
<option value="2">move towards</option>
|
|
</select>
|
|
<br>
|
|
<p class='chase-types'>Move Towards: food</p>
|
|
<p class='retreat-types'>Move Away From: killer</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id='randomize-organism-details' style="display:none;">
|
|
<h3>Generate Random Organism</h3>
|
|
|
|
<label for='random-width' title='The maximum width of the generated organism'>Max Width:</label>
|
|
<input type='range' id='random-width' min="1" max="7" value="2" step="1">
|
|
<span id='random-width-display'>5</span>
|
|
<br />
|
|
|
|
<label for='cell-spawn-chance' title='The chance a cell will spawn in the innermost layer (becomes less likely near the edges)'>Cell Spawn Chance:</label>
|
|
<input type='range' id='cell-spawn-chance' min="0.01" max="1" value="0.75" step='0.001'>
|
|
<span id='spawn-chance-display'>75%</span>
|
|
<br />
|
|
|
|
<button class='randomize-button' id='generate-random' title="Generate a random organism in the editor window.">Generate</button>
|
|
<br />
|
|
<button class='randomize-button' id='create-random-world' title="Generate hundreds of random organisms in the world.">Create Random World</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id='hyperparameters' class='tab'>
|
|
<div class='left-half'>
|
|
<h2>Simulation Controls</h2>
|
|
<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">
|
|
<br>
|
|
<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">
|
|
<br>
|
|
<label for="mover-rot" title='Movers rotate randomly when they change directions.'>Movers can rotate</label>
|
|
<input type="checkbox" id="mover-rot" checked>
|
|
<br>
|
|
<label for="offspring-rot" title='Offspring will randomly rotate'>Offspring rotate</label>
|
|
<input type="checkbox" id="offspring-rot" checked>
|
|
<br>
|
|
<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">
|
|
<br>
|
|
<label for="look-range" title='How far an eye cell can see (in number of cells)'>Look range:</label>
|
|
<input type="number" id="look-range" min="1" max="50" value=20 step="1">
|
|
<br>
|
|
<label for="food-drop-rate" title='Rate at which food is automatically generated and dropped in the world'>Auto food drop rate:</label>
|
|
<input type="number" id="food-drop-rate" value=0 max="1000">
|
|
|
|
</div>
|
|
<div class='right-half'>
|
|
<button id='reset-rules'>Reset all controls</button>
|
|
<h4>Mutation Rate</h4>
|
|
<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>
|
|
<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 title='When an organism mutates, it can choose from one of the following mutation types.'>Mutation Type Probabilities</h4>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<br/>
|
|
<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">
|
|
<br/>
|
|
<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>
|
|
<br>
|
|
|
|
</div>
|
|
</div>
|
|
<div id='stats' class='tab'>
|
|
<div class='left-half'>
|
|
<h2>Statistics</h2>
|
|
<p id='org-count'>Total Population: </p>
|
|
<p id='species-count'>Number of Species: </p>
|
|
<p id='largest-org'>Largest Organism Ever: </p>
|
|
<p id='avg-mut'>Average Mutation Rate: </p>
|
|
<label for="chart-option">Chart: </label>
|
|
<select name="chart-option" id="chart-option">
|
|
<option value="population">Population</option>
|
|
<option value="species">Species</option>
|
|
<option value="mut-rate">Organism Structure</option>
|
|
<option value="mut-rate">Mutation Rate</option>
|
|
</select>
|
|
<p id='chart-note'></p>
|
|
|
|
</div>
|
|
<div class='right-half'>
|
|
<div id="chartContainer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div id='challenges' class='tab'>
|
|
<div class='left-half'>
|
|
<h2>Challenges</h2>
|
|
<button class='challenge-btn' value='Without editing any organisms, evolve a static producer organism with 15 cells. '>Megaflora</button>
|
|
<button class='challenge-btn' value='Without editing any organisms, evolve a mover organism with 10 cells.'>Megafauna</button>
|
|
<button class='challenge-btn' value='Use the editor to create a new organism that dominates the current ecosystem and causes many species to go extinct.'>Invasive Species</button>
|
|
<button class='challenge-btn' value='Either through editing or evolving, create two different species that have a mutually beneficial relationship.'>Symbiosis</button>
|
|
<button class='challenge-btn' value='Evolve a stable ecosystem with 10 significantly different species.'>Biodiversity</button>
|
|
<button class='challenge-btn' value='Evolve a stable ecosystem without any killer cells.'>Utopia</button>
|
|
</div>
|
|
<div class='right-half'>
|
|
<h2 id='challenge-title'>Select a Challenge</h2>
|
|
<br>
|
|
<p id='challenge-description'>Challenge yourself to create interesting ecosystems and organisms. There is no formal way to win or lose, its just for fun! </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='hot-controls'>
|
|
<button class="reset-view" title="Reset View"><i class="fa fa-video-camera"></i></button>
|
|
<button class="edit-mode-btn" id="drag-view" title="Drag View"><i class="fa fa-arrows"></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-drop" title="Drop/Remove Food"><i class="fa fa-cutlery"></i></button>
|
|
<button class="edit-mode-btn" id="click-kill" title="Click to kill"><i class="fa fa-bolt"></i></button>
|
|
<button class='pause-button'><i class="fa fa-pause"></i></button>
|
|
<button class="headless" title="Toggle rendering"><i class="fa fa-eye-slash"></i></button>
|
|
</div>
|
|
<div id="headless-notification">
|
|
<i class="fa fa-eye-slash" ></i>
|
|
</div>
|
|
<div id='maximize-hot-control' class='hot-controls'>
|
|
<button id="maximize" title="Show Control Panel"><i class="fa fa-plus-square"></i></button>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |