Timeline component with UI plugin

[forresto]

A timeline UI would be huge for animation / interaction design. Timeline A/V effects (Seriously.js) could be built with flows, timelines could trigger flows, flow events could trigger timelines....

The state of Interaction Design tools by Pasquale D’Silva argues that there is a hole in current tools, and there needs to be a connection between code, flow, and timeline. Apple is rumored to be updating QC with a timeline-centic view, but it's Apple, so you know it won't be webby.

Fun potential:

• ui animation building
• webgl demos
• interactive music videos
• trippy gif generators

The way that I see this working is a noflo-timeline component that is connected (somehow?) to a noflo-ui timeline widget. The component would be minimal, sending out tween values as needed.

+-------------------------+
|     noflo-timeline      |
|-------------------------|
|                         |
|setup              track1|
|                         |
|play               track2|
|                         |
|pause              track3|
|                         |
|time               track4|
|                         |
+-------------------------+

The setup IIP would be an object saving the tracks and keyframes of the timeline. Tracks could be of specific types: number & color tweens, string & bang packets.

• https://github.com/sole/tween.js is a good collection of tween formulas.
• https://github.com/vorg/timeline.js timeline widget ui (also controls animation; we would want those separate.)

So how can a component define an "edit self" noflo-ui widget? Maybe this could be a generalization of the current edit source / subgraph hook we have now.

[forresto]

Here's the idea to make this work: split screen top and bottom. When needed, bottom is code editor or timeline or layer editor or any metaphor to edit a particular node's innards.

[djdeath]

By the way, I have timeline component here : https://github.com/djdeath/noflo-tween/blob/master/components/Timeline.coffee

[automata]

From Unreal's Blueprint. The Timeline node:

and the float track for Brightness:

[automata]

"Global" timeline from ThreeNodes.js is also interesting.

[automata]

@mrdoob's frame.js timeline. Nice demos.

[automata]

Quartz Composer's Timeline component:

[jonnor]

@forresto @d4tocchini: Proposed datamodel for timelines. The TimelineDefinition could be an IIP created by a custom NoFlo UI widget (or generated programatically)

Components:

Timeline. Each time frameNumber is sent in, outputs a Frame

Inputs:
    int frameNumber
    TimelineDefinition def
Output:
    Frame out

Information Packets

Frame
{
  value: {
      “track1”: 1.0,
      “offsetX”: 0.5
     “opacity”: 0.5
  }
}

TimelineDefinition
{ 
    “label”: “Supercool timeline for funkyanim”
    “frames”: 100,
    “fps”: 25,
       “tracks”: {
           “id”: Track,
            “id”: Track2
       }
}

Track
{
    “label”: “MyPrettyTrackName”
       “keyframes”: [
            KeyFrame1,
            KeyFrame2
     ]
     // Ease1 is for KeyFrame1
       “eases”: [
          Ease1
          Ease2
      ]
}

Ease
{
     "function": "sine" / "cubic" 
     "parameters": {
             "par1": 3.0
      }
}

KeyFrame
{
    “position”: 0.0, // normalized [0.0 1.0] where 1.0 is end-of-animation
    “value”: 0.5
}