How to make a video/gif transparent on p5.js?

@brandy 

To make a video or GIF transparent on p5.js, you can use a combination of the createVideo() or createImg() functions and the alpha() function. Here's an example of how you can make a video transparent:

1. First, you need to create a canvas using the createCanvas() function:

1
2
3
4
5
6
7
8

let vid;

function setup() {
  createCanvas(400, 400);
  vid = createVideo('video.mp4');
  vid.hide();
  vid.loop();
}

1. Next, you can use the alpha() function to set the transparency of the video. Here's an example of how you can make the video half transparent:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

function draw() {
  background(255);
  vid.loadPixels();
  for (let i = 0; i < vid.pixels.length; i += 4) {
    let r = vid.pixels[i];
    let g = vid.pixels[i + 1];
    let b = vid.pixels[i + 2];
    let a = vid.pixels[i + 3];
    alpha(a / 2);
    stroke(r, g, b);
    point((i / 4) % vid.width, Math.floor(i / (4 * vid.width)));
  }
}

This code will draw the video on the canvas with half transparency. You can adjust the alpha value to make the video more or less transparent.

Remember, this code will only work if the video or GIF has an alpha channel (transparent background). If the video or GIF doesn't have an alpha channel, you won't be able to make it transparent on p5.js.