Week 9 | Webbings

Look here hehe

Concept

Initially, I wanted to make a simple tower defense game where players have to block the oncoming flocks of enemies. However, the execution was more difficult than I intended. My next idea then came from the behavior of birds themselves.

birds in a flock pay close attention to the birds around them—particularly their closest neighbors.

But they might collide with birds from other species or different groups. Hence, my concept becomes as so: What if I make a flock of two or more different bird groups? A) They must group up with the same group B) Avoid different group.

Sketch Prototype

Here, what I did was to represent the boids in two colors by introducing a color property. This then allows me to modify the other behaviors and forces such that they interact with this color property. Particularly, the separation, alignment, and cohesion are affected by this change.

let emoji = this.color === "#C96868" ? "" : "";

separate(boids) {
  let desiredSeparation = 25;
  let steer = createVector(0, 0);
  let count = 0;
  for (let i = 0; i < boids.length; i++) {
    let other = boids[i];
    let d = p5.Vector.dist(this.position, other.position);
    if (d > 0 && d < desiredSeparation && other.color === this.color) {
      // Only same color
      let diff = p5.Vector.sub(this.position, other.position);
      diff.normalize();
      diff.div(d);
      steer.add(diff);
      count++;
    }
  }

But what if, and what happens when we connect a string between each boids? What visuals would it look like, and how would it behave?

I followed this intuition and attempted to add strings that attach to each boid. Of course, they are also vector which means these strings are attracted and affected by external forces.

//Connect
  //Function to connect a string between each boids
  connect(boids) {
    for (let other of boids) {
      let d = p5.Vector.dist(this.position, other.position);
      let maxDistance = 200; // Maximum distance for drawing a line

      // Only draw line if within maxDistance and the other boid is not itself
      if (d > 0 && d < maxDistance) {
        stroke(200, 50);
        strokeWeight(0.5); 
        line(
          this.position.x,
          this.position.y,
          other.position.x,
          other.position.y
        );
      }
    }

Alas, then it suddenly happened. But what a minute–what is this?

Aha! I have just visualized the connection between each boids. Instead of drawing lines on the current information, these lines draw from previous (a frame delay) information of the boids. In essence, they are the boids, birds, and flocks themselves, but represented in lines instead! It seems that the lines are following particularly the white boid but acts just like both red and white boid. I am unsure why.

Challenges & Improvements

➡️During the red-white test, I wanted the boids to return towards the screen again whenever it touches the edge of the canvas. I tried many implementations but found that by multiplying it to -1, or the negative vector does the job best.

➡️For the color checking between each boid, initially I used an if statement. While it worked, I also learned that ternary conditional statement worked better for this implementation where it just pairs up the color code and emoji.

🛠️Performance is quite an issue right now because the sketch is doing three calculations: One red, one white, and for the strings. In the future, I hope to bring more optimizations especially lifetimes for each vector to make sure that they don’t hog the machine.

Resources

All about birds – Cornellab

Ternary Operators – JavaScript