Use a penguin avatar to navigate my personal website

TL;DR: You can now use a penguin avatar to navigate my website. To do so, press the “p” key on your keyboard. A penguin will appear on the page. This penguin has a special power: when it hovers over a link, the penguin clicks the link. To control the link, use the WASD keys on your keyboard (W for up, S for down, A for left, and D for right).

Here is a demo of the feature in action:

Below, I talk about how this feature works.

This weekend, I attended IndieWebCamp Brighton. At IndieWebCamp events, the first day is reserved for interactive sessions in a BarCamp style. In the morning, everyone proposes topics, giving priority to new participants. Then, throughout the day, sessions are held on those topics. The first day is a great place to spark your imagination and come up with ideas of things to do on your personal websiote.

On the second day, we have the opportunity to work on our own projects. The day before, I was somewhat stressed about what I could make. Then, one idea came to mind: I wanted to give superpowers to the secret penguin on my website.

For the last month, there has been a Club Penguin penguin avatar hidden behind my website. You could control it with WASD. I built this for fun: a little easter egg for those to whom I showed the penguin to play. Indeed, personal websites are a place to have fun. And if the fun involves penguins, even better!

I thought about adding a feature where the penguin could click on links. I knew, roughly, how to do this:

1. I would keep my existing logic that moves the penguin by 1% or -1% from the top and left attributes of the page, depending on the direction in which the user wants the penguin to go.
2. Write some logic that checks when a penguin is over a link.
3. Click on the link if the penguin is over the link.

To implement this feature, I used JavaScript. Let’s walk through this step by step.

Moving the penguin

First, I added a penguin image to the page. By default, this penguin is in the centre of the page. If you hold down the W, A, S, or D keys long enough, you will see the penguin appear at the side of the page. To move the penguin, I set a keydown listener that changes the position of the penguin incrementally:

var penguin = document.getElementById('penguin');

document.addEventListener('keydown', function(event) {
    if (event.key === 'w') {
        penguin.style.top = parseInt(penguin.style.top) - 1 + '%';
    }
    if (event.key === 'a') {
        penguin.style.left = parseInt(penguin.style.left) - 1 + '%';
    }
    if (event.key === 's') {
        penguin.style.top = parseInt(penguin.style.top) + 1 + '%';
    }
    if (event.key === 'd') {
        penguin.style.left = parseInt(penguin.style.left) + 1 + '%';
    }
});

With this code, I had a waddling penguin. I gave the penguin a z-index: -1 attribute to make sure it appears behind the main section of content. The penguin can only be seen when it is away from the main page.

But, this was not practical for clicking links. If the penguin was in the middle of the page, it may automatically click a link. Thus, I decided to write logic that triggers the penguin clicking mode:

document.addEventListener('keydown', function(event) {
  if (event.key === 'p') {
      penguin.style.left = '5%';
      penguin.style.top = '5%';
      penguin.style.zIndex = 10;
  }
});

In this code, I set the z-index of the penguin to be 10 and move the penguin to the top left corner of the page when the p key is pressed. This value will be important in the next step. I decided that when z-index is equal to 10, I could have logic that allows the penguin to click links. Otherwise, the penguin remains in the centre of the page and can still waddle around in the background.

Allowing the penguin to click links

So far, we have:

1. A penguin that can move, controlled by the WASD keys, and;
2. A p control key that, when pressed, moves the penguin to the top left of the page. Pressing this key sets the z-index of the penguin to 10, which is used to determine if the penguin can click links.

There was one piece missing: allowing the penguin to click links.

For that, I used a setInterval function that iterates over every link on the page. This function runs every 100ms, until the user leaves the page. If the penguin is intersecting with any link, the link is clicked. The link is not clicked if there is an onclick attribute set, or if the z-index of the penguin is not equal to 10.

var links = document.getElementsByTagName('a');

setInterval(function() {
    for (var i = 0; i < links.length; i++) {
        var link = links[i];
        var linkRect = link.getBoundingClientRect();
        var penguinRect = penguin.getBoundingClientRect();

        if (penguinRect.top < linkRect.bottom && penguinRect.bottom > linkRect.top && penguinRect.left < linkRect.right && penguinRect.right > linkRect.left && penguin.style.zIndex == 10) {

            if (link.onclick) {
                return;
            }

            link.click();
        }
    }
}, 100);

There may be more efficient ways to implement this feature. If you know of any, please let me know!

Here is a demo of the code in action, showing the penguin avatar moving. When the penguin hovers over a link, the user is taken to the new page:

Conclusion

Personal websites are a place to be creative, whimsical. Above all else, you can be you. My code above may be a starting point for me to explore more interactive ways to interact with my personal website.

This project is part of a longer thread of thought on the question: what paradigms of interacting with the web could be explored further? I have previously thought about using computer vision to allow for gesture recognition; if you move your hand up or down, you could control the page. But, such systems require relatively significant compute power, not ideal for every day interaction. I have used voice to control navigation on web pages. Now, I am using an avatar.

After playing around with the penguin for a while, it feels like a much more engaging way to interact with a website. Whereas you can click a link in a second, the penguin takes longer to waddle. You need to focus on moving the penguin, lest you end up on the wrong page because the penguin waddles over the wrong link. It’s a moment to take a break; not a replacement for clicking, but a delightful supplementary paradigm.