# How to fade an image to black over time

**URL:** <https://discourse.processing.org/t/how-to-fade-an-image-to-black-over-time/16100>\
**Category:** Coding Questions\
**Created:** [December 4, 2019, 4:46am UTC](https://discourse.processing.org/t/how-to-fade-an-image-to-black-over-time/16100 "2019-12-04T04:46:54Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 5, 2019, 12:25pm UTC](https://discourse.processing.org/t/how-to-fade-an-image-to-black-over-time/16100/6 "2019-12-05T12:25:58Z")

</div>

I have a simple example here:

> [@Animation that transitions using frameCount](https://discourse.processing.org/t/animation-that-transitions-using-framecount/15378):
>
> A very simple example that transitions through scenes over time: // Author: GLV // Date: 2019-11-10 // Description: // Animate over time using frameCount // A very simple example that: // Uses frameCount to keep track of time // Fades in and out by modifying alpha component of HSB color // Cycles through HSB colors int scene = 0; int sec = 60; float alpha = 0; void setup() { size(500, 500); textSize(36); textAlign(CENTER, CENTER); colorMode(HSB, 360, 100, 100, 100); } void draw()…

It was intended to be simple but that depends on the user and their programming skill level.

In a nutshell, the example is modifying the alpha of the color with time; you may want to just increment (or decrement) with each frame or consider using millis(); Processing displays at a default of 60fps.

Remember KISS; Keep It Simple Student and build on that.

References:

> **[frameCount / Reference](https://processing.org/reference/frameCount.html)**
>
> The system variable frameCount contains the number o frames displayed since the program started. Inside setup() the value is 0 and during the first iteration of draw it is 1, etc.

[colorMode() / Reference / Processing.org](https://processing.org/reference/colorMode_.html) You may want to use RGB (default if not set)  
[frameRate() / Reference / Processing.org](https://processing.org/reference/frameRate_.html)  
[millis() / Reference / Processing.org](https://processing.org/reference/millis_.html)

Have fun!

---

_[View the full topic](https://discourse.processing.org/t/how-to-fade-an-image-to-black-over-time/16100)._