Interaction

The Project (Preview works best on a computer)

1. Pauline following mouse

Moving the mouse around the screen, animated Pauline follows

2. Aquarium

Clicking the mouse button, fishes appear

3. Greeting based on time

Depending on the time of the day, a specific background color, saying, and an emoji appear

4. Mad smiley

Clicking the mouse button, the smiley gets mad

5. Ball bouncing around

A ball is randomly bouncing around the screen

In Reflection

As part of the Interaction project, we had to come up with five ideas for interacting digitally with the user, which was the most fun for me overall. For my ideas ‘Pauline following mouse’, ‘Aquarium’, ‘Greeting based on time’, ‘Mad smiley’, and ‘Thing bouncing around’, I created initial sketches using p5.js but focused particularly on the first idea and developed it in the second step. The aim was for a small, animated Pauline to follow the movement of the computer mouse. The challenges were, for example, inserting the Pauline GIF in the right size and then reacting to different directions with conditions and suitable GIFs. Unfortunately, only the animation of the right movement, the left movement, and the standstill have worked so far. Very helpful for me was an open-source code of a circle that follows the mouse, which I then customized. I have learned that it makes sense to ensure that the user is interactively involved, as it can make the use of a website much more exciting.