Problem with cursor()

p5.js Beginners
1

Hello!

I’m struggling with the cursor function,
I was wondering the reason why the cursor didn’t change.

I thought p5.js allows the file extension including .png; Is there anything I did wrong?

Thank you so much!

let img;
let minT = 3;
let maxT = 7;

function preload() {
  img = loadImage("data/sheep.png");
}

function setup() {
  createCanvas(600, 400);
  background(83, 145, 101);
  noStroke();

  for (let y = 20; y < 400; y += 20) {
    for (let x = 20; x < 600; x += 20) {
      let r = random(minT, maxT);
      fill(157, 192, 139);
      triangle(x, y, x - r, y + r, x + r, y + r);
    }
  }
}

function draw() {
  cursor(img);

  let randomD1 = random(15, 30);
  let randomD2 = random(5, 15);
  let randomX = mouseX + random(-10, 10);
  let randomY = mouseY + random(-10, 10);
  if (mouseIsPressed) {
    fill(102, 90, 72);
    square(mouseX, mouseY, randomD1);
    fill(159, 135, 114);
    square(randomX, randomY, randomD2);
  }
}
2

hello,

here is the reference:

If you are trying 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.

see reference | p5.js

Chrisir

1 Like
3

I see, thank you so so much.

I just wanted to make a sheep eating grass, so I think the pointer should be bigger than the recommended size; Is there another way I can try?

4

Hello @ggultt,

You can display an image at the location of mouseX, mouseY.

There is a way to turn the cursor off as well.

The p5.js references will help with above:

:)

2 Likes
5

maybe just

  imageMode(CENTER);
  image(img, mouseX,mouseY);
6

Thank you so much for the comment!

But I wanted to use the brown random squares as a drawing paint,
so I think I can’t see the brown paint when I put the background and the image on the draw() function.

Is there any way I can try?
Thank you so much for answering my awesome question, Awesome people!

1 Like
7

Hello @ggultt,

Consider using Create Graphics.

Example here:

You can paint in the graphic offscreen and then display it.
You can then display an image on top of that.

Give it a try and come back if you need more help.

:)