stars following mouse X position

jmpytrpr

Hello, the original example was made in vvvv but I'd like to recreate that with processing. please see the gif https://gifyu.com/image/zIdL

here is my code i'm not sure how to make it better like in the gif. I tried changing the easing to different value (currently 0.1) but I can't get what I want. please help! thank you

Star[] stars = new Star[20];
float x;

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

void draw(){
  background(255);

  for (int i = 0; i < stars.length; i++){
     x += (mouseX-x)*0.1;
      stars[i] = new Star (x,8+12*i);
      stars[i].display();
    }
}

class Star{
  float x,y;

  Star(float X, float Y){
    x = X;
    y = Y;
  }

void display(){
  line(x-3,y-3,x+3,y+3);
  line(x+3,y-3,x-3,y+3);
  line(x,y-4,x,y+4);
}
}

Thank you!

Andreas_Ref

Perhaps something like this, where each star has a different easing/lerping value:

Star[] stars = new Star[20];
float[] x = new float[stars.length];

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

void draw() {
  background(255);
  for (int i = 0; i < stars.length; i++) {
    x[i] = lerp(x[i], mouseX, 0.01*(25-i));
    stars[i] = new Star (x[i], 8+12*i);
    stars[i].display();
  }
}

class Star {
  float x, y;

  Star(float X, float Y) {
    x = X;
    y = Y;
  }

  void display() {
    line(x-3, y-3, x+3, y+3);
    line(x+3, y-3, x-3, y+3);
    line(x, y-4, x, y+4);
  }
}

jmpytrpr

Thanks Andreas!

Andreas_Ref

No problem :)