Dynamic PVector arraylist drawing a smooth line

Processing Coding Questions
1

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

            // 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.

2

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

3

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 i just can’t figure out how to use it in this senario with 2 applets

4

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

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);
}
5

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

6

good luck decyphering the code