# Flocking - Autonomous Agents with GitHub Copilot

<figure><img src="/files/DRbCPxIgZrtav5Ebp9tA" alt="" width="128"><figcaption></figcaption></figure>

<figure><img src="/files/kPGurptS4W7Jlmf14N99" alt=""><figcaption></figcaption></figure>

### 🎯 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

{% embed url="<https://marketplace.visualstudio.com/items?itemName=GitHub.copilot>" %}

#### ✅ Install p5.js Extension&#x20;

{% embed url="<https://marketplace.visualstudio.com/items?itemName=osteele.p5-server>" %}

#### ✅ Setup P5 server in VSCode&#x20;

{% embed url="<https://notes.osteele.com/tools/vscode/configuring-visual-studio-code-for-p5js-development-p5-server>" %}

### 🏋 Step 2: Copilot warmup

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

   <figure><img src="/files/KxCoWDRQvtVUqEfH6R2O" alt=""><figcaption></figcaption></figure>
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&#x20;

{% file src="/files/DUdSh9hmaahKtQoAfJZC" %}

&#x20;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

```javascript
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:

```javascript
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()`:

```javascript
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()`:

```javascript
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:

```js
// 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:

```js
// Add a predator boid that repels other boids

// Add color based on speed or acceleration
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://vyuka.digitalneumenia.sk/kp-4/tutorials/flocking-autonomous-agents-with-github-copilot.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.