Wacky Wayfinder

• 

  A screenshot of the drawing step of the wayfinder

When we had heard the theme of "Odyssey", a recurring theme amongst our ideas was some form of wayfinder. Two ideas we had were a game that allowed you to draw a route in a graphical environment, and a web toy that would take an image input and (given start and end points) generate a route within this image. From this, we opted to merge the two concepts. The route finder and image input from the second, combined with the ability to draw your own obstacles.

To facilitate drawing on the screen with a mouse, we looked to using Fabric.js in a Svelte web app. Our prior experience with Svelte made the baseline JavaScript/TypeScript web implementation straightforward; however, Fabric.js and canvas web elements were an entirely new frontier for us. In combination with our uni experience in analysing graph data structures, this seemed like a fun foray nonetheless.

Due to our lack of experience and unfamiliarity with Fabric.js, in combination with a lot of Svelte and JS quirks, we hit many roadblocks in terms of conceptualising, prototyping, and implementation. We struggled with passing image data between the several stages of the route-finding program, neglected the core graph building and route-finding algorithms in favour of theorycrafting, and spent more time course correcting and (re)familiarising ourselves with the environment than expected.

From our efforts, we have come to learn several lessons. Ensure the biggest core functionality exists, derust ourselves on JS/TS, make sure each of us is on a solid baseline of experience, and further assess the viability of a project within our means before fully committing to it.

Built With

• fabric.js
• javascript
• svelte
• typescript