337 lines
18 KiB
HTML
337 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="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/6.1.2/css/all.min.css">
|
|
<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. Hotkey: A"><i class="fa fa-video-camera"></i></button>
|
|
<button class="edit-mode-btn drag-view" id="drag-view" title="Drag View. Hotkey: S"><i class="fa fa-arrows"></i></button>
|
|
<button class="edit-mode-btn wall-drop" id="wall-drop" title="Drop/Remove Wall. Hotkey: D"><i class="fa fa-th"></i></button>
|
|
<button class="edit-mode-btn food-drop selected" id="food-drop" title="Drop/Remove Food. Hotkey: F"><i class="fa fa-cutlery"></i></button>
|
|
<button class="edit-mode-btn click-kill" id="click-kill" title="Click to kill. Hotkey: G"><i class="fa fa-skull"></i></button>
|
|
</div>
|
|
<img src="./img/title.png" alt="Life Engine">
|
|
<h3>Simulation Speed</h3>
|
|
<input id="slider" type="range" min="1" max="300" value="60">
|
|
<button class='pause-button' title="Play/Pause. Hotkey: Spacebar"><i class="fa fa-pause"></i></button>
|
|
<button class="headless" title="Toggle rendering. Hotkey: H"><i class="fa fa-eye-slash"></i></button>
|
|
<p id='fps'>Target FPS: 60</p>
|
|
<p id='fps-actual'></p>
|
|
<button id='reset-env' title='Restarts simulation with default organism.'>Reset</button>
|
|
<button id='clear-env' title="Removes all organisms.">Clear</button>
|
|
<div id="brush-size-container">
|
|
<label id="brush-slider-label" for="brush-slider" title='Size of the brush for food, walls, and killing'><i class="fa fa-brush"></i> Brush Size </label>
|
|
<input id="brush-slider" type="range" min="0" max="15" value="2">
|
|
</div>
|
|
</div>
|
|
|
|
<div id='tab-container' class='control-set'>
|
|
|
|
<div class="tabnav">
|
|
<p class='tabnav-item open-tab' id='about'>About</p>
|
|
<p class='tabnav-item' id='editor'>Editor</p>
|
|
<p class='tabnav-item' id='world-controls'>World Controls</p>
|
|
<p class='tabnav-item' id='hyperparameters'>Evolution Controls</p>
|
|
<p class='tabnav-item' id='stats'>Statistics</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'>
|
|
<h3>The Life Engine</h3>
|
|
<p>The Life Engine is a virtual ecosystem that allows organisms to reproduce, compete, and evolve.</p>
|
|
<p>Each organism is made up of different colored cells. Hover over each color to learn what it does.</p>
|
|
<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 organisms 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>
|
|
</div>
|
|
<div class='right-half'>
|
|
<iframe id="video" src="https://www.youtube.com/embed/iSAKEnRfles"></iframe>
|
|
</div>
|
|
<div class='icon-links'>
|
|
<a href=https://github.com/MaxRobinsonTheGreat/EvolutionSimulatorV2 title='View the code'><i class="fa-brands fa-github"></i></a>
|
|
<a href="https://discord.gg/ZsrAAByEnr" title='Join the community'><i class="fa-brands fa-discord"></i></a>
|
|
<a href=" https://www.patreon.com/emergentgarden" title='Support the project'><i class="fa-brands fa-patreon"></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 select" id="select" title="Select organism from world. Hotkey: Z"><i class="fa-regular fa-hand-pointer"></i></button>
|
|
<button class="edit-mode-btn edit" id="edit" title="Edit organism. Hotkey: X"><i class="fa fa-pen-to-square"></i></button>
|
|
<button class="edit-mode-btn drop-org" id="drop-org" title="Drop organism in world. Hotkey: C"><i class="fa fa-plus"></i></button>
|
|
<button id="save-org" title="Save Organism"><i class="fa fa-save"></i></button>
|
|
<button id="load-org" title="Load Organism"><i class="fa fa-upload"></i></button>
|
|
<b id="unnatural-org-warning" title="Unnatural Organism: It has overlapping cells or genetic changes that cannot evolve naturally"><i class="fa fa-biohazard"></i></i></b>
|
|
</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 organisms 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>
|
|
<button class='randomize-button' id='generate-random' title="Randomizes organism"><i class="fa fa-random"></i></button>
|
|
<br>
|
|
</div>
|
|
|
|
</div>
|
|
<div class='right-half'>
|
|
<div id='organism-details' style="display:none;">
|
|
<h3>Organism Details</h3>
|
|
<p class='species-name'>Species Name: </p>
|
|
<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>
|
|
<div id='mutation-rate-cont'>
|
|
<label for="mutation-rate-edit" title='Probability that offspring of this organism will mutate'>Mutation Rate:</label>
|
|
<input type="number" id="mutation-rate-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>
|
|
|
|
<button id='reset-with-editor-org' title='Reset the environment with the organism in the editor'>Reset with Editor Organism</button>
|
|
</div>
|
|
</div>
|
|
<div id='world-controls' class='tab'>
|
|
<div class='left-half'>
|
|
<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" class="grid-size-in" id="col-input" min="1" value=100 step="1">
|
|
<label for="row-input">Rows:</label>
|
|
<input type="number" class="grid-size-in" id="row-input" min="1" value=100 step="1">
|
|
</div>
|
|
<button id='resize'>Resize and Reset</button>
|
|
<h3>Reset Options</h3>
|
|
<label for="auto-reset">Reset on total extinction</label>
|
|
<input type="checkbox" id="auto-reset" checked>
|
|
<p id='reset-count'>Auto reset count: </p>
|
|
<label for="auto-pause" title='Will override reset on extinction'>Pause on total extinction</label>
|
|
<input type="checkbox" id="auto-pause">
|
|
<br>
|
|
<button class='randomize-button reset-random' title="Generate many random organisms in the world.">Reset with Random Organisms</button>
|
|
<label for="num-random-orgs" title='Number of random organisms to generate'>Num to generate:</label>
|
|
<input type="number" id="num-random-orgs" min="1" value=100 step="1">
|
|
</div>
|
|
<div class='right-half'>
|
|
<br>
|
|
<button id='random-walls' title="Generates random walls.">Generate random walls</button> <br>
|
|
<button id="clear-walls" title="Clear All Walls. Hotkey: B">Clear all walls</button>
|
|
<br>
|
|
<label for="clear-walls-reset" title='When on, walls will be cleared when the environment resets'>Clear walls on reset</label>
|
|
<input type="checkbox" id="clear-walls-reset">
|
|
<br>
|
|
<button id='save-env' title="Download save file for entire world">Save World</button>
|
|
<label for="save-env-name" title='Save World as:'>Save As:</label>
|
|
<input type="text" id="save-env-name" value="world" style="text-align: center;">.json
|
|
<br>
|
|
<button id='load-env' title="Load world save file">Load World</button>
|
|
<label for="override-controls" title='Override the current evolution controls with those from the loaded world'>Override Evolution Controls</label>
|
|
<input type="checkbox" id="override-controls" checked>
|
|
</div>
|
|
</div>
|
|
<div id='hyperparameters' class='tab'>
|
|
<div class='left-half'>
|
|
<h2>Evolution 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="rot-enabled" title='Organisms rotate when born and while moving.'>Rotation Enabled</label>
|
|
<input type="checkbox" id="rot-enabled" checked>
|
|
<br>
|
|
<label for="insta-kill" title='When on, killer cells immediately 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="see-through-self" title='Allows eyes to see through an organisms own cells'>See through self:</label>
|
|
<input type="checkbox" id="see-through-self">
|
|
<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">
|
|
<br>
|
|
<label for="extra-mover-cost" title='Additional food cost for movers to reproduce'>Extra mover reproduction cost:</label>
|
|
<input type="number" id="extra-mover-cost" value=0 max="1000" step="1">
|
|
|
|
|
|
</div>
|
|
<div class='right-half'>
|
|
<button id='reset-rules'>Reset all controls</button><br>
|
|
<label for="org-limit" title='Maximum number of organisms (-1 is unlimited)'>Maximum Organisms:</label>
|
|
<input type="number" id="org-limit" min="-1" value=-1 step="1"><br>
|
|
<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>
|
|
<div class="global-mutation-container">
|
|
<label class="global-mutation-in" for="global-mutation">Global mutation rate: </label>
|
|
<input class="global-mutation-in" type="number" id="global-mutation" min="0" max="100" value=5 step="1">
|
|
</div>
|
|
<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>
|
|
<button id='save-controls' title="Save all Evolution Controls in a .json file">Save & Download</button>
|
|
<button id='load-controls' title="Load saved Evolution Controls with a .json file">Load</button>
|
|
<a id="download-el" style="display: none;"></a>
|
|
<input id="upload-hyperparams" style="display: none;" type="file">
|
|
</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>
|
|
</div>
|
|
<div class='load-panel'>
|
|
<div class="load-panel-title">
|
|
<button id='close-load-btn'><i class="fa fa-times"></i></button>
|
|
<h1>Community Creations</h1>
|
|
</div><br>
|
|
<div class="all-list-container">
|
|
<div class="list-title-container">
|
|
<h2>🌍Worlds</h2>
|
|
<div id="worlds-list-container" class="list-container">
|
|
<ul id="worlds-list"></ul>
|
|
</div>
|
|
</div>
|
|
<div class="list-title-container">
|
|
<h2>🦠Organisms</h2>
|
|
<div id="organisms-list-container" class="list-container">
|
|
<ul id="organisms-list"></ul>
|
|
</div>
|
|
</div>
|
|
<div class="list-title-container">
|
|
<h2>🔧Mods</h2>
|
|
<div id="mods-list-container" class="list-container">
|
|
<ul id="mods-list"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input id="upload-json" style="display: none;" type="file">
|
|
</div>
|
|
<div class='community-section'>
|
|
<button id="community-creations-btn" title="See worlds and organisms made by the community">Community Creations <i class="fa fa-users"></i></button>
|
|
</div>
|
|
<div class='hot-controls'>
|
|
<button class="reset-view" title="Reset View. Hotkey: A"><i class="fa fa-video-camera"></i></button>
|
|
<button class="edit-mode-btn drag-view" id="drag-view" title="Drag View. Hotkey: S"><i class="fa fa-arrows"></i></button>
|
|
<button class="edit-mode-btn wall-drop" id="wall-drop" title="Drop/Remove Wall. Hotkey: D"><i class="fa fa-th"></i></button>
|
|
<button class="edit-mode-btn food-drop selected" id="food-drop" title="Drop/Remove Food. Hotkey: F"><i class="fa fa-cutlery"></i></button>
|
|
<button class="edit-mode-btn click-kill" id="click-kill" title="Click to kill. Hotkey: G"><i class="fa fa-skull"></i></button>
|
|
<button class="headless" title="Toggle rendering. Hotkey: H"><i class="fa fa-eye-slash"></i></button>
|
|
<button class='pause-button' title="Play/Pause. Hotkey: Spacebar"><i class="fa fa-pause"></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>
|