Searching for a solution to draw Gradients efficiently

Hey there,

I want to implement a keyboard visualisation like in this picture:

The gradients I use make the fps drop from 60 fps (if i only use simple black and white colours) to about 15 fps or less on my Android device.

My implementation right now is to create a new ColourGradient for each of the black keys, so I know I could go with only creating two gradients and then painting but I tried that already with no success in performance.

So right now I have 2 strategies in mind:

  1. Creating the keys as a png and painting them.
  • I wasn’t able to really try this yet because I seem to fail to load PNG’s
  • Would this even be faster than my current solution?
  1. Creating a lookuptable from the gradient once and then split my black keys in smaller rectangles (-> draw about 20 rectangles for each black key)
  • Ugly solution IMO
  • Would this even be faster?

Do you have smarter solutions to my problem and what do you think of my 2 proposed strategies?

Thanks for your help :slight_smile:

If you need performance, OpenGL is the way to go.

See this post for some insights: Gradient dithering?

Go for the option #1. Either by loading a PNG file into an Image from a file/resource or by creating an Image and drawing the gradient on it. Drawing an Image will be the fastest option. Drawing gradients live will be slower.

Sure, it might be faster, but it wouldn’t be very flexible in terms of screen size and layout. But it’s definitely a simpler route than OpenGL!

No, that’s very unlikely to be true - especially with the openGL renderer.

On openGL drawing gradients will be pretty much as fast as drawing a solid block of colour.

I am kind of confused on how OpenGL is used in JUCE. Right now I am using an AnimatedAppComponent implementing OpenGLRenderer and drawing everything in the paint function. I don’t really understand how the actions I do on my Graphics object are translated for the OpenGLRenderer, only that it works faster than the standard renderer on Android. Would (and why would) my app’s performance benefit from using an OpenGLAppComponent and writing the gradient on my own as suggested in @adamski’s link?

No, writing it yourself in GL probably wouldn’t go much faster - if you’re just filling rectangles with gradients then the juce 2D engine will already be very fast. If you’re finding it slow then maybe you aren’t actually using the GL renderer at all.

If you run the juce demo app, it has a graphics page where it shows rendering times so you can see the difference between filling with solid colour and gradients, using all the different rendering engines.

Unfortunately, I am quite sure I am already using it (see this topic). For example, implementing the OpenGLRenderer in the AnimationAppTutorial speeds my framerate up a lot (from 15 to 60) but only using one gradient from left to right for the “snake” makes it drop to 15 again.

You shouldn’t need to use OpenGL to draw some simple gradients.
Pre-rendering them to an Image and drawing those directly to screen should be fast enough. If not you’ll need to check wether you might be drawing them too often.