This week me and Kayla made a group assignment together.

https://editor.p5js.org/bettyz-mushroom/sketches/OpG3Xh9lf

Basically we both really love cat memes, so we were thinking about a simple game: when you put the mouse cursor on a certain area, a cat meme pops up. Then we think it’s better to have a layer of icons on top so people can choose easier.

Then we started coding!

The first and the most important part is to import pictures into P5js. I found this sketch https://editor.p5js.org/claesjohnson/sketches/f0huO1Y4h and a simple tutorial from The Coding Train, and Kayla imported all the images. I had to edit the cat memes to make them 200*200 pixels each and the icon pictures to png, but those were easy works.

Then, Kayla started to write all the codes. We drew the icons first, and for the layer underneath, we used if statements to set the area for the mouse cursor, to let the cat memes pop up. (I briefly measured the detailed icon sizes by repeatedly drawing a sample rectangle with different X and Y coordinates)

We wanted to add an animation for the fourth cat meme by using codes we learnt in class. At first it was not working well. I couldn’t remember the exact problem, I think it was the picture not coming back once x > width and only works once, if we wanted it to work again we have to re-run the code. But it was easy to debug and it works now. When the cursor is over the icon above, the meme pic appears and moves horizontally, and can bounce when x≥width or x≤200.

All in all it was a really simple project to make and we just wanted to use what we’ve learnt in class (but we really wanted to try loadImage). Even if we understood everything, we still encountered problems but in the end we solved them. Yay.