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
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• 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]

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!