︎ ︎ ︎



WORK IN PROGRESS
WIP TOOL (BOIDS)
Welcome to the page where you can try out a new tool I'm currently developing. This is a work in progress, so you may encounter bugs, unfinished features, or quirky controls along the way — it’s all part of the process!

Your feedback, bug reports, or ideas for improvement would be greatly appreciated and can help refine the tool before its release. Feel free to share your thoughts using with me using the contact form.


ABOUT THE TOOL:


The new tool I’m working on is a p5.js-based generator called BOIDS Tool, which built on top of Daniel Huang’s original boids demo (MIT License). It’s designed to let you explore emergent flocking behavior through hands-on parameter tweaking and real-time interaction. Each “boid” is a simple agent that updates its movement every frame by applying these three core rules:

Separation: steer away from boids that get too close.
        Alignment: match the average heading of nearby boids.
Cohesion: move toward the average position of neighboring boids.

So, to put it simply - there’s no central controller, each boid only “sees” others within its vision radius and runs these vector calculations locally.


Behavior Parameters:


  • Move Accuracy. Limit the number of neighbors each boid considers. Lower values make each boid “focus” on fewer peers; higher values give a fuller, but heavier, calculation.
  • Boid Vision. Radius around each boid in which it looks for neighbors. A larger vision makes the flock more coherent over distance; a smaller one yields tighter local groups. High values greatly affect performance.
  • Alignment Force. How strongly boids steer to match the average direction of their neighbors.
  • Alignment Bias. An extra multiplier that boosts alignment when neighbors’ headings are already similar. Affects how stronger the boid sync with similar velocities.
  • Cohesion Force. Strength of the pull toward the group’s center of mass, determining how eagerly boids cluster together.
  • Separation Force. Intensity of the push to avoid crowding, preventing boids from overlapping or clumping too tightly.
  • Steering Force. Maximum turning force per frame (how sharply a boid can adjust its direction).
  • Turning Reaction. Controls how quickly a boid’s orientation interpolates toward its new velocity direction (for visually smooth rotation).
  • Boid Speed. Minimum and maximum speed thresholds. These caps ensure boids don’t crawl too slowly or dash unrealistically fast.
  • Velocity Drag. A minor slowdown applied each frame. It’s like a friction or air resistance, that keeps velocities from spiraling out of control.
  • Noise Angle. A small random rotation added to each boid’s heading every frame. This introduces subtle wobble and natural variation.


Main Features:


  • Canvas Sizes: choose common aspect ratios (1:1, 16:9, 9:16, etc.)
  • Shape Library: squares, circles, triangles, or mix them up.
  • Color Controls: fill, stroke, both, with opacity and line-weight adjustments.
  • Texture Mapping: drag an image onto the canvas, and each boid will cut out its shape directly from that texture.
  • Real-Time Interaction:
    1. Left-click to attract nearby boids
    2. Right-click to repel them


CHANGE LOG:


0.15 (Jun 11, 2025)
  • Added transparency support for styles
  • Added triangle shape to the form selection
  • Released as a WIP tool

0.15 (Jun 11, 2025)
  • Added support for uploading custom images to use them as textures
  • Transformation behavior can be selected based on speed or rotation angle
  • Added a new Mixed shape type that blends multiple shape forms
  • Switched the color interpolation method from HSV to the colorLerp function
  • Updated the random system to ensure consistency with the random seed values
  • Refined global parameters update system
  • New features in UI and overall improvements

0.14 (May 19, 2025)
  • Updated dependencies location
  • Added stroke support
  • Improved image mode rendering
  • Refactor global parameters
  • Changes in random movement algorithm 

0.13 (May 15, 2025)
  • Refactoring HTML structure
  • Transfer canvas and tweakpane UI in div containers
  • Updating CSS classes
  • Add mouse events behaviour

0.12 (May 14, 2025)
  • Added new render mode, using image as a texture
  • Implemented shape types selector
  • Added color mode based on particle angle
  • Included range Hue parameter for color mode

0.10-0.11 (May 10-13, 2025)
  • Initial prototype development: rebuild and migrate main functions to p5.js
2025 ︎︎︎ ANATOLII BABII