Parameter graph editor UI

[brylie]

Some scene parameters change over time, such as camera location. nunuStudio can offer a 'parameter graph editor UI' to help animators fine-tune parameter transitions.

Examples

Blender3D

This idea is best illustrated by the Blender parameter graph UI (a.k.a. F-Curves):

Synfig Studio

[tentone]

Hi @brylie

This would be really neat 👍

What if i implement this as a animation object that can be used as a normal object (similar to containers) but its possible to controll its position, rotation and size using a graph editor similar to the one above?

It would require me to change the editor UI layout to support the graph editor alongside the scene explorer but it would be totally worth!

Thanks

[brylie]

Right on. Is there any way I can help with this feature? I am familiar with JavaScript to a certain extent.

[tentone]

I belive there is something similar inside threejs already with support for multiple interpolations i have to check it. If not i will implement it first as a programming API and after i will move it to UI.

If you want i can leave it for you to try to implement something, and i help you with whatever you need!

(Just for reference https://twitter.com/tentonej/status/834563874343022592)

[brylie]

Hm, I will start with some research.

[brylie]

There are a few of open source UI component libraries, for diagramming, that provide 'bezier' graph UI components, including:

• Bezier.js - A library for performing Bezier curve computation and, if you add in your own drawing code (like the HTML canvas), drawing curves in a useful manner.
• JointJS - Create static diagrams or fully interactive diagramming tools
• mxGraph - fully client side JavaScript diagramming library
• WireIt - WireIt is an open-source javascript library, to create full-web graph editors for dataflow applications, visual programming languages, graphical modeling, or graph editors.

[brylie]

It is also possible to build a UI component using a lower level graphical library, such as:

• Raphaël
  • Graffle example
  • Curver example

[tentone]

@brylie Im trying to avoid any libs for the UI, graphs are easy to draw i have already an internal component for that (used in the particle editor)

[brylie]

Alright. I am just speculating that a good graph/diagram library might be useful for another idea:

#28

[tentone]

@brylie Im thinking to add the animation system as something similar to this https://threejs.org/examples/#misc_animation_authoring what do you think?

[brylie]

Looks really cool! Kind of like the keyframes/curves UI.

Relatedly, I also like that it is easy tointeract with the 3D scene on a touchscreen, e.g. moving the cube around by its transform handles.