WEBGL background image bug

[saolda]

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] p5.strands
• [x] WebGL
• [ ] DevOps, Build process, Unit testing
• [ ] Internationalization (i18n)
• [ ] Friendly Errors
• [ ] Other (specify if possible)

p5.js version

1.4.0

Web browser and version

137.0.7151.104 (Official Build) (64-bit) (cohort: Stable)

Operating system

Windows

Steps to reproduce this

Steps:

1. Works fine without WEBGL turned on.

Snippet:

 function setup() {
        createCanvas(400, 400, WEBGL);
        //loadImage('./imgs/asteroidTexture.avif');
        test = new Test();
    }
    class Test{
        constructor(){
           this.background = './imgs/asteroidTexture.avif';
           this.loadedBackground = loadImage(this.background);
           background(this.loadedBackground);
        }
    }

Console: Error: [object Arguments]is not a valid color representation.

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[ksen0]

Thanks for reporting! Tagging @RandomGamingDev, @aferriss, @davepagurek, @lukeplowden, @perminder-17 stewards here to help triage this bug

[davepagurek]

I think we never got around to supporting the background(image) overload in WebGL. I think maybe there are two approaches here:

• One is to not support it in WebGL -- we treat WebGL background a little differently already, as for performance reasons it doesn't blend with existing content when using a semi-transparent value like 2D mode does, so we could just document that the image overload is 2D only too.
• Another is to implement the image overload, maybe turning it into the equivalent of this behind the scenes:

  clear()
  push()
  imageMode(CENTER)
  image(img, 0, 0, width, height)
  pop()
  

Personally, I lean slightly towards the former? I think using image() directly instead of background() might make it clearer how to handle cases where the background image isn't the exact size of the canvas, as we have overloads to manage scaling, cropping, etc, so we maybe that's where we should be directing users? I don't have a strong opinion though, open to feedback!

[saolda]

My 2 cents. I believe it is this guy: https://www.youtube.com/watch?v=yPWkPOfnGsw (possibly in another video I'm not sure). Who describes p5 as effectively having a 'button' whereby you can start doing 2D development and then 'switch' to 3D. This is a nice idea. Think real carefully if you want to support this or not, especially considering the high visibility of these videos and the core concept of p5 as being 'accessible' to beginners. I think if you can do it in 5 lines of code, why wouldn't you!? Perhaps document other approaches better suited to 3D?

[davepagurek]

It's definitely not a problem if we want to implement it! And maybe the answer here is to implement it in WebGL regardless. I'll add a help wanted label for anyone wanting to work on this!

The question I was asking is maybe a longer-term API/teaching decision: whether it leads to a better learning experience for everyone if, rather than teaching people to do a background image with background(yourImage), we teach people to do it with image(yourImage), both in 2D and 3D. Both seem similar to the end user on the surface, but the latter has higher capability to grow with your sketch. e.g. if you want to make a responsive sketch that works on all device sizes, the background approach does not have the ability to do anything but stretch your image, whereas image has CONTAIN and COVER modes to handle that already, and encourages thinking about multi-platform accessibility.

If we decide that leads to better outcomes, it could mean keeping the existing functionality for now but deprecating it, and in documentation for background, including links to the image reference examples for people who are interested in background images. @ksen0 and @limzykenneth, do you have any thoughts on that?

[limzykenneth]

@saolda I think you are paraphrasing Dan too much there, there is and always has been major differences between 2D and 3D renderers not just in p5.js but also in Processing, and what Dan would be implying is not around sketches being cross functional between 2D and 3D canvases but rather the ease of which one can start working with a 3D canvas from knowing about 2D canvas. I would also like to focus the discussion on API design if necessary here. It is fine to have API differences between renderers as we built out capability to have custom renderers in 2.x, some renderer may not be able to render images or text at all, or it may not support colors (only black and white like a dot matrix printer), the same argument or analogy of having a "button" won't work in those kind of cases and we can't prescribe that if your custom renderer can't render background(img) you are doing it in a beginner inaccessible way. Context matters and we should discuss in context first.

@davepagurek I think background(img) although is less flexible than image(img), it is relatively intuitive with a somewhat parallel to also CSS's background: url("./image.png");. It makes semantic sense to me at least. Is there any technical challenge in terms of implementing background(img) in WebGL?

I believe background(img) in 2D mode was a relatively later addition (added in the past year or two maybe, didn't check) so isn't too surprising it is not implemented in WebGL.

[davepagurek]

It makes semantic sense to me at least. Is there any technical challenge in terms of implementing background(img) in WebGL?

No major challenge there! And since we've documented this as existing, it's ok to add this. Possibly still worth mentioning in the docs that for more customized usage, one can look to image().

[limzykenneth]

@davepagurek Yes definitely worth to mention image() for more flexibility, maybe along side the defaults used in the implementation in terms of positioning and image mode.

[Helenbeyorn]

Hi! I’m a student learning JavaScript and interested in contributing to p5.js. I’d love to work on this issue to get started with open source and GSoC preparation. Could you please assign it to me or let me know if it’s okay to proceed? Thank you!

[davepagurek]

Thanks @Helenbeyorn! I'll assign this to you.

[davepagurek]

Hey @Helenbeyorn! Just checking in, are you still working on your PR? Let us know if you're still interested / if there's any extra assistance we can provide if you are. There's interest from others to work on this too, so if you're not, we can have others take over. If you could let us know if you're still working on it in a week that'd be great (not that it needs to be done by then if you're still interested, but just so we can reassign quickly if not.)

[reshma045]

Hi @davepagurek, if @Helenbeyorn is not working on this, can you assign this issue to me? I would like to work on this. Thank you.

[Helenbeyorn]

Hey @Helenbeyorn! Just checking in, are you still working on your PR? Let us know if you're still interested / if there's any extra assistance we can provide if you are. There's interest from others to work on this too, so if you're not, we can have others take over. If you could let us know if you're still working on it in a week that'd be great (not that it needs to be done by then if you're still interested, but just so we can reassign quickly if not.)

[Helenbeyorn]

@davepagurek I am not working on this right now,so you may pls assign it to someone else. Thank you

[davepagurek]

No problem @Helenbeyorn. Thanks @reshma045, I'll assign it to you!