Ability to use mipmaps for images in WebGL/WebGPU

Increasing access

If you're dealing with user inputs via e.g. createFileInput, you may be getting images at a wide range of sizes. If you draw a really large image down to a small size, it ends up with poor antialiasing and a lot of moire patterns (left is a big image, right is sized closer to the target size it's drawn at):

This is a kind of common problem, but dealing with it (by enabling mipmapping for the image, which creates a pyramid of increasingly small textures, so that WebGL can then sample from the closest sized one) is quite difficult in p5, requires touching the underlying WebGL context and probably patching a number of our shaders, to the point where it's sort of infeasible for a non-expert to attempt it.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

Feature enhancement details

While supporting mipmaps would be good, it'd be probably bad for accessibility if it's on all the time, because it uses more memory. So this should probably be an opt-in setting you could set on a p5.Image.

It possibly also should only be on images, and not on videos or p5.Graphics because it's slightly expensive to create these, so stuff that animates would likely not be a good candidate for it?

Anyway, open to ideas for how best to add an API for something like this!