Background Alpha

[Crashnorun]

Hi, I'm new to P5 but familiar with Processing, and this issue seems to be existent in both environments. When I use the background() command and apply an alpha, the value doesn't really do anything. According to this link: https://p5js.org/reference/#/p5/background the alpha value is meant to be between 0-100 and apply a level of transparency, but it doesn't seem to work. Regardless what value I put for alpha, I can never get transparency. My workaround for this was to just draw a rectangle in the back and give it a fill color with an alpha value. This issue isn't a priority but would be nice to have it functioning.

All in all great job, P5 & processing are amazing!!

[Crashnorun]

Please disregard my issue, I was able to get it to function as stated in the reference documentation.
My apologies.

[arphenlin]

I have the same problem about alpha of background(). Below is my code, I don't know what's wrong with it.
Can you give an example? Thanks!

var bg;
function setup() {
  bg = loadImage('assets/bg.png');
  createCanvas(1000, 1000);
}

function draw() {
  background(bg, 100);  // the [alpha] argument doesn't work here!
}

[limzykenneth]

Hi @arphen, are you trying to draw an image as the background? If so you should use image() to draw the loaded image directly onto the canvas instead of using background, as that accepts only color values.

[arphenlin]

Hi @arphen, are you trying to draw an image as the background? If so you should use image() to draw the loaded image directly onto the canvas instead of using background, as that accepts only color values.

I can use image() to draw an image as the background. However, it doesn't support transparency effect.

[limzykenneth]

@arphen You can either directly load in a png image with transparency already baked in or you can go through the pixels[] array of the image and set the individual pixels to have the alpha value you wanted. If you still want an easier way to do this, do open a new issue.

[paulcanning]

@limzykenneth from the documentation https://p5js.org/reference/#/p5/background

A p5.Image can also be provided to set the background image.