Loaded image transparency in p5.js?

domportera

Is there any way to change the alpha value of a loaded image in p5.js? I'm trying to make an image, loaded with loadImage, fade in and out. I've searched and haven't found a way. Any ideas? Thanks

GoToLoop

http://p5js.org/reference/#/p5.Image
http://p5js.org/reference/#/p5.Image/pixels[]

domportera

I've looked through those before and perhaps incorrectly assumed that you must first display the image onscreen to capture a p5 image, which would be cumbersome and could cause some unwanted visual effects. should I assume that's not the case?

GoToLoop

Canvas itself got its own pixels[]. If we wanna manipulate some p5.Image's pixels[], we gotta use the dot . operator over its reference. :-B

domportera

thanks! so how exactly would I turn an image file, such as a .png, into a p5.Image?

GoToLoop

• Use loadImage(): http://p5js.org/reference/#/p5/image
• Then you can use image() in order to display it in the canvas: http://p5js.org/reference/#/p5.Image/pixels[]
• And as said, manipulate its pixels via pixels[]: http://p5js.org/reference/#/p5.Image/pixels[]
• get() & set() are useful too: http://p5js.org/reference/#/p5.Image/get & http://p5js.org/reference/#/p5.Image/set

domportera

oh ok, so I don't need to change the loaded image into a p5 image, I can just manipulate the pixels by loading and setting a pixel array?

GoToLoop

oh ok, so I don't need to change the loaded image into a p5.Image...

Function loadImage() returns a p5.Image corresponding to the loaded file, just like createImage() does! :-B
http://p5js.org/reference/#/p5/createImage

domportera

got it, thanks! you've been a huge help