# Trying to display image (sprite) on mouseclick

**URL:** <https://discourse.processing.org/t/trying-to-display-image-sprite-on-mouseclick/23031>\
**Category:** Coding Questions\
**Created:** [August 4, 2020, 11:59am UTC](https://discourse.processing.org/t/trying-to-display-image-sprite-on-mouseclick/23031 "2020-08-04T11:59:49Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![killimon](https://avatars.discourse-cdn.com/v4/letter/k/49beb7/32.png) [@killimon](https://discourse.processing.org/u/killimon)\
**Post date:** [August 4, 2020, 11:59am UTC](https://discourse.processing.org/t/trying-to-display-image-sprite-on-mouseclick/23031/1 "2020-08-04T11:59:49Z")

</div>

Hi guys, I am new to p5.js and don’t know what I’m doing wrong. I am trying to display a sprite that I have created on a mouseclick. Unfortunately it doesn’t display. This also happens if use a basic image and not an animated sprite. If I just display the sprite or image in the draw function, it displays correctly.

My code looks like this:

```auto
let spritedata;
let spritesheet;
let animation = [];

function preload() {
    spritedata = loadJSON("assets/explosion/explosion.json");
    spritesheet = loadImage("assets/explosion/explosion.png")
}

function setup() {
    createCanvas(windowWidth, windowHeight - 4)

    let frames = spritedata.frames;

    for (let i = 0; i < frames.length; i++) {
        let pos = frames[i].position;
        let img = spritesheet.get(pos.x, pos.y, pos.w, pos.h);
        animation.push(img);
    }

}

function draw() {
    background('#fff');
}

function mouseClicked(event) {

    image(animation[frameCount % animation.length], event.screenX, event.screenY)

}

```

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [August 4, 2020, 12:33pm UTC](https://discourse.processing.org/t/trying-to-display-image-sprite-on-mouseclick/23031/2 "2020-08-04T12:33:35Z")

</div>

Hi,  
and welcome to the forum.

> [@killimon](#):
>
> ```auto
> function draw() {
> background('#fff');
> }
> 
> function mouseClicked(event) {
> 
> image(animation[frameCount % animation.length], event.screenX, event.screenY)
> 
> }
> 
> ```

So, mouseClicked eventhandler draws an image as supposed. But then draw() is called and background command covers it. Draw() is called 60 times a second so background() in it covers everything every 1/60th second.

I would move background to setup(). Then you would set background only once at setup. You could also call noLoop() function to prevent draw() function calls.

---

<div class="post-metadata">

**Author:** ![killimon](https://avatars.discourse-cdn.com/v4/letter/k/49beb7/32.png) [@killimon](https://discourse.processing.org/u/killimon)\
**Post date:** [August 4, 2020, 1:40pm UTC](https://discourse.processing.org/t/trying-to-display-image-sprite-on-mouseclick/23031/3 "2020-08-04T13:40:43Z")

</div>

Hi!

Thank you so much, this worked fine 🙂

Now the sprite is being displayed on the canvas but is not moving…would you know why?

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [August 4, 2020, 4:58pm UTC](https://discourse.processing.org/t/trying-to-display-image-sprite-on-mouseclick/23031/4 "2020-08-04T16:58:15Z")

</div>

Well I think it’s because mouseClick() event is called only when you click mouse, so image command is run only then. I don’t know how this command works.

> [@killimon](#):
>
> `image(animation[frameCount % animation.length], event.screenX, event.screenY)`

Let’s assume you wanted animation to start with mouse click and stop or pause with another click.  
You could then have

```auto
animate = False;

function mouseClicked(event) {
    if(animate) { //animate is True
       animate = False;
       noLoop(); //stops draw() loop
       background('#fff'); //clears the canvas
    } else { //animate is False
       animate = True;
       loop(); // start draw() loop
    }

```

the in draw() you would have the command to run the animation

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 4, 2020, 5:34pm UTC](https://discourse.processing.org/t/trying-to-display-image-sprite-on-mouseclick/23031/5 "2020-08-04T17:34:09Z")

</div>

> [@SomeOne](#):
>
> `animate = False;`

I believe you’re mixing up Python & JS syntaxes. 🐍  
In JS (Java as well) it’s `true` & `false`, not `True` & `False`: ☕

> **[Boolean - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)**
>
> The Boolean object represents a truth value: true or false.

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [August 4, 2020, 6:14pm UTC](https://discourse.processing.org/t/trying-to-display-image-sprite-on-mouseclick/23031/6 "2020-08-04T18:14:15Z")

</div>

> [@GoToLoop](#):
>
> I believe you’re mixing up Python & JS syntaxes. 🐍

That’s True (Capital intended). Last two languages I’ve coded with are Java and Python. Javascript is an occasional sidetrack when I want to do art to web.