# How to change image on mouse click

**URL:** <https://discourse.processing.org/t/how-to-change-image-on-mouse-click/29692>\
**Category:** Coding Questions\
**Created:** [April 27, 2021, 9:47pm UTC](https://discourse.processing.org/t/how-to-change-image-on-mouse-click/29692 "2021-04-27T21:47:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ccotto](https://avatars.discourse-cdn.com/v4/letter/c/ee7513/32.png) [@ccotto](https://discourse.processing.org/u/ccotto)\
**Post date:** [April 27, 2021, 9:47pm UTC](https://discourse.processing.org/t/how-to-change-image-on-mouse-click/29692/1 "2021-04-27T21:47:41Z")

</div>

How do I change an image (of fruit) each time the user clicks on it with their mouse? This is for a drawing app where the user selects ‘brushes’ to draw on the screen with their mouse.

```auto
/* global createCanvas, resizeCanvas */
let fruit = [];
let idx;

function preload () {
  window.setupMenuLogic()
  fruit = loadImage('/images/fruit.png');
  for (let i = 0; i < 5; i++) {
    fruit[i] = loadImage('/images/fruit.png');
  }
}

function setup () {
  createCanvas(window.innerWidth, window.innerHeight);
}

function draw () {
  const selected = window.settings.selectedBrush
  if (selected) {
    const brush = window.brushes[selected]
    brush.draw()
  }
}

function windowResized () {
  resizeCanvas(window.innerWidth, window.innerHeight);
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [April 27, 2021, 10:07pm UTC](https://discourse.processing.org/t/how-to-change-image-on-mouse-click/29692/2 "2021-04-27T22:07:31Z")

</div>

Hi @ccotto ,

Welcome to the forum! 😉

For this, you’ll need the [`mousePressed()`](https://p5js.org/reference/#/p5/mousePressed) function to check if the user is pressing a mouse button.

After the user clicked, you need to check all your fruit brush images and detect if the mouse entered one of them. If so, change the current brush.

Are you drawing them currently?

Also you can think about what data you need to keep track in order to achieve that.

Are you comfortable with [object oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming)? Because it’s really going to help you when building your program 😋

> Note that in JavaScript, you don’t need to call `window.something` every time since the default scope is already the global window object so you can omit it.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 27, 2021, 10:30pm UTC](https://discourse.processing.org/t/how-to-change-image-on-mouse-click/29692/3 "2021-04-27T22:30:12Z")

</div>

In case you are familiar with HTML/CSS, it may be easier to use `createImg` to load images as `<img>`  
[https://p5js.org/reference/#/p5/createImg](https://p5js.org/reference/#/p5/createImg)

The advantage is that let’s say you load an image as `const img = createImg(...)`, then you can add a callback like `img.mousePressed(function() {...})` which is triggered only if you click on the image (so you don’t have to test if the cursor is on the image or not).

---

<div class="post-metadata">

**Author:** ![ccotto](https://avatars.discourse-cdn.com/v4/letter/c/ee7513/32.png) [@ccotto](https://discourse.processing.org/u/ccotto)\
**Post date:** [April 27, 2021, 10:56pm UTC](https://discourse.processing.org/t/how-to-change-image-on-mouse-click/29692/4 "2021-04-27T22:56:13Z")

</div>

@josephh @micuat  
It may make it more clear to see what the app in progress looks like:

> **[netArtware](https://net-art-and-cultures.github.io/net-artware-v2/)**
>
> an experimental online drawing application by students at the School of the Art Institute of Chicago.

I want it to add a new image of fruit each time the user clicks the mouse.

This is my fruitStamp.js file under the brushes folder in Atom:

```auto
/* global mouseIsPressed, image, mouseX, mouseY */
let fruit = [];
let idx;

window.brushes.fruitStamp = {
  name: 'fruit stamp',
  draw: function () {
    if (mouseIsPressed){ 
    image(fruit, mouseX, mouseY, 100, 100)
    }
  }
}

```

Screenshot:

 ![Screen Shot 2021-04-27 at 5.49.21 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/35ed631cec0568399bedf7689a5a5df07aa0e3a9.png)

This is my main.js file:

```auto
/* global createCanvas, resizeCanvas */

function preload () {
  window.setupMenuLogic()
  fruit = loadImage('/images/fruit.png');
  for (let i = 0; i < 5; i++) {
    fruit[i] = loadImage('/images/fruit.png');
  }
}

function setup () {
  createCanvas(window.innerWidth, window.innerHeight)
}

function draw () {
  const selected = window.settings.selectedBrush
  if (selected) {
    const brush = window.brushes[selected]
    brush.draw()
  }
}

function windowResized () {
  resizeCanvas(window.innerWidth, window.innerHeight);
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [April 27, 2021, 11:50pm UTC](https://discourse.processing.org/t/how-to-change-image-on-mouse-click/29692/5 "2021-04-27T23:50:55Z")

</div>

> [@ccotto](#):
>
> ```auto
> for (let i = 0; i < 5; i++) {
> fruit[i] = loadImage('/images/fruit.png');
> }
> 
> ```

Why do you load the same image 5 times?

---

<div class="post-metadata">

**Author:** ![ccotto](https://avatars.discourse-cdn.com/v4/letter/c/ee7513/32.png) [@ccotto](https://discourse.processing.org/u/ccotto)\
**Post date:** [April 28, 2021, 12:08am UTC](https://discourse.processing.org/t/how-to-change-image-on-mouse-click/29692/6 "2021-04-28T00:08:24Z")

</div>

I want it to be 5 different images @TfGuy44

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [April 28, 2021, 12:12am UTC](https://discourse.processing.org/t/how-to-change-image-on-mouse-click/29692/7 "2021-04-28T00:12:32Z")

</div>

Then you should load five different images. If you name the images fruit0.png to fruit4.png, you can use the loop variable, `i`, in the name of the file you’re loading.

Then you just need the index of the image that you’re drawing to change.

You code could just be:

```auto
PImage fruits = [];
int current_image = 0;

void setup(){
  size(600,400);
  for( int i = 0; i < 5; i++){
    fruits[i] = loadImage("fruit" + i + ".png")
  }
}

void draw(){
  background(0);
  image( fruits[current_image], 0, 0 );
}

void mousePressed(){
  current_image++;
  current_image %= fruits.length;
}

```

Untested code, YMMV.