p5.js imageMode() Function
The imageMode() function is used to set the image mode of an image. The image mode defines the position of the image in the canvas, by changing the way that the parameters given to the image() function are interpreted.
Syntax:
imageMode( mode )
Parameters: This function accepts a single parameter mode that defines the mode to be used. It can have the following values:
- CORNER: This mode interprets the second and third parameters given to image() as the upper-left corner of the image.
- CORNERS: This mode interprets the second and third parameters given to image() as the upper-left corner and the fourth and fifth parameters as the bottom-right corner of the image.
- CENTER: This mode interprets the second and third parameters given to image() as the center point of the image. Additonally, if the fourth and fifth parameters are specified, they are used as the width and height of the image.
Below example illustrate the imageMode() function in p5.js:
Example:
function preload() {
img = loadImage( 'sample-image.png' );
}
function setup() {
imageModes = [
CORNER,
CORNERS,
CENTER
];
i = 0;
currMode = imageModes[i];
createCanvas(600, 400);
textSize(22);
switchBtn = createButton( "Change imageMode" );
switchBtn.position(30, 400)
switchBtn.mousePressed(switchMode);
}
function draw() {
clear();
text( "Click on the button change the current" +
" imageMode" , 20, 20);
text( "Current imageMode: " + currMode, 20, 40);
rect(150, 150, 200, 200);
imageMode(currMode);
image(img, 150, 150, 200, 200);
}
function switchMode() {
if (i < imageModes.length - 1)
i++;
else
i = 0;
currMode = imageModes[i];
}
|
Output:
Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5/imagemode
Last Updated :
21 Aug, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...