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

**URL:** <https://discourse.processing.org/t/how-i-can-create-a-physical-line-using-material-js/25623>\
**Category:** Libraries\
**Created:** [November 23, 2020, 6:29am UTC](https://discourse.processing.org/t/how-i-can-create-a-physical-line-using-material-js/25623 "2020-11-23T06:29:43Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kokosic](https://avatars.discourse-cdn.com/v4/letter/k/b4bc9f/32.png) [@kokosic](https://discourse.processing.org/u/kokosic)\
**Post date:** [November 23, 2020, 6:29am UTC](https://discourse.processing.org/t/how-i-can-create-a-physical-line-using-material-js/25623/1 "2020-11-23T06:29:43Z")

</div>

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!

```auto
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]) 
  }
    
  
}

```

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [November 23, 2020, 7:11am UTC](https://discourse.processing.org/t/how-i-can-create-a-physical-line-using-material-js/25623/2 "2020-11-23T07:11:28Z")

</div>

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:

```auto
    ...
    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);
    ...

```