#Ijeomamotion
A cross-mode Processing library for sketching animations with numbers, colors, vectors, beziers, curves and more! Cross-mode means that it runs and exports in both Processing's Java and Javascript modes. You can also use it in Javascript without Processing.js. At the moment ijeomamotion.js doesnt include the Callback class, ijeomamotion.geom and ijeomamotion.math packages! Please post issues on Github or Processing's forums under "Contributed Libraries".
#Download and Install In Processing 2.0 you can do an auto download and install by going Sketch->Add Library...->Animation->ijeomamotion. Otherwise download the latest zip and check out INSTALL.txt.
#Javadocs http://ekeneijeoma.com/processing/ijeomamotion/reference/index.html
#Example
#Getting Started First, import the library into your Sketch via Sketch->Import Library->ijeomamotion. Then call
Motion.setup(this);
in setup.
##How to create Tweens
###Numbers (floats)
There are 2 ways to Tween a number using variables. Say you want to tween a float x = 0 to x = 100 in 100 frames. (To tween a number it must be a float and not an int. Ints are used to tween colors.)
Tween t = new Tween(this, "x", 100f, 100).play();or
Tween t = new Tween(100).add(this, "x", 100).play();The 2nd way lets you chain/add more properties to the Tween. Say we want to tween a float x = 0 and loat y = 0 to x = 100 and y = 100 in 100 frames.
Tween t = new Tween(100).add(this, "x", 100).add(this, "y", 100).play();###Colors (ints)
There are also 2 ways to Tween a color using variables. Say we want to tween a color int c = color(0) to c = color(255) in 100 frames. (To tween a color it must be an int.)
Tween t = new Tween(this, "c", color(255), 100).play();or
Tween t = new Tween(100).add(this, "c", color(255)).play();In the same way as with numbers you can also chain/add more color properties
Tween t = new Tween(100).addColor(this, "c1", color(255)).addColor(this, "c2", color(200)).play();###PVectors
You can also tween PVectors. Say we want to tween PVectors v1 = PVector(0,0) and v2 = PVector(0,0) to v1 = PVector(50, 50) and v2 = PVector(100, 100).
Tween t = new Tween(100).addVector(this, "v1", new PVector(50, 50)).addVector(this, "v2", new PVector(100, 100)).play();###All in 1! You can also tween multiples properties of any type in 1 Tween!
Tween t = new Tween(100).add(this, "x", 100).addColor(this,"c", color(255)).addVector(this, "v1", new PVector(100, 100)).play();###Callbacks You can add create callbacks using a method
t = new Tween(100).onBegin("onBegin")
.onEnd("onEnd").onChange(this, "onChange").play();
public void onBegin(Tween t) {}
public void onEnd(Tween t) {}
public void onChange(Tween t) {}You can also create callbacks using ICallback interface class
t = new Tween(100).onBegin(new ICallback() {
public void run(Object t) {
println(t+" begin");
}
}
).onEnd(new ICallback() {
public void run(Object t) {
println(t+" end");
}
}
).onChange(new ICallback() {
public void run(Object t) {
println(t+" change");
}
}).play();##How to playback Tweens ###Delaying
t = new Tween(this, "w", width, 50, 50).play();t = new Tween(50).add(this, "w", width).delay(50).play();###Pausing, Resuming "Scrubbing"
Tween t;
float w = 0;
void setup() {
size(400, 100);
smooth();
Motion.setup(this);
t = new Tween(this, "w", width, 100).play();
}
void draw() {
background(255);
noStroke();
fill(0);
rect(0, 0, w, height);
}
void keyPressed() {
t.play();
}
void mousePressed() {
t.pause();
}
void mouseReleased() {
t.resume();
}
void mouseDragged() {
t.seek((float) mouseX / width);
} ###Repeating
Tween t = new Tween(this, "w", width, 100).repeat().play();###Reversing
Tween t = new Tween(this, "w", width, 100).repeat().reverse().play();##How to use Processing-style events with Tweens This runs in PDE Java-mode only but can also be used in JS-mode with Javascript-only Processing.js.
void tweenStarted(Tween t) {
println(t + " started");
}
void tweenEnded(Tween t) {
println(t + " ended");
} ##How to use Java-style events with Tweens (PDE Java-mode only)
t = new Tween(this, "w", width, 100).addEventListener(new TweenEventListener()).play();
public class TweenEventListener implements MotionEventListener {
void onMotionEvent(MotionEvent te) {
if (te.type == MotionEvent.TWEEN_STARTED)
println(((Tween) te.getSource()) + " started");
else if (te.type == MotionEvent.TWEEN_ENDED)
println(((Tween) te.getSource()) + " ended");
}
} ##How to call functions with Tweens
Say you want to call a function named test at 25 frames in a tween with a duration of a 100 frames.
t = new Tween(100).call(this, "test", 25).play();
public void test() {
println("test");
}##How to playback tweens in parallel
Parallel tp = new Parallel()
.add(new Tween(this, "x1", width, 100), "x1")
.add(new Tween(this, "x2", -width, 200), "x2").play(); ##How to playback tweens in a sequence
Sequence ts = new Sequence();
ts.add(new Tween(100).add(this, "x1", width).add(this, "c1", color(0)), "x1");
ts.add(new Tween(75).add(this, "x2", width).add(this, "c2", color(0)), "x2");
ts.add(new Tween(50).add(this, "x3", width).add(this, "c3", color(0)), "x3");
ts.add(new Tween(25).add(this, "x4", width).add(this, "c4", color(0)), "x4");
ts.repeat().play();##How to playback tweens in a timeline
Timeline tl = new Timeline();
tl.add(new Tween(50).add(this, "y1", height).add(this, "c1", color(0)), 0);
tl.add(new Tween(50).add(this, "y2", -height).add(this, "c2", color(0)), 50);
tl.add(new Tween(50).add(this, "y3", height).add(this, "c3", color(0)), 100);
tl.add(new Tween(50).add(this, "y4", -height).add(this, "c4", color(0)), 150);
tl.add(new Tween(50).add(this, "y5", height).add(this, "c5", color(0)), 200);
tl.repeat().play();###Cross-mode To create a cross-mode tween using variables they must not be defined in the global scope but rather in a custom class.
Rect r;
Tween t;
public void setup() {
size(400, 400);
smooth();
rectMode(CENTER);
Motion.setup(this);
r = new Rect(width / 2, height / 2, 0, 0, 255);
t = new Tween(100).add(r, "w", width).add(r, "h", height).addColor(r, "c", 0).play();
}
public void draw() {
background(255);
r.draw();
}
class Rect {
int c;
float x, y, w, h;
Rect(float x, float y, float w, float h, int c) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.c = c;
}
void draw() {
noStroke();
fill(c);
rect(x, y, w, h);
}
}
void keyPressed() {
t.play();
}You can also create cross-mode tweens without variables.
Tween t;
public void setup() {
size(400, 400);
smooth();
rectMode(CENTER);
Motion.setup(this);
t = new Tween(100).add("w", 0, width).add("h", 0, height).addColor("c", 255, 0).play();
}
public void draw() {
background(255);
noStroke();
fill(t.getColor("c").getValue());
rect(width / 2, height / 2, t.get("w").getValue(), t.get("h").getValue());
}
void keyPressed() {
t.play();
}