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.
Index › Programming Questions & Help › Processing Implementations › Transparent Background in Processing.js / Canvas
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
Transparent Background in Processing.js / Canvas (Read 5927 times)
drew
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
Back to top
 
 
PhiLho 
Re: Transparent Background in Processing.js / Canvas
Reply #1 - Mar 14th, 2010, 12:38am  
Perhaps try background(0, 0);
Back to top
 
WWW  
drew
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/
Back to top
 
 
PhiLho 
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...
Back to top
 
WWW  
subpixel
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
Back to top
« Last Edit: Mar 22nd, 2010, 11:40am by subpixel »  
Processing: subpixels.com, OpenProcessing.org | VJ portfolio: SPXL.TV
WWW  
PhiLho 
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).
Back to top
 
WWW  
subpixel
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
Back to top
 
Processing: subpixels.com, OpenProcessing.org | VJ portfolio: SPXL.TV
WWW  
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›