I notice it’s these two line that will create the dim out effect of the ellipse.
fill(0, 0, 0, 50)
rect(0,0,WIDTH,HEIGHT)
How exactly does it work?
I comment them, and the effect is gone. So I assumed that is the code that create the effect.
Is there some other explanation? BTW, what does WIDTH and HEIGHT mean? What does is replace?
That example doesn’t use background() … It’s drawing a black but mostly transparent rectangle. It slowly shades over the touches.
HIEGHT,WIDTH is the whole size of the drawing area
Try rect(100,100,400,400) and draw all over the screen
WIDTH is the x - length of the screen, HEIGHT is the y - length.
if you draw a rect with fill(0, 0, 0, 255) → a fully (black) colored rect.
if you draw one with fill(0, 0, 0, 0) → a fully transparent (black) rect.
so if you draw two rects with fill(0, 0, 0, 50) on top of each other, its the same as one rect with fill(0, 0, 0, 100) → a half-transparent (black) rect.
now the effect: the draw() function gets called once per frame, so a quarter-transparent rect is drawn over the elipse each frame. now remember the statement before! each frame the rect gets more filled. look at the next line:
fill(0, 0, 0, 50) + fill(0, 0, 0, 50) + fill(0, 0, 0, 50) + fill(0, 0, 0, 50) + fill(0, 0, 0, 50) = fill(0, 0, 0, 250) → a nearly transparent black rect, slowly getting more not-transparent. after a few frames, the rect is full colored and the ellipse is gone.
That’s not quite how it works. Alphas don’t add like that, alphas control how much of the lower stuff shines through. So if you have an alpha of 127 on top of an alpha of 255 then the result is half of the original colour plus half of the current colour. Then if you stick an alpha of 127 on top again, the result is half of what we just got plus half of the newest colour. That’s a quarter of the original colour plus a quarter of the middle colour plus half of the new colour.