# Problem with cursor()

**URL:** <https://discourse.processing.org/t/problem-with-cursor/41558>\
**Category:** Beginners\
**Created:** [April 1, 2023, 11:08am UTC](https://discourse.processing.org/t/problem-with-cursor/41558 "2023-04-01T11:08:00Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ggultt](https://avatars.discourse-cdn.com/v4/letter/g/df788c/32.png) [@ggultt](https://discourse.processing.org/u/ggultt)\
**Post date:** [April 1, 2023, 11:08am UTC](https://discourse.processing.org/t/problem-with-cursor/41558/1 "2023-04-01T11:08:00Z")

</div>

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!

```auto
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);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 1, 2023, 11:22am UTC](https://discourse.processing.org/t/problem-with-cursor/41558/2 "2023-04-01T11:22:05Z")

</div>

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](https://p5js.org/reference/#/p5/cursor)

Chrisir

---

<div class="post-metadata">

**Author:** ![ggultt](https://avatars.discourse-cdn.com/v4/letter/g/df788c/32.png) [@ggultt](https://discourse.processing.org/u/ggultt)\
**Post date:** [April 1, 2023, 11:43am UTC](https://discourse.processing.org/t/problem-with-cursor/41558/3 "2023-04-01T11:43:06Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 1, 2023, 12:20pm UTC](https://discourse.processing.org/t/problem-with-cursor/41558/4 "2023-04-01T12:20:05Z")

</div>

Hello @ggultt,

> [@ggultt](#):
>
> Is there another way I can try?

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:

> **[reference | p5.js](https://p5js.org/reference/)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

`:)`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 1, 2023, 5:05pm UTC](https://discourse.processing.org/t/problem-with-cursor/41558/5 "2023-04-01T17:05:49Z")

</div>

maybe just

```auto
  imageMode(CENTER);
  image(img, mouseX,mouseY);

```

---

<div class="post-metadata">

**Author:** ![ggultt](https://avatars.discourse-cdn.com/v4/letter/g/df788c/32.png) [@ggultt](https://discourse.processing.org/u/ggultt)\
**Post date:** [April 1, 2023, 11:54pm UTC](https://discourse.processing.org/t/problem-with-cursor/41558/6 "2023-04-01T23:54:08Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 2, 2023, 10:53pm UTC](https://discourse.processing.org/t/problem-with-cursor/41558/7 "2023-04-02T22:53:46Z")

</div>

Hello @ggultt,

Consider using Create Graphics.

Example here:

> **[examples | p5.js](https://p5js.org/examples/structure-create-graphics.html)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

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.

`:)`