# 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:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![pw00](https://avatars.discourse-cdn.com/v4/letter/p/d9b06d/32.png) [@pw00](https://discourse.processing.org/u/pw00)\
**Post date:** [December 4, 2019, 4:46am UTC](https://discourse.processing.org/t/how-to-fade-an-image-to-black-over-time/16100/1 "2019-12-04T04:46:54Z")

</div>

I’m a beginner in processing and overall coding, so I’m not really sure what and how I’m supposed to do certain things. Is there a way to fade out an image to black over time or use a tint to make an image black over time?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 4, 2019, 5:36am UTC](https://discourse.processing.org/t/how-to-fade-an-image-to-black-over-time/16100/2 "2019-12-04T05:36:15Z")

</div>

[https://processing.org/reference/loadImage\_.html](https://processing.org/reference/loadImage_.html)  
[https://processing.org/reference/tint\_.html](https://processing.org/reference/tint_.html)

using the TRANSPARENCY example  
there is a funny way,  
increase the transparency over a black background!

```auto
/**
 * Transparency. 
 * 
 * modifying the alpha value of the image with the tint() function. 
 */

PImage img;

void setup() {
  size(640, 360);
  img = loadImage("moonwalk.jpg"); // Load an image into the program 
  println("use mouseX"); // tell the user what operation is possible
}

void draw() {
  background(0); // BLACK
  tint(255, map(mouseX,0,width,255,0) ); // Display with opacity
  image(img, 0, 0); // Display 
}

```

i know that is not according your assignment, but could help already

---

<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 4, 2019, 8:37am UTC](https://discourse.processing.org/t/how-to-fade-an-image-to-black-over-time/16100/3 "2019-12-04T08:37:15Z")

</div>

Hello,

Resources:  
[https://processing.org/](https://processing.org/)  
[https://processing.org/examples/](https://processing.org/examples/) See transparency  
[https://processing.org/tutorials/](https://processing.org/tutorials/) See Color  
[https://processing.org/reference/tint\_.html](https://processing.org/reference/tint_.html)  
[https://processing.org/reference/alpha\_.html](https://processing.org/reference/alpha_.html)  
[https://processing.org/reference/fill\_.html](https://processing.org/reference/fill_.html)

Examples available with Processing IDE (Files \> Examples\>…) :

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/614c60f907e95af80fe5aab6586148e55308d014.png)

Look up terms like opacity, transparency and alpha.

🙂

---

<div class="post-metadata">

**Author:** ![pw00](https://avatars.discourse-cdn.com/v4/letter/p/d9b06d/32.png) [@pw00](https://discourse.processing.org/u/pw00)\
**Post date:** [December 5, 2019, 7:20am UTC](https://discourse.processing.org/t/how-to-fade-an-image-to-black-over-time/16100/4 "2019-12-05T07:20:13Z")

</div>

Not exactly what I was looking for, but thank you for answering! 😀

---

<div class="post-metadata">

**Author:** ![pw00](https://avatars.discourse-cdn.com/v4/letter/p/d9b06d/32.png) [@pw00](https://discourse.processing.org/u/pw00)\
**Post date:** [December 5, 2019, 7:20am UTC](https://discourse.processing.org/t/how-to-fade-an-image-to-black-over-time/16100/5 "2019-12-05T07:20:47Z")

</div>

cool! I didn’t know there was even a feature like that. I’ll look through them

---

<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!

---

<div class="post-metadata">

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

</div>

> [@glv](#):
>
> Remember KISS; Keep It Simple Student and build on that.

> **[KISS principle](https://en.wikipedia.org/wiki/KISS_principle)**
>
> KISS, an acronym for "Keep it simple, stupid!", is a design principle first noted by the U.S. Navy in 1960. First seen partly in American English by at least 1938, the KISS principle states that most systems work best if they are kept simple rather than made complicated; therefore, simplicity should be a key goal in design, and unnecessary complexity should be avoided. The phrase has been associated with aircraft engineer Kelly Johnson. The term "KISS principle" was in popular use by 197 The acro...

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 9, 2019, 12:28am UTC](https://discourse.processing.org/t/how-to-fade-an-image-to-black-over-time/16100/8 "2019-12-09T00:28:08Z")

</div>

For fading to black:

- One method is to lower the alpha on an image with a black background, for example using tint as above
- Another is to create a separate transparent dark layer _on top of_ the image. This works well for mixing a lot of different content – images, lines, text, etc. – which all get faded the same by the darkening screen on top of them. It also doesn’t require a black background.
- Another is to manipulate the lighting settings in a P3D 3D environment – see the “Lights, Camera” section of the reference. [https://processing.org/reference/](https://processing.org/reference/)