GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Happy Coding
  • Tutorials
  • Blog

This view

  • Original page
  • New address

GeezerVison is showing happycoding.io — Flocking

Flocking

Processing Tutorials

  • Hour of Code

  • What is Programming?

  • Calling Functions
    • Smiley Face
    • Flower
    • Heart

  • Using Variables
    • Smiley Face
    • Flower
    • Jack-o'-Lantern
    • Scaling Heart

  • Creating Variables
    • Random Face
    • Random Jack-o'-Lantern

  • Creating Functions
    • Random Faces
    • Glowing Jack-o'-Lantern
    • Turtle Graphics
    • Random Hearts

  • Debugging

  • If Statements
    • Good Morning

  • Animation
    • Random Walker
    • Worms
    • Vine

  • Input
    • Bouncing Balls
    • Random Walkers
    • Pumpkin Patch
    • Draggable Circle

  • For Loops
    • Random Colors
    • 2D Gradient
    • Bouncing Gradient
    • Corner Gradient
    • Radial Gradient
    • Random Circles
    • Letters
    • Spiral

  • Arrays
    • Bouncing Balls
    • Random Walkers

  • Using Objects
    • Stack Overflow Data Visualization
    • Eyes

  • Creating Classes
    • Flocking
    • Flyers

  • ArrayLists
    • Flocking
    • Random Walkers

  • Images
    • NES Filter
    • Mars Perseverance Image Colorizer
    • Glitch Lines
    • Pixel Spinner

  • Libraries
    • Random Piano
    • Notes Recorder
    • Random Synthesizer

  • Exporting Applications

  • Processing.js

  • What's Next?

  • Collision Detection

  • Simple Reference
  • p5.js Tutorials
  • HTML Tutorials
  • JavaScript Tutorials
  • Processing Tutorials
  • Java Tutorials
  • Server Tutorials
  • Google Cloud
  • Android Tutorials
  • LibGDX Tutorials
  • How-To Guides
  • Interviewing

  • Gallery

  • Blog

  • Teaching

  • Forum

  • Mastodon github
    etsy youtube RSS
Tutorials
/
Processing Tutorials
/
ArrayLists
/
Flocking

Previous:
ArrayLists

Flocking


This program takes the previous Flocking example and uses an ArrayList to allow the user to add Flocker instances by dragging the mouse.

You can technically do this using an array and the append() function, but using an ArrayList is much faster.

ArrayList<Flocker> flock = new ArrayList<Flocker>();

void setup() {
  size(200, 200);
}

void draw() {

  background(200);

  for (Flocker f : flock) {
    f.step();
    f.draw();
  }
}

void mouseDragged() {
  flock.add(new Flocker(mouseX, mouseY));
}

class Flocker {

  float x;
  float y;
  float heading = random(TWO_PI);
  float speed = random(1, 3);
  float radius = random(10, 20);

  public Flocker(float x, float y) {
    this.x = x;
    this.y = y;
  }

  void step() {

    //we need more than one Flocker for this to work
    if (flock.size() > 1) {

      //find the closest Flocker
      float closestDistance = 100000;
      Flocker closestFlocker = null;
      for (Flocker f : flock) {

        //make sure not to check against yourself
        if (f != this) {
          float distance = dist(x, y, f.x, f.y);
          if (distance < closestDistance) {
            closestDistance = distance;
            closestFlocker = f;
          }
        }
      }

      float angleToClosest = atan2(closestFlocker.y-y, closestFlocker.x-x);

      //prevent case where heading is 350 and angleToClosest is 10
      if (heading-angleToClosest > PI) {
        angleToClosest += TWO_PI;
      } else if (angleToClosest-heading > PI) {
        angleToClosest -= TWO_PI;
      }

      //turn towards closest
      if (heading < angleToClosest) {
        heading+=PI/40;
      } else {
        heading-=PI/40;
      }

      //move in direction
      x += cos(heading)*speed;
      y += sin(heading)*speed;

      //wrap around edges
      if (x < 0) {
        x = width;
      }
      if (x > width) {
        x = 0;
      }

      if (y < 0) {
        y = height;
      }
      if (y > height) {
        y = 0;
      }
    }
  }

  void draw() {
    ellipse(x, y, radius, radius);
  }
}

Flockers

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Watch each Flocker and notice that it’s just continuously trying to follow its closest neighbor. Even though each individual Flocker is only following simple rules, the program itself is a basic simulation of how birds flock, or how bugs swarm, or how a school of fish swims. This idea of complicated (or even beautiful) patterns emerging from simple rules is called emergence!

Tweak Ideas

  • The flocking logic here is very simple and just uses cohesion (get close to your neighbors). Better simulations also take separation (don’t get too close to your neighbors) and alignment (fly in the same direction as neighbors) into account. You could also consider the closest 5 (or 10, or…) neighbors instead of only the closest one, or you could consider all of the neighbors within some distance.
  • Give each Flocker a random color.
  • Move the call to background() to the setup() function to show trails.
  • Make them run away from each other instead of chase each other.
  • Make one Flocker “it” and have it run away from all of the other Flockers while they chase it- or vice-versa!

Previous:
ArrayLists

ArrayLists Examples

Flocking Flocking

Drag to create more Flockers.

Random Walkers Random Walkers

Randomly colored random walkers.

Add Your Own Example Add Your Own Example

Add your own example to Happy Coding.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.