Feature Suggestion : Custom Viewport Coordinate Mapping

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

Start by reviewing p5.js core/environment/rendering and utilities APIs to understand how canvas coordinates are currently handled. Compare the proposed setViewport signature with existing API conventions and determine the required behavior across canvas sizes. Done means an agreed coordinate-mapping design that supports resolution-independent sketches.