The cursor() function in p5.js is used to set the cursor to a predefined symbol or an image or it makes visible if already hidden. To set an image as the cursor, the recommended size is 16×16 or 32×32 pixels. The values for parameters x and y must be less than the dimensions of the image.
Syntax:
cursor(type, x, y)
Parameters: This function accepts three parameters as mentioned above and described below:
- type: This parameter stores the type of cursor like ARROW, CROSS, HAND, MOVE, TEXT and WAIT Native CSS properties: ‘grab’, ‘progress’, ‘cell’ etc. External: path for cursor’s images (Allowed File extensions: .cur, .gif, .jpg, .jpeg, .png).
- x: This parameter stores the horizontal active spot of the cursor.
- y: This parameter stores the vertical active spot of the cursor.
Below program illustrates the cursor() function in p5.js:
Example: This example uses cursor() function to display the cursor.
function setup() {
// Create canvas
createCanvas(400, 400);
// Set the text size
textSize(40);
// Set the text alignment
// to center
textAlign(CENTER);
} function draw() {
} |
Output:
Reference: https://p5js.org/reference/#/p5/cursor