Not so currently flocking AI

To explain the title I'll just dump the gif right here...
Ignore the name Strategic AI Demonstration, it should rather be named Flocking AI Demonstration since that's the point of this after all...

Alright now onto the topic at hand for this post. So in week 5 (It's currently week 8), we learned about AI Emergence, different types of AI behaviour (Specifically for movement). The five types we went through were:

  • Obstacle avoidance
  • Enemy avoidance
  • Cohesion (Move near others)
  • Separation (Don't get too close to each other)
  • Alignment (Follow others)

Cohesion works on the principle of... within a circle of influence around the current node/item. Any other nodes/items in this influence circle has their positions recorded and between all of them, an average position is calculated. This average position is the target destination for the node/item to travel to.
Example of Cohesion with the green arrow moving towards the dot which is the average position of the other blue arrows inside the grey circle of influence.

Now Separation is literally just the opposite of Cohesion, while cohesion draws nodes together, separation pulls them apart. Trying to move in the opposite direction to any nodes inside the circle of influence.

Finally Alignment, this takes into account the velocities of the other nodes inside the circle of influence along with their position and try to align with them. That is move in the same direction as the others.
Since the green arrow is moving in the direction of the green line above it, the red arrow shows that it's moving left to align itself with the blue line since that's the direction of the other nodes inside the circle.

Now onto my implementation, I wanted to create something like this outside of a game engine, preferably the web since it's a great place for demonstrations and doesn't require users browsing my portfolio/github to download and run an exe.
I tried using the method of HTML5 Canvas which utterly failed because it...

  1. Doesn't look good
  2. Doesn't scale right
  3. Good luck programming some sort of movement into that monstrosity

Next I looked at WebGL since it's basically OpenGL written for the web in JavaScript, perfect. While this place provided a look at rendering a 2D image in a canvas, and Mozilla's tutorial provided a nice well documented guide. I felt like it was really over the top for such a small thing I wanted to do, like to render a square, you have to break it down into triangles and render them separately. There's no system in between the engine and your code to handle this kind of stuff, you seem to be directly coding into WebGL's engine.

Then a simple google search has my answer! And that's what you see in the gif at the top, all the circles are are moving HTML elements on a page. This JSFiddle which was linked from a StackOverflow question on "how to get a div to randomly move around a page (using jQuery or CSS)" seems to work somewhat decently for what I want to do.
So my next steps are to try an implementation by moving nodes around the page using JQuery's Animate, if this fails as well. Welp, back to Unity with gif examples on my website and a repo to download... (Or hey! A WebGL build if that'll work 😉)

Tom Lynn

Read more posts by this author.