# How do I draw a continuous line between several points?

**URL:** <https://discourse.processing.org/t/how-do-i-draw-a-continuous-line-between-several-points/6091>\
**Category:** Coding Questions\
**Created:** [November 29, 2018, 10:56pm UTC](https://discourse.processing.org/t/how-do-i-draw-a-continuous-line-between-several-points/6091 "2018-11-29T22:56:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![klaik30](https://avatars.discourse-cdn.com/v4/letter/k/c57346/32.png) [@klaik30](https://discourse.processing.org/u/klaik30)\
**Post date:** [November 29, 2018, 10:56pm UTC](https://discourse.processing.org/t/how-do-i-draw-a-continuous-line-between-several-points/6091/1 "2018-11-29T22:56:00Z")

</div>

I’d like to draw a continuous line between several points. It should be any shape what so ever and not fill anything between any of the points, like drawing with a pen. Picture for reference:

![ConnectingDots](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f1ccbc73baeff731b2b3ac99961e34c380caa5ea.png)

I know that if I don’t update the background every drawn frame I can get a similar result by just drawing a line between a dot and its previous position but in this instance, I want to be able to draw other things in the background that I do want to update the background for.

I was thinking of using vertex() where I might save all the points and then use them as vertices but I don’t have any clue how to do this as I seem to have to write actual code for every vertex manually…

Help much appreciated!

Thanks.

---

<div class="post-metadata">

**Author:** ![Jan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jan/32/2572_2.png) [@Jan](https://discourse.processing.org/u/Jan)\
**Post date:** [November 29, 2018, 11:03pm UTC](https://discourse.processing.org/t/how-do-i-draw-a-continuous-line-between-several-points/6091/2 "2018-11-29T23:03:41Z")

</div>

How about an array with all values?

Float [] [] values = new float [amount points][2]

First dimension is the “id” of your point, the secnd one is the x and the y value.  
Then using a for-loop to draw all lines between all neighbor points.

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [November 30, 2018, 12:56am UTC](https://discourse.processing.org/t/how-do-i-draw-a-continuous-line-between-several-points/6091/3 "2018-11-30T00:56:13Z")

</div>

> [@klaik30](#):
>
> I was thinking of using vertex() where I might save all the points and then use them as vertices but I

Maybe curveVertex will be more useful for what you want to do. Vextex will draw straight lines between two points, and not curves.  
For drawing on a layer wich is above your background, use Pgraphics :

```auto
PGraphics pg; // declare the instance of the layer ( called buffer)

void setup() {
  size(900, 900);
  pg = createGraphics(width, height); //initialize it to the size of your window
}

void draw() {
 // to draw in your buffer, use the noun of your variable before ; here pg
  pg.beginDraw(); //always declare beginDraw and endDraw when you draw a shape into your buffer

// your shapes

  pg.endDraw(); 
  image(pg,0,0); // then display your buffer on screen ; otherwise, you won't see what you draw in
}

```

So you can use a buffer to draw your shape “drawn by hand” and like this, you can change the background without cover it.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 30, 2018, 3:53am UTC](https://discourse.processing.org/t/how-do-i-draw-a-continuous-line-between-several-points/6091/4 "2018-11-30T03:53:18Z")

</div>

> [@klaik30](#):
>
> I was thinking of using vertex() where I might save all the points and then use them as vertices but I don’t have any clue how to do this as I seem to have to write actual code for every vertex manually…

vertex for line good,  
like @Pr0tonX suggested curveVertex more round,

> **[curveVertex() / Reference](https://processing.org/reference/curveVertex_.html)**
>
> Specifies vertex coordinates for curves. This function may only be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape(). The…

and you can combine it with

> **[createShape() / Reference](https://processing.org/reference/createShape_.html)**
>
> The createShape() function is used to define a new shape. Once created, this shape can be drawn with the shape() function. The basic way to use the function defines new primitive shapes.…

but i think that is all not the question,  
where / how you get the points for the curve?

if you want fill them manually  
instead of hard coded or loaded from a .csv file  
you could click with the mouse and remember that point  
in a PVector

> **[PVector / Reference](https://processing.org/reference/PVector.html)**
>
> A class to describe a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. The datatype, however, st…

of a array of PVector

> **[Array / Reference](https://processing.org/reference/Array.html)**
>
> An array is a list of data. It is possible to have an array of any type of data. Each piece of data in an array is identified by an index number representing its position in the array. The first eleme…

> **like**
>
> ```auto
> PVector[] my_points;
> int pmx, pmy, make = 0, makemax=20;
> 
> void setup() {
> size(200, 200);
> my_points = new PVector[makemax];
> println("can make by mouse click "+makemax+" points now");
> }
> 
> void draw() {
> background(200, 200, 0);
> stroke(200, 0, 0);
> ellipse(pmx, pmy,2,2);
> // you do later
> }
> 
> void mousePressed() {
> pmx = mouseX;
> pmy = mouseY;
> my_points[make] = new PVector(pmx, pmy);
> println("i: "+make+" px: "+my_points[make].x+" py: "+my_points[make].y);
> make++;
> if ( make >= makemax ) {
> make = 0;
> println(" array full, now you will overwrite ");
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 6, 2018, 11:30pm UTC](https://discourse.processing.org/t/how-do-i-draw-a-continuous-line-between-several-points/6091/5 "2018-12-06T23:30:42Z")

</div>

You might also want an ArrayList of PVectors to store mouse points for your curveVertex calls.

- [https://processing.org/reference/ArrayList.html](https://processing.org/reference/ArrayList.html)
- [https://processing.org/reference/curveVertex\_.html](https://processing.org/reference/curveVertex_.html)
- [https://processing.org/tutorials/curves/](https://processing.org/tutorials/curves/)

Here is a simple example of drawing curve points with a mouse. Note that the mouse points are so close together that it almost doesn’t matter that you are using a curve – you would get almost the same curvy effect from connecting them with straight lines.

```auto
// CurvePoints -- Processing 3.3.6 -- 2018-12-06

int maxPoints = 500;

ArrayList<PVector> points;
void setup() {
  size(400, 400);
  points = new ArrayList<PVector>();
  noFill();
}
void draw() {
  background(192);
  // draw curve
  beginShape();
  if (points.size()>0) {
    for (PVector p : points) {
      curveVertex(p.x, p.y);
    }
  }
  endShape();
}
void mouseMoved() {
  points.add(new PVector(mouseX, mouseY));
  // erase from back of line
  if (points.size() > maxPoints) {
    println(points.size());
    points.remove(0);
  }
}

```

Note also that there is a bit of extra code here that erases points from the back of the line. This is to prevent you from drawing so many points that the sketch bogs down and stops – which is even more important if you are adding points in `draw()` every frame rather than in `mouseMoved()`, as you will quickly have thousands of points at 60 points-per-second.

There are a lot of little things you could add to making curve drawling like this behave in a pleasing or intuitive way – deciding how new points are added (by distance, time, or both), figuring out how the anchors should work, making aspects of the curve adjustable, and so on. Here is a more complex implementation of the same approach along with a bit of code that flashes the points on and off.

> **Summary**
>
> ```auto
> ArrayList<PVector> points;
> int maxPoints = 50;
> int markDistance = 50;
> 
> void setup() {
> size(400, 400);
> points = new ArrayList<PVector>();
> noFill();
> }
> void draw() {
> background(192);
> // draw curve
> beginShape();
> if (points.size()>0) {
> // begin anchor
> curveVertex(points.get(0).x, points.get(0).y);
> // curve points
> for (PVector p : points) {
> curveVertex(p.x, p.y);
> // turn on and off point markers 
> if (millis()/2000%2==0) {
> ellipse(p.x, p.y, 3, 3);
> }
> }
> // end anchor
> curveVertex(points.get(points.size()-1).x, points.get(points.size()-1).y);
> }
> endShape();
> }
> void mouseMoved() {
> // add point when new is distant from old
> if (points.size()<2 || points.get(points.size()-2).dist(new PVector(mouseX, mouseY)) > markDistance) {
> points.add(new PVector(mouseX, mouseY));
> // erase from back of line
> if (points.size() > maxPoints) {
> println(points.size());
> points.remove(0);
> }
> } else {
> // nudge -- update last point if too close to previous
> points.set(points.size()-1, new PVector(mouseX, mouseY));
> }
> }
> void keyPressed(){
> // delete previous points
> if(points.size()>2 && key==DELETE || key==BACKSPACE){
> points.remove(points.size()-2);
> }
> }
> 
> ```

![CurveDraw2--screenshot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/59ac085f050dfe35c2a3b9f808aa66953fed8758.png)

You may also be interested in this tutorial series, particularly the parts beginning at “Limited Trail”

[http://www.science.smith.edu/dftwiki/index.php/Creating\_a\_trail\_of\_moving\_object\_in\_Processing#Limited\_Trail](http://www.science.smith.edu/dftwiki/index.php/Creating_a_trail_of_moving_object_in_Processing#Limited_Trail)

---

<div class="post-metadata">

**Author:** ![klaik30](https://avatars.discourse-cdn.com/v4/letter/k/c57346/32.png) [@klaik30](https://discourse.processing.org/u/klaik30)\
**Post date:** [December 9, 2018, 6:03pm UTC](https://discourse.processing.org/t/how-do-i-draw-a-continuous-line-between-several-points/6091/6 "2018-12-09T18:03:46Z")

</div>

Thank you very much for the answer! I landed on a more simple solution because I could afford to have a really high refresh rate on putting points down. This seems like a more elegant solution for fewer points though! Thanks!