Processing Forum

Screen name:
jcolosi

jcolosi's Profile

2 Posts

3 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Subtractive blending?

[5 Replies]
- 01-Sep-2013 06:29 AM
- Forum: Programming Questions
I can do additive blending. I'm using:
1. PGraphics.blendMode(ADD);
2. PGraphics.fill(0xff, 1);
This will slowly increase the from black to white . The image goes from ( 0,0,0,0xff) to ( 1,1,1,0xff) and eventually to ( 0xff,0xff,0xff,0xff) .

I have not been able to find a suitable way to slowly decrease the color from white to black . The SUBTRACT blend mode does not seem to work the way I'd expect. Any way I do it, it seems to clobber the alpha on the image, or go completely to black all at once. The method I have below is to filter(INVERT) the image, then draw white, then filter(INVERT) again. It works exactly as I'd like, but it's slow because the PGraphics has to be finalized twice.

Below I have a full and complete working example using this double invert method. I'd like to emulate this kind of result, but without all the inversion. I wonder if anyone has found a way to do this using a blendMode. Any help is appreciated.
2. /**
3. * Implement Additive and Subtractive blending
4. * by John Colosi
5. *
6. * Unfortunately, subtractive blending is unintuitive.
7. */
9. // Buffers
10. int screenX = 800;
11. int screenY = 600;
12. int imageX = 1600;
13. int imageY = 1200;
14. float ratioX = (float) imageX / screenX;
15. float ratioY = (float) imageY / screenY;
17. // Variables
18. private PGraphics image;
19. int red, green, blue;
20. boolean isAdditive;
22. void setup() {
23. // Init screen buffer
24. size(screenX, screenY, P2D);
25. colorMode(RGB, 0xff);
26. background(0, 0, 0, 0xff);
28. // Init image buffer
29. image = createGraphics(imageX, imageY, P2D);
30. image.colorMode(RGB, 0xff);
31. image.background(0, 0, 0, 0xff);
33. // Init variables
34. red = 0xff;
35. green = 0xff;
36. blue = 0xff;
37. isAdditive = true;
38. }
40. void draw() {
41. if (mousePressed) {
42. if (isAdditive) drawBufferAdd();
43. else drawBufferSubtract();
44. image(image, 0, 0, screenX, screenY);
45. }
46. }
48. void drawBufferAdd() {
49. int x = (int) (mouseX * ratioX);
50. int y = (int) (mouseY * ratioY);
52. image.beginDraw();
53. image.blendMode(ADD);
54. image.rectMode(CENTER);
55. image.noStroke();
56. image.fill(red, green, blue, 1);
57. image.rect(x, y, 256, 256);
58. image.endDraw();
59. }
61. void drawBufferSubtract() {
62. int x = (int) (mouseX * ratioX);
63. int y = (int) (mouseY * ratioY);
65. image.beginDraw();
66. image.blendMode(ADD);
67. image.filter(INVERT);
68. image.rectMode(CENTER);
69. image.noStroke();
70. image.fill(red, green, blue, 1);
71. image.rect(x, y, 256, 256);
72. image.endDraw();
74. image.beginDraw();
75. image.filter(INVERT);
76. image.endDraw();
77. }
79. public void keyPressed() {
80. if (key == 's') image.save("GraphicsTest.png");
81. if (key == 'r') red = red > 0 ? 0 : 0xff;
82. if (key == 'g') green = green > 0 ? 0 : 0xff;
83. if (key == 'b') blue = blue > 0 ? 0 : 0xff;
84. if (key == 'z') isAdditive = !isAdditive;
85. }

Issue with the alpha blending arithmatic

[0 Replies]
- 29-Mar-2012 11:53 AM
- Forum: Core Library Questions
The results of drawing shapes with alpha are not entirely what I would expect. Say I draw white boxes over a black background as below:

White box (alpha = 50)
    over
        White box (alpha = 50)
            over
                Black background

I would expect one box to have a color of 50, and the next box to have a color of 100. That is, the alpha's are additive and if I layer 5 white boxes at alpha=50, then I would have the color 250. This isn't what I'm seeing. See the code and results below. You can see that the first box is close to my expectation at 49. But it trails off from there, and after 21 layers, it tops out at 245. It never actually gets to full white.

I've done some reading about Alpha blending, and I don't think this is a bug as such, but it doesn't meet my expectations. Is there a way to mimic my simpler additive blending approach? Is there a way to change the blending mode of the renderer? My way would certainly save some compute cycles :) Seems ashame for the renderer to be doing all these computations that really just make it more difficult to create things the way I'd like them.

Any help is appreciated,
-- John

<code>
int width = 600;

void setup() {
size(width, 100, P2D);
background(0);
fill(0xff,50);
noLoop();
}

void draw() {
for (int i=0; i<width; i+=20) {
    rect(i,0,width-i,100);
}

int dropper;
for (int i=0; i<width; i+=20) {
    dropper = get(i+10,10)&0x000000ff;
    System.out.format("%d\n",dropper);
}
}
</code>

<results>
49
89
121
146
166
182
195
205
213
220
225
229
233
236
238
240
241
242
243
244
245
245
245
245
245
245
245
245
245
245
</results>

«Prev
Next »