Week 8 _ Flame

Concept:

For this project, I wanted to explore a difficult reality in my life, reimagining it in a way that feels more approachable and symbolic. This past year and half I am living the mose painful realities of my life—the loss of my familys home and loved ones to the brutality of war. It’s a huge wound that I carry with me everyday, yet try to keep moving. Initially, I considered expressing this darkness without censorship using  a visual of rockets aimed toward a target , with an explosive effect, but I decided on a subtler approach that relies on symbolism. To bring the concept together, I used warm, fiery colors to create a cohesive and evocative experience. 

 

Highlights:

I began by reviewing the slides, reading the chapter, and watching the coding terrain videos to refresh my memory and better understand Autonomous Agents. I began by looking at the code we did in class and began to experiment with it. I decided to focus mainly on the seek and flee rather than pursue and evade because I thought they worked best with my idea.

I  created an array of 3 targets equal in distance from one another in an angle and another array of 23 vehicles, keeping in mind the 0 index. I tried to figure out how to divide these vehicles towards their targets; I realized I could do this by first creating a target index and dividing ‘i’ by 8, the number of vehicles each target will get, and then passing the target with the target index. Further, I made the default of the program to seek a target until the mouse is pressed; it flees. I also added some transparency to the code, enhancing the flow of the points and the overall aesthetics. For the vehicle class, it was similar to the ones in class for flee and seek. I change them a little to make them work best for my visualization. For the flee functionality, I did not want the points to leave the canvas to fix this, so I created conditions to check the x and y edges of the canvas. 

let vehicles = [];
let targets = [];

function setup() {
  createCanvas(650, 650);
  
  // Initialize 3 main targets and place them near each other with equal distance 
  targets.push(createVector(width * 0.25, height / 2.5));
  targets.push(createVector(width * 0.5, height / 2));
  targets.push(createVector(width * 0.75, height / 1.5));

  // Create an array of vehicles that are grouped to each target
 
  for (let i = 0; i < 23; i++) {
    // Each 8 vehicles share the same target 0 to 17 its 18 so 8 
    let targetIndex = floor(i / 8); 
    //each vehicle has a random intial position and a target 
    let vehicle = new Vehicle(random(width), random(height), targets[targetIndex]);
    vehicles.push(vehicle);
  
  }
}

function draw() {
  background(0,15);


 
  for (let target of targets) {
    
    //draw targets as a circle for now
    //yellowish flamy like 
     fill(255,232,8);
    stroke(255,154,0);
    strokeWeight(2);
   circle(target.x, target.y, 10);
  }

  // Update and show  vehicles 
 for (let vehicle of vehicles) {
   if (mouseIsPressed){
  vehicle.flee(vehicle.target); 
    vehicle.update();
    vehicle.show();
  }else{
    vehicle.seek(vehicle.target);
    vehicle.update();
    vehicle.show();
  }
 }
  
}

class Vehicle {
  constructor(x, y, target) {
    //pass x & y the intial positions of the vehicles 
    this.position = createVector(x, y);
    this.velocity = createVector(0, 0);
    this.acceleration = createVector(0, 0);
    this.r = 10;
    this.maxspeed = 4;
    this.maxforce = 0.3;
    //make a buffer to move away from target when reach 
    //this.buffer = 100;
    // the 3 target the vehicles will seek
    this.target = target; 
    
    // //change the size as an indecator if its going away or towards target 
    // this.size= 15;
  }

  update() {
 this.velocity.add(this.acceleration);
    this.velocity.limit(this.maxspeed);
    this.position.add(this.velocity);
    
    //check edges for flee x
    if (this.position.x > width) {
      this.position.x = 0; 
    } else if (this.position.x < 0) {
      this.position.x = width; 
    }
    //check edges for flee y 
    if (this.position.y > height) {
      this.position.y = 0; 
      
    } else if (this.position.y < 0) {
      this.position.y = height; 
    }
    
    // reset acc
    this.acceleration.mult(0);
  }

  applyForce(force) {
    this.acceleration.add(force);
  }

  applyForce(force) {
    //effects speed and directio
    this.acceleration.add(force);
    
    
  }

  seek(target) {
    let desired = p5.Vector.sub(target, this.position);
    desired.setMag(this.maxspeed);
    let steer = p5.Vector.sub(desired, this.velocity);
    steer.limit(this.maxforce);
    this.applyForce(steer);
  }
    flee(target) {
    // Flee away when reaching buffer
    let desired = p5.Vector.sub(this.position, target); // Reverse direction
    desired.setMag(this.maxspeed);
    let steer = p5.Vector.sub(desired, this.velocity);
    steer.limit(this.maxforce);
    this.applyForce(steer);
  }


  show() {
    
    //dirc
    let angle = this.velocity.heading();
  fill(255,random(0,100),0);
 stroke(255,random(0,100),random(0,8));
    strokeWeight(5);
    push();
    translate(this.position.x, this.position.y);
   rotate(angle);
    beginShape();
    point(-this.r*4 , -this.r*2);
    point(this.r*4 , 0);
    vertex(-this.r * 4, this.r*2);
    endShape(CLOSE);
    pop();
  }
}

Sketch:

Future work:

I think there is a lot that can be done with this code, like adding more vocals and targets and experimenting with the different shapes and styles that can be implemented. Also, giving users more agency over the program where they can play around more and interrupt the decisions of the system. I also think it would be nice if I could try it out with the pursue and evade where I can make a buffer area to either evade or pursue the target. 

Resources: