Skip to content

Instantly share code, notes, and snippets.

@num3ric

num3ric/easing.pde

Last active Dec 17, 2015
Embed
What would you like to do?
Easing demo in Processing.
PVector b0, b1, b2, b3;
PVector pos, debutPos, ciblePos;
float t_anim, t_debut, t_duree;
void setup() {
size(400, 400);
background(0);
smooth();
t_anim = t_duree = 2000.0;
// Par convention, la courbe de easing va de (0,0) à (1,1)
b0 = new PVector(0,0);
b1 = new PVector(0.3, 2.4);
b2 = new PVector(0.5, 0.1);
b3 = new PVector(1,1);
pos = new PVector(width/2, height/2);
debutPos = pos.get();
ciblePos = pos.get();
}
float ease( float t ) {
// Tel qu'expliqué ici: http://stackoverflow.com/a/14781788/570738
float c = 1.0 - t;
return t * ( t * t + 3.0 * c * ( c * b1.y + t * b2.y ) );
}
PVector lerpPVector( PVector p0, PVector p1, float t ) {
return PVector.add( PVector.mult(p0, 1.0f - t), PVector.mult(p1, t) );
}
void drawEasingCurve( float zoom )
{
float s = zoom * width;
pushMatrix();
translate(width/2, height/2);
scale(s, -s);
translate(-0.5, -0.5);
noFill();
stroke(60);
strokeWeight(1.5/s);
bezier( b0.x, b0.y, b1.x, b1.y, b2.x, b2.y, b3.x, b3.y );
strokeWeight(1.0/s);
rect(0, 0, 1, 1);
line( b0.x, b0.y, b1.x, b1.y);
line( b2.x, b2.y, b3.x, b3.y);
noStroke();
float diam = 7.0/s;
fill(100, 0, 0);
ellipse( b2.x, b2.y, diam, diam);
ellipse( b1.x, b1.y, diam, diam);
fill(0, 0, 100);
ellipse( b0.x, b0.y, diam, diam);
ellipse( b3.x, b3.y, diam, diam);
popMatrix();
}
void draw() {
background(0);
drawEasingCurve( 0.25 );
if( t_anim < t_duree ) {
fill(255);
pos.set( lerpPVector(debutPos, ciblePos, ease( t_anim/t_duree ) ) );
t_anim = millis() - t_debut;
} else {
fill(100);
pos.set( ciblePos );
noLoop();
}
noStroke();
ellipse(pos.x, pos.y, 20, 20);
}
void mousePressed() {
t_debut = millis();
t_anim = 0;
debutPos.set( pos );
ciblePos.set((float) mouseX, (float) mouseY, 0);
loop();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment