# Making images appear under mousePressed() function

**URL:** https://discourse.processing.org/t/making-images-appear-under-mousepressed-function/43252
**Category:** Coding Questions
**Created:** [November 19, 2023, 6:25am UTC](https://discourse.processing.org/t/making-images-appear-under-mousepressed-function/43252 "2023-11-19T06:25:11Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![bwowie](https://avatars.discourse-cdn.com/v4/letter/b/898d66/32.png) [@bwowie](https://discourse.processing.org/u/bwowie)
#### Post date: [November 19, 2023, 6:25am UTC](https://discourse.processing.org/t/making-images-appear-under-mousepressed-function/43252/1 "2023-11-19T06:25:11Z")

</div>

Hi! Very new to processing for my design class, but I’m trying to make an image appear under mousePressed() function. I have six total and I’ve gotten them to load when the mouse is pressed but I want to know how to make them stay when the mouse is released/appear one after the other and not simultaneously. Thank you for any help!

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [November 19, 2023, 9:56am UTC](https://discourse.processing.org/t/making-images-appear-under-mousepressed-function/43252/2 "2023-11-19T09:56:52Z")

</div>

Welcome to the forum 😄

I assume that you are using Java mode so the solution for one image is threefold

1. create a boolean global variable

```auto
boolean showImage = false;

```

1. in the draw method test this boolean and display the image if true

```auto
if(showImage){ 
   image(img,0,0);
}

```

1. in the mouseRelased method swap the state of `showImage`

```auto
void mouseReleased(){
  showImage = !showimage; // true > false ::: false >> true
}

```

---

<div class="post-metadata">

### Author: ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [November 19, 2023, 1:06pm UTC](https://discourse.processing.org/t/making-images-appear-under-mousepressed-function/43252/3 "2023-11-19T13:06:21Z")

</div>

Hi

Look at this library

> **[GitHub - hirschandmann/image-sequence-player](https://github.com/hirschandmann/image-sequence-player)**
>
> Contribute to hirschandmann/image-sequence-player development by creating an account on GitHub.

Tips loading image

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/8085/i-display-images-in-sequence-but-i-see-only-the-last-one-why.html)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

---

<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: [November 19, 2023, 8:03pm UTC](https://discourse.processing.org/t/making-images-appear-under-mousepressed-function/43252/5 "2023-11-19T20:03:23Z")

</div>

Welcome to the forum!

It’s always good to show your code so we can spot errors.

**My approach**

So in the mousePressed () function it makes no sense to show an image since this function is only called once briefly when the mouse is pressed.

So we need to set an integer variable and increase it in mousePressed ().

Before setup () write `int imageNumber=0;// def`

In mousePressed (): `imageNumber++;//inc`

in draw() we show the images so they are displayed permanently.

We do so by evaluating imageNumber:

```auto
if(imageNumber==0) image(...); // eval 
else if(imageNumber==1) image(...);

```

etc.

**Tip**

In mousePressed when imageNumber \>5 say  
`imageNumber=0; //reset`

**Remark**

There is also a variable mousePressed that is inbuilt and is not a function.

Confusingly both have the same name but behaving differently.  
In our case we want to use the function. In the reference you can recognize the function by the () because they show you it’s a function and not a variable.

So mousePressed() is the function and  
mousePressed is the variable.

---

<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: [November 19, 2023, 10:28pm UTC](https://discourse.processing.org/t/making-images-appear-under-mousepressed-function/43252/6 "2023-11-19T22:28:11Z")

</div>

Hello @bwowie,

Lots or resources (tutorials, references, examples, etc.) here:

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

This one is useful and explains events such as `mousePressed()`:  
[https://processing.org/tutorials/interactivity](https://processing.org/tutorials/interactivity)

I encourage you to look up the reference and an example for each element of your code:

- [Variable Scope / Examples / Processing.org](https://processing.org/examples/variablescope.html)
- setup()
- draw()
- mousePressed()
- And so on…

> [@bwowie](#):
>
> I have six total and I’ve gotten them to load when the mouse is pressed

Can you share a snippet of code to show this?  
_I do not need to see your entire code._

`:)`
