In the spirit of the Hallowe'en season, and keeping things spooky, we've used the Ably peer-to-peer game framework to build a digital, online “spirit board” — the original spiritualists' tool to help you communicate with the dead (or maybe just the ghosts in the machine). Let us pull back the curtain, and reveal... Ouijably!
The ouija (/ˈwiːdʒə/ WEE-jə, /-dʒi/ jee), also known as a spirit board or talking board, is a flat board marked with the letters of the alphabet, the numbers 0–9, the words "yes", "no", occasionally "hello" and "goodbye", along with various symbols and graphics.
It uses a planchette (small heart-shaped piece of wood or plastic) as a movable indicator to spell out messages during a séance.
Participants place their fingers on the planchette, and it is moved about the board to spell out words.
Spiritualists believed that the dead were able to contact the living and reportedly used a talking board very similar to a modern Ouija board at their camps in Ohio in 1886 to ostensibly enable faster communication with spirits.
—Wikipedia
How to use the Ouijably board
- Create a new board by typing a name into the input field.
- Share the link to the generated board with your f(r)iends.
- Ask the board a question.
- Watch as the answers are revealed.
How does a spirit board work?
The spirit board takes advantage of the "ideomotor phenomenon", the process whereby a thought or mental image brings about a seemingly "reflexive" or automatic muscular reaction, often of minuscule degree, and potentially outside of the awareness of the subject.
The idea is, that by posing questions to the board, the participants in the game reflexively and subconsciously (or perhaps at the behest of a spirit!) move the planchette around to spell out the answers to the questions being posed.
Thinking about how spirit boards work using the ideomotor phenomenon poses the question:
If the spirit board can make users involuntarily move their hands across a physical planchette, can we reproduce this effect with computer mice and gyroscopes? [Yes/No]
In principle, the effect should work in exactly the same way, with the users’ natural desire to "push" the planchette, replaced by their ability to control the digital recreation of one.
Curiosity never got anyone in trouble before, I'm sure… so of course we have to build it.
How does the app work?
The app is a client-side, progressive web app built in HTML, CSS, and Typescript. It uses realtime messaging to communicate between the users and is based on our peer-to-peer networking demo.
The markup
In the page there is a container element with a background image on it, this displays the board itself with all of the letters, numbers, and words (which we’ll call “characters” for brevity), as well as a decorative border. On top of the board is an SVG full of polygons which outline each of the characters. These polygons do collision detection in order to determine which one is in the planchette’s viewfinder.
The planchette itself is an HTML element with a background image. It is moved around the window with CSS transforms as messages come in from an Ably channel.
The messaging
When a user joins the board they are connected to an Ably Channel specifically set up for this purpose. On this channel they will be able to publish and subscribe to messages.
The app listens for mouse movement (or gyroscopic movement if the user is on a device such as a phone or tablet). When movement is detected, an event is raised and a message is published on an Ably Channel. This message is received by everyone using the board. These messages contain X and Y coordinates for the distance to move the planchette across the board. This way, every player’s planchette moves at the same time, by the same amount, creating a similar experience to a physical spirit board.
The functionality
The app lets users join a board and then monitors their mouse movements. It publishes messages when the user moves their mouse and it updates the planchette coordinates when it receives messages on the channel. It does some calculations to determine the user’s screen resolution, and therefore how far the planchette needs to move to arrive at the same location on every display. It also does calculations to ensure that the planchette cannot move off the board by setting maximum width and height boundaries on its movement. The app also has to measure the size of the planchette at the user’s screen resolution, as this will also resize and then use that in its calculations.
As the planchette moves, the app is doing collision detection using bounds of the polygons and the coordinates received on the Ably channel. If the coordinates are within the bounds of an SVG polygon then the app detects a collision and that letter can be “revealed”. To reveal a letter, the app moves the planchette so that its viewfinder center aligns with the center of the polygon. It takes a data attribute from the polygon to determine which character has been detected and then adds that to an HTML element which is animated with CSS to give a spooky reveal effect. If the user has the “speak” functionality enabled, then the app will also play audio which speaks the character out loud.
Can I see the code?
We’ve made the code for the Ouijably board open-source and you can fork it here: https://github.com/ably/ouija.
The repo contains a fully functioning spirit board web application. It has a very thorough README which covers how the app works in greater depth and how to run it both locally and in a production environment.
What do I need to run the web app?
- An Ably account and API key
- A Microsoft Azure Account for hosting on production
- To install the azure-functions-core-tools
- Node 12 (LTS)
- TypeScript + Snowpack (these dependencies will install from the package.json, you do not have to install them yourself)
Does it really work?
Do you believe in ghosts?
Happy Hallowe’en from all of us at Ably!
