How to fade an image to black over time

Processing Coding Questions
1

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?

1 Like
2

https://processing.org/reference/loadImage_.html
https://processing.org/reference/tint_.html

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

/**
 * 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

1 Like
3

Hello,

Resources:
https://processing.org/
https://processing.org/examples/ See transparency
https://processing.org/tutorials/ See Color
https://processing.org/reference/tint_.html
https://processing.org/reference/alpha_.html
https://processing.org/reference/fill_.html

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

image

Look up terms like opacity, transparency and alpha.

:slight_smile:

1 Like
4

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

5

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

6

I have a simple example here:

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:

colorMode() / Reference / Processing.org You may want to use RGB (default if not set)
frameRate() / Reference / Processing.org
millis() / Reference / Processing.org

Have fun!

2 Likes
7
1 Like
8

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/
1 Like