Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
Confluence
For you

Programming
Results will update as you type.
  • Tiling and Repetition
  • Reactors
  • Programming Basics: Parametric and Generative Graphic Design 2016
  • Archive
  • High Scores
  • Artificial Neural Network
  • Alternatives to the Processing IDE
  • p5.js Programming
  • Programming in Processing (java)
    • Starting with Processing (en)
    • Variables (en)
    • Classes and Objects (en)
    • Events und Functions (en)
    • Writing our own Functions (en)
    • Random Numbers (en)
    • Conditionals (en)
    • Loops (en)
    • Nested Loops (en)
    • Coordinates (en)
    • Arrays and Lists (en)
    • SVG + Images (en)
    • Motion and Temporality
      • Lesson 4.2 – Sine function
      • Lesson 4.4 - Motion and Multiple Reactor Points
      • Lesson 4.5 - Exercises
      • Motion Reactor
      • Multiple Reactor Points
    • Gesture Interactions
    • Using bitmaps as modifiers
    • Vectors
    • Animation
    • Animation 2
    • Simple Collision Detection
    • Sound
    • Typography

/
Motion Reactor

Motion Reactor

Nov 07, 2017



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;
};
, multiple selections available,
{"serverDuration": 16, "requestCorrelationId": "24e62a35f9a24b10a5bdf5101b62850e"}