How I can create a physical line using material.js?

p5.js Libraries
1

I have a simple p5.js code and I need add collision using matter.js. One of the options is to draw rectangles instead of lines and then hang the necessary component on them, but I don’t know how to rotate and place these rectangles correctly in order to get the correct line from them later.
Thanks!

let lines = [];

function setup() { 
  createCanvas(400, 400);
  } 

function draw() { 
  background(255);
  strokeWeight(0);

  strokeWeight(2);
  if(mouseIsPressed)
  {
      line(mouseX,mouseY,pmouseX,pmouseY) 
      lines.push(mouseX,mouseY,pmouseX,pmouseY);
  }
  for(let i=0;i<lines.length;i+=4)
  {
    line(lines[i],lines[i+1],lines[i+2],lines[i+3]) 
  }
    
  
}
2

Welcome @kokosic

Why not begin by setting up the sketch to work with matter.js – add the Engine, World, and Bodies parts – then add your shapes? I think it’s best to begin with a sketch that’s set up like this, rather than adapt it later.

You can draw the shapes using the matter.js vertices data. Something like this:

    ...
    box1 = Bodies.rectangle(45, 50, 20, 20);
    
    ...
    
    let vertices = box1.vertices;
    beginShape();
    for (let i = 0; i < vertices.length; i++) {
      vertex(vertices[i].x, vertices[i].y);
    }
    endShape(CLOSE);
    ...