Hi, I'm a computer science student at UCLA.  During this academic year, I've been working on a research project (advised by Casey) that will ultimately result in a Processing tool and library.  I've got a preview version of the tool/library that's ready enough for the public to start using, and I thought that this forum would be the best way to get the word out.  

---

What is the timeline?

The timeline is a combination of a timeline tool for the Processing Development Environment that allows you to draw curves representing variables over time, and a timeline library that allows you to use these variables in your sketches.

The timeline tool looks like a traditional timeline that you might see in multimedia applications like Flash, Reason, Final Cut Pro, etc.  In all of these applications, the timeline has a very specific purpose.  In this Processing timeline, you can use the timeline to control whatever you want in your code.

The timeline tool uses Bézier splines to represent each variable.  These splines give you a lot of control, and you might already be used to this kind of drawing tool (e.g., the pen tool in Illustrator/Photoshop/Flash).  However, the Bézier splines in the timeline tool have a restriction: they must never backtrack.  Since we are plotting time vs. value, we have to be careful to never have more than one value for a given time.

The timeline library works by loading a data file created by the timeline tool. Using the library allows you to retrieve the value of the timeline variables at the current moment in time.  

---

Installation instructions

The library and tool are included in this zip file:

www.drifkin.net/timeline/timeline-a001.zip

Unzip the file and then place "TimelineLibrary" within the "libraries" folder of your Processing sketchbook and "TimelineTool" within the "tools" folder of your Processing sketchbook.  Create the "libraries" and "tools" folders if they don't already exist.  

The location of the Processing sketchbook is described on the Processing.org libraries reference page: "To find the Processing sketchbook location on your computer, open the Preferences window from the Processing application and look for the "Sketchbook location" item at the top."

---

Timeline tool instructions

Launch PDE and go to "Tools" -> "Timeline".  Press the "Add" button in the bottom left corner to add a new variable track.  Press the "Rename" button on the new track and give the variable a better name.  

The current mode you're in is indicated by the selected button at the top of the screen.  There are currently two modes:

Draw points — Click and drag anywhere to the right of the spline to create a new point.  Click on the curve to insert a point on the curve, without changing the shape of the curve.

Move points — Click and drag points to change their location.  While dragging a tangent (the circular handles), hold down the "alt" key to adjust only that tangent.  With an anchor (the square handles) selected, hit "backspace" to remove that anchor and its corresponding tangents.

The y-axis will auto-pan and auto-zoom to keep everything on screen.  To pan along the time-axis, grab and drag the time ruler at the top.  To zoom along the time-axis, adjust the zoom slider at the bottom of the window.

Hit the "Save" button to save to a file called "timeline-data.txt" in your sketch folder.  Hitting the "Load" button will load from this file if it exists, discarding any changes you've made since your last save.  Don't forget to save — the data file is the means of communication between the tool and library.

---

Timeline library instructions

The library is simple.  In PDE, go to "Sketch" -> "Import Library..." -> "TimelineLibrary".  This will add the following import code to the top of your sketch:

Code:

import timeline.*; 

You'll want to make a global Timeline variable:

Code:

Timeline timeline; 

Now in your setup code, you need to create the Timeline object.  Pass it "this" so it knows about your sketch.

Code:

void setup() {
  ...

  timeline = new Timeline(this);

  ...
}
 

There's an optional second parameter in the constructor for sketches that do not run in realtime (i.e., the sketch is going to be rendered into a movie).  The parameter is an integer that specifies the frame rate of the movie.  When this parameter is specified, the library determines the current time (that corresponds to the time-axis in the timeline tool) based on the current frame, instead of the time elapsed.

Now in your drawing code, you can retrieve the current value of a variable using the getValue() method.  For example, you may have created a variable in the timeline tool called "brightness".  You retrieve the value by passing getValue() the name of the variable:

Code:

void draw() {
  ...

  float value = timeline.getValue("brightness");

  ...
}
 

That's it.  Now you can do just about anything with the retrieved value.  Of course, you can create multiple variable tracks in the timeline tool and use getValue() multiple times to get the value of each variable.

---

(Continued in the next post...)

Very interesting, JavaFX looses some of its advantages... Actually, it doesn't even have a graphical tool, so you are way ahead!

I must remember to go back here and test that!

Hi Devon,

I tried your lib and unfortunately doesn't work.
Lib is ok but the tool isn't recognize.

I put the TimelineTool folder in a tools subfolder but nothing appears in the Tools menu.

Processing version : 1.0.3
OS : MAC OS X 10.5.6

Also, I did first put the TimelineLibrary into libraries subfolder but didn't work until I put the jar in a code subfolder.

What did I not sunderstand ?


Paul

ps: does some doc exist ?

paul_pom wrote on Apr 27^th, 2009, 7:51am:


Hi Paul,

What exactly did you have to do to get the library to work

The directory structure that tanepierre shows above is correct.  More specifically, on OS X (assuming the default location for the Sketchbook) the tool jar file should be located at:

/Users/<your_username>/Documents/Processing/tools/TimelineTool/tool/TimelineTool
.jar

If this still doesn't work for you, let me know so that we can try to figure out what's going on.

(by the way, more documentation is coming — I'm just in the middle of midterm season right now)

thats great. There are so many new possibilities of animating coming up.
Is there a way to loop it somehow, or start it at a given point?
for example, onMouseOver  or any other "if(XX==YY)-events" ?

Great work so far!

Hi Cedric, thank you for the feedback and ideas.

I'm glad you think looping is a good idea because that is a feature that I intend to add.  I'm going to have support for looping by going to the beginning after reaching the end, as well as going back and forth between the beginning and end repeatedly.  Another playback method will be "random", where it will randomly choose a time value between the (not yet existing) beginning and end markers.

I'm a bit undecided about using frames as the ruler units.  Could you give me a few use cases where you think frames would be better than time units?  I originally was going to have frames as an option, but realized that having support for specifying the framerate in the library made this feature not as necessary.

As far as resetting the timeline, would something like this be useful?

Code:

// resets the current time for the variable to the beginning
timeline.reset("variable_name_here"); 

Or do you think more control is necessary, like this:

Code:

// sets the current time for the variable
// (in this case, 10.5 seconds in)
timeline.setTime("variable_name_here", 10.5); 

Or maybe even less control:

Code:

// resets all variables to the beginning
timeline.reset(); 

I'll be releasing a new version later today that will have support for setting the current time of a specific timeline variable.

It'll work like the example I gave earlier:

Code:

// sets the current time for the variable
// (in this case, 10.5 seconds in)
timeline.setTime("variable_name_here", 10.5); 

Adding another method that takes a string specifying which variable made me think about the interface again.  Does anyone think it would be better to have an object for each timeline variable?  It might look something like this:

Code:

import timeline.*;
TimelineVariable var1, var2, var3;

void setup() {
    var1 = new TimelineVariable(this, "Variable 1");    
    var2 = new TimelineVariable(this, "Variable 2");
    var3 = new TimelineVariable(this, "Variable 3");
}

void draw() {
    System.out.println("Variable 1 is " + var1.getValue());
    System.out.println("Variable 2 is " + var2.getValue());
    System.out.println("Variable 3 is " + var3.getValue());
}

void mousePressed() {
    // reset Variable 1 if mouse is pressed
    var1.setTime(0.0);
} 

This is very interesting, would be great to see it in the core.  Congrats on your work!   Sequencing is key to furthering the possibilities of the platform.