How will the effect of the "fading touch path" on the iPhone?

Question

I am wondering how to implement an effect similar to this one implemented in flash . It will be just a black screen, which, when the user touches and drags it, will produce an effect similar to the effect shown in the flash movie.

What is called this effect? Do you have a better example?
One of my biggest problems is what I'm talking about. I need both a name for this type of effect and a video that can display what I'm talking about. This will help others better understand the problem.

The closest term that I could think of that describes something like this is the trail pointer . The only difference is that instead of showing the cursor, it will show a solid trace that gently disappears. The website that made the flash example calls it Particle Ghosting. Another example of this is the YouTube video for HP , which shows an effect from 0:30 to 0:36. It begins to look more like paint, but eventually turns into a fading effect.

If you have a better name for this effect or a better example, specify it and I will update the message.

What iPhone technology will be required?
OpenGL or Quartz 2D? I assume that the main graphics cannot be solved due to speed. Any other technology that I am missing? It should be fast enough without any lag. Assuming that a track that lasts about a second at any given point can be a significant number of animated pixels at the same time as the user quickly moves his finger. Perhaps even filling most of the screen with pixels to put out. The effect should look very elegant, nothing more than a choppy pointer in XP.

How will this be implemented?
Ideally, I don’t want the fading effect to be as severe as in the flash (where it was a perfect circle), and more like an HP video where fading out more organically (where there are different attenuations at every point in the path )

Could I manipulate individual pixels directly? That is, I will need to track every pixel that was moved by my finger and call the function again, for example PaintPixel (x, y, brightness), which changes the value of the RGB pixel? It looks like an overkill of pixel modifications and sounds like it will slow down the whole system. However, I’ve never done this before, so I don’t know if this is as usual. For example, suppose one touch takes 32x32 pixels. We have 32 x 32 = 1024 pixels for each touch. When moving your finger, you will need to animate an additional 1024 pixels, most of which already overlap with the previous touch. Assuming the finger went through the height of the iPhone in a second, we are talking about 480 x 32 pixels = 15.360 pixels, updated many times per second.

Would I use a short video that fades from white to black and just generates many copies of the video as you move your finger? I don’t have a Flash version that can open the flash example, so I can’t check its source code, but I assume that it just creates new instances of the videos as the point moves. This is a little difficult for organic attenuation, which is probably due to the fact that there are several fading videos and a random selection of one for each point.

Will I use a set of images (for example, 100 or so circles, each representing a touch that fades from solid white to black), and then create and replace instances of them as time progresses? For example, when I move my finger, I show touch100.jpg at that moment, which is pure white, and in the next iteration touch99.jpg will be displayed at the same point, then touch98.jpg, continuing until it reaches touch0. jpg, which is a pure black color.

Any other ideas that I am missing?

Sorry if these ideas sound weird. As you probably can say, I have never done anything like this before I do not know what the usual way of implementing this effect is, and I just throw away any idea that I can think of.

What resources would you recommend learning how to implement this?
Is there any training material that you would recommend for someone who is trying to learn how to implement such things?

I don’t want to spend a lot of time studying one technology (for example, Quartz), when I need to know a completely different technology for its implementation (for example, OpenGL).

Is there any other information that I forgot to provide?
Are there any additional questions that you would recommend me asking?

Answer 1

pheelicks has a good design, easy to implement, and it can work well. The disadvantage is that you need to recalculate the entire screen for each frame, which may be less effective than optimal. I would suggest the following design, which may have better performance (or it may have worse performance, most performance characteristics need to be checked).

For each circle, create an opaque CALayer and attach it to your view. Assign its contents as a pre-selected circle of CGImageRef . Attach an attenuation animation to it. Attach it to the view. Using the animation delegate, remove the layer when it finishes the animation. I would probably then reuse the layer, rather than destroy it and create a new one. He already has his own circle in the end, so reusing it should be extremely cheap. (EDIT: I changed my mind about this, you don’t even need to delete and re-add the layer, just move it to a new location or hide it if you don’t need it. You can make all these circles sub-layers of the “trace” layer if you need a simple a way to remove the entire trace when it is not needed.)

The advantage of my circuit is that it only calculates the pixels that matter, and relies on an iPhone-optimized drawing system to do the calculations. It can generate a large number of layers, but the system is designed to handle this (and the number of layers is fixed by the length and frame rate). The code should also be very simple.

Answer 2

I would do the following:

• Create a raster image that you draw onto, name it your canvas
• Create an image representing a trace, in your example a solid circle
• Each frame draws this circle, where the user currently has his finger.
• Also, on each frame, apply a transform to the canvas that multiplies the alpha of each pixel by a value less than 1, i.e. 0.99

This will make everything on the screen fade away, with the most attractive circles most recently drawn.

I did things like this in Flash (dust behind the car) and it works very well

As for the technology, maybe you can do it with Quartz only if the performance was too bad, I would switch to OpenGL

Answer 3

If you want to use OpenGL, you can:

• Draw the trail as an image, you need to experiment with the dimensions, but the image of the trail should have an alpha channel.
• Next, add the code to calculate the motion vector for your pointer.
• Now calculate the line perpendicular to the motion vector for your pointer.
• Create points that fall along the line that you calculated, these points should be offset from the position of your pointer (the distance depends on the size of your pointer).
• Store a buffer of two points calculated above over time.
• You will now use OpenGL to create a square strip, using the points in your buffer as vertices.
• Finally, apply the image of the trail that you painted as a texture to the four-layer strip you created.

Answer 4

If you download Cocos2D and run ParticlesTest, you will see many examples similar to this effect.