Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Timeline component with UI plugin #151

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

Timeline component with UI plugin #151

forresto opened this issue Mar 22, 2014 · 7 comments

Comments

@forresto
Copy link
Member

@forresto 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 Timeline and other components with UI plugins Timeline component with UI plugin Mar 22, 2014
@forresto
Copy link
Member Author

@forresto 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
Copy link
Member

@djdeath djdeath commented Apr 5, 2014

@forresto forresto added this to the Next milestone May 7, 2014
@automata
Copy link
Member

@automata 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
Copy link
Member

@automata automata commented Jun 25, 2014

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

threenodejs

@automata
Copy link
Member

@automata automata commented Jul 7, 2014

@automata
Copy link
Member

@automata automata commented Jul 7, 2014

Quartz Composer's Timeline component:

quartz

@jonnor
Copy link
Member

@jonnor 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.