Magnified Search: Where is Wally?
"Where's Wally" is a project I created for an introductory programming class. In this class, we were assigned the task of creating a JavaScript script that manipulates the Document Object Model (DOM).
For my project, I created a 'simple' search puzzle, where the goal is to find all of Wally's friends in an illustration. You can search the image by dragging your mouse over it, and a 'magnifying glass' with a zoomed-in image will appear. Once you find a target, you can click on it to check it off the list.
My goals and duration:
"My goal as a designer in this project was to create an interactive version of 'Where's Waldo' on the web. I worked on this project for a total of 1 month. My aim was to do something a little extra for my first real project in JavaScript because I believe that the best way to learn is by diving right in."
The Process:
While creating this project, I had to go through several steps. Firstly, I had to figure out how the canvas works and how to project an image onto it. This was relatively easy to achieve. However, the most challenging part came next, which was finding a way to make the image interactive. I immediately came up with the idea of allowing users to zoom in and out with the mouse scroll wheel and swipe to move the image. This worked well, but I encountered a significant problem: I couldn't make the "buttons" work because they didn't move along with the image swipe. So, I had to come up with an alternative solution. I decided to use a different approach, which involved a magnifying glass that users could move over the image, with an enlarged view inside it. I accomplished this by drawing two canvases. The first canvas was visible to the user and displayed the main image, while the second canvas remained invisible and contained the zoomed-in image that was only visible within the magnifying glass. With this setup, I was able to make the buttons functional because they didn't need to move and remained in the same position. Towards the end of the project, I added some finishing touches, such as an explanation screen and a win condition for when all the targets had been found.
If you'd like to try it for yourself, you can access it here. Please note that it might not work well on smaller or larger screens as it was designed for a 1080p screen with no image scaling.
Try it here!