# How to create Vertex to connect points like a line

**URL:** <https://discourse.processing.org/t/how-to-create-vertex-to-connect-points-like-a-line/37030>\
**Category:** Coding Questions\
**Created:** [May 23, 2022, 12:30am UTC](https://discourse.processing.org/t/how-to-create-vertex-to-connect-points-like-a-line/37030 "2022-05-23T00:30:37Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![miguelandradebr](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@miguelandradebr](https://discourse.processing.org/u/miguelandradebr)\
**Post date:** [May 23, 2022, 12:30am UTC](https://discourse.processing.org/t/how-to-create-vertex-to-connect-points-like-a-line/37030/1 "2022-05-23T00:30:37Z")

</div>

Hello

![vertex 01](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/1/f12d09b5ef559c8e00da342ec50c9b2e875ec2e4.jpeg)  
I would like to create a vertex to join the points creating an equal line in the image…

How can I do it?

I’m using p5.js

Thanks

---

<div class="post-metadata">

**Author:** ![Gus\_Fermin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gus_fermin/32/5851_2.png) [@Gus\_Fermin](https://discourse.processing.org/u/Gus_Fermin)\
**Post date:** [May 23, 2022, 1:03am UTC](https://discourse.processing.org/t/how-to-create-vertex-to-connect-points-like-a-line/37030/2 "2022-05-23T01:03:35Z")

</div>

Hi there, and welcome to the Processing community! 🙂

I would recommend for you to check out these:

[https://p5js.org/learn/coordinate-system-and-shapes.html](https://p5js.org/learn/coordinate-system-and-shapes.html)  
[https://p5js.org/reference/#/p5/vertex](https://p5js.org/reference/#/p5/vertex)

---

<div class="post-metadata">

**Author:** ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)\
**Post date:** [May 23, 2022, 8:11am UTC](https://discourse.processing.org/t/how-to-create-vertex-to-connect-points-like-a-line/37030/3 "2022-05-23T08:11:49Z")

</div>

@miguelandradebr This was just a quick test in processing, maybe theres a better way but have a look at it anyway and adapt it to p5.js

```auto
ArrayList<PVector> points = new ArrayList<PVector>();
PVector mouse;

void setup(){
  size(800,800);
  mouse = new PVector();
}

void draw(){
  background(255);
  mouse.set(mouseX, mouseY);
  
  stroke(0);
  strokeWeight(2);
  noFill();
  
  beginShape();
  for (PVector p : points){
    vertex(p.x,p.y);
    circle(p.x,p.y,20);
  }
  endShape();
}

void mousePressed(){
  if (points.size() > 0){
    PVector last = points.get(points.size()-1);
    PVector spot = PVector.sub(mouse, last);
    spot.setMag(100);
    spot.add(last);
    points.add(spot);
  }else{
  points.add(new PVector(mouseX, mouseY));
  }
}

```

---

<div class="post-metadata">

**Author:** ![miguelandradebr](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@miguelandradebr](https://discourse.processing.org/u/miguelandradebr)\
**Post date:** [May 23, 2022, 11:36pm UTC](https://discourse.processing.org/t/how-to-create-vertex-to-connect-points-like-a-line/37030/4 "2022-05-23T23:36:34Z")

</div>

Thanks you very much!!!

---

<div class="post-metadata">

**Author:** ![miguelandradebr](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@miguelandradebr](https://discourse.processing.org/u/miguelandradebr)\
**Post date:** [May 23, 2022, 11:37pm UTC](https://discourse.processing.org/t/how-to-create-vertex-to-connect-points-like-a-line/37030/5 "2022-05-23T23:37:05Z")

</div>

Very interesting, I will try your code thank you!!!

---

<div class="post-metadata">

**Author:** ![miguelandradebr](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@miguelandradebr](https://discourse.processing.org/u/miguelandradebr)\
**Post date:** [May 23, 2022, 11:37pm UTC](https://discourse.processing.org/t/how-to-create-vertex-to-connect-points-like-a-line/37030/6 "2022-05-23T23:37:51Z")

</div>

Hello

This article its very interesting and show how to create a vertex to make a shape:

> **[Custom shapes - Programming Design Systems](https://programmingdesignsystems.com/shape/custom-shapes/index.html#custom-shapes-pANLh0l)**
>
> Programming Design Systems is a free digital book that teaches a practical introduction to the new foundations of graphic design.

Thank you!

---

<div class="post-metadata">

**Author:** ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)\
**Post date:** [May 24, 2022, 1:39am UTC](https://discourse.processing.org/t/how-to-create-vertex-to-connect-points-like-a-line/37030/7 "2022-05-24T01:39:42Z")

</div>

Sorry, i thought you wanted a line with equal segments, if you wanted just a line being drawn with points that even easier than what put in the code, mine places points at equal distances from the last point