Transparency - tutorial

Processing Coding Questions
1

Hello

The first code below is an example found in the interactivity tutorial. It draws rectangles with transparency. I modified this code to have the draw function do the work. See second code. However, the latter code does not display rectangles with transparency. They all appear black. What am I missing in the flow?
Thanks
Fernando

void setup() {
  size(100, 100);
  fill(0, 102);
} 

void draw() {
} 

void mousePressed() {
  rect(mouseX, mouseY, 33, 33);
}

----------------------------------------------

void setup() {
  size(100, 100);
  fill(0, 102);
} 

void draw() {
  fill(0, 102);
  
  if (mousePressed == true) {
    rect(mouseX, mouseY, 33, 33);
  }
}
1 Like
2

hi, pls. can you detail / link about what tutorial / example /reference
you talk about.

take a look

3

One found in this link

https://processing.org/tutorials/interactivity/

under Mouse events

4

the example from
https://processing.org/tutorials/interactivity/

void setup() {
  size(100, 100);
  fill(0, 102);
} 

void draw() {
} // Empty draw() keeps the program running

void mousePressed() {
  rect(mouseX, mouseY, 33, 33);
}

works here (* win7 / 32bit / Processing IDE 3.4 *)
snap-063

pls also look
https://processing.org/reference/color_.html

Syntax	

color(gray)
color(gray, alpha)
color(v1, v2, v3)
color(v1, v2, v3, alpha)

your code is little bit different!
i could say : not do it that way,
still i think about the reason?
i think that while you press mouse MANY rectangles are drawn and that color adds up to black

1 Like
5

Hi,

What you are missing is that the draw() function is called 60 times per second, so every 17 ms.

What is happening is that if you hold your mouse button down for too long (more than those 17ms) you won’t draw 1 but several rectangles on top of each other (if you don’t move the mouse). In this case, you won’t see any transparency.

mousePressed is used to check real time value of the mouse button.
mousePressed() is called only once when actually clicking the mouse button.

2 Likes
6

Great! I got you completely.

Thanks a lot.

Fernando

1 Like
7

What was said above is true.
Every single time your Processing sketch makes an image to put out into its window, it does everything inside of the draw() function.
And, Processing is configured to put a new image into its window 60 times a second. That picture is called a “frame”, hence the “frames per second”, or “FPS” term - Processing works at 60FPS. As a result, the if (mousePressed == true) {... part of your code, as it’s inside of draw(), is ran 60 times a second.

The mousePressed variable you are checking is actually true when you hold the mouse. With above in mind, all of the code inside of the if (mousePressed == true) {... part is also run 60 times a second while you are holding the mouse.

As you never told Processing to clear its image, every time draw() is run, it takes what image was there before, draws ontop of it, and then puts the resulting image onto the window.

As a result of all that, the rect(... function is run 60 times a second, every time drawing a black rectangle on your screen, resulting in 60 rectangles drawn on the screen in just a second.

And, since it doesn’t clear its image, all of these rectangles get drawn one ontop of another. From that, it’s obvious that it would be black - as the code essentially draws 60 semi-transparent black rectangles on the same spot once a second. So, all 60 of them accumulate one ontop of another, with each rectangle making the image darker, darker, darker, up to the point where it’s full black.

The solution to this would be to add background(100); to the start of the code. This function will fill the image with a gray color completely, removing any previous information that was in the image.

With that, Processing would clear the image by filling it with gray color, and then draw your rectangle, 60 times a second.

However, transparency effects are apparent when the background is not a solid color, or when it is accumulated. With that background(100); function, it would not accumulate, and the color would be solid gray, so a semi-transparent black rectangle drawn on top of that background would only result in darker gray.

With that in mind, to keep the transparency example at its best, it’s better to use the original code.

Here, hopefully I didn’t simplify it out too much! :smiley:

2 Likes