Hi there -
I know that I can set the pixel dimensions in createCanvas - but I have no idea how to convert that information to inches or metric.
It seems like there’s a basic equation that involves taking the square root of the diagonal in inches, but in order to do that, don’t I need to know the number of inches anyway?
Can anyone share a simple way for gauging the actual measurement of what they do in P5.JS?
Hello @looplider,
The above is a hardware definition.
On my PC I have Windows settings scaling of 125% and often zoom my browser so this will not translate from a pixel in code to a pixel on monitor.
:)
Let’s take an extreme example. Imagine a display where each pixel is very large—like 10×10 inches. In this scenario, a 100×100 pixel image would be huge, measuring 1000×1000 inches (~25×25 meters).
Now, in everyday use, most screens have much smaller pixels. The key is to know the pixel density, usually measured in pixels per inch (PPI), a measure of how densely pixels are packed on a display panel. This information should be listed in the specifications of your device which you should be able to find online.
To find the size of your image in inches, divide the pixel dimensions by the PPI. For example, if your canvas is 800×600 pixels and your screen’s density is 100 PPI, the physical size of the image on the display will be 8×6 inches.
Important note: the pixelDensity() function in p5.js and Processing has a somewhat misleading name in that context since it doesn’t affect the PPI—which is a fixed physical property of your screen and cannot be changed—but deals with something called pixel scaling.
Many modern screens have a very high pixel density, and operating systems scale graphics so they appear at a reasonable size. For instance, on a high-density screen (sometimes called ‘retina’ or ‘HiDPI’), the system might use four physical pixels (arranged in a 2x2 grid) to display what p5.js interprets as a single pixel.
On a high-density screen, when you call createCanvas(100,100) in p5.js, it creates a canvas with an actual resolution of 200×200 pixels. However, to maintain the intended visual size of the canvas, p5.js styles it with CSS so that it appears as 100×100 pixels on the screen. Here’s a picture for proof:
The pixelDensity() function in p5.js controls this scaling process. For instance, pixelDensity(1) tells p5.js to render only the specified amount of pixels for the specified canvas size. This can result in a blurrier image on high-density displays because it doesn’t take advantage of the extra pixels available. However, this also reduces the amount of computation necessary to render the image since your machine doesn’t need to output as many pixels.
Hope this helps!
Some useful resources:
