theatre-js / theatre

Motion design editor for the web
https://www.theatrejs.com
Apache License 2.0
10.86k stars 338 forks source link

Support for expressions #437

Open akre54 opened 10 months ago

akre54 commented 10 months ago

One thing I'm finding as I'm using Theatre a lot is I wish there were support for expressions as inputs, most notably math around addition, frame number, or time.

Things like:

  1. $F for frame number, $T for current time, $FEND for end frame
  2. Math: sin($T * 2)
  3. Logic: $F > 2
  4. Parameters: obj('box1').width * 2

Some prior art can be found in TouchDesigner, After Effects, Blender, or Houdini.

Two ways to go about doing this: the first is to use a Worker with the variables loaded in as globals, and the second is to use a parser (like jsep) and then operate on the AST. The first way is a bit more similar to After Effects and allows really complex scripts. The second is a bit more similar to the inline code in Houdini and TD (though both support complex logic in a node).

I recognize this adds a considerable surface area (not to mention security concerns) but I mostly want to open this up for discussion. Does theatre want all of this logic handled in code, and have the inputs kept strictly as scalar and string values? My ideal would be to allow more of this logic to live in the individual projects, and then the code can provide more of a "shell" to just handle the rendering. Happy to discuss more.