Open In App

p5.js pixelDensity() function

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The pixelDensity() function in p5.js is used to set the pixel scaling for high pixel density displays. The default value of pixel density is set to match display density. The pixelDensity(1) is used to turn off display density. The pixelDensity() function without arguments returns the current pixel density of the sketch.

Syntax:

pixelDensity(c)

Parameters: This function accepts single parameter c which stores the value of the scale.

Below programs illustrate the pixelDensity() function in p5.js:

Example 1: This example uses pixelDensity() function to display the pixel density.




function setup() {
      
    // Create canvas of window size
    createCanvas(windowWidth, windowHeight);
      
    // Set Pixel Density to 9
    pixelDensity(9);
}
   
function draw() {
      
    // Set the background color
    background(0, 200, 0);
    
    color("green");
      
    // Set the text size
    textSize(30);
      
    // Set the text align
    textAlign(CENTER);
      
    // Display text on the screen
    text("GeeksForGeeks!", windowWidth/2,
                windowHeight/2);
    text("PixelDensity is " + pixelDensity(),
         windowWidth/2, windowHeight/2 + 40);
   
}


Output:

Example 2: This example uses pixelDensity() function to display the pixel density.




function setup() {
      
    // Create canvas of window size
    createCanvas(windowWidth, windowHeight);
      
    // Set Pixel Density to 9
    pixelDensity(3);
}
   
function draw() {
      
    // Set the background color
    background(160, 200, 50);
      
    // Set the text size
    textSize(30);
      
    // Set the text align
    textAlign(CENTER);
      
    // Display text on the screen
    text("GeeksForGeeks!", windowWidth/2,
                windowHeight/2);
    text("PixelDensity is " + pixelDensity(),
         windowWidth/2, windowHeight/2 + 40);
   
}


Output:

Reference: https://p5js.org/reference/#/p5/pixelDensity



Last Updated : 10 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads