# Curve that passes through three points

**URL:** https://discourse.processing.org/t/curve-that-passes-through-three-points/3944
**Category:** Coding Questions
**Created:** [September 29, 2018, 12:11am UTC](https://discourse.processing.org/t/curve-that-passes-through-three-points/3944 "2018-09-29T00:11:18Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![molo32](https://avatars.discourse-cdn.com/v4/letter/m/a87d85/32.png) [@molo32](https://discourse.processing.org/u/molo32)
#### Post date: [September 29, 2018, 12:11am UTC](https://discourse.processing.org/t/curve-that-passes-through-three-points/3944/1 "2018-09-29T00:11:18Z")

</div>

how to draw a curve according to three given points?

for example  
`curve (10,10, 20,50, 80,75)`

this function would draw a curve that passes through those 3 coordinates

---

<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: [September 29, 2018, 2:44am UTC](https://discourse.processing.org/t/curve-that-passes-through-three-points/3944/2 "2018-09-29T02:44:35Z")

</div>

try [curveVertex](https://processing.org/reference/curveVertex_.html)

```auto
 beginShape();
    curveVertex(x1,y1); // or define x0,y0
    curveVertex(x1,y1);
    curveVertex(x2,y2);
    curveVertex(x3,y3);
    curveVertex(x3,y3); // or define x4,y4
  endShape();

```

used like in

```auto
float r = 5.0;

void setup() {
  size(400, 400);
}

void draw() {
  background(200,100,0); 
  stroke(0,200,200); fill(0,200,200);
  float x0 = 50; float y0 = 250; ellipse(x0,y0,r,r);
  float x1 = 50; float y1 = 250; ellipse(x1,y1,r,r);
  float x2 = 150; float y2 = 150; ellipse(x2,y2,r,r);
  float x3 = 250; float y3 = 250; ellipse(x3,y3,r,r);
  float x4 = 250; float y4 = 250; ellipse(x4,y4,r,r);
 
  my_3_point_curve(x1,y1,x2,y2,x3,y3);
}

void my_3_point_curve(float x1,float y1,float x2,float y2,float x3,float y3) {
  stroke(200,200,0); noFill(); 
  beginShape();
    curveVertex(x1,y1); // curveVertex(x0,y0);
    curveVertex(x1,y1);
    curveVertex(x2,y2);
    curveVertex(x3,y3);
    curveVertex(x3,y3); // curveVertex(x4,y4);
  endShape();
 
}

```

play with the P4 for understanding [here](https://editor.p5js.org/full/rJLAmDnK7)