Sketch – Week 9

Concept

For this week’s assignment, I was inspired by Ryoichi Kurokawa’s “syn_mod.n” artwork. I liked how fluid the artwork looked, and the intricacy of the webs. I intended to create similar visual shapes and manipulate them through separation and alignment.

Code Snippet 

class Boid {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.velocity = p5.Vector.random2D(); 
    this.acceleration = createVector(0, 0);

    // Define maximum speed and steering force for the boid
    this.maxSpeed = 3;
    this.maxForce = 0.05;

    // Set initial weights for flocking behaviors
    this.setBehaviorWeights(20, 1, 1);
  }

  run(boids) {
    // Control boid's behavior, movement, and visual display
    this.flock(boids);      
    this.update();         
    this.wrapAround();     
    this.showConnections(boids); // Draw connecting lines between boids
  }

  setBehaviorWeights(sepWeight, aliWeight, cohWeight) {
    // Set weights for separation, alignment, and cohesion behaviors
    this.sepWeight = sepWeight;
    this.aliWeight = aliWeight;
    this.cohWeight = cohWeight;
  }

  flock(boids) {
    // Calculate the three main flocking behaviors
    let sep = this.separate(boids).mult(this.sepWeight); // Separation: avoid crowding
    let ali = this.align(boids).mult(this.aliWeight);    // Alignment: steer towards average heading
    let coh = this.cohere(boids).mult(this.cohWeight);   // Cohesion: move towards group center

    // Apply the combined steering forces to the boid
    this.applyForce(sep.add(ali).add(coh));
  }

Embedded Sketch 

Reflections 

I enjoyed learning the flocking behaviours. To improve my code, I would add interaction to it. I wanted to add a mousePressed interaction but I was struggling to get the visual effect I wanted. I also wanted the web to look more organic, and I would change the code using perlin noise to achieve this effect.