{"componentChunkName":"component---src-templates-case-study-js","path":"/case-studies/evolution-aquerium","result":{"data":{"markdownRemark":{"id":"144c0032-2676-5cff-a1c1-c3bc1d1db2ce","html":"

How It Works?

\n

These Creatures are based on Craig Reynold's Steering Behaviors and Flocking System

\n

It also implements Genetic Algorithm and mutations.

\n

You can learn more about them on Daniel Shiffman's YouTube Channel The Coding Train

\n\n
\n
\n \n \n \n \"Evolution\n \n \n
Evolution Aquerium Codeflow Visualized (click to enlarge)
\n
\n

AgentBuilder Class

\n

I make use of the \"builder\" pattern to create different varieties of creatures with different traits. And AgentBuilder class helps me do this easily see how it works.

\n
\n

Learn more how builder pattern works

\n
\n
class AgentBuilder {\n  constructor(type) {\n    this.acc = new Vector(0, 0)\n    this.vel = new Vector(0, -2)\n    this.type = type\n  }\n  setPos(x, y) {\n    this.pos = new Vector(x, y)\n    return this\n  }\n  setRadius(r = 5) {\n    this.radius = r\n    return this\n  }\n  setColor(color) {\n    return (this.color = color)\n  }\n  setDNA(dna) {\n    this.dna = dna\n    return this\n  }\n\n  // ... more setFunctions\n\n  build() {\n    // returns a new BaseAgent based on the values\n    return new BaseAgent(\n      this.pos.x,\n      this.pos.y,\n      this.radius,\n      this.dna,\n      this.color,\n      this\n    )\n  }\n}
\n

And now, the builder pattern is ready to be used. Let us see how we can build creatures with different traits.

\n
// later on\nlet Predator = new AgentBuilder(\"PREDATOR\")\n  .setRadius(10)\n  .setMaxSpeed(2)\n  .setMaxForce(0.05)\n  .setHealthDecrease(0.002)\n  .setColor([255, 0, 0])\n  .setFoodMultiplier([0.5, -0.5])\n\nlet Avoider = new AgentBuilder(\"AVOIDER\")\n  .setRadius(5)\n  .setMaxRadius(8)\n  .setMaxSpeed(4)\n  .setMaxForce(0.2)\n  .setHealthDecrease(0.003)\n  .setColor([255, 165, 0])\n  .setFoodMultiplier([0.5, -0.5])
\n

BaseAgent Class

\n

BaseAgent class handles all the logic for the update, render, and physics, it's the heart of the codebase. the basic idea is to give each agent some essential traits like health, radius, maxSpeed, maxSpeed etc etc.

\n
\n

see the full BaseAgent class's code at github

\n
\n
class BaseAgent {\n  constructor(x, y, radius, dna, color, builder) {\n    // for flocking behaviour\n    this.pos = new Vector(x, y);\n    this.acc = new Vector(0, 0);\n    this.vel = new Vector(0, -2);\n\n\n    // i used builder pattern to create more variaty agents easily\n    if (builder === undefined) builder = {};\n    this.builder = builder;\n\n    // traits\n    this.age = 1;\n    this.health = 1;\n    this.radius = radius || 5;\n    this.maxSpeed = builder.maxSpeed || 1.5;\n    this.maxForce = builder.maxForce || 0.05;\n    // amout of health will decrease over time\n    this.healthDecrease = builder.healthDecrease || 0.003;\n    // amount of health will increase after eating food\n    this.goodFoodMultiplier = builder.goodFoodMultiplier || 0.5;\n    // amount of health will decrease after eating poison\n    this.badFoodMultiplier = builder.badFoodMultiplier || -0.4;\n    this.color = color;\n    this.hasReproduced = 0;\n    // randomly choose male or female\n    this.sex = (random(1) < 0.5) ? 'MALE' : 'FEMALE';\n    // females will be a bit bigger than male\n    this.maxRadius = builder.maxRadius || ((this.getGender() === 'FEMALE') ? 15 : 10);\n\n    // more code in between...\n\n    // colors based on their gender\n    if (!this.color && this.getGender() === 'MALE') this.color = [0, 170, 0];\n    if (!this.color && this.getGender() === 'FEMALE') this.color = [255, 39, 201];\n\n  }
\n

Later on, I also gave them names, haha yes

\n
...\nlet names_female = [\n  'hanna', 'mona', 'cutie',\n  'sweety', 'sofia', 'rose',\n  'laisy', 'daisy', 'mia'\n];\nlet names_male = [\n  'joe', 'jim', 'kim',\n  'keo', 'shaun', 'morgan',\n  'jery', 'tom', 'anu',\n  'brian', 'ninja', 'daniel'\n];\n\n// names based on gender\nthis.name = (this.getGender() === 'MALE') ? this.getRandomName(names_male) : this.getRandomName(names_female);\n...
\n

And now, let's talk only about the main meat of the code, not any other unnecessary code.\nso in the base class we have some methods

\n\n

The primary function which defines the fear behavior and we can also use this inversely

\n\n

Flock Class

\n

Flock class takes an agent and do the calculations for flocking behaviors like separate, align, cohesion, seek.

\n
class Flock {\n  constructor(currentAgent) {\n    this.currentAgent = currentAgent\n    this.wandertheta = 0\n  }\n\n  seek(target) {}\n  _returnSteer(sum) {}\n  wander() {}\n  separate(agents) {}\n  align(agents) {}\n  cohesion(agents) {}\n}
\n

EcoSystem Class

\n

EcoSystem class manages all the agents and behaviors, basically it is like a state manager

\n

it has some methods which are

\n\n
class EcoSystem {\n  constructor() {\n    this.groups = {} // agents\n    this.entities = {} // generic container (food, poison)\n    this.agents = {} // agent classes\n    this.behaviors = {} // calculated behaviors\n  }\n\n  addEntities(names) {}\n  registerAgents(agents) {}\n  initialPopulation(init) {}\n  addBehavior(config) {}\n  batchUpdateAgents(list, foodPoison, weight, callback) {}\n}
\n

Setting up everything

\n

And the last step is to assemble every part of the code to create these boids like creatures and gave each of them behaviors

\n
// Global\nlet canvas = document.querySelector('#c');\nlet WIDTH = canvas.width = window.innerWidth;\nlet HEIGHT = canvas.height = 600;\nlet ctx = canvas.getContext('2d');\n\n\nlet MAX_CREATURES = 300;\nconst REPRODUCTION_RATE = 0.5;\nconst ENABLE_SUPER_DEBUG = false;\n\n// constants for flexibilty\nconst CREATURE = 'CREATURE';\nconst PREDATOR = 'PREDATOR';\nconst AVOIDER = 'AVOIDER';\nconst EATER = 'EATER';\nconst FOOD = 'FOOD';\nconst POISON = 'POISON';\n\nfunction load() {\n  const ecoSys = new EcoSystem();\n\n  // creates a Array which you can access with ecoSys.entities \n  ecoSys.addEntities({\n    FOOD: [],\n    POISON: []\n  });\n\n  // register classes it will also create corresponding Arrays\n  // which you can use by calling ecoSys.groups[your_given_name]\n  ecoSys.registerAgents({\n    CREATURE: Agent,\n    PREDATOR: Predator,\n    AVOIDER: Avoider,\n    EATER: Eater,\n  });\n\n  // initialPopulation have to use the same name\n  // which you configure in registerAgents\n  ecoSys.initialPopulation({\n    CREATURE: 150,\n    PREDATOR: randomInt(5, 10),\n    AVOIDER: randomInt(10, 20),\n    EATER: randomInt(1, 4),\n  });\n\n  let add = document.getElementById('addnew');\n  canvas.addEventListener('click', function (e) {\n    ecoSys.add(add.value, e.offsetX, e.offsetY)\n  })\n\n  //  ANIMATE LOOP\n  function animate() {\n    let grd = ctx.createRadialGradient(WIDTH / 2, HEIGHT / 2, 0, WIDTH / 2, HEIGHT / 2, WIDTH);\n    grd.addColorStop(0, \"rgba(25,25,25,1)\");\n    grd.addColorStop(1, \"rgba(0,0,25,1)\");\n    // Fill with gradient\n    ctx.fillStyle = grd;\n    ctx.fillRect(0, 0, WIDTH, HEIGHT);\n\n    /**\n     * likes food dislikes poison\n     * run away form predators and eaters\n     * cloneItSelf\n     */\n    ecoSys.addBehavior({\n      name: CREATURE,\n      like: FOOD,\n      dislike: POISON,\n      fear: {\n        PREDATOR: [-4, 75],\n        EATER: [-2, 100]\n      },\n      cloneItSelf: 0.0015,\n      callback: function () {\n        if (ecoSys.groups.CREATURE.length < MAX_CREATURES\n          && random(1) < REPRODUCTION_RATE) {\n          this.reproduce(ecoSys.groups.CREATURE);\n        }\n      }\n    });\n\n    /**\n     * likes poison dislikes food\n     * seeks and eats creatures\n     * run away from eaters\n     */\n    ecoSys.addBehavior({\n      name: PREDATOR,\n      like: POISON,\n      dislike: FOOD,\n      likeDislikeWeight: [1, -1],\n      fear: {\n        EATER: [-10, 50],\n        CREATURE: [1, 200, function (agents, i) {\n          agents.splice(i, 1);\n          this.health += this.goodFoodMultiplier;\n          this.radius += this.goodFoodMultiplier;\n        }]\n      },\n    });\n\n    /**\n     * likes food dislikes poison\n     * run away form predators, eaters, creatures\n     */\n    ecoSys.addBehavior({\n      name: AVOIDER,\n      like: FOOD,\n      dislike: POISON,\n      cloneItSelf: 0.0005,\n      // likeDislikeWeight: [1, -1],\n      fear: {\n        CREATURE: [-0.9, 100],\n        EATER: [-1, 100],\n        PREDATOR: [-1, 100, function () {\n          this.health += this.badFoodMultiplier;\n        }]\n      },\n    });\n\n\n    /**\n     * likes poison\n     * emits food as waste compound\n     * seeks creatures, predators, avoiders and EATS THEM\n     */\n    ecoSys.addBehavior({\n      name: EATER,\n      like: POISON,\n      dislike: POISON,\n      likeDislikeWeight: [1, 1],\n      fear: {\n        CREATURE: [1.0, 100, function (list, i) {\n          list.splice(i, 1);\n          this.health += this.goodFoodMultiplier;\n          this.radius += this.goodFoodMultiplier;\n        }],\n        PREDATOR: [1.0, 100, function (list, i) {\n          list.splice(i, 1);\n          this.health += this.goodFoodMultiplier;\n          this.radius += this.goodFoodMultiplier;\n        }],\n        AVOIDER: [1.0, 100, function (list, i) {\n          list.splice(i, 1);\n          this.health += this.goodFoodMultiplier;\n          this.radius += this.goodFoodMultiplier;\n        }],\n      },\n      callback: function () {\n        if (random(0, 1) < 0.05) {\n          addItem(ecoSys.entities.FOOD, 1, this.pos.x, this.pos.y)\n        }\n      }\n    });\n\n    // UPDATE & RENDER\n    ecoSys.render();\n    ecoSys.update();\n    renderItem(ecoSys.entities.FOOD, 'white', 1, true);\n    renderItem(ecoSys.entities.POISON, 'crimson', 2);\n\n    requestAnimationFrame(animate);\n  }\n  animate();\n\n}\n\nwindow.onload = load;
\n

And that's it, phew, that was a lot of work. But in the end, we have beautiful flocking creatures playing around and interacting with each other. have fun watching them all day. <3

","fields":{"slug":"/case-studies/evolution-aquerium"},"frontmatter":{"demo":"//anuraghazra.github.io/EvolutionAquerium","iframe":"//www.youtube.com/embed/GKIhVrOsQCI/?modestbranding=1&showinfo=0&autohide=1&rel=0","src":"//github.com/anuraghazra/EvolutionAquerium","title":"Evolution Aquerium","info":{"idea":"The basic idea of the project is to achieve and simulate biological creatures in an aquarium to see how they react in different scenarios","links":[["CodingTrain Steering Behavior Playlist","https://www.youtube.com/watch?v=mhjuuHl6qHM&t=1978s"],["Craige Reynold’s Flocking Behavior","https://www.red3d.com/cwr/index.html"]],"tech":["Javascript","HTML5 Canvas"]}}}},"pageContext":{"slug":"/case-studies/evolution-aquerium"}},"staticQueryHashes":["1033876704"]}