Spoiled Flash dev trying to figure out layer composition in Processing

General Discussion Other

samueljon..

Spoiled Flash dev trying to figure out layer composition in Processing

in General Discussion • Other • 4 months ago

Hi,

Although I have experimented with Processing in the past I am only a beginner. I have been a Flash developer for many many years and I guess I am a bit spoiled because layer composition is so easy there.

I have browsed the internet for a solution to my problem but haven't found a good answer. I guess I am looking for the wrong things so I was hoping someone could help me. So here goes:

In Processing a common way to create a fade/trail is to draw a semitransparent rectangle over the sketch in every run. This is fine if you want everything to fade. I don't want that. I have a map in the background (full screen) and on top of that I am trying to draw graphics (full screen) that fades out over time, leaving a trail. I think I am supposed to use createGraphics() and create an off screen buffer for the graphic that I want to fade over time, and use the semitransparent trick on that graphic. Then I would use image() in the main draw loop to add the graphic on top of the map.

This works, but of course not quite. The semitransparent rectangle is exactly that - semi transparent - and therefor visible over the map.

Is there a simple and fast trick that I am missing when it comes to layering like this? I am sure it is not very effective to manipulate all the 1920x1080 pixels in the top layer and reducing the alpha over time.

Best,

Sammi

Replies(4)

amnon.owed

Re: Spoiled Flash dev trying to figure out layer composition in Processing

4 months ago

Your whole story is basically correct. Note that you wouldn't have to manipulate each pixel, just the non-transparent pixels. Depending on the actual content of the PGraphics this could save between 0 (if the whole things is filled) and 100% (it it's already cleared) of the work.

Anyway, with regard to your conclusion, you can use a GLSL shader to reduce the alpha for all the pixels of your PGraphics without killing the framerate.

Of course there are alternatives. For example, you could also just draw each phase of the fading shape. If you have a lot of instances of shapes, you can optimize this technique a bit. For example by using an array of PImages to store the fade animation like a spritesheet.

PhiLho

Re: Spoiled Flash dev trying to figure out layer composition in Processing

4 months ago

In Processing, layer composition is done with PGraphics: you draw on them (they have a natural transparent background) and you can draw them one over the other, all over the main sketch area.

samueljon..

Re: Spoiled Flash dev trying to figure out layer composition in Processing

4 months ago

Thank you both.

I am afraid that in my case I would not be able to go the sprite sheet approach because the graphic is real-time and very dynamic. I am going to have a look at GLSL although I was hoping I would not have to dig that deep - being a spoiled AS3 developer.

PhiLho: Yes you are absolutely right regarding composition. Actually the layer composition is quite straight forward and simple in Processing so my title wasn't very descriptive for my real problem. My problem was how I would merge two fullscreen images together while one of them was static ( a map ) and the other one with a lot of real-time graphics that would leave a trail. The simple semi-transparent rectangle doesn't do the trick when the layer is drawn on top of another.

Best,

Sammi

PhiLho

Re: Spoiled Flash dev trying to figure out layer composition in Processing

4 months ago

Ah, I have skimmed your first message, where you actually describe what I suggest. Sorry, and thanks for your indulgence...

Altering the pixels[] array over an image isn't that bad, that's how the old P2D mode was working, and it was often faster than the JAVA2D mode. Of course, it will be still slower than a direct OpenGL command.
Note there are libraries that can help you with the "sprite sheet" approach, animation, etc. They abstract away from the low-level graphics Processing approach.

Top Reply