Staging and unfolding code structures in time is difficult. In fact, Field owes its very existence to the difficulties of expression animation in code using traditional programming tools. As such it provides a number of features for dealing with time, some of which are bound to be useful for our work together in this class.
The first thing that Field has to offer the animator of code is
_.wait() (or it’s
stage.frame()). This pauses the code running in this box and waits for a ‘frame’ to finish — all other running boxes get a change to run until either they complete or until they
_.wait() in turn. This lets you interpose redrawing the screen (and interacting with the mouse) with your code. Hardly any languages / environments can do this, and transforming code which seems natural with
_.wait() into code that doesn’t use it can be difficult. Take advantage of it.
Pay attention to when you add lines to be drawn when using
_.wait(). This isn’t what you want:
This is wrong; don’t do this. You’ll only get your line visible at the end
This is what you want: This way you’ll see an animation
The next interesting thing Field gives you is that red line that hangs out on the edge of the screen. It’s actually a box just like everything else in that window. But, in addition to being moveable and a place where you can put code, it executes other boxes that it passes over:
Crucially, executing with the red line gives you one more value to use inside your code:
_t() This returns a number that goes from
1 as the red line sweeps across your box. For example, the code in that box looks like:
Alternatively you can grab hold of a reference to this time slider by writing
_.time anywhere else. Since
_.time is just a box like any other you can do things like:
How to move the red line with code itself
This lets you, in turn, build animations that move forward by themselves, tweaking the position and width of the boxes like you would in a traditional time-line.
Now that we have a ‘timeline’ that seems like its ready to be actually connected to time, where is the play button? Rather than build the play button directly into Field, you can actually just write some code to make the play button. If making your own play button seems daunting, just import one — control-space, “Insert from Workspace” and type / select
These boxes add shortcuts: control-p for play / stop and control-shift-p for rewind+play / stop.
Additionally on the canvas itself, holding down S will let you drag the red time slider around with the mouse regardless of where you are clicking and shift-S will cause the red time slider to jump to where you click.
S (canvas) — scrub time
shift-S (canvas) — jump time to here
In classic time line editing software from Avid, through Premier and Final Cut there’s a notion of a “clip” from “footage” of some kind. The clip is the time range that you have selected from some larger time range. Much of the complexity of the UI in these products come from being able to independently move the clip with respect to the timeline that it’s in or move the clip with respect to the footage it is selecting from (or both). Opening up the command list (control-space) will let you create box pair that yields a pair of boxes that are linked together:
In such boxes the main box and the ‘footage’ box can be moved around independently. To get the value of
_t() for the ‘footage’ ask for