Unable to Add Images to p5. [SOLVED]

Question

Everytime I add an image it comes up with the 'CrossOrigin' error. That is annoying but easy to work through. When I find a good image that can embed, it now comes up with weird error that I can only translate is that the image is for CSS not canvas. The worst part is, I am re-using old images from other codes that worked fine. So why this isn't working is beyond me. Here is an example:

https://code.sololearn.com/W6p426BU6IkS/?ref=app

Answer 1

your image() method under show() needs to start with a reference to the image. I think in this case sMan

Answer 2

No, I mean the 'water' object. I applied 'tint' to the 'show' method but it is applying to the image rather than the rectangle. I will comment the issue on the code.

Answer 3

Thanks

Answer 4

marjel101 last thing, do you know why the 'tint' method only works on the image rather than the liquid?

Answer 5

Thanks for the answer.

Answer 6

May be Coder | Arb Rahim Badsa Helps you.
They are great Coders in JS (p5)

Answer 7

Coder we're late😅

Answer 8

☕( ͡⚆ ͜ʖ ͡⚆)🐈 I think tint() is a method that can only be applied to images, not to other objects, and apparently it works globally on all images in your code, regardless of the location.
If you want the pink rectangle to be transparent you better change the fill to include an alpha value, for instance fill(255,192,203,128)
instead of using tint().

Answer 9

Is liquid a p5 method? I don’t see it in the reference...
https://p5js.org/reference/#group-Image