Lesson 3.2 – Motion

Motion Reactor

PShape basicShape;
int arrayWidth = 20; 
int arrayHeight = 20; 
float shapeWidth = 20; 
float shapeHeight = 20; 
float reactorScaler = .02;
int duration = 100;
int scaleTimer = 0;
int screenWidth = 700;
int screenHeight = 700;
int xOffset = floor(screenWidth/2-(shapeWidth*arrayWidth/2));
int yOffset = floor(screenHeight/2-(arrayHeight*shapeHeight/2));
PVector reactorPosition;

void setup() {
        reactorPosition = new PVector(0, 0);
        size(screenWidth,screenHeight);
        background(255);
        smooth(2);
        basicShape = loadShape("data/circle.svg");
};

void draw() {
  background(255);

  scaleTimer++;

 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*shapeWidth, j*shapeHeight);
         float reactorDistance = dist(reactorPosition.x, reactorPosition.y, myPos.x, myPos.y);
         int myStartTime = int(scaleTimer-reactorDistance);
         float scaler = .5;
         if (myStartTime >= 0) {
             if (myStartTime <= duration) {

                 scaler = easeInOutQuart(myStartTime, scaler, 5, duration);
              } 
          };

          pushMatrix();
          translate(myPos.x,myPos.y);
          scale(scaler);
          shape(basicShape, 0, 0, shapeWidth, shapeHeight);
          popMatrix();

      };
  };
  popMatrix();
};

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

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

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

Exercise: Modify the code in the above example so that reactor position also moves with the mouse in real-time. Make your own visual adaptation. Look at easings.net/ for more examples of easing equations.