Animation & Shaping - Processing Library \ Shape Curve

Draws the graph of a shaper function, with x being the input to the function and y as the output. You can see from these graphs the condensation of values that occurs during an ease in or ease out.

Clicking on the applet causes it to cycle through the three QUADRATIC shape functions: ease in, ease out, and ease in and out.

import megamu.shapetween.*;

Tween ani;
Class shaperFunction;

void setup(){
  size(200,200);
  noFill();
  noLoop();
  
  shaperFunction = Shaper.QUADRATIC;
}

void draw(){
  background(255);
  
  // draw the main curve
  stroke(0);
  beginShape();
  for( float i=0; i<=1; i += 0.05 ){
    vertex( i*width, height - Shaper.shape( shaperFunction, i )*height );
  }
  vertex( width, 0);
  endShape();

  // draw the translated edges
  for( float n=0; n<=1; n += 0.125 ){
    float x = n*width;
    float y = height - Shaper.shape( shaperFunction, n )*height;

    stroke(0,255,100);
    line( x, y, x, height );

    stroke(100,50,255);
    line( x, y, 0, y );
  }
}

void mousePressed(){
  if( shaperFunction == Shaper.QUADRATIC ){
    shaperFunction = Shaper.QUAD_IN;
  }else if( shaperFunction == Shaper.QUAD_IN ){
    shaperFunction = Shaper.QUAD_OUT;
  }else{
    shaperFunction = Shaper.QUADRATIC;
  }
  redraw();
}