Animation & Shaping - Processing Library \ Shaper

Shaper

Description

This abstract class represents a shaper function, with one main method: shape(). The class also contains a list of constants that represent the built in shaper functions, which can be used to specify a shaper in Tween's setEasing().

Shaper by default does not guarantee that shaped numbers will be between 0 and 1, in order to allow for interesting spacial animation. If you are working in a domain other than spacial animation, use clamp() to limit the output of shape().

Example

import megamu.shapetween.*;

Shaper cosine = new CosineShaper();

beginShape();
for( float i=0; i<=1; i+= 0.05 )
  vertex( i*width, cosine.shape( i )*height );
endShape();

Constants

LINEAR: Shaper which is a direct map between input and output
COSINE: Shaper which is an inverted partial cosine function
QUADRATIC: Shaper which is a simple quadratic function
CIRCULAR: Shaper which is a circular arc
BEZIER: Shaper which is a bezier curve
BACK: Shaper which is a cubic curve modified to have anticipation
BOUNCE: Shaper which emulates a bouncing motion

Methods

shape(): Shapes a normalized number
slope(): The slope of the shape at this point
secondSlope(): The second derivative of the shape at this point
setMode(): Alters the easing mode of the shape, such as SIGMOID or SEAT
setTransitionPoint(): When shaping with SIGMOID or SEAT, sets the point at which the transition occurs
clamp(): Requires that shape() return between 0 and 1
noClamp(): Allows for shape() to return numbers below 0 and above 1

Custom Shaper

The shaper class is abstract and intended to be extended in order to create custom shape functions. These extended shape functions can then be passed to Tween constructors, or setEasing() to set the easing for these tweens. The extended class must implement the f(x) method as shown below.

public class SquareShaper extends Shaper{

  public float f( float x ){
    return x*x;
  }

}

In order to use the custom shape function with the Tween, pass in an instance of the custom class to setEasing().

import megamu.shapetween.*

Tween ani;
void setup(){
  shape = new SquareShaper();
  ani = new Tween(this, 2);
  ani.setEasing( shape );
}

void draw(){
  background(255);
  ellipse(ani.time()*width, ani.position()*width, 4, 4);
}

void mousePressed(){
  ani.setShape( new OtherCustomShaper() );
}

Related

BlendShaper
Tween
setEasing()