# Play Animation within p5js/Hover Effect on Objects

**URL:** <https://discourse.processing.org/t/play-animation-within-p5js-hover-effect-on-objects/16306>\
**Category:** Coding Questions\
**Created:** [December 10, 2019, 11:07pm UTC](https://discourse.processing.org/t/play-animation-within-p5js-hover-effect-on-objects/16306 "2019-12-10T23:07:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![van326](https://avatars.discourse-cdn.com/v4/letter/v/a6a055/32.png) [@van326](https://discourse.processing.org/u/van326)\
**Post date:** [December 10, 2019, 11:07pm UTC](https://discourse.processing.org/t/play-animation-within-p5js-hover-effect-on-objects/16306/1 "2019-12-10T23:07:14Z")

</div>

Hello! Long story short, I am trying to have animations and audio play in a loop when the user clicks on certain objects. I have looked up the Coding Train videos and have gotten some help for most parts of my project, but the animation issue is what I’m really interested in fixing. Along with that, I want the user to be able to make the object hover when they pass by it so they know to click it (and clicking it will lead them to the animations).

_To be more specific, when the user clicks on one side of the screen on a particular object, a character’s bedroom is supposed to generate as a continuous animation with some background music (and it’s the same for the other side). The objects I am wanting to highlight are the stairs on the left and the photo frame on the right._

The project I had _before_ I tried putting in animation was this:  
[https://editor.p5js.org/van326/sketches/jYKzq74lt](https://editor.p5js.org/van326/sketches/jYKzq74lt)

And the one I am currently working on for the animation and hover effect looks like this:  
[https://editor.p5js.org/van326/sketches/7ztQ6E6is](https://editor.p5js.org/van326/sketches/7ztQ6E6is)

Does anyone here have any tips for what I’m doing wrong and how I could try to fix it? Thanks in advance!!

---

<div class="post-metadata">

**Author:** ![van326](https://avatars.discourse-cdn.com/v4/letter/v/a6a055/32.png) [@van326](https://discourse.processing.org/u/van326)\
**Post date:** [December 10, 2019, 11:17pm UTC](https://discourse.processing.org/t/play-animation-within-p5js-hover-effect-on-objects/16306/2 "2019-12-10T23:17:37Z")

</div>

Another issue that I forgot to mention is that the “loadImage” is not being defined, but that’s confusing because I don’t remember having to define it in previous projects

---

<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:** [December 11, 2019, 1:35am UTC](https://discourse.processing.org/t/play-animation-within-p5js-hover-effect-on-objects/16306/3 "2019-12-11T01:35:52Z")

</div>

> [@van326](#):
>
> Another issue that I forgot to mention is that the “loadImage” is not being defined,

That for loop block isn’t inside any function, so it runs before callback **preload()**.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 11, 2019, 2:11am UTC](https://discourse.processing.org/t/play-animation-within-p5js-hover-effect-on-objects/16306/4 "2019-12-11T02:11:13Z")

</div>

* * *

you might want to use menu:  
**/edit / tidy code** [shift][tab]

* * *

yes, add to the

> } line 59 move down to line 72

> line 56 change , to ;

\_\_

> line 62 / 66

```
imgs_dhalia_seq[i] = loadImage('sequences/Dhalia_Seq/Dhalia seq_'+i+'.png');

imgs_tyler_seq[i] = loadImage('sequences/Tyler_Seq/Tyler seq_'+i+'.png');

```

> line 71 no files

`// snds[i] = loadSound('audio/snd${i}.mp3');`

* * *

now for the hovering means you need a

- mouse over rectangle area ( and like change border style to show the OVER )

or possibly even a full button function ( can click on that area and remember it as a selection )

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/5hBxVwuAP)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![van326](https://avatars.discourse-cdn.com/v4/letter/v/a6a055/32.png) [@van326](https://discourse.processing.org/u/van326)\
**Post date:** [December 11, 2019, 4:21am UTC](https://discourse.processing.org/t/play-animation-within-p5js-hover-effect-on-objects/16306/5 "2019-12-11T04:21:31Z")

</div>

Thanks for your help!!