Blend Modes - additive, etc. (New to Processing!)

General Discussion Other

dangries

Blend Modes - additive, etc. (New to Processing!)

in General Discussion • Other • 8 months ago

Hello all,

I've been messing around with generative images for a while now - first with ActionScript, then with JavaScript and HTML5/canvas. Now I'm moving into Processing. I've successfully ported some of my examples over to Processing, so I'm figuring things out.

Let me apologize in advance if my questions are in the wrong place...or if they've been answered already. I've tried to help myself but I'm getting a little lost.

My two main questions concern (1) using blend modes, and (2) creating large images for high resolution prints.

(1) Blend modes: Flash/AS3 has blend modes, Canvas/HTML5 has globalCompositeOperation, I'm wondering how to best achieve a similar thing in Processing. In particular, I want to draw strokes (or other shapes) on top of the previously drawn image, and use additive ("lighter") blending. You can see that used in some of my examples at my flickr site here, generated in JavaScript/Canvas (some use additive blending, some don't). (If you are interested in the code for these images, check out my blog here and here.)

Should I be using OpenGL for these blend modes? Can you steer me in the right direction?

(2) What's the general wisdom on creating large images for print applications? Exporting a screen-sized image is not sufficient for prints. PDFs are one option, and I've figured out how to do that, but I'm not sure if it would work for every application, for example if the image is created with pixel manipulation. What's the usual workflow for creating large bitmaps for the sake of exports? Should I be using the PGraphics class? (By the way, I have successfully created large images in the browser with JavaScript and canvas, but size limitations for required me to export images in slices which then needed to be stitched together in Photoshop. I'm looking for better ways to do things. I'm pushing JavaScript past what it's intended for!)

I know these questions are rather newbie...but I'm eager to dive into Processing and I could use a little help!

Replies(2)

dangries

Re: Blend Modes - additive, etc. (New to Processing!)

8 months ago

OK I'm starting to answer my own question...didn't realize that the blendMode() function was for this...I mistakenly thought this was for something else.

However, it doesn't seem to work in OpenGL...I'm having a hard time finding current documentation on how to accomplish this. Found some information, but it doesn't seem to apply to Processing 2.

Anywhere I can find some documentation?

dangries

Re: Blend Modes - additive, etc. (New to Processing!)

8 months ago

Wow...sure is quiet around here...OK well I just wanted to post the solution in case anyone else is looking for an answer. You can do additive blending with either the P2D or OPENGL renderers. (I'm not sure if there is any significant difference between these two renderers in Processing 2, but I haven't experimented enough to know.)

When using P2D, simply use

blendMode(ADD);

I made the mistake of putting this line in the setup() function instead of the draw() function, and it didn't work in setup().

When using OPENGL, you need to access GL capabilities. At the top of your sketch, you must import:

import javax.media.opengl.GL2;

Create some variables:

GL2 gl;

PGraphicsOpenGL pgl;

Within setup() or somewhere else suitable include the lines:

pgl = (PGraphicsOpenGL) g;

gl = pgl.beginPGL().gl.getGL2();

And when you're ready to do additive blending (such as in draw()), use the line:

gl.glBlendFunc(GL2.GL_SRC_ALPHA,GL2.GL_ONE);

This code was taken from earlier posted examples on the wiki and elsewhere, but those examples were for Processing 1.x and more code and importing was needed to make it work. All that is needed (apparently) are these few lines that I've posted here.

But P2D seems the esiest way to accomplish this, and the renders seem to be good quality (especially with smooth(8)).

Top Reply