Take the 2-minute tour ×

I want to display audio meters on the iPad consisting of many small green, red or black rectangles. They don't need to be fancy but there may be a lot of them. I am looking for the best technique to draw them quickly. Which of the following techniques is better: text atlas in CALayers or OpenGLES or another?

Thank you for your answers before the the question was closed for being too broad. Unfortunately I couldn't make the question narrow because I didn't know which technology to use. If I had known the answer I could have made the question very narrow.

share|improve this question

closed as too broad by lnafziger, Pfitz, Jeremiah Willcock, Abizern, c4p Jul 1 '13 at 23:27


how many is a lot? –  AlexWien Jul 1 '13 at 17:03
300 meters with 8 segments each updating at 5 times a second. –  Ant Jul 1 '13 at 17:05

4 Answers 4

The fastest drawing would be to use OpenGLES in a custom view.

share|improve this answer
Is there a way to determine whether it is worth using OpenGLES? Given a figure of say 2400 rectangles, updating 5 times a second, do you have a feel for whether OpenGLES is necessary? –  Ant Jul 1 '13 at 17:08
Considering all of iOS drawing ultimately winds up in OpenGLES doing it yourself should always be faster, assuming you do a reasonable job of using the API. CALayer above would be the second fastest. Tiny color only rectangles should be pretty easy to do in OGL. I would think anything beyond 100's of objects should be done in OGL. But if you can try the other approaches first (and make sure you measure on the slowest device you support) and then compare. Just don't compare with the simulator. –  ahwulf Jul 1 '13 at 18:12

An alternative method would be to use a texture atlas in CALayers. You could draw 9 sets of your boxes into a single image to start with (0-8 boxes on), and then create the 300 CALayers on screen all using that as their content. During each frame, you switch each layer to point at the part of the texture atlas it needs to use. I've never done this with 300 layers before, so I don't know if that may become a problem - I've only done it with a half dozen or so digits that were updating every frame, but that worked really well. See this blog post for more info:


share|improve this answer
CALayer is pretty much ideal for this. This should be ridiculously fast (and largely async). –  Catfish_Man Jul 1 '13 at 17:27

The best way to draw something repeatedly is to avoid drawing it if it is already on the screen. Since audio meters tend to update frequently, but most of their area stay the same, because audio signals are relatively smooth, you should track what's drawn, and draw only the differences.

For example, if you have drawn a signal meter with fifty green squares in a previous update, and now you need to draw forty eight green squares, you should redraw only the two squares that are different from the previous update. This should save you a lot of quartz calls.

share|improve this answer
Thank you I'd already assumed that. Is there anything I should be looking at apart from drawRect? –  Ant Jul 1 '13 at 17:03
@Ant Drawing is usually the most time-consuming task. It is hard to add much on top of that without profiling your code. –  dasblinkenlight Jul 1 '13 at 17:15

Postpone rendering to the point where it's absolutely necessary, i. e. assuming you're drawing with CoreGraphics, use paths, and only stroke/fill the path when you have added all the rectangles to it.

share|improve this answer
I don't really think that speed will be a big issue with OpenGLES, if you draw only rectangles and only at 5fps. There are iOS OpenGLES apps that run on iPod Touch 4G, and can analyze audio in real-time while making an animated figure dance to music at 60fps. –  Totoro Jul 2 '13 at 4:02
I think this is wrong. I was drawing 70 separate lines and then stroking them all at the end. When I changed it to 70 individual strokes it sped up. –  Ant Jul 10 '13 at 16:53
