Added color scheme/better brain

dist/css/style.css

@@ -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;
 }

dist/index.html

@@ -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 style='grid-column: 1;'>
-							<div class='cell-type' id='producer' title="Producer: Produces adjacent food."></div>
+								<div class='cell-type' id='mouth' title="Mouth: Eats adjacent food."></div>
-							<div class='cell-type' id='mover' title="Mover: Allows for movement and rotation."></div>
+								<div class='cell-type' id='producer' title="Producer: Produces adjacent food."></div>
-							<div class='cell-type' id='killer' title="Killer: Harms oranisms in adjacent cells."></div>
+								<div class='cell-type' id='mover' title="Mover: Allows for movement and rotation."></div>
-							<div class='cell-type' id='armor' title="Armor: Negates affects of killer cell."></div>
+							</div>
-							<div class='cell-type' id='eye' title="Eye: Looks for cells to move away from or towards"></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' style="display:none;">
-							<div id='organism-details'>
+							<h3>Organism Details</h3>
-								<p id='editor-cell-count'>1 cell</p>
+							<p class='cell-count'>Cell count: </p>
-							</div>
+							<p id='birth-distance'>Reproduction Distance: </p>
-							<div id='organism-options'>
+							<p id='move-range'>Move Range: </p>
-								<label for="birth-distance" title='The number of cells away offspring will spawn.'>Reproduction Distance:</label>
+							<p id='mutation-rate'>Mutation Rate: </p>
-								<input type="number" id="birth-distance" min="1" max="100" value=3 step="1">
+							<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'>

dist/json/color_scheme.json

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

src/Controllers/ControlPanel.js

@@ -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');
+                    self.editor_controller.setEditorPanel();
-                    $('#organism-options').css('display', 'block');
                     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');
     }
 
 }

src/Controllers/EditorController.js

@@ -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() {
+    defineEditorDetails() {
-        $('#birth-distance').change ( function() {
+        this.details_html = $('#organism-details');
-            this.env.organism.birth_distance = parseInt($('#birth-distance').val());
+        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);
     }
 }
 

src/Controllers/EnvironmentController.js

@@ -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;
 

src/Engine.js

@@ -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;

src/Environments/OrganismEditor.js

@@ -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;

src/Environments/WorldEnvironment.js

@@ -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;

src/Hyperparameters.js

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

src/Organism/Cell/CellStates.js

@@ -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');
+        super('eye');
-        this.slit_color = '#121D29';
+        this.slit_color = 'black';
     }
     render(ctx, cell, size) {
         ctx.fillStyle = this.color;

src/Organism/Organism.js

@@ -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;
+                }
             }
         }
 

src/Organism/Perception/Brain.js

@@ -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) {

src/Rendering/ColorScheme.js

@@ -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;