Category: F2024 – Nimrah

I found MUJO to be a really interesting piece, and one that is very applicable to what we learn in this class specifically. I have taken classes with Aaron before, notably Live Coding, so I know how creative his pieces can be. I really liked the concept of projecting onto the dunes, and using light and the lack thereof to create contrasts in the medium. I really enjoy pieces that cross digital and physical mediums such as this, and I think it made me appreciate the piece more. Also, as someone who cares a lot about sound, I really liked the experimental sounds that are used. The panting and other human noises combined with the dreary background sounds really emotionally impact the piece. I enjoyed Aaron breaking down what he did to make the dunes and the different ways he modified them, and I hope that I can try to use these ideas in a future work. In particular, I really liked the one that used the liquid equation (the name escapes me) and I want to experiment with that in a future work. Overall, I really enjoyed listening to how MUJO came to be, the concept, and the process that happened to make the piece a reality.

For my assignment, I created a ball that looks like it’s refracting light. There is a leader that is a large white ball that moves along flow lines. The rest of the vehicles also move along the flow but have randomized colors and draw a line from their position to the leader’s position. There is also an afterimage on everything to make it a bit more lively. Here is the sketch:

The code is taken from the flow line base we looked at in class, which I then modified slightly. I gave it a higher resolution of 10, to make everything move a bit more erratically. I also slightly modified the edges function for the vehicles, so that the vehicles won’t end up clumping into one of two flows. Instead, when reaching the end, they start at a random y position on the right of the screen, so the vehicles are more spread out.

The line effect I created was a pure accident. I was doing a lot of experimenting with code when I accidentally made an error with an algorithm. Originally, the idea I had was to have a really high-resolution flow field because it created a really cool effect, and then have lines that would run through the flow lines, and perhaps pulse a bit before disappearing. The lines I was trying to make were instead appearing around (0,0), but it made a really interesting-looking effect that made me decide to pivot my idea. The other issue with my original idea was that having the flow resolution be 1 made the program extremely slow, so I don’t think it would have worked properly and froze a lot.

Probably the only code of note is the parts that create the actual visuals, since in the back most of it is not changed:

  show() {

    if (this.isLeader) { //leader is a white ball with a "glow"
      noStroke();
      fill(200, 50);
      circle(this.position.x, this.position.y, 50);
      fill(255);
      circle(this.position.x, this.position.y, 30);
    } else { //rest follow flow lines, but also draw a line from its position to leader
      stroke(this.red, this.blue, this.green, 150);
      strokeWeight(5);
      line(
        this.position.x,
        this.position.y,
        leader.position.x,
        leader.position.y
      );
    }
  }
}

I think there could be more to improve visually, but I couldn’t figure out what else to add. Perhaps adding a simple particle system on the leader to make it more visually interesting could be interesting. I also had some trouble with the color blending. I can’t tell if they are blending or not, and I experimented with different blend modes but they all looked much worse. I also tried to put a glow on the leader but it doesn’t look too realistic, I’d have to research on how to make it look better. It probably would be a good idea to add some interaction too, to make it less static.

Concept

For this week’s assignment, I wanted to investigate the code for the wandering behaviour that we covered in class. I found it interesting how the direction of wander isn’t completely random, rather guided in one direction for a bit and then another. When I thought of what in nature wanders, I thought of tadpoles. I wanted to create a realistic tadpole, with its realism enhanced by the wandering behaviour. Working of the code from class, I tweaked some of the numbers and added edges, so that the tadpole can’t escape the bounds of the canvas.

Code Snippet

edges() {
  let pushed = false;

  // Check each boundary, reverse direction, and add a force toward the center if needed
  if (this.pos.x > width - this.r) {
    this.pos.x = width - this.r;
    this.vel.x *= -1;
    pushed = true;
  } else if (this.pos.x < this.r) {
    this.pos.x = this.r;
    this.vel.x *= -1;
    pushed = true;
  }

  if (this.pos.y > height - this.r) {
    this.pos.y = height - this.r;
    this.vel.y *= -1;
    pushed = true;
  } else if (this.pos.y < this.r) {
    this.pos.y = this.r;
    this.vel.y *= -1;
    pushed = true;
  }

  // If a boundary was hit, apply a slight push toward the canvas center
  if (pushed) {
    let center = createVector(width / 2, height / 2);
    let directionToCenter = p5.Vector.sub(center, this.pos);
    directionToCenter.setMag(0.5); // Set the magnitude of the push
    this.applyForce(directionToCenter);
  }
}

Embedded Sketch

Reflections

I like the visual effect of my code and I enjoyed learning more about how to modify the wandering behaviour. I struggled the most with creating the boundary for the canvas, and making sure the tadpole didn’t get stuck and keep bouncing on the boundary. With more time, I would incorporate more into the code, such as mousePressed(), to make the project more interactive and experiment more with wander.

Ever since my introductory class in Interactive Media, I’ve encountered a number of projects that build on themes I’m already somewhat familiar with. But what these artists accomplish is something transformative—they take these foundational ideas and push them to fit their own new realms. The MOJU Project installation, in particular, exemplifies this, as it’s more than just a system in motion; it’s a structured concept reimagined as a live, immersive performance. What fascinates me is how the project begins with familiar ideas, then radically reinterprets them to create something that resonates deeply with the artists, inviting the audience to explore the unique perspectives they can bring.

I would say that rhis project is a true multimedia experience. It combines the diverse passions and talents of its co-creators, blending coding, music, and live performance into a cohesive artistic expression. There’s a synergy between the technical and the performative, which elevates the experience, drawing the viewer into a space where these elements don’t just coexist but enhance each other. It showcases how interactive media can break down the boundaries between disciplines, creating a unified piece that’s both technically impressive and emotionally compelling.

While the story itself is abstract and requires some interpretation, this complexity adds to its allure. I’m constantly drawn in by the choreography of the movements and the intricate visuals displayed, which seem to pulse with life. The ambiguity of the narrative lets each viewer bring their own understanding, fostering a connection that feels personal yet communal.

Inspiration & Concept

For this assignment, I just created a wandering UFO that abducts people if they get too close to the UFO. That’s it.

Sketch

How it Works

I just used the wander and persuade methods, where the UFO uses wander as a default state. Whenever it is close to a target, it will switch to persuade method.

Improvements

Add a city map, sounds, and make a game out of it — profit.

I really enjoyed the guests’ visit to our class as they showed us their project and gave us a more detailed insight into what it really represents. Looking at the project from the project space, I had not really thought of the meaning behind each aspect of the project and what the performers are representing.

It was also really cool to see some of the code and how each part really works. I loved the little details when the sand is being drawn as well as when it starts falling. It made it really seem like a real desert with the bits of sand. As someone who went to the desert often, I found it very interesting to see a digital version of it. This was very inspiring and I am hopefully looking forward to creating such realistic visuals in my future projects.

Concept:

For this week’s assignment, I decided to have a bee as my vehicle and a flower as the target. The concepts used are wander, arrival and staying within canvas boundaries. I also adjusted the bee’s behavior based on how it really behaves and added a bit of jitter to its movement by randomizing the wander angle.

Sketch:

Code Snippet:

// Determine behavior based on distance to target
 let d = dist(vehicle.pos.x, vehicle.pos.y, target.x, target.y);
 let steering;
 if (d < 150) {
   // If Bee is close to flower, "arrive" behavior with edge avoidance
   steering = vehicle.arrive(target);
 } else {
   // If Bee is far from the flower, "wander" behavior with edge avoidance
   steering = vehicle.wander();
 }

In this code snippet, I made sure that the bee goes on wandering around until it reaches a specific distance from the flower, then it arrives to the center of the flower.

Future Improvements: 

I would add more bees and flowers and make the bees randomly arrive on any flower.

I was genuinely surprised by how the small, foundational concepts we’ve covered in class were applied to create something as complex and captivating as the digital sand dune simulation in Mujo. Concepts like layering textures, oscillations, and shadow, and adjusting particle movement seemed straightforward in isolation, yet seeing them combined in such a way brought an unexpected level of realism to the dunes. Each grain of sand appeared to move independently, yet it all worked together to mimic the fluid, shifting nature of real sand in the wind. It made me realize that these basic tools and techniques, which seemed almost too simple at first, can be powerful building blocks when used thoughtfully.

Concept

The idea for this assignment is to simulate the behavior of different living organisms that follow a certain leader. I just thought the idea of following something was interesting. In this case, the lead insect is wandering; however, the rest of the colony is seeking him.

Code

let leader;
let followers = [];
let numFollowers = 100;
let desiredSeparation = 50;  // Minimum distance between flies

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  // Create leader fly with random starting position
  leader = new Vehicle(random(width), random(height), true);

  // Create follower flies
  for (let i = 0; i < numFollowers; i++) {
    followers.push(new Vehicle(random(width), random(height), false));
  }
}

function draw() {
  background(220, 30);  // Transparent background for trail effect
  
  // Leader wanders around
  leader.wander();
  leader.update();
  leader.checkEdges();  // Ensure leader stays in bounds
  leader.show();

  // Followers seek the leader and avoid overlapping
  for (let follower of followers) {
    follower.separate(followers);  // Avoid overlapping with other followers
    follower.seek(leader.position);  // Seek the leader's current position
    follower.update();
    follower.checkEdges();  // Ensure followers stay in bounds
    follower.show();
  }
}

// Vehicle class definition
class Vehicle {
  constructor(x, y, isLeader = false) {
    this.position = createVector(x, y);
    this.velocity = createVector(random(-1, 1), random(-1, 1));
    this.acceleration = createVector(0, 0);
    this.r = 6;
    this.maxspeed = isLeader ? 2 : 2.5;  // Leader moves slightly faster
    this.maxforce = 0.05;  // Reduce max force for smoother movements
    this.isLeader = isLeader;
    this.wanderTheta = 0;  // Used for wander behavior for leader
  }

  // Wander behavior for the leader
  wander() {
    let wanderR = 25;    // Radius for our "wander circle"
    let wanderD = 80;    // Distance for the wander circle to be ahead of the vehicle
    let change = 0.3;
    this.wanderTheta += random(-change, change);  // Randomly change wanderTheta

    // Now we have to calculate the new target
    let circleLoc = this.velocity.copy();
    circleLoc.setMag(wanderD);  // Move circle ahead of vehicle
    circleLoc.add(this.position);  // Make it relative to the vehicle's position

    let h = this.velocity.heading();  // Heading angle of the vehicle
    let circleOffset = createVector(wanderR * cos(this.wanderTheta + h), wanderR * sin(this.wanderTheta + h));

    let target = p5.Vector.add(circleLoc, circleOffset);
    this.seek(target);  // Seek the wandering target
  }

  // Method to update location
  update() {
    this.velocity.add(this.acceleration);
    this.velocity.limit(this.maxspeed);  // Limit speed
    this.position.add(this.velocity);
    this.acceleration.mult(0);  // Reset acceleration to 0 after each update
  }

  // A method that calculates a steering force towards a target
  seek(target) {
    let desired = p5.Vector.sub(target, this.position);  // A vector pointing from the location to the target
    desired.setMag(this.maxspeed);  // Scale to maximum speed

    let steer = p5.Vector.sub(desired, this.velocity);  // Steering = Desired minus velocity
    steer.limit(this.maxforce);  // Limit to maximum steering force

    this.applyForce(steer);
  }

  // Separation behavior: Avoid overlapping
  separate(vehicles) {
    let sum = createVector(0, 0);
    let count = 0;
    
    // Check all other vehicles
    for (let other of vehicles) {
      let d = p5.Vector.dist(this.position, other.position);
      if ((d > 0) && (d < desiredSeparation)) {
        // Calculate vector pointing away from neighbor
        let diff = p5.Vector.sub(this.position, other.position);
        diff.normalize();
        diff.div(d);  // Weight by distance
        sum.add(diff);
        count++;  // Keep track of how many are too close
      }
    }

    // Average out the forces
    if (count > 0) {
      sum.div(count);
      sum.setMag(this.maxspeed);  // Implement Reynolds: Steering = Desired - Velocity
      let steer = p5.Vector.sub(sum, this.velocity);
      steer.limit(this.maxforce);
      this.applyForce(steer);
    }
  }

  // Apply force to the vehicle
  applyForce(force) {
    this.acceleration.add(force);
  }

  // Check edges to ensure vehicle stays within the canvas
  checkEdges() {
    if (this.position.x > width) {
      this.position.x = width;
      this.velocity.x *= -1;
    } else if (this.position.x < 0) {
      this.position.x = 0;
      this.velocity.x *= -1;
    }
    
    if (this.position.y > height) {
      this.position.y = height;
      this.velocity.y *= -1;
    } else if (this.position.y < 0) {
      this.position.y = 0;
      this.velocity.y *= -1;
    }
  }

  // Display the vehicle as a triangle pointing in the direction of velocity
  show() {
    let angle = this.velocity.heading() + PI / 2;
    fill(this.isLeader ? color(255, 0, 0) : color(0, 255, 0));  // Leader is red, followers are green
    stroke(0);
    push();
    translate(this.position.x, this.position.y);
    rotate(angle);
    beginShape();
    vertex(0, -this.r * 2);
    vertex(-this.r, this.r * 2);
    vertex(this.r, this.r * 2);
    endShape(CLOSE);
    pop();
  }
}

The simulation uses a vehicle class that has different attributes including and is leader attribute which becomes true when the vehicle is a leader.  The class also has a seek-and-wander method. The wander method makes the vehicle wander around by creating a circle around the head of the vehicle and making the vehicle seek that circle.  The seek method takes a target and makes the vehicle seek the target object.

Reflection and Future Improvements

The mechanics of the motion look good however the sketch might need more styling and polishing.  Another thing would be making the leader controllable using a mouse.