Flocking - Autonomous Agents with GitHub Copilot

🎯 Goal

Create a simple flocking system using p5.js and GitHub Copilot. You will:

• Set up a project in VS Code

• Learn to use GitHub Copilot for coding support

• Implement the principles of Separation, Cohesion, and Alignment

• Iteratively build a simple flocking simulation

• Explore advanced creative challenges

🔧 Step 1: Setup Your Environment

✅ Install VS Code

• Download from: https://code.visualstudio.com

✅ Install GitHub Copilot Extension

1. Open VS Code

2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)

3. Search for "GitHub Copilot" and install

4. Sign in with GitHub if prompted

✅ Install p5.js Extension

✅ Setup P5 server in VSCode

Configuring Visual Studio Code for p5.js Development with the P5 Server extensionConfiguring Visual Studio Code for p5.js Development with the P5 Server extension

🏋 Step 2: Copilot warmup

1. Create a new sketch using the "Single-sketch folder" option in p5.js.

   
2. Open sketch.js and write a comment at the top to describe what should be done.

3. Add a comment to specify that your task is to draw your favorite ice cream using basic shapes like ellipse, rect, and arc.

4. Press the Tab key to see the magic happen with GitHub Copilot's suggestions.

🐦 Step 3: Flocking start

✅ Download the Starter Template

Download

and unzip it into your Develop / School / KP folder.

Test the template

1. Open the flocking folder in VS Code

2. Open index.html in the browser (you can right-click and select "Reveal in File Explorer/Finder")

3. You should see points moving on screen (but no flocking yet!)

Compare boid.js with our mover.js

class Mover {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.velocity = createVector(random(-1, 1), random(-1, 1));
    this.acceleration = createVector(0, 0);
    this.maxSpeed = 4;
  }

  applyForce(force) {
    this.acceleration.add(force);
  }

  update() {
    this.velocity.add(this.acceleration);
    this.velocity.limit(this.maxSpeed);
    this.position.add(this.velocity);
    this.acceleration.mult(0);
  }

  show() {
    stroke(0);
    fill(175);
    ellipse(this.position.x, this.position.y, 16, 16);
  }
}

🤖 Step 3: Use Copilot to Help You Code

In boid.js, you will find three empty methods:

align(boids) {
  // GitHub Copilot will help write this
}

cohesion(boids) {
  // GitHub Copilot will help write this
}

separation(boids) {
  // GitHub Copilot will help write this
}

🧠 Tip: Trigger Copilot with Comments!

Try writing a comment first:

// Steer towards the average velocity of nearby boids

Then press Enter and wait for Copilot's suggestion.

Accept suggestions with Tab. Edit them if needed.

You can also try:

• // Steer away from nearby boids

• // Average position of neighbors

• // Limit vector magnitude

• // Wrap around edges

🌀 Step 4: Iterative Development

🥚 Iteration 1: Draw Points

• Already working! Each Boid is a point.

🐣 Iteration 2: Add Alignment

• In align(boids), implement logic to steer towards average velocity of nearby boids.

• Test the effect in the browser.

🐥 Iteration 3: Add Cohesion

• In cohesion(boids), steer towards average position of nearby boids.

• Test with only alignment + cohesion enabled (comment out separation).

🐔 Iteration 4: Add Separation

• In separation(boids), steer away from boids that are too close.

• Tune the weights in flock():

alignment.mult(1.0);
cohesion.mult(1.0);
separation.mult(1.5);

💡 Hint:

• Use p5.Vector.dist(a, b) for distances

• Use .limit(this.maxForce) to keep force under control

• Use if (d < desiredDistance) inside separation()

✨ Bonus Assignments for Advanced Students

🌈 1. Draw Triangles Instead of Points

In show():

let angle = this.velocity.heading();
push();
translate(this.position.x, this.position.y);
rotate(angle);
triangle(0, -6, -3, 6, 3, 6);
pop();

🧪 2. Show Debug Circles for Perception Radius

Draw circles around boids to visualize who they see.

🐺 3. Add a Predator

Create a second kind of boid that all others avoid.

🎛️ 4. Add Sliders to Tune Parameters

Use createSlider() in setup() and use the values to adjust behavior.

🎨 5. Color by Speed or Acceleration

Use stroke(color) based on velocity magnitude.

📘 Wrap-Up

• Each function align(), cohesion(), and separation() builds understanding of local interaction

• Copilot is a tool, not a crutch! Think first, then ask for help.

• Experiment and iterate! Each small change can create new emergent behaviors.

🧠 Copilot Cheat Sheet for Flocking (Prompts as Comments)

Here are example prompts/comments to use in boid.js above the empty methods:

// Align: Steer toward average velocity of local flockmates

// Cohesion: Steer toward average position of local flockmates

// Separation: Steer away from nearby boids to avoid crowding

// Calculate distance between two vectors

// Limit a vector to a maximum magnitude

// Wrap boid position around the screen edges

// Apply combined steering forces (alignment + cohesion + separation)

// Draw boid as a triangle pointing in the direction of velocity

They can also experiment in sketch.js with:

// Add a predator boid that repels other boids

// Add color based on speed or acceleration