Timeline component with UI plugin #151

Open
forresto opened this Issue Mar 22, 2014 · 7 comments

Comments

Projects
None yet
5 participants
@forresto
Member

forresto commented Mar 22, 2014

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.

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 forresto changed the title from Timeline and other components with UI plugins to Timeline component with UI plugin Mar 22, 2014

@forresto

This comment has been minimized.

Show comment
Hide comment
@forresto

forresto Apr 5, 2014

Member

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.

Member

forresto commented Apr 5, 2014

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

This comment has been minimized.

Show comment
Hide comment
Member

djdeath commented Apr 5, 2014

@forresto forresto added this to the Next milestone May 7, 2014

@automata

This comment has been minimized.

Show comment
Hide comment
@automata

automata May 19, 2014

Member

From Unreal's Blueprint. The Timeline node:

captura de tela 2014-05-19 as 11 11 54

and the float track for Brightness:

captura de tela 2014-05-19 as 11 15 35

Member

automata commented May 19, 2014

From Unreal's Blueprint. The Timeline node:

captura de tela 2014-05-19 as 11 11 54

and the float track for Brightness:

captura de tela 2014-05-19 as 11 15 35

@automata

This comment has been minimized.

Show comment
Hide comment
@automata

automata Jun 25, 2014

Member

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

threenodejs

Member

automata commented Jun 25, 2014

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

threenodejs

@automata

This comment has been minimized.

Show comment
Hide comment
Member

automata commented Jul 7, 2014

@automata

This comment has been minimized.

Show comment
Hide comment
@automata

automata Jul 7, 2014

Member

Quartz Composer's Timeline component:

quartz

Member

automata commented Jul 7, 2014

Quartz Composer's Timeline component:

quartz

@jonnor

This comment has been minimized.

Show comment
Hide comment
@jonnor

jonnor Aug 26, 2014

Member

@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
}
Member

jonnor commented Aug 26, 2014

@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
}

@bergie bergie removed this from the Next milestone Nov 10, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment