# Help wanted using complicated math drawing (spline)

**URL:** https://discourse.processing.org/t/help-wanted-using-complicated-math-drawing-spline/42911
**Category:** Coding Questions
**Created:** [October 7, 2023, 12:37am UTC](https://discourse.processing.org/t/help-wanted-using-complicated-math-drawing-spline/42911 "2023-10-07T00:37:22Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![nuhuhwy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nuhuhwy/32/18485_2.png) [@nuhuhwy](https://discourse.processing.org/u/nuhuhwy)
#### Post date: [October 7, 2023, 12:37am UTC](https://discourse.processing.org/t/help-wanted-using-complicated-math-drawing-spline/42911/1 "2023-10-07T00:37:22Z")

</div>

I tried writing some code that allows the user to add points to an array, then draws a dotted line which is curved.  
Meaning this is happens:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/0/b0670a9a33ae0cbd071b5a53da8f70748cb71a47.png)  
I tried figuring this out myself, but it didnt end well. The only thing i have is a dotted line function:

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

void setup() {
  size(540, 540);

  points.add(new PVector(50, 150));
  points.add(new PVector(150, 50));
  points.add(new PVector(250, 250));
  points.add(new PVector(350, 150));
  points.add(new PVector(200, 350));
}

void draw() {
  background(255);
  pointLine(points, 5);
}

void pointLine(ArrayList<PVector> points, int spacing) {
  for (int i = 0; i < points.size() - 1; i++) {
    float distance = points.get(i).dist(points.get(i+1));
    float step = spacing / distance;
    
    for (float t = 0; t < 1; t += step) {
      PVector interpolated = PVector.lerp(points.get(i), points.get(i+1), t);
      fill(#FF0000, 25);
      noStroke();
      circle(interpolated.x, interpolated.y, 25);
    }
  }
}

```

I can’t seem to get the smoothing to work, i mean that basically it draws **a dotted bezier curve for all points in the array**. You might ask why? to draw easily tails with images (its something like someone might use in a drawing programm)!

I will be thankfull for any help! 😃

---

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [October 7, 2023, 5:40am UTC](https://discourse.processing.org/t/help-wanted-using-complicated-math-drawing-spline/42911/3 "2023-10-07T05:40:59Z")

</div>

Hi @nuhuhwy,

The Catmull-Rom spline algorithm is your friend.  
Google for it… 😉

Cheers  
— mnse

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [October 8, 2023, 4:48am UTC](https://discourse.processing.org/t/help-wanted-using-complicated-math-drawing-spline/42911/4 "2023-10-08T04:48:04Z")

</div>

Try curveVertex (continuous spline curve). Reference is here: [[Curves / Processing.org](https://processing.org/tutorials/curves)] ([Curves / Processing.org](https://processing.org/tutorials/curves)) if you haven’t already seen it. Be sure to use first and last points as anchors.