WB4: 6-Flocking: Flocking Assignment

Programming Assignment: Lots of Flying Objects

This page (and it's exercise and bonus problems) are more about graphics programming than fundamental graphics concepts.

If you want to play with the end results, try some circa-2008 sample code here. Because your computer is probably 10,000 faster than the one I had in 2008, you probably want to lower the velocity. I don't recommend trying to read the code! It's archaic JavaScript.

Basically, the methods you're going to experiment with have a bunch of simple objects that each make individual "steering" decisions, and maintain their speeds. This is sometimes referred to as "flocking." The first person to really write about it in the graphics literature was Craig Reynolds who not only wrote the original 1987 paper , but also maintains a good web page with information about it.

By the way the "creatures" that flock are sometimes referred to as "boids" since they aren't always birds (sometimes they are fish, or pedestrians, or ...).

Creating flocking was a project in the old games class (in 2010 and 2012). In fact, some of those old 2010 projects still run (the joy of web programming!) (Ian and Irene's Asteroids Game) (Jeff and Chris' Sheep Herder Game).

Those projects were multi-week things, with pairs of students. This assignment has lower ambitions. But, if you want to learn more about flocking, it can be fun.

The goal in this page is to build a program that has a collection of simple objects that move around with "flocking behavior". Along the way, we'll try out some more JavaScript stuff.

Flying Boids

As an initial step, we'll keep a collection of objects. Each one has a position, and a velocity. Unlike in previous Workbooks, I will create this using an actual JavaScript class. The code is in flock.js - you will do this exercise by changing this file (and possibly the 7-flock.html file).

Throughout this assignment, we'll maintain that each object (1) stays within the Canvas, and (2) has a constant speed (the magnitude of the velocity vector should remain constant). We'll do this by making the velocity vector always be a unit vector. Note: the real speed of movement will depend on the browser's redraw speed, so it might not actually be constant. It should be close enough.

Right now, this is really simple. My initial boids just fly straight and wrap around. But you can make it cooler.

First make these 3 simple changes - they will help you learn the code.

Then make this first real improvement:

Then another small change:

Now for the more challenging things. Implementing these will earn bonus points. You can implement any (or all) of these things. (the old demo does the first two).

These additions are "steering" behaviors. They are implemented by having a boid on each step make a small adjustment to its direction vector. These decisions are completely local: there is no planning (it only decides what to do immediately), there is no central decision making (each boid decides on its own), and the boid can only make small changes to its direction (it keeps its velocity and cannot turn too sharply). Despite the fact that these steering behaviors are so limited, interesting effects (like flock formation) can emerge. All of these can be added to the steer method of the Boids.

The steering behaviors require tweaking - you need to tune the parameters to get them to work well. (try it with my old demo). You will probably want to add sliders to help you experiment with the parameters. For example, in my testing (to try out the assignment), I limited the turning to 1 or 2 degrees per step.

A different category of enhancements is to add obstacles to the scene. You could put shapes into the Canvas (circles or rectangles are good enough), and have the boids stay outside of these regions. This means you need to have the boids collide with the edges (just as they do with the boundaries of the Canvas). You also need to make sure your method for randomly placing boids doesn't put things inside the shapes.

Again, the requirements are:

  1. implement the add button
  2. implement the clear button
  3. change the drawing to have things facing forward
  4. bounce off the walls
  5. change color briefly after bouncing

The bonus point opportunities are:

  1. Have objects bounce off of each other
  2. Implement one or more steering behaviors (you can get multiple bonus points for multiple steering behaviors)
  3. Implement obstacles

You can do as many (or as few) of the bonus point challenges as you want.

Be sure to describe what you did (especially if you implemented any bonus point features). Put instructions into the html (the file is 7-flock.html and your README.md.

You should do this exercise by editing the file flock.js and 7-flock.html. Things actually run in the 7-flock.html. The graders will look at these files.

Some hints:

  1. Do the required changes in the order suggested. This will help you learn the code.
  2. Read the references on Craig Reynold's pages for ideas on how to do steering. Here is an advanced article (that includes the basic ideas).
  3. Many of the steering behaviors are easier if you represent the velocity as orientation, speed (rather than as x velocity, y velocity). You could change over all of the code. I found I was converting back and forth within the steer function. Math.atan2 is your friend.
  4. When working with angles, be careful about wraparound! (angle + 360 degrees = angle)
  5. Be sure to document what you are trying to do so we appreciate what you did! (give a list of which requirements you did and which bonus things you did).


This is the last page of this workbook (other than the page with flocking on it). Don't forget to do the README.md and QUESTIONS.md