# Dynamic PVector arraylist drawing a smooth line

**URL:** <https://discourse.processing.org/t/dynamic-pvector-arraylist-drawing-a-smooth-line/26762>\
**Category:** Coding Questions\
**Created:** [January 4, 2021, 7:19am UTC](https://discourse.processing.org/t/dynamic-pvector-arraylist-drawing-a-smooth-line/26762 "2021-01-04T07:19:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dimpapadop](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@dimpapadop](https://discourse.processing.org/u/dimpapadop)\
**Post date:** [January 4, 2021, 7:19am UTC](https://discourse.processing.org/t/dynamic-pvector-arraylist-drawing-a-smooth-line/26762/1 "2021-01-04T07:19:55Z")

</div>

Hallo.  
I have a sketch with 2 applets, the first is creating an Arraylist of Pvectors points for example when mouse Dragged adds points.add(new PVector(mouseX, mouseY));, and the second draws the line that passes the points coordinates.  
(-1 value means end of line to a point) till now i use a simple for loop in the second applet

```auto
            // Draw line segments
            for (int i = 0; i < points.size()-1; i++) {
              if (points.get(i+1).x != -1 && points.get(i+1).y != -1 && points.get(i).x != -1 && points.get(i).y != -1){
                
                pg2.beginDraw();
                // ανάλογα την ταχύτητα
                float lineW = abs (points.get(i).x-points.get(i+1).x);
                pg2.strokeWeight(0.5+lineW/10);
                //pg2.strokeWeight(line_weight); // apo js pairnw timi
                pg2.stroke(inkme);
                pg2.fill(inkme);
                pg2.line(points.get(i).x,points.get(i).y,points.get(i+1).x,points.get(i+1).y);
                pg2.endDraw();
               
                
              }
               points.remove(i);
            }

```

How could i add easing/smoothing to the drawing applet/screen?  
I am aware of easing - smoothing techniques but i cannot get the idea how to use it in this senario.

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 4, 2021, 7:34am UTC](https://discourse.processing.org/t/dynamic-pvector-arraylist-drawing-a-smooth-line/26762/2 "2021-01-04T07:34:31Z")

</div>

use smooth() function. I suggest you try to play with it a bit and see what works

> **[smooth() \\ Language (API) \\ Processing 3+](https://processing.org/reference/smooth_.html)**

---

<div class="post-metadata">

**Author:** ![dimpapadop](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@dimpapadop](https://discourse.processing.org/u/dimpapadop)\
**Post date:** [January 4, 2021, 7:47am UTC](https://discourse.processing.org/t/dynamic-pvector-arraylist-drawing-a-smooth-line/26762/3 "2021-01-04T07:47:33Z")

</div>

> [@dimpapadop](#):
>
> I have a sketch with 2 applets, the first is creating an Arraylist of Pvectors points, and the second draws the line that passes the points coordinates.

thank you for responding.  
smooth() is for antialiasing. The points are updating constantly at 30fps and the line needs some easing more approach. [Easing \ Examples \ Processing.org](https://processing.org/examples/easing.html) i just can’t figure out how to use it in this senario with 2 applets

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 4, 2021, 8:46am UTC](https://discourse.processing.org/t/dynamic-pvector-arraylist-drawing-a-smooth-line/26762/4 "2021-01-04T08:46:15Z")

</div>

a messy code but it should do the trick if I understand correctly

```auto
float dir = 0, r = 100, turnSpeed = 0.05, growSpeed = 3, cx = 150, cy = 150;
void setup() {
  size(600,600);
}
void draw() {
  background(0);
  float Dir = atan2(mouseY-cy, mouseX-cx);
  float R = dist(cx,cy,mouseX,mouseY);
  if( dist(dir,0,Dir,0) < turnSpeed) {
    dir = Dir;
  } else {
    if(dir > Dir) {
    dir -= turnSpeed;
    } else dir += turnSpeed;
  }
  if( dist(r,0,R,0) < growSpeed) {
    r = R;
  } else {
    if(r > R) {
      r -= growSpeed;
    } else r += growSpeed;
  }
  stroke(255);
  line(cx*2,cy*2, cx+ cos(dir)*r, cy+ sin(dir)*r);
  line(cx*2,cy*2,mouseX,mouseY);
}

```

---

<div class="post-metadata">

**Author:** ![dimpapadop](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@dimpapadop](https://discourse.processing.org/u/dimpapadop)\
**Post date:** [January 4, 2021, 9:54am UTC](https://discourse.processing.org/t/dynamic-pvector-arraylist-drawing-a-smooth-line/26762/5 "2021-01-04T09:54:48Z")

</div>

> [@CodeMasterX](#):
>
> ```auto
> float dir = 0, r = 100, turnSpeed = 0.05, growSpeed = 3, cx = 150, cy = 150;
> void setup() {
> size(600,600);
> }
> void draw() {
> background(0);
> float Dir = atan2(mouseY-cy, mouseX-cx);
> float R = dist(cx,cy,mouseX,mouseY);
> if( dist(dir,0,Dir,0) < turnSpeed) {
> dir = Dir;
> } else {
> if(dir > Dir) {
> dir -= turnSpeed;
> } else dir += turnSpeed;
> }
> if( dist(r,0,R,0) < growSpeed) {
> r = R;
> } else {
> if(r > R) {
> r -= growSpeed;
> } else r += growSpeed;
> }
> stroke(255);
> line(cx*2,cy*2, cx+ cos(dir)*r, cy+ sin(dir)*r);
> line(cx*2,cy*2,mouseX,mouseY);
> }
> 
> ```

i’ll try to adopt it and show the results, thanks.

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 4, 2021, 9:56am UTC](https://discourse.processing.org/t/dynamic-pvector-arraylist-drawing-a-smooth-line/26762/6 "2021-01-04T09:56:01Z")

</div>

good luck decyphering the code