This page (and it's exercise and bonus problems) are more about graphics programming than fundamental graphics concepts.
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.
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).
steermethod of the boids.
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:
The bonus point opportunities are:
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
Math.atan2is your friend.
This is the last page of this workbook (other than the page with flocking on it). Don't forget to do the