Easing trail with sine algorithms in Processing

Question

Here is my source code:

int index;
int num = 60;
float mx[] = new float[num];
float my[] = new float[num];
float explosion;
float x;
float y;
float px;
float py;
float xold;
float yold;
float xplode1;
float yplode1;
float xplode2;
float yplode2;
float xplode3;
float yplode3;
float xplode4;
float yplode4;
float easing = 0.05;

void setup() {
  size(1366, 768);
  noStroke();
//  noFill();
  fill(25, 155);
}

void draw() {
  int which = frameCount % num;

  explosion = explosion + 0.32;
  background(92, 55, 169);

  float targetX = mouseX;
  float dx = targetX - px;
  float lx = targetX - x;
  if (abs(dx) > 1) {
    mx[which] += dx * easing;
    x += lx * easing;
    if (mousePressed && (mouseButton == LEFT)) {
      xplode1 = dx + 50 + sin(explosion)*30;
      xplode2 = dx + 50 + sin(explosion)*30;
      xplode3 = dx - 50 - sin(explosion)*30;
      xplode4 = dx - 50 - sin(explosion)*30;
    }
    else {
      xplode1 = -10;
      xplode2 = -10;
      xplode3 = -10;
      xplode4 = -10;
    }
  }

  float targetY = mouseY;
  float dy = targetY - py;
  float ly = targetY - y;
  if (abs(dy) > 1) {
    my[which] += dy * easing;
    y += dy * easing;
    if (mousePressed && (mouseButton == LEFT)) {
      yplode1 = dy + 50 + sin(explosion)*30;
      yplode2 = dy - 50 - sin(explosion)*30;
      yplode3 = dy - 50 - sin(explosion)*30;
      yplode4 = dy + 50 + sin(explosion)*30;
    }
    else {
      yplode1 = -10;
      yplode2 = -10;
      yplode3 = -10;
      yplode4 = -10;
    }
  }

  for(int i = 0;i<num;i++){
    index = (which + 1 + i) % num;
    ellipse(mx[index], my[index], i, i);
  }
  ellipse(xplode1, yplode1, 10, 10);
  ellipse(xplode2, yplode2, 10, 10);
  ellipse(xplode3, yplode3, 10, 10);
  ellipse(xplode4, yplode4, 10, 10);
}

I would like to have a trail of ~60 and also have some easing for the whole thing. I have got each feature working individually but when I added in the fading. There is quite alot of unneeded variables, I have not cleaned the code at all, I have been working on it for hours, I know there is probably a very simple solution that I just cannot see at the moment. Any help would be great, thanks.

Answer 1

Don't bite more than you can chew, learn the little things. Vectors will make your code much less messy. You can find a detailed description of the Vector class on the Processing site. In this way, instead of having two different variables xplode1 and xplode2, there will be one Vector object that stores both values. You may find those concepts difficult at first, but they'll be invalubale tools for future sketches.

If you feel comfortable with basic concepts such as variables, functions, conditionals and loops, start studying OOP (Object Oriented Programming). Again, Daniel Shiffman comes to help.

Also, be more specific when asking on StackOverflow. Solving a problem often means finding the right question.