best way for animations in HISE

[treynterrio]

Hi there, what is the best way to insert an animation in HISE? via timer and filmstrip, Lottie or webview? I have animations with 300 photos.
I tried the option from the following post, but only 60 frames run smoothly, everything above that isn't displayed correctly to me.

Animating a filmstrip with a knob

There you go: Content.makeFrontInterface(600, 500); const var Panel1 = Content.getComponent("Panel1"); const var Knob1 = Content.getComponent("Knob1"); //...

Forum (forum.hise.audio)

[aaronventure]

On your road of animating in HISE you'll discover great many things. Here are my findings so far:

• rasterised animations with a lot of frames are a RAM hog; the PNGs get uncompressed to raw bitmap data. You can safely estimate the RAM hit to he 4x the total size of your PNG files.
• 128 frames for a small knob is more than enough
• transition and passive animations are best done with a timer. don't go above 60fps. for smaller widgets, 30 is enough
• you'll achieve the smoothest output by drawing vector graphics directly in HISE. that way you can be calculating the exact frametime using the Date.getSystemTimeMs() and applying corrections due to frametime inconsistencies
• large areas with attempted high fps will still choke the message thread and will definitely act differently across systems and DAWs
• webview sure, but your webview is always on top, so you cannot place any HISE widgets underneath it
• if you NEED super smooth animations, your best bet is writing shaders with OpenGL. But that'll only work consistently on Windows
  *the fadeComponent() method is broken on mac and Windows as it occasionally fails and instantly changes the visibility instead of fading

[clevername27]

@aaronventure

Well, obviously all of that.

@treynterrio

Can you tell us the context of the animation?

I needed to tweak the HISE source code to remove the timer-limit to get smooth animations. (But don't do this.)

[d.healey]

@clevername27 said in best way for animations in HISE:

I needed to tweak the HISE source code to remove the timer-limit

That might explain the issue you were having when running multiple plugin instances.

[clevername27]

@d-healey Especially given Chris's explanation, yes.

[treynterrio]

@aaronventure what about lottie animations? my animation has 500x500px and ~300 images

[d.healey]

@treynterrio said in best way for animations in HISE:

500x500px and ~300 images

That will eat up RAM.

Lottie might be more efficient but it's a specialised skill set and you'll probably get better results creating vectors directly in HISE.

One thing to keep in mind with UIs in general is that once a user has setup the plugin in their project they will likely close the UI and rarely look at it again unless they need to adjust something.

[Christoph Hart]

@d-healey yeah that depends on the plugin type. For orchestral projects sure, but synths and drum plugins are far more likely to be interacted with on a regular basis.

But I would also try to keep the footprint of the UI as low as possible - it's a bit ridiculous to optimize the streaming of the samples to the last byte and then load in hundreds of MB of filmstrip images.

[treynterrio]

This post is deleted!

[aaronventure]

@Christoph-Hart unless that's your whole thing (Softube for example)