force Instructions

https://editor.p5js.org/sl9964/full/AoL-VeegC

<aside>

What did you originally intend to create?

• I assign each political stand with mass so they have different reaction and towards attractions/repel.
• I give up mouse control and let every element become draggable and by dragging a circle into a specific place it will attract and repel nearby particles.
• I adds likes and dislike types for each particles and let it decides whether they will attracted or repelled by other particles.
• Also, I write a menu so I can turn the simulations on and off and record some data from it.

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

• I am inspired by other students work and also Nature of Code
• I am inspired by magnetic and winds.

What problems/discoveries did you encounter along the way?

• It takes me a long time to make sure the function that checks if the mouse is inside of the triangle works … I am not good at math so I find an answer online and modify it a little.
• At one point I almost wanted to make all the particles HTML elements so I could add an event listener to them instead of writing long and specific functions. </aside>

Below are the New Code Added:

class Fish {
  constructor(x, y, type, size, baseColor) {
    this.time = 0;
    this.attractedTime = 10;
    this.dragged = false;
    this.offsetX = 0;
    this.offsetY = 0;
  }

  assignStand() {
    if (this.pos.x < 400 && this.pos.y < 400) {
      this.stand = "authorCommunism";
      this.mass = 5;
    }
    if (this.pos.x > 400 && this.pos.y < 400) {
      this.stand = "authorCapitalism";
      this.mass = 10;
    }
    if (this.pos.x < 400 && this.pos.y > 400) {
      this.stand = "anarchyCommunism";
      this.minX = 0;
      this.minY = 400;
      this.mass = 1.
    }
    if (this.pos.x > 400 && this.pos.y > 400) {
      this.stand = "anarchyCapitalism";
      this.mass = 2;
    }
  }

  attracted(type, target, range, G, low, high, time) {
    this.attractedTime = time;
    let force;
    let distX = this.calculateDist(target).distX;
    let distY = this.calculateDist(target).distY;

    if (this.time < time && distX < range && distY < range) {
      this.time++;
      if (type == "Attract") {
        force = p5.Vector.sub(target, this.pos);
      } else if (type == "Repel") {
        force = p5.Vector.sub(this.pos, target);
      }

      let dsquared = force.magSq();
      dsquared = constrain(dsquared, low, high);
      let strength = G / this.mass / dsquared;
      force.setMag(strength);
      this.applyForce(force);
    }
  }

  update() {
    const mean = 0;
    const sd = random(0.9, 1);

    let index = randomGaussian(mean, sd);
    
    

    if (this.dragging) {
      this.pos.x = mouseX + this.offsetX;
      this.pos.y = mouseY + this.offsetY;
    } else {
      if (index < -1.5 || index > 1.5) {
        this.time = 0;
      } else if (index < -0.8 || index > 0.8) {
        this.moveFreely();
      } else {
        this.vel.add(this.acc);
      }
      
      if (this.isMouseOver()) {
        this.vel.mult(0.5);
      }

      this.vel.add(this.acc);
      this.pos.add(this.vel);
      this.acc.mult(0); // Reset acceleration
      this.checkBoundaries();
      this.shine();
    }
  }

  clicked() {
    if (this.isMouseOver()) {
      this.dragging = true;
      this.baseColor = "black";
      this.offsetX = this.pos.x - mouseX;
      this.offsetY = this.pos.y - mouseY;
    } else {
      this.dragging = false;
    }
  }
  isMouseOver() {
    let close = false;
    if (this.type === "radical") {
      close = this.isMouseOverRect();
    } else if (this.type === "moderate") {
      close = this.isMouseOverCircle();
    } else if (this.type === "shifting") {
      const height = (sqrt(3) / 2) * this.size;
      this.isMouseOverTriangle(
        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
      );
    }

    return close;
  }

  isMouseOverRect() {
    return (
      mouseX > this.pos.x - this.size &&
      mouseX < this.pos.x + this.size &&
      mouseY > this.pos.y - this.size &&
      mouseY < this.pos.y + this.size
    );
  }

  isMouseOverCircle() {
    return dist(mouseX, mouseY, this.pos.x, this.pos.y) < this.size / 2;
  }

  isMouseOverTriangle(x1, y1, x2, y2, x3, y3) {
    function getArea(a, b, c) {
      return abs(
        (a[0] * (b[1] - c[1]) + b[0] * (c[1] - a[1]) + c[0] * (a[1] - b[1])) / 2
      );
    }
    let point = [mouseX, mouseY];
    let area = getArea([x1, y1], [x2, y2], [x3, y3]);
    let areaA = getArea([x1, y1], [x2, y2], point);
    let areaB = getArea(point, [x2, y2], [x3, y3]);
    let areaC = getArea([x1, y1], point, [x3, y3]);
    return abs(areaA + areaB + areaC - area) < 0.001;
  }

  show() {
    fill(this.baseColor);
    if (this.time < this.attractedTime) {
      noStroke();
    } else {
      stroke("white");
    }

    if (this.isMouseOver()) {
      stroke(" black");
    }

    if (this.type === "radical") {
      this.shape = rect(this.pos.x, this.pos.y, this.size);
    } else if (this.type === "moderate") {
      this.shape = ellipse(this.pos.x, this.pos.y, this.size);
    } else if (this.type === "shifting") {
      const height = (sqrt(3) / 2) * this.size;
      this.shape = 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 assign mass to each political stand and simplest modify existing attracted and let it become strength = (G/mass)/dsqaured
• I use HTML elements and functions to make the menu and to listen to whether my mouse is on or off-canvas： document.getElementById(）and addEventListener . Only hearing from p5’s canvas helps with the issue of the mouse off the canvas but influences. I also use a button to switch between attract and repel mode. </aside>

let canvas;
let menus;
let rMenu;
let aMenu;
let tMenus;
let sMenu;
let start=false;
let selected;
let selectedV;

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

  createGradient();
  population=300;
  generatePoints(population);
  canvas = document.getElementById("defaultCanvas0");
  menus = document.getElementsByClassName("menu");
  rMenu = document.getElementById("record");
  tMenu = document.getElementById("controlMenu");
  sMenu = document.getElementById("start");
  aMenu = document.getElementById("attraction");

  }
  
  makeStatistics1()
  
  changeMenu();
}

function draw() {
  image(gradientBG, 0, 0);
  image(gradientBG1, 0, 0);
  createAxis();

  sampleColor = "white";

  for (let fish of fishGroup) {
    for (let fish2 of fishGroup) {
      fish.checkNearBy(fish2, 20);
    }
   
    fish.show();
    if(start){
      fish.update();
    }else{
      fish.dragging=false;
    }
    
    if(selected && selectedV){
      fish.attracted(attraction,selectedV,100, 50, 25, 400, 200);
    }
  }
    
}

function changeMenu() {
  
   rMenu.addEventListener("click", function (event) {
        makeStatistics2();
    });
  
    sMenu.addEventListener("click", function (event) {      
        if (start) {
          start=false;
          sMenu.textContent="Start";
        }else if (!start) {
          start=true;
           sMenu.textContent="Stop";
        }
       
    });
  
   aMenu.textContent=attraction;
   
    aMenu.addEventListener("click", function (event) {
      
        if (attraction == "Attract") {
          attraction = "Repel";
        }else if (attraction == "Repel") {
          attraction = "Attract";
        }
       aMenu.textContent=attraction;
    });
  
  for (let menu of menus) {
    menu.addEventListener("mouseover", function (event) {
      menu.style.color = "white";
      menu.style.background = "black";
    });
    menu.addEventListener("mouseout", function (event) {
      menu.style.color = "black";
      menu.style.background = "white";
    });
    
  }
}

function mousePressed() {
  for (let fish of fishGroup) {
   fish.clicked();
   if(fish.dragging){
      selected = fish;
      selectedV = createVector(mouseX,mouseY);
    }
  }
  
  let logging = {
    x: mouseX,
    y: mouseY,
    fish: selected 
  };
  console.log(logging);

}

function mouseReleased() {
    for (let fish of fishGroup) {
        fish.dragging = false;
        selected = undefined;
        selectedV = undefined;
    }
    
}

function makeStatistics1(){
  let radicals=0;
  let moderates=0;
  let shiftings=0;
  
  for(let fish of fishGroup){
      switch (fish.type) {
    case 'radical':
      radicals++;
      break;
    case 'moderate':
      moderates++;
      break;
    case 'shifting':
       shiftings++;
      break;
    default:
      console.log(`Sorry, we are out of ${expr}.`);
  }
  }
  let logging = {
    radical: [100*(radicals/population)+"%",radicals+" group"],
    moderate:[100*(moderates/population)+"%",moderates+" group"],
    shifting:[100*(shiftings/population)+"%",shiftings+" group"],
  };
  console.log(logging);
}

function makeStatistics2(){
  let radicals=0;
  let logging = {
    radical: mouseX,
    y: mouseY,
    attraction: attraction,
  };
  console.log(logging);
}