Feature Suggestion : Custom Viewport Coordinate Mapping

[zakarialaoui10]

Increasing access

This feature would increase access to p5.js by making it easier to create resolution-independent sketches.

Most appropriate sub-area of p5.js?

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

Feature request details

The current p5.js coordinate system is pixel-based, which makes sketches dependent on canvas size and screen resolution. This presents challenges for Building responsive visuals that work well on different screen sizes

Maybe we can implement function like this : setViewport(xmin, xmax, ymin, ymax) that allow users to remap the canvas from : (0, 0, WIDTH, HEIGHT) to (xmin, ymin, xmax, ymx)

In this case, drawing becomes resolution-independent and semantically clearer. A call like :

setViewport(-10, -10, 10, 10);
line(-10, 0, 10, 0);

would always draw a horizontal line across the middle of the canvas, regardless of canvas resolution

[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.

For guidance on contributing, check out our contributing guidelines and other resources for contributors. 💬 If you have questions or need support, feel free to join the Processing Foundation Forum or visit our Community page. 📜 Please also review our Code of Conduct to understand our community standards. Thank You!

[limzykenneth]

I can imagine this to be situationally very useful, although I think it can be implemented as an addon library first, if not just to test out the idea itself and work out the desired API in a more flexible way.

[ombalgude]

I'm new to contributing and would love to take a shot at implementing this feature. I'll start working on it now! @zakarialaoui10 @limzykenneth

[menacingly-coded]

I would like to try solving this issue, @zakarialaoui10, @davepagurek, @perminder-17 can anyone assign this to me?

[perminder-17]

I would like to try solving this issue, @zakarialaoui10, @davepagurek, @perminder-17 can anyone assign this to me?

The main idea as @limzykenneth suggests:

I think it can be implemented as an addon library first, if not just to test out the idea itself and work out the desired API in a more flexible way.

Here's the docs for implementation for add-on libraries, https://p5js.org/contribute/creating_libraries/ , you can refer to it, thanks for your interest.