Play Animation within p5js/Hover Effect on Objects

p5.js Coding Questions
1

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

And the one I am currently working on for the animation and hover effect looks like this:
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!!

1 Like
2

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

3

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

2 Likes
4

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 )

2 Likes
5

Thanks for your help!!

1 Like