Vector Instruction

https://editor.p5js.org/sl9964/full/NG8Z96dUx

<aside>

What did you originally intend to create?

• I improved the code before and tried to see if I could make some fish stay in their zone and only allow fish to travel across the zone if they were lucky.
• I also changed the color theme and the shape for the three types of fish I made last class

What resources and examples did you draw on to create your sketch? What was most helpful / least helpful from this week's materials?

• I get help and takes more time to look at p5.Vector() and OOP.

What problems/discoveries did you encounter along the way?

• When fish travel across the border they don’t change color accordingly and I thought it was a performance issue. It turns out that this is because my code only changes the stand when they exceed the border. ie: like fish from the top left will change color when entering the bottom right, but will not change color if it is a bottom right entering the top left. </aside>

Below are the New Code Added:

class Fish {
  constructor(x, y, type, size, baseColor) {
    this.pos = createVector(x, y);
    this.size = size;
    this.baseColor = baseColor;
    this.type = type;
    this.assignStand();

    if (type === "radical") {
      this.vel = createVector(random(-0.2, 0.2), random(-0.2, 0.2));
      this.jumpChance = 0.02;
    } else if (type === "moderate") {
      this.vel = createVector(random(-1, 1), random(-1, 1));
      this.jumpChance = 0.1;
    } else if (type === "shifting") {
      this.vel = createVector(random(-2, 2), random(-2, 2));
      this.jumpChance = 0.5;
    }
    this.acc = createVector(0, 0);
    this.time = 0;
  }

  assignStand() {
    if (this.pos.x < 400 && this.pos.y < 400) {
      this.stand = "authorCommunism";
      this.minX = 0;
      this.minY = 0;
      this.boundX = 400;
      this.boundY = 400;
    }
    if (this.pos.x > 400 && this.pos.y < 400) {
      this.stand = "authorCapitalism";
      this.minX = 400;
      this.minY = 0;
      this.boundX = 800;
      this.boundY = 400;
    }
    if (this.pos.x < 400 && this.pos.y > 400) {
      this.stand = "anarchyCommunism";
      this.minX = 0;
      this.minY = 400;
      this.boundX = 400;
      this.boundY = 800;
    }
    if (this.pos.x > 400 && this.pos.y > 400) {
      this.stand = "anarchyCapitalism";
      this.minX = 400;
      this.minY = 400;
      this.boundX = 800;
      this.boundY = 800;
    }
  }

  changeStand() {
    let prevStand = this.stand;
    this.assignStand();

    if (this.stand !== prevStand) {
      this.shine();
    }
  }

  attracted(target, G, low, high, time) {
    this.time++;
    if (this.time<time) {
      let force = p5.Vector.sub(target, this.pos);
      let dsquared = force.magSq();
      dsquared = constrain(dsquared, low, high);
      let strength = G / dsquared;
      force.setMag(strength);
      this.applyForce(force);
    }
  }

  update() {
    if(random()<0.01){
      this.time=0;
    }else if (random() < 0.1) {
      this.moveFreely();

    } else {
      this.vel.add(this.acc);
    }

    this.pos.add(this.vel);
    this.acc.mult(0);
    this.changeStand();
    this.checkBoundaries();
    this.shine();
  }

  checkBoundaries() {
    if (this.pos.x <= this.minX || this.pos.x >= this.boundX) {
      if (random() > this.jumpChance) {
        this.reflectVelocity("x");
      } else {
        this.changeStand();
      }

      this.pos.x = constrain(this.pos.x, 0, this.boundX);
    }
    if (this.pos.y <= this.minY || this.pos.y >= this.boundY) {
      if (random() > this.jumpChance) {
        this.reflectVelocity("y");
      } else {
        this.changeStand();
      }
      this.pos.y = constrain(this.pos.y, 0, this.boundY);
    }
  }

  reflectVelocity(axis) {
    if (axis === "x") {
      this.vel.x *= this.type === "shifting" ? -1 : -0.5;
    } else if (axis === "y") {
      this.vel.y *= this.type === "shifting" ? -1 : -0.5;
    }
  }

  shine() {
    let stabilityX = constrain(map(abs(this.vel.x), 0, 1, 75, 100), 75, 100);
    let stabilityY = constrain(map(abs(this.vel.y), 0, 3, 25, 100), 25, 100);
    colorMode(HSL, 360, 100, 100, 1);

    let hue;
    switch (this.stand) {
      case "authorCommunism":
        hue = 350;
        break;
      case "authorCapitalism":
        hue = 0;
        break;
      case "anarchyCommunism":
        hue = 190;
        break;
      case "anarchyCapitalism":
        hue = 200;
        break;
      default:
        hue = 100;
        break;
    }

    this.baseColor = color(hue, stabilityX, stabilityY);
  }

  clicked() {
    let d = dist(mouseX, mouseY, this.pos.x, this.pos.y);
    if (d < this.size / 2) {
      this.baseColor = "black";
      console.log(this); // Log this Fish object
    }
  }

  show() {
    fill(this.baseColor);
    noStroke();
    if (this.type === "radical") {
      rect(this.pos.x, this.pos.y, this.size);
    } else if (this.type === "moderate") {
      ellipse(this.pos.x, this.pos.y, this.size);
    } else if (this.type === "shifting") {
      const height = (sqrt(3) / 2) * this.size;
      triangle(
        this.pos.x - this.size / 2,
        this.pos.y + height / 2,
        this.pos.x + this.size / 2,
        this.pos.y + height / 2,
        this.pos.x,
        this.pos.y - height / 2
      );
    }
  }
}

<aside>

Narrate the process of creating your sketch.

• I've used minX minY boundX boundY to let each fish continuously adjust its stand based on its exact location on the canvas.
• I made an assignStand() and a changeStand() method to actively check for changes in a fish's stand. If a fish enters a new area, it immediately triggers the shine method. It was part of the performance solution.
• I added a timing element so each fish is attracted to a target for only a few seconds determined by the time parameter in the attracted() method. So mouse interaction has limited influence like in the real world.
• In the updated update function, I included a mechanism to randomly reset the attraction timer, so some random fish are always ready to be attracted again. I also use this action to perform any property changes inside the class Fish{}so the sketch.js will be cleaner.
• I calculated the right height so I can have triangles that work exactly like rect() and ellipse().
• clicked method allows me to debug and to check if any fish is fine using console.log. </aside>

let noiseScale = 0.05;
let points = [];
let fishGroup = [];
let gradientBG;
let gradientBG1;
let type;

function preload(){
  // fish=loadImage('seafish.webp');
}

function setup() {
  createCanvas(800, 800);
  colorMode(HSL, 360, 100, 100, 1);

  createGradient();
   
  generatePoints(100);
  
 for (let p of points) {
  let randomList = [
    "radical", "radical", 
    "moderate", "moderate", "moderate", "moderate", "moderate",
    "shifting", "shifting", "shifting"
  ];

  let index = int(random(randomList.length)); 
  let type = randomList[index]; 
  fishGroup.push(new Fish(p.x, p.y, type, 25, 'white'));
 }

}

 
function draw() {
   image(gradientBG,0,0);
   image(gradientBG1,0,0);
   createAxis();
  
   sampleColor='white';

  for (let fish of fishGroup) {
    if (0 < mouseX && mouseX < width*0.8 && 0 < mouseY && mouseY < height*0.8) {
      let mouse = createVector(mouseX, mouseY);
      fish.attracted(mouse,5,25,400,20);
    } else {
      fish.moveFreely();
    }
    fish.show();
    fish.update();

  }
}

function mousePressed(){
  for (let fish of fishGroup) {
      fish.clicked();
  }
}