We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpProcessing Implementations › Transparent Background in Processing.js / Canvas
Page Index Toggle Pages: 1
Transparent Background in Processing.js / Canvas (Read 5927 times)
Transparent Background in Processing.js / Canvas
Mar 13th, 2010, 5:40pm
 
Hi,
I have been playing with processing for a couple of years and recently switched to processing.js for web based animations i like to do.

I was wondering if anyone knew how to make a background transparent in processing.js or somehow tweak it within <canvas>.

i have it clear out at the beginning of my draw with background(255) right now at the beggining of my draw
http://drewratliff.com/canvas/

Any help would be greeeatly appreciated!

drew
Re: Transparent Background in Processing.js / Canvas
Reply #1 - Mar 14th, 2010, 12:38am
 
Perhaps try background(0, 0);
Re: Transparent Background in Processing.js / Canvas
Reply #2 - Mar 14th, 2010, 8:37pm
 
that semi works except i need something to clear the background so my animation will work correctly.

this is with background(0,0);
http://drewratliff.com/canvas/
Re: Transparent Background in Processing.js / Canvas
Reply #3 - Mar 15th, 2010, 8:20am
 
Your page doesn't work for me on Firefox 3.6. I see the grid but apparently the draw() function isn't called.
Fortunately, because of the println (stupidly translated to alert()) in the draw() loop.

Well, I was hit by the issue when I ran the script in the Web IDE of processingjs.org site. For the record, this can be solved by hitting quickly [Ctrl+]Return and Ctrl+W (close tab) in sequence...

Notes: smooth() call can be moved to setup(). And the begin/endShape() calls are useless.

I see the problem: either you use background(0, 0) and the drawings cumulate over the background color (and the grid) because it actually doesn't clear the canvas (same result as with no background() call at all...), or you use background() with some opacity, and you loose the Web page's background color.
I see no simple solution unless hacking Processing.js...
Re: Transparent Background in Processing.js / Canvas
Reply #4 - Mar 15th, 2010, 8:53am
 
Code:
loadPixels();
for (int i = 0; i < width * height; i++) pixels[i] = 0;
updatePixels();

Edit: fixed glaring typo in for() header!

The problem, however, may be in that the main drawing surface can't be transparent. I'm supposing you want to have a sketch over some background image, and that possibly is not supported.

See comments in createGraphics() documentation:

Quote:
Unlike the main drawing surface which is completely opaque, surfaces created with createGraphics() can have transparency. This makes it possible to draw into a graphics and maintain the alpha channel. By using save() to write a PNG or TGA file, the transparency of the graphics object will be honored. Note that transparency levels are binary: pixels are either complete opaque or transparent.


-spxl
Re: Transparent Background in Processing.js / Canvas
Reply #5 - Mar 15th, 2010, 9:08am
 
subpixel, your trick should work, overwriting previous pixels with transparent ones (while background() seems to try and do a blend, or something).
Note that you refer to Processing's createGraphics(), while actually in Processing.js, main drawing surface can be transparent (a property of the canvas HTML element). Well, Processing.js' doc says the same, because it is a mere copy of Processing.org's one (slightly outdated, and with some parts like this one not adapted to the JS version).
Re: Transparent Background in Processing.js / Canvas
Reply #6 - Mar 22nd, 2010, 11:43am
 
Yeah, I referenced the createGraphics() method's documentation because it has that interesting tidbit about the main drawing surface that I don't think is mentioned anywhere else.  Smiley

-spxl
Page Index Toggle Pages: 1