Added eye editing stuff

This commit is contained in:
MaxRobinsonTheGreat
2020-08-16 15:55:37 -06:00
parent 3d3c6f8558
commit 3589df3919
18 changed files with 151 additions and 154 deletions

21
dist/css/style.css vendored
View File

@@ -20,9 +20,9 @@ body{
text-align: center;
transform: scale(1);
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-crisp-edges;
image-rendering: pixelated;
image-rendering: crisp-edges;
image-rendering: -webkit-crisp-edges;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
#env-canvas {
@@ -91,9 +91,14 @@ button:hover{
grid-column: 1;
}
#view-controls {
.vertical-buttons {
float:right;
padding: 10px;
display: grid;
grid-template-rows: 2;
grid-template-columns: 1;
}
.editor-buttons {
display: block;
}
.col-row-input {
@@ -154,6 +159,9 @@ button:hover{
width: 30px;
height: 30px;
}
.edit-mode-btn:hover{
background-color: #81d2c7;
}
.edit-mode-btn#drag-view {
background-color: #81d2c7;
}
@@ -213,6 +221,9 @@ button:hover{
#armor{
background-color: purple;
}
#eye{
background-color: #d4bb3f;
}
#food{
background-color: green;
}

42
dist/index.html vendored
View File

@@ -17,9 +17,13 @@
</div>
<div class='control-panel'>
<div id='speed-controller' class='control-set'>
<div id='view-controls'>
<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">
@@ -89,21 +93,12 @@
</div>
<div id='editor' class='tab'>
<div class='left-half'>
<h2>Editor</h2>
<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>
<br><br/>
<button id="clear-walls" title="Clear All Walls"><i class="fa fa-window-close"></i></button>
</div>
<div class='right-half' id='editor-panel'>
<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="drop-org" title="Drop organism in world"><i class="fa fa-plus"></i></button>
<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="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>
@@ -113,8 +108,12 @@
<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>
<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>
@@ -136,22 +135,21 @@
<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="fixed-ratio" title='When on, the food production probability and lifespan multiplier obey a fixed ratio.'>Use fixed ratio</label>
<input type="checkbox" id="fixed-ratio" checked>
<h4>Organism Rotation</h4>
<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>
<h4>Killer Cell Effects</h4>
<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=10 step="1">
</div>
<div class='right-half'>
<br><br/>
<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>
@@ -171,7 +169,7 @@
<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='reset-rules'>Reset all controls</button>
</div>
</div>
<div id='stats' class='tab'>

2
dist/js/bundle.js vendored

File diff suppressed because one or more lines are too long

View File

@@ -28,7 +28,6 @@ class ControlPanel {
$('#maximize').click ( function() {
$('.control-panel').css('display', 'grid');
$('.hot-controls').css('display', 'none');
});
}
@@ -89,26 +88,11 @@ class ControlPanel {
defineHyperparameterControls() {
$('#food-prod-prob').change(function() {
var food_prob = $('#food-prod-prob').val();
if ($('#fixed-ratio').is(":checked")) {
Hyperparams.foodProdProb = food_prob;
Hyperparams.calcProducerFoodRatio(false);
$('#lifespan-multiplier').val(Hyperparams.lifespanMultiplier);
}
else{
Hyperparams.foodProdProb = food_prob;
}
var food_prob =
Hyperparams.foodProdProb = $('#food-prod-prob').val();;
}.bind(this));
$('#lifespan-multiplier').change(function() {
var lifespan = $('#lifespan-multiplier').val();
if ($('#fixed-ratio').is(":checked")) {
Hyperparams.lifespanMultiplier = lifespan;
Hyperparams.calcProducerFoodRatio(true);
$('#food-prod-prob').val(Hyperparams.foodProdProb);
}
else {
Hyperparams.lifespanMultiplier = lifespan;
}
Hyperparams.lifespanMultiplier = $('#lifespan-multiplier').val();
}.bind(this));
$('#mover-rot').change(function() {
@@ -120,6 +104,9 @@ class ControlPanel {
$('#insta-kill').change(function() {
Hyperparams.instaKill = this.checked;
});
$('#look-range').change(function() {
Hyperparams.lookRange = $('#look-range').val();
});
$('#evolved-mutation').change( function() {
if (this.checked) {
@@ -164,7 +151,6 @@ class ControlPanel {
Hyperparams.setDefaults();
$('#food-prod-prob').val(Hyperparams.foodProdProb);
$('#lifespan-multiplier').val(Hyperparams.lifespanMultiplier);
$('#fixed-ratio').prop('checked', true);
$('#mover-rot').prop('checked', Hyperparams.moversCanRotate);
$('#offspring-rot').prop('checked', Hyperparams.offspringRotate);
$('#insta-kill').prop('checked', Hyperparams.instaKill);

View File

@@ -1,6 +1,7 @@
const CanvasController = require("./CanvasController");
const Modes = require("./ControlModes");
const CellTypes = require("../Organism/Cell/CellTypes");
const Directions = require("../Organism/Directions");
class EditorController extends CanvasController{
constructor(env, canvas) {
@@ -23,11 +24,39 @@ class EditorController extends CanvasController{
mouseUp(){}
getCurLocalCell(){
console.log(this.env.organism.getLocalCell(this.mouse_c-this.env.organism.c, this.mouse_r-this.env.organism.r))
return this.env.organism.getLocalCell(this.mouse_c-this.env.organism.c, this.mouse_r-this.env.organism.r);
}
setEyeDirection(){
}
editOrganism() {
if (this.edit_cell_type == null || this.mode != Modes.Edit)
return;
if (this.left_click)
this.env.addCellToOrg(this.mouse_c, this.mouse_r, this.edit_cell_type);
if (this.left_click){
if(this.edit_cell_type == CellTypes.eye) {
if (this.cur_cell.type == CellTypes.eye){
var loc_cell = this.getCurLocalCell();
var dir = loc_cell.eye.direction;
dir = Directions.rotateRight(dir);
loc_cell.eye.direction = dir;
this.cur_cell.direction = dir;
this.env.addCellToOrg(this.mouse_c, this.mouse_r, this.edit_cell_type);
}
else {
this.env.addCellToOrg(this.mouse_c, this.mouse_r, this.edit_cell_type);
var loc_cell = this.getCurLocalCell();
loc_cell.eye.direction = Directions.up;
this.env.addCellToOrg(this.mouse_c, this.mouse_r, this.edit_cell_type);
}
}
else{
this.env.addCellToOrg(this.mouse_c, this.mouse_r, this.edit_cell_type);
}
}
if (this.right_click)
this.env.removeCellFromOrg(this.mouse_c, this.mouse_r);
}
@@ -55,6 +84,9 @@ class EditorController extends CanvasController{
case "armor":
self.edit_cell_type = CellTypes.armor;
break;
case "eye":
self.edit_cell_type = CellTypes.eye;
break;
}
$(".cell-type" ).css( "border-color", "black" );
var selected = '#'+this.id+'.cell-type';

View File

@@ -94,6 +94,7 @@ class EnvironmentController extends CanvasController{
}
if (this.cur_org != null){
this.control_panel.setEditorOrganism(this.cur_org);
console.log(this.cur_org)
}
break;
@@ -139,7 +140,7 @@ class EnvironmentController extends CanvasController{
var c = this.cur_cell.col + loc[0];
var r = this.cur_cell.row + loc[1];
var cell = this.env.grid_map.cellAt(c, r);
if (cell.owner != null)
if (cell != null && cell.owner != null)
return cell.owner;
}
return null;
@@ -150,7 +151,7 @@ class EnvironmentController extends CanvasController{
var c = this.cur_cell.col + loc[0];
var r = this.cur_cell.row + loc[1];
var cell = this.env.grid_map.cellAt(c, r);
if (cell.owner != null)
if (cell != null && cell.owner != null)
cell.owner.die();
}
}

View File

@@ -7,7 +7,7 @@ const render_speed = 60;
class Engine{
constructor(){
this.fps = 60;
this.env = new WorldEnvironment(4);
this.env = new WorldEnvironment(5);
this.organism_editor = new OrganismEditor();
this.controlpanel = new ControlPanel(this);
this.env.OriginOfLife();

View File

@@ -5,6 +5,8 @@ const Renderer = require('../Rendering/Renderer');
const CellTypes = require('../Organism/Cell/CellTypes');
const EditorController = require("../Controllers/EditorController");
const Cell = require("../Organism/Cell/Cell");
const Eye = require('../Organism/Perception/Eye');
const Directions = require('../Organism/Directions');
class OrganismEditor extends Environment{
constructor() {
@@ -37,6 +39,11 @@ class OrganismEditor extends Environment{
var loc_r = r - center[1];
var prev_cell = this.organism.getLocalCell(loc_c, loc_r)
if (prev_cell != null) {
console.log(prev_cell.type)
if (type == CellTypes.eye && prev_cell.type != CellTypes.eye){
prev_cell.eye = new Eye(Directions.up);
}
prev_cell.type = type;
this.changeCell(c, r, type, this.organism);
}

View File

@@ -54,10 +54,12 @@ class WorldEnvironment extends Environment{
OriginOfLife() {
var center = this.grid_map.getCenter();
var org = new Organism(center[0], center[1], this);
// org.addCell(CellTypes.eye, 0, 0);
// org.addCell(CellTypes.mouth, 1, 1);
// org.addCell(CellTypes.mover, -1, -1);
org.addCell(CellTypes.mouth, 0, 0);
// org.addCell(CellTypes.eye, 2, 2);
org.addCell(CellTypes.producer, -1, -1);
org.addCell(CellTypes.producer, 1, 1);
org.addCell(CellTypes.producer, -1, -1);
this.addOrganism(org);
}

View File

@@ -23,19 +23,7 @@ const Hyperparams = {
this.instaKill = false;
this.lookRange = 5;
},
// calculates the optimal ratio where a producer cell is most likely to produce 1 food in its lifespan * a scalar of my choice :)
calcProducerFoodRatio : function(lifespan_fixed=true) {
if (lifespan_fixed) {
// change the foodProdProb
this.foodProdProb = (100 / this.lifespanMultiplier) * this.foodProdProbScalar;
}
else {
// change the lifespanMultiplier
this.lifespanMultiplier = Math.floor(100 / (this.foodProdProb/this.foodProdProbScalar));
}
this.lookRange = 15;
},
balanceMutationProbs : function(choice) {

View File

@@ -8,7 +8,8 @@ const CellTypes = {
killer: 6,
armor: 7,
eye: 8,
colors: ['#121D29', 'green', 'gray', 'orange', 'white', '#3493EB', 'red', 'purple', '#8D73A3'],
colors: ['#121D29', 'green', 'gray', 'orange', 'white', '#3493EB', 'red', 'purple', '#d4bb3f'],
names: ['Empty', 'Food', 'Wall', 'Mouth', 'Producer', 'Mover', 'Killer', 'Armor', 'Eye'],
getRandomLivingType: function() {
return Math.floor(Math.random() * 6) + 3;
}

View File

@@ -10,7 +10,7 @@ class LocalCell{
this.loc_col = loc_col;
this.loc_row = loc_row;
if (this.type == CellTypes.eye){
this.eye = new Eye(this);
this.eye = new Eye();
if (eye != null) {
this.eye.direction = eye.direction;
}

View File

@@ -21,6 +21,13 @@ const Directions = {
case this.right:
return this.left;
}
},
rotateRight: function(dir) {
dir++;
if (dir > 3){
dir = 0;
}
return dir;
}
}

View File

@@ -21,6 +21,7 @@ class Organism {
this.cells = [];
this.is_producer = false;
this.is_mover = false;
this.has_eyes = false;
this.direction = Directions.down;
this.rotation = Directions.up;
this.can_rotate = Hyperparams.moversCanRotate;
@@ -42,7 +43,7 @@ class Organism {
}
}
this.checkProducerMover(type);
this.checkTypeChange(type);
this.cells.push(new LocalCell(type, c, r, eye));
return true;
}
@@ -65,7 +66,7 @@ class Organism {
this.is_producer = false;
this.is_producer = false;
for (var cell of this.cells) {
this.checkProducerMover(cell.type);
this.checkTypeChange(cell.type);
}
}
return true;
@@ -80,11 +81,13 @@ class Organism {
return null;
}
checkProducerMover(type) {
checkTypeChange(type) {
if (type == CellTypes.producer)
this.is_producer = true;
if (type == CellTypes.mover)
this.is_mover = true;
if (type == CellTypes.eye)
this.has_eyes = true;
}
inherit(parent) {
@@ -93,11 +96,17 @@ class Organism {
this.birth_distance = parent.birth_distance;
for (var c of parent.cells){
//deep copy parent cells
if (c.type == CellTypes.eye)
if (c.type == CellTypes.eye){
this.addCell(c.type, c.loc_col, c.loc_row, c.eye);
}
else
this.addCell(c.type, c.loc_col, c.loc_row);
}
if(parent.is_mover) {
for (var i in parent.brain.decisions) {
this.brain.decisions[i] = parent.brain.decisions[i];
}
}
}
// amount of food required before it can reproduce
@@ -180,9 +189,9 @@ class Organism {
}
cell.type = CellTypes.getRandomLivingType();
if (cell.type == CellTypes.eye) {
cell.eye = new Eye(cell);
cell.eye = new Eye();
}
this.checkProducerMover(cell.type);
this.checkTypeChange(cell.type);
mutated = true;
}
else if (choice <= Hyperparams.addProb + Hyperparams.changeProb + Hyperparams.removeProb){
@@ -204,6 +213,9 @@ class Organism {
if (this.birth_distance < 1)
this.birth_distance = 1;
}
if (this.is_mover && this.has_eyes && Math.random() * 100 <= 10) {
this.brain.mutate();
}
return mutated;
}
@@ -249,6 +261,11 @@ class Organism {
return false;
}
changeDirection(dir) {
this.direction = dir;
this.move_count = 0;
}
// assumes either c1==c2 or r1==r2, returns true if there is a clear path from point a to b
isStraightPath(c1, r1, c2, r2, parent){
if (c1 == c2) {
@@ -320,7 +337,7 @@ class Organism {
var real_c = this.c + cell.rotatedCol(this.rotation);
var real_r = this.r + cell.rotatedRow(this.rotation);
this.env.changeCell(real_c, real_r, cell.type, this);
if (cell.type == CellTypes.eye){
if (cell.type == CellTypes.eye) {
this.getRealCell(cell).direction = cell.eye.getAbsoluteDirection(this.rotation);
}
}

View File

@@ -5,7 +5,10 @@ const Directions = require("../Directions");
const Decision = {
neutral: 0,
retreat: 1,
chase: 2
chase: 2,
getRandom: function(){
return Math.floor(Math.random() * 3);
}
}
class Brain {
@@ -16,7 +19,7 @@ class Brain {
// corresponds to CellTypes
this.decisions = [
Decision.neutral, // empty
Decision.chase, // food
Decision.chase, // food
Decision.neutral, // wall
Decision.neutral, // mouth
Decision.neutral, // producer
@@ -27,19 +30,19 @@ class Brain {
];
}
observe(observation){
observe(observation) {
this.observations.push(observation);
}
decide(){
decide() {
var decision = Decision.neutral;
var closest = Hyperparams.lookRange + 1;
var move_direction = 0;
for (var obs of this.observations) {
if (obs.cell == null || obs.cell.owner == this.owner){
if (obs.cell == null || obs.cell.owner == this.owner) {
continue;
}
if (obs.distance < closest){
if (obs.distance < closest) {
decision = this.decisions[obs.cell.type];
move_direction = obs.direction;
closest = obs.distance;
@@ -47,17 +50,20 @@ class Brain {
}
this.observations = [];
if (decision == Decision.chase) {
this.owner.direction = move_direction;
this.owner.move_count = 0;
this.owner.changeDirection(move_direction);
return true;
}
else if (decision == Decision.retreat) {
this.owner.direction = Directions.getOppositeDirection(move_direction);
this.owner.move_count = 0;
this.owner.changeDirection(Directions.getOppositeDirection(move_direction));
return true;
}
return false;
}
mutate() {
var selection = Math.floor(Math.random() * (this.decisions.length-1))+1;
this.decisions[selection] = Decision.getRandom();
}
}
module.exports = Brain;

View File

@@ -4,12 +4,11 @@ const CellTypes = require("../Cell/CellTypes");
const Observation = require("./Observation")
class Eye {
constructor(loc_cell, direction=-1) {
constructor(direction=-1) {
this.direction = direction;
if (direction == -1){
this.direction = Directions.getRandomDirection();
}
this.loc_cell = loc_cell
}
getAbsoluteDirection(parent_dir) {
@@ -44,7 +43,7 @@ class Eye {
col+=addCol;
row+=addRow;
cell = env.grid_map.cellAt(col, row);
if (cell == null){
if (cell == null) {
break;
}
if (cell.type != CellTypes.empty){

View File

@@ -34,8 +34,7 @@ class Renderer {
renderFullGrid(grid) {
for (var col of grid) {
for (var cell of col){
this.ctx.fillStyle = cell.getColor();
this.ctx.fillRect(cell.x, cell.y, this.cell_size, this.cell_size);
this.renderCell(cell);
}
}
}
@@ -66,31 +65,17 @@ class Renderer {
//odd
var w = 1;
}
var halfInt = Math.floor(this.cell_size/2);
var halfInt = Math.ceil(this.cell_size/2);
var halfFloat = this.cell_size/2;
var h = this.cell_size/3;
var h = this.cell_size/2 + this.cell_size/4;
var x = cell.x + h - Math.floor(w/2);
var y = cell.y;
this.ctx.translate(cell.x+halfFloat, cell.y+halfFloat);
this.ctx.rotate(cell.direction * 90 * Math.PI / 180);
// switch(cell.direction) {
// case Directions.up:
// this.ctx.rotate(90 * Math.PI / 180);
// break;
// case Directions.right:
// this.ctx.rotate(Math.PI / 180);
// break;
// case Directions.down:
// this.ctx.rotate(180 * Math.PI / 180);
// break;
// case Directions.left:
// this.ctx.rotate(270 * Math.PI / 180);
// break;
// }
this.ctx.fillStyle = '#FFFC5E';
this.ctx.fillRect(-halfFloat, -halfFloat, this.cell_size, h);
this.ctx.rotate((cell.direction * 90) * Math.PI / 180);
this.ctx.fillStyle = '#121D29';
this.ctx.fillRect(-(this.cell_size)/8, -halfFloat, this.cell_size/4, h);
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
}

View File

@@ -1,43 +0,0 @@
class LinkedList {
constructor() {
this.head = null;
this.size = 0;
}
push(obj) {
var el = new Element(obj, null, this.head);
if (this.head != null){
this.head.prev = el;
}
this.head = el;
this.size ++;
}
clear() {
var cur = this.head;
while(cur != null){
this.remove(cur);
cur = cur.next;
}
this.size = 0;
}
remove(element){
if (element.prev != null){
element.prev.next = element.next;
}
else if (this.head == element){
this.head = element.next;
}
if (element.next != null){
element.next.prev = element.prev;
}
this.size--;
}
}
class Element {
constructor(obj, prev, next){
this.obj = obj;
this.prev = prev;
this.next = next;
}
}