# Transparency - tutorial
**URL:** https://discourse.processing.org/t/transparency-tutorial/6598
**Category:** Coding Questions
**Created:** [December 14, 2018, 2:34pm UTC](https://discourse.processing.org/t/transparency-tutorial/6598 "2018-12-14T14:34:52Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@fernando](https://discourse.processing.org/u/fernando)
#### Post date: [December 14, 2018, 2:34pm UTC](https://discourse.processing.org/t/transparency-tutorial/6598/1 "2018-12-14T14:34:52Z")
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
```auto
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);
}
}
```
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [December 14, 2018, 2:42pm UTC](https://discourse.processing.org/t/transparency-tutorial/6598/2 "2018-12-14T14:42:17Z")
hi, pls. can you detail / link about what tutorial / example /reference
you talk about.
take a look
> **[color\_transparency - OpenProcessing](https://www.openprocessing.org/sketch/635692)**
>
> test transparency by mouse
---
### Author:  [@fernando](https://discourse.processing.org/u/fernando)
#### Post date: [December 14, 2018, 2:45pm UTC](https://discourse.processing.org/t/transparency-tutorial/6598/3 "2018-12-14T14:45:22Z")
One found in this link
[https://processing.org/tutorials/interactivity/](https://processing.org/tutorials/interactivity/)
under Mouse events
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [December 14, 2018, 2:54pm UTC](https://discourse.processing.org/t/transparency-tutorial/6598/4 "2018-12-14T14:54:18Z")
the example from
[https://processing.org/tutorials/interactivity/](https://processing.org/tutorials/interactivity/)
```auto
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 \*)
pls also look
[https://processing.org/reference/color\_.html](https://processing.org/reference/color_.html)
```auto
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
---
### Author:  [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [December 14, 2018, 3:05pm UTC](https://discourse.processing.org/t/transparency-tutorial/6598/5 "2018-12-14T15:05:24Z")
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.
---
### Author:  [@fernando](https://discourse.processing.org/u/fernando)
#### Post date: [December 14, 2018, 3:52pm UTC](https://discourse.processing.org/t/transparency-tutorial/6598/6 "2018-12-14T15:52:28Z")
Great! I got you completely.
Thanks a lot.
Fernando
---
### Author:  [@Architector\_4](https://discourse.processing.org/u/Architector_4)
#### Post date: [December 14, 2018, 3:58pm UTC](https://discourse.processing.org/t/transparency-tutorial/6598/7 "2018-12-14T15:58:28Z")
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! 😃