Duration: 0:00

889 views

7

This code implements an image viewer in p5.js where the image can be zoomed in and out using the mouse wheel. The preload() function loads an SVG image, and the draw() function displays the scaled image centered at the mouse position. To center the image, the position is adjusted by subtracting half of its width and height (mouseX - w/2, mouseY - h/2). The mouseWheel() function detects scroll input and updates the scaleFactor accordingly. The constrain() function prevents extreme zoom values by limiting the scale factor between 0.1 and 5. Note that SVG images do not lose quality when scaled, unlike raster formats such as PNG. If scaleFactor becomes too small, the image may become difficult to see, so setting a lower bound (e.g., 0.1) is recommended. Also, keep in mind that the image is drawn from its top-left corner by default, so adjustments are necessary when centering.