stars following mouse X position

edited August 2017 in Questions about Code

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!

Tagged:

Answers

  • 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);
      }
    }
    
  • Thanks Andreas!

  • No problem :)

Sign In or Register to comment.