Added color scheme/better brain

This commit is contained in:
MaxRobinsonTheGreat
2020-08-21 16:07:04 -06:00
parent 0d2220827d
commit eaffd06133
15 changed files with 276 additions and 80 deletions

76
dist/index.html vendored
View File

@@ -38,7 +38,7 @@
<br>
<h3>Grid Size</h3>
<label for="cell-size">Cell Size:</label>
<input type="number" id="cell-size" min="1" max="100" value=4 step="1">
<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'>
@@ -82,6 +82,7 @@
<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>
@@ -103,32 +104,75 @@
<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>
<div class='cell-type' id='eye' title="Eye: Looks for cells to move away from or towards"></div>
<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='editor-details'>
<div id='organism-details'>
<p id='editor-cell-count'>1 cell</p>
</div>
<div id='organism-options'>
<label for="birth-distance" title='The number of cells away offspring will spawn.'>Reproduction Distance:</label>
<input type="number" id="birth-distance" min="1" max="100" value=3 step="1">
<div id='organism-details' style="display:none;">
<h3>Organism Details</h3>
<p class='cell-count'>Cell count: </p>
<p id='birth-distance'>Reproduction Distance: </p>
<p id='move-range'>Move Range: </p>
<p id='mutation-rate'>Mutation Rate: </p>
<br>
<div class='brain-details'>
<h4>Brain</h4>
<p id='chase-types'>Move Towards: food</p>
<p id='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>
<label for="birth-distance-edit" title='The number of cells away offspring will spawn.'>Reproduction Distance:</label>
<input type="number" id="birth-distance-edit" min="1" max="100" value=3 step="1">
<br>
<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>
</div>
</div>
</div>
</div>
<div id='hyperparameters' class='tab'>
<div class='left-half'>
<h2>Simulation Controls</h2>
<h4>Food Production vs Lifespan</h4>
<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>
@@ -145,7 +189,7 @@
<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=10 step="1">
<input type="number" id="look-range" min="1" max="50" value=20 step="1">
</div>
<div class='right-half'>