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

Added color scheme/better brain

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

37
dist/css/style.css vendored
View File

@@ -98,7 +98,10 @@ button:hover{
grid-template-columns: 1;
}
.editor-buttons {
display: block;
display: grid;
grid-template-rows: 3;
grid-template-columns: 1;
height: fit-content;
}
.col-row-input {
@@ -158,6 +161,7 @@ button:hover{
.edit-mode-btn {
width: 30px;
height: 30px;
margin-top: 5px;
}
.edit-mode-btn:hover{
background-color: #81d2c7;
@@ -165,6 +169,9 @@ button:hover{
.edit-mode-btn#drag-view {
background-color: #81d2c7;
}
#clear-walls {
margin-top: 5px;
}
#organism-options {
display: none;
}
@@ -181,6 +188,10 @@ button:hover{
}
#cell-selections {
display: none;
grid-template-columns: 2;
height: fit-content;
padding: 0;
margin: 0;
}
#cell-legend {
display: flex;
@@ -206,30 +217,6 @@ button:hover{
border-color: black;
border: 5px;
}
#mouth{
background-color: orange;
}
#producer{
background-color: white;
}
#mover{
background-color: #3493eb;
}
#killer{
background-color: red;
}
#armor{
background-color: purple;
}
#eye{
background-color: #d4bb3f;
}
#food{
background-color: green;
}
#wall{
background-color: gray;
}
#editor-mode-cont{
padding-top: 20px;
}

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'>

2
dist/js/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

3
dist/json/color_scheme.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"hello": "world"
}

13
src/Controllers/ControlPanel.js
View File

@@ -173,9 +173,9 @@ class ControlPanel {
defineModeControls() {
var self = this;
$('.edit-mode-btn').click( function() {
var prev_mode = self.env_controller.mode;
$('#cell-selections').css('display', 'none');
$('#organism-options').css('display', 'none');
self.editor_controller.clearDetailsPanel();
switch(this.id){
case "food-drop":
self.setMode(Modes.FoodDrop);
@@ -191,8 +191,7 @@ class ControlPanel {
break;
case "edit":
self.setMode(Modes.Edit);
$('#cell-selections').css('display', 'block');
$('#organism-options').css('display', 'block');
self.editor_controller.setEditorPanel();
break;
case "drop-org":
self.setMode(Modes.Clone);
@@ -203,7 +202,6 @@ class ControlPanel {
}
$('.edit-mode-btn').css('background-color', '#9099c2');
$('#'+this.id).css('background-color', '#81d2c7');
});
$('.reset-view').click( function(){
@@ -224,6 +222,7 @@ class ControlPanel {
}.bind(this));
$('#clear-editor').click( function() {
this.engine.organism_editor.clear();
this.editor_controller.setEditorPanel();
}.bind(this));
}
@@ -241,6 +240,8 @@ class ControlPanel {
setEditorOrganism(org) {
this.engine.organism_editor.setOrganismToCopyOf(org);
this.editor_controller.clearDetailsPanel();
this.editor_controller.setDetailsPanel();
}
changeEngineSpeed(change_val) {
@@ -259,10 +260,6 @@ class ControlPanel {
$('#avg-mut').text("Average Mutation Rate: " + Math.round(this.engine.env.averageMutability() * 100) / 100);
$('#largest-org').text("Largest Organism: " + this.engine.env.largest_cell_count + " cells");
$('#reset-count').text("Auto reset count: " + this.engine.env.reset_count);
if (this.editor_controller.env.organism.cells.length > 1)
$('#editor-cell-count').text(this.editor_controller.env.organism.cells.length+' cells');
else
$('#editor-cell-count').text('1 cell');
}
}

113
src/Controllers/EditorController.js
View File

@@ -2,6 +2,7 @@ const CanvasController = require("./CanvasController");
const Modes = require("./ControlModes");
const CellStates = require("../Organism/Cell/CellStates");
const Directions = require("../Organism/Directions");
const Hyperparams = require("../Hyperparameters");
class EditorController extends CanvasController{
constructor(env, canvas) {
@@ -10,7 +11,7 @@ class EditorController extends CanvasController{
this.edit_cell_type = null;
this.highlight_org = false;
this.defineCellTypeSelection();
this.defineEditorOptions();
this.defineEditorDetails();
}
mouseMove() {
@@ -42,10 +43,13 @@ class EditorController extends CanvasController{
}
if (this.right_click)
this.env.removeCellFromOrg(this.mouse_c, this.mouse_r);
this.setBrainPanelVisibility();
this.setMoveRangeVisibility();
}
updateDetails() {
$('#birth-distance').val(this.env.organism.birth_distance);
$('.cell-count').text("Cell count: "+this.env.organism.cells.length);
}
defineCellTypeSelection() {
@@ -77,11 +81,112 @@ class EditorController extends CanvasController{
});
}
defineEditorOptions() {
$('#birth-distance').change ( function() {
this.env.organism.birth_distance = parseInt($('#birth-distance').val());
defineEditorDetails() {
this.details_html = $('#organism-details');
this.edit_details_html = $('#edit-organism-details');
this.decision_names = ["ignore", "move away", "move towards"];
$('#birth-distance-edit').change ( function() {
this.env.organism.birth_distance = parseInt($('#birth-distance-edit').val());
}.bind(this));
$('#move-range-edit').change ( function() {
this.env.organism.move_range = parseInt($('#move-range-edit').val());
}.bind(this));
$('#observation-type-edit').change ( function() {
this.setBrainEditorValues($('#observation-type-edit').val());
}.bind(this));
$('#reaction-edit').change ( function() {
var obs = $('#observation-type-edit').val();
var decision = parseInt($('#reaction-edit').val());
this.env.organism.brain.decisions[obs] = decision;
}.bind(this));
}
clearDetailsPanel() {
$('#organism-details').css('display', 'none');
$('#edit-organism-details').css('display', 'none');
}
setDetailsPanel() {
var org = this.env.organism;
$('.cell-count').text("Cell count: "+org.cells.length);
$('#birth-distance').text("Reproduction Distance: "+org.birth_distance);
$('#move-range').text("Move Range: "+org.move_range);
$('#mutation-rate').text("Mutation Rate: "+org.mutability);
if (Hyperparams.useGlobalMutability) {
$('#mutation-rate').css('display', 'none');
}
else {
$('#mutation-rate').css('display', 'block');
}
this.setMoveRangeVisibility();
if (this.setBrainPanelVisibility()) {
var chase_types = [];
var retreat_types = [];
for(var cell_name in org.brain.decisions) {
var decision = org.brain.decisions[cell_name];
if (decision == 1) {
retreat_types.push(cell_name)
}
else if (decision == 2) {
chase_types.push(cell_name);
}
}
$('#chase-types').text("Move Towards: " + chase_types);
$('#retreat-types').text("Move Away From: " + retreat_types);
}
$('#organism-details').css('display', 'block');
}
setEditorPanel() {
this.clearDetailsPanel();
var org = this.env.organism;
$('.cell-count').text("Cell count: "+org.cells.length);
$('#birth-distance-edit').val(org.birth_distance);
if (this.setMoveRangeVisibility()){
$('#move-range-edit').val(org.move_range);
}
if (this.setBrainPanelVisibility()){
this.setBrainEditorValues($('#observation-type-edit').val());
}
$('#cell-selections').css('display', 'grid');
$('#edit-organism-details').css('display', 'block');
}
setBrainPanelVisibility() {
var org = this.env.organism;
if (org.has_eyes && org.is_mover) {
$('.brain-details').css('display', 'block');
return true;
}
$('.brain-details').css('display', 'none');
return false;
}
setMoveRangeVisibility() {
var org = this.env.organism;
if (org.is_mover) {
$('#move-range-cont').css('display', 'block');
$('#move-range').css('display', 'block');
return true;
}
$('#move-range-cont').css('display', 'none');
$('#move-range').css('display', 'none');
return false;
}
setBrainEditorValues(name) {
$('#observation-type-edit').val(name);
var reaction = this.env.organism.brain.decisions[name];
$('#reaction-edit').val(reaction);
}
}

1
src/Controllers/EnvironmentController.js
View File

@@ -94,7 +94,6 @@ class EnvironmentController extends CanvasController{
}
if (this.cur_org != null){
this.control_panel.setEditorOrganism(this.cur_org);
console.log(this.cur_org)
}
break;

3
src/Engine.js
View File

@@ -1,6 +1,7 @@
const WorldEnvironment = require('./Environments/WorldEnvironment');
const ControlPanel = require('./Controllers/ControlPanel');
const OrganismEditor = require('./Environments/OrganismEditor');
const ColorScheme = require('./Rendering/ColorScheme');
const render_speed = 60;
@@ -10,6 +11,8 @@ class Engine{
this.env = new WorldEnvironment(5);
this.organism_editor = new OrganismEditor();
this.controlpanel = new ControlPanel(this);
this.colorscheme = new ColorScheme(this.env, this.organism_editor);
this.colorscheme.loadColorScheme();
this.env.OriginOfLife();
this.last_update = Date.now();
this.delta_time = 0;

4
src/Environments/OrganismEditor.js
View File

@@ -15,8 +15,6 @@ class OrganismEditor extends Environment{
this.controller = new EditorController(this, this.renderer.canvas);
this.grid_map = new GridMap(15, 15, cell_size);
this.clear();
this.renderer.renderFullGrid(this.grid_map.grid);
}
update() {
@@ -72,7 +70,7 @@ class OrganismEditor extends Environment{
this.organism.updateGrid();
this.controller.updateDetails();
}
getCopyOfOrg() {
var new_org = new Organism(0, 0, null, this.organism);
return new_org;

1
src/Environments/WorldEnvironment.js
View File

@@ -13,7 +13,6 @@ class WorldEnvironment extends Environment{
var grid_rows = Math.floor(this.renderer.height / cell_size);
var grid_cols = Math.floor(this.renderer.width / cell_size);
this.grid_map = new GridMap(grid_cols, grid_rows, cell_size);
this.renderer.renderFullGrid(this.grid_map.grid);
this.organisms = [];
this.walls = [];
this.total_mutability = 0;

2
src/Hyperparameters.js
View File

@@ -23,7 +23,7 @@ const Hyperparams = {
this.instaKill = false;
this.lookRange = 15;
this.lookRange = 20;
},
balanceMutationProbs : function(choice) {

24
src/Organism/Cell/CellStates.js
View File

@@ -1,8 +1,8 @@
// A cell state is used to differentiate type and render the cell
class CellState{
constructor(name, color) {
constructor(name) {
this.name = name;
this.color = color
this.color = 'black';
}
render(ctx, cell, size) {
@@ -13,48 +13,48 @@ class CellState{
class Empty extends CellState {
constructor() {
super('empty', '#121D29');
super('empty');
}
}
class Food extends CellState {
constructor() {
super('food', 'green');
super('food');
}
}
class Wall extends CellState {
constructor() {
super('wall', 'gray');
super('wall');
}
}
class Mouth extends CellState {
constructor() {
super('mouth', 'orange');
super('mouth');
}
}
class Producer extends CellState {
constructor() {
super('producer', 'white');
super('producer');
}
}
class Mover extends CellState {
constructor() {
super('mover', '#3493EB');
super('mover');
}
}
class Killer extends CellState {
constructor() {
super('killer', 'red');
super('killer');
}
}
class Armor extends CellState {
constructor() {
super('armor', 'purple');
super('armor');
}
}
class Eye extends CellState {
constructor() {
super('eye', '#d4bb3f');
this.slit_color = '#121D29';
super('eye');
this.slit_color = 'black';
}
render(ctx, cell, size) {
ctx.fillStyle = this.color;

26
src/Organism/Organism.js
View File

@@ -1,4 +1,3 @@
// const CellTypes = require("./Cell/CellTypes");
const CellStates = require("../Organism/Cell/CellStates");
const BodyCellFactory = require("./Cell/BodyCells/BodyCellFactory");
const Neighbors = require("../Grid/Neighbors");
@@ -6,8 +5,6 @@ const Hyperparams = require("../Hyperparameters");
const Directions = require("./Directions");
const Brain = require("./Perception/Brain");
const directions = [[0,1],[0,-1],[1,0],[-1,0]]
class Organism {
constructor(col, row, env, parent=null) {
this.c = col;
@@ -25,6 +22,7 @@ class Organism {
this.can_rotate = Hyperparams.moversCanRotate;
this.move_count = 0;
this.move_range = 4;
this.ignore_brain_for = 0;
this.mutability = 5;
this.damage = 0;
this.birth_distance = 4;
@@ -50,6 +48,9 @@ class Organism {
}
addRandomizedCell(state, c, r) {
if (state==CellStates.eye && !this.has_eyes) {
this.brain.randomizeDecisions();
}
var new_cell = BodyCellFactory.createRandom(this, state, c, r);
this.cells.push(new_cell);
return new_cell;
@@ -188,8 +189,8 @@ class Organism {
// add cell
// console.log("add cell")
var state = CellStates.getRandomLivingType();
var branch = this.cells[Math.floor(Math.random() * this.cells.length)];
var state = CellStates.getRandomLivingType();//branch.state;
var growth_direction = Neighbors.all[Math.floor(Math.random() * Neighbors.all.length)]
var c = branch.loc_col+growth_direction[0];
var r = branch.loc_row+growth_direction[1];
@@ -216,7 +217,7 @@ class Organism {
var cell = this.cells[Math.floor(Math.random() * this.cells.length)];
mutated = this.removeCell(cell.loc_col, cell.loc_row);
}
}
}
if (this.is_mover && Math.random() * 100 <= 10) {
this.move_range += Math.floor(Math.random() * 4) - 2;
@@ -373,10 +374,21 @@ class Organism {
if (this.is_mover) {
this.move_count++;
var changed_dir = this.brain.decide();
var changed_dir = false;
if (this.ignore_brain_for == 0){
changed_dir = this.brain.decide();
}
else{
this.ignore_brain_for --;
}
var moved = this.attemptMove();
if ((this.move_count > this.move_range && !changed_dir) || !moved){
this.attemptRotate();
var rotated = this.attemptRotate();
if (!rotated) {
this.changeDirection(Directions.getRandomDirection());
if (changed_dir)
this.ignore_brain_for = this.move_range + 1;
}
}
}

13
src/Organism/Perception/Brain.js
View File

@@ -8,6 +8,9 @@ const Decision = {
chase: 2,
getRandom: function(){
return Math.floor(Math.random() * 3);
},
getRandomNonNeutral: function() {
return Math.floor(Math.random() * 2)+1;
}
}
@@ -27,7 +30,15 @@ class Brain {
this.decisions[CellStates.killer.name] = Decision.retreat;
this.decisions[CellStates.armor.name] = Decision.neutral;
this.decisions[CellStates.eye.name] = Decision.neutral;
}
randomizeDecisions() {
// randomize the non obvious decisions
this.decisions[CellStates.mouth.name] = Decision.getRandom();
this.decisions[CellStates.producer.name] = Decision.getRandom();
this.decisions[CellStates.mover.name] = Decision.getRandom();
this.decisions[CellStates.armor.name] = Decision.getRandom();
this.decisions[CellStates.eye.name] = Decision.getRandom();
}
observe(observation) {

38
src/Rendering/ColorScheme.js Normal file
View File

@@ -0,0 +1,38 @@
const CellStates = require("../Organism/Cell/CellStates");
var color_scheme = {
"empty":"#0E1318",
"food":"#2F7AB7",
"wall":"gray",
"mouth":"#DEB14D",
"producer":"#15DE59",
"mover":"#60D4FF",
"killer":"#F82380",
"armor":"#7230DB",
"eye":"#B6C1EA",
"eye-slit": "#0E1318"
}
// Renderer controls access to a canvas. There is one renderer for each canvas
class ColorScheme {
constructor(world_env, editor_env) {
this.world_env = world_env;
this.editor_env = editor_env;
}
loadColorScheme() {
for (var state of CellStates.all) {
state.color = color_scheme[state.name];
}
CellStates.eye.slit_color=color_scheme['eye-slit']
for (var cell_type in color_scheme) {
$('#'+cell_type+'.cell-type ').css('background-color', color_scheme[cell_type]);
$('#'+cell_type+'.cell-legend-type').css('background-color', color_scheme[cell_type]);
}
this.world_env.renderer.renderFullGrid(this.world_env.grid_map.grid);
this.editor_env.renderer.renderFullGrid(this.editor_env.grid_map.grid);
}
}
module.exports = ColorScheme;