How to create Vertex to connect points like a line

Processing Coding Questions
1

Hello

vertex 01
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

2

Hi there, and welcome to the Processing community! :slight_smile:

I would recommend for you to check out these:

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

1 Like
3

@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

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));
  }
}
1 Like
4

Thanks you very much!!!

5

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

1 Like
6

Hello

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

Thank you!

7

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