Cursor as PNG image?

Question

I am trying to make my cursor be a PNG image that I have already preloaded in an art game I am designing on P5.js.
I have tried so many things, but it still won't work!
Can someone please let me know where to put the cursor function as well as what to put inside the parentheses? Thanks so much!

function preload() {

  uImg = loadImage('assets/ufo.png');

  rImg = loadImage('assets/asteroid.png');

  bImg3 = loadImage('assets/bimg3.jpg');

}

function setup() {

  createCanvas(1200, 600);

  mode = 3; //level 3 in game

  noCursor();

  
}

// END OF SET UP

function draw() {

   levelThree();

}

// END OF DRAW

function levelThree() {

  clear();

  if (mode == 3) {

    lost = false;

    score = 0;


    background(bImg3);

    cursor(uImg,mouseX,mouseY);  
  
  }
}

[According to the docs](https://p5js.org/reference/#/p5/cursor), you need to pass the URL, so just get rid of the `loadImage` and simply use url directly. — Kaiido, Apr 29 '21 at 04:20

score 0 · Answer 1 · answered Apr 29 '21 at 03:50

I think simply using image() instead of cursor() will do what you want. I don't know why, but I think that when using cursor() you can't input a p5.Image, you have to put a string of a URL to an image that exists on the internet.

Also, when using cursor(), the other two parameters should be between 0 and 31. They describe where the "active point" of the cursor is, relative to where the actual mouse point is.

score 0 · Answer 2 · edited Apr 30 '21 at 10:45

You could just do something like this:

let img

function preload(){
  img = loadImage('cursor.png')
}

function setup() {
  createCanvas(400, 400);
  imageMode(CENTER)
  noCursor()
}

function draw() {
  background(20); 
  image(img,mouseX,mouseY)
}

And you should put the option stuff in setup() so the imageMode() and fill() and idk rectMode()... in setup, though what ever you're going to draw multiple times in draw() and you should load images in preload, cause javascript doesn't reallly care if images are loaded in or not and callback functions are meh, preload is good in my opinion. I also don't think that you really need the assets in assets/image.png

And also why exactly do you have mouseX and mouseY in the cursor() at the end of your code snippet???

hope this is actually answering the right question...

Cursor as PNG image?

2 Answers2