good example for moving objects with trace

General Discussion Other

mingxu16

good example for moving objects with trace

in General Discussion • Other • 6 months ago

Hi, I am new to Processing. Does anyone know any good examples animating a moving object or objects with trace? Something like this: http://vimeo.com/21351764

Thank you.

Replies(9)

PhiLho

Re: good example for moving objects with trace

6 months ago

They are by the dozen in this forum and probably also in the examples shipped with Processing.
Search for trail, instead of trace.
The base trick is to use a semi-transparent rectangle over the scene, fading out the previous drawings progressively.

mingxu16

Re: Re: good example for moving objects with trace

6 months ago

Thanks a lot for the suggestion. I can now make trails. But I am still wondering how to make the trails dispersing (or diffusing), i.e., when fading out, trails also get larger around the line. I was thinking to redraw the previous lines with larger strokeWeight and semi-transparent color. But it does not sound very correct. Any good ideas?

GoToLoop

Re: good example for moving objects with trace

6 months ago

Here's a nice example of using a semi-transparent canvas-sized rectangle to leave a trail:

http://forum.processing.org/topic/i-know-this-is-bad-but-would-anyone-be-able-to-explain-this-code-i-ve-only-began-using-processing-in-college-and-i-need-to-replicate-this-code-with-some-understanding

And go below to see it working online:

http://studio.processingtogether.com/sp/pad/export/ro.9Q6oRai8-41WJ/latest

mingxu16

Re: good example for moving objects with trace

6 months ago

Nice. Thank you both very much. I will check it out.

GoToLoop

Re: good example for moving objects with trace

6 months ago

I was thinking to redraw the previous lines with larger strokeWeight() and semi-transparent color.

I can't think about another way to do it but redrawing each previous dots/lines.

For example in that Fireworks simulation, besides the current point(), let's say I make 12 more below it.

Alpha attribute ranges from 0 to 255. Divide 256/13 and round it to get 20.

So each 1 of those 13 dots gonna have an alpha w/ 20 transparent value apart from each other.

The farthest the lesser! And latest one 100% transparent to erase it!

Similar to it, strokeWeight() will get bigger according to distance difference.

Only this time a shorter fraction value.

Well, that's my idea. No easy tricks unfortunately.

PhiLho

Re: good example for moving objects with trace

6 months ago

GoToLoop is right (unless you use some kind of blur, perhaps, but not necessarily giving the effect you want).
The solution is to generate and to store the coordinates of the lines in an array list, then to draw them on each frame (with an opaque background(), then), with new width / color.