Weel 10 _ Magnets_Matters.js

Concept:

  For this project, I got inspired by the nature of codebook examples. Especially the ones about attraction forces and movers. I decided to create a particle system that is affected by attraction and repulsion forces. Through this class, I realized I am obsessed with particles and small shapes working together to create different artworks. I imagined that the particles would slowly get attracted to an attractor but then be repulsed quickly to create a dynamic of contradiction. 

Highlight and Process:

Matters.js library is very new to me. Because it is a physics-based engine, it has its own approach to defining bodies, forces, and interactions, as a result, it was a little different to me. I had to take some time to understand the syntax but more time to explore the possibilities it has. It is a very interesting library to delve into due to many limitations in terms of learning the library and its implementation. I think I did not have enough time to explore it enough to comfortably use its full potential in this assignment. 

For the sketch, I had an attractor class and a mover class. The main functionality of the attractor class is to attract the movers into a circular body via forces. Within the attractor class, there is the set position function which later sets the attracto to a new position when the mouse is pressed. The mover class creates a bouncy object made of 4 circles that is affected by air resistance. Making the movers responsive to forces the way I was imagining it was challenging, as I had to play around with a lot of the parameters.  In terms of interactivity, the attractor changes position to wherever the mouse is, and the movers follow. Additionally, I made a slider to increase or decrease the strength of the force toward the attractor. 

 

// inspo http://natureofcode.com

const { Engine, Bodies, Body, Composite, Vector } = Matter;

// A Mover and an Attractor
let movers = [];
let attractor;

let engine;

function setup() {
  createCanvas(700, 650);

  // matter engine
  engine = Engine.create();
  engine.gravity = Vector.create(0, 0);

  // slider to control gravitational constant as a way ti change the strength
 
  gravitySlider = createSlider(0.001, 1, 0.05, 0.001);
  gravitySlider.position(20, height - 40);
  gravitySlider.style("width", "90px");

 
    for (let i = 0; i < 800; i++) {
      movers[i] = new Mover(random(width), random(height), random(0.01, 0.5));
    }
    attractor = new Attractor(width / 2, height / 2);
    // attractor[2]  = new Attractor(width /8 , height / 8, 50);
    //attractor[3]  = new Attractor(width , height , 50);
  }


function draw() {
  background(0, 60);
  Engine.update(engine);

  // show slider on canvas
  // Display the current value of the slider
  fill(255);
  stroke(255);
  textFont('Courier');
  textSize(20);
  text("Change strength " + gravitySlider.value().toFixed(5), 25, height - 60);

  // if mouse is pressed, update the attractor position to follow the mouse
  if (mouseIsPressed) {
    attractor.setPosition(mouseX, mouseY);
  }

  // Apply the attractor force to all movers
  for (let mover of movers) {
    let force = attractor.attract(mover);
    mover.applyForce(force);
    mover.show();
  }
  //attractor.show();
}

 

Embedded Sketch:

Future Work:

In terms of this project, a lot can be improved, for instance, adding more attractions, making the movers more dynamic, and maybe reacting to one another. Additionally, adding more forces and constraints into the sketch. There is a lot to learn and discover about Mattaers.js and other libraries. I think exploring and experimenting more is the best way to learn. 

Resources:

The Coding Train. “5.17: Introduction to Matter.js – the Nature of Code.” YouTube, 7 Mar. 2017, www.youtube.com/watch?v=urR596FsU68.

Acresti, Louis. “Remove Items From Array While Iterating Over It. (Example).” Coderwall, 27 Sept. 2021, coderwall.com/p/prvrnw/remove-items-from-array-while-iterating-over-it.

Matter.Mouse Module – Matter.js Physics Engine API Docs – Matter-js 0.20.0. brm.io/matter-js/docs/classes/Mouse.html.

6. Physics Libraries. nature-of-code-2nd-edition.netlify.app/physics-libraries/#adding-more-forces.

RGB Color Codes Chart 🎨. www.rapidtables.com/web/color/RGB_Color.html.