P5js Motion Reactor

The code below uses a bell curve to generate the animation. The advantage of using this function is that the size of the points return to there original state once the transformation is over. There is however a boundless number of functions that can be used for animation, many of which have been documented by Robert Penner for several programming languages http://easings.net/.

When used for animation, such functions are often called "easing". Easing can be used to create more natural movements and for creating physics like effects such as bouncing.

PShape basicShape;
int arrayWidth = 20; 
int arrayHeight = 20; 
float dist_x = 20; 
float dist_y = 20; 
float shapeWidth = 10;
float shapeHeight = 10;
int duration = 120;
int scaleTimer = 0;
float amplitude = 3;  
float wavelength = 40; 
int xOffset;
int yOffset;
PVector reactorPosition;

void setup() {
  size(800, 700);
  xOffset = floor(width/2-(dist_x*arrayWidth/2));
  yOffset = floor(height/2-(dist_y*arrayHeight/2));
  reactorPosition = new PVector(0, 0);
  noStroke();
  fill(0);
};

void draw() {
  background(255);
  scaleTimer+=3;
  pushMatrix(); 
  translate(xOffset, yOffset);
  for (int i = 0; i<arrayWidth; i++ ) {
    for (int j = 0; j<arrayHeight; j++ ) { 
      shapeMode(CENTER); 
      PVector myPos = new PVector(i*dist_x, j*dist_y);
      float reactorDistance = dist(reactorPosition.x, reactorPosition.y, myPos.x, myPos.y);
      int myStartTime = int(scaleTimer-reactorDistance);
      float scaler =  bellCurve(myStartTime, shapeWidth, amplitude, wavelength);
      ellipse(myPos.x, myPos.y, scaler, scaler);
    };
  };
  popMatrix();
};

int mouse_X() {
  return (mouseX - xOffset); //correct positions matrix translations
}

int mouse_Y() {
  return (mouseY - xOffset); //correct positions matrix translations
}
void mouseClicked() {
  scaleTimer = -100;
  reactorPosition.x = mouse_X();
  reactorPosition.y = mouse_Y();
};


float bellCurve(float t, float a, float b, float c) {
// see https://en.wikipedia.org/wiki/Gaussian_function
  // t = time
  // a = start value
  // b = amplitude 
  // c = wavelength  
  float scaler = 1+(c/sqrt((c*c)+(t*t)))*b; //bell curve
  return scaler*a;
};


// alternative equation for easing
float easeInOutQuart (float t, float b, float c, float d) {
  // seee http://www.robertpenner.com/easing/
  // t = time
  // b = start value
  // c = change in value
  // d = duration 
  if ((t/=d/2) < 1) return c/2*t*t + b;
  return -c/2 * ((--t)*(t-2) - 1) + b;
};