1 Introduction
This post describes the implementation of three mobile-first web games created using Processing, a simple tool for building interactive drawings. The games were designed to be played on smartphones and were part of a larger campaign called “Who Controls Your Brain,” directed at middle school children to teach them about the brain. The digital games were a part of this educational effort and tasked the children with various cognitive tasks. The project was paid for by the school service of the University of Copenhagen.
The games works best on smartphones and can be played here: https://rotendahl.dk/brainGames/ and the code is on github
1.1 About the project
The project was a freelance job for the university of Copenhagen’s School Service. It was part of a larger campaign called “Who controls your brain”, the campaign was directed at middle school children with the purpose of teaching them about their brains. These games were the digital part of the project and tasked them with various cognitive tasks.
1.1.1 The choice of framework
The kids were invited to a series of events where they would play them. We did not expect them to be able to install apps on their phones (Parental controls etc.) which meant that the games had to be web based. From my work in Coding Pirates I knew about Processing which is a simple way to create interactive drawings. A quick look at the documentation for processing reveals its main strength, the functions are few and basic enough that the learning curve is almost nonexistent. As an example the following snippet creates small circles in different colors based on the position of the mouse.
setup = function(){
size(400, 400);
framerate(30);
};
background(0, 0, 0);
draw = function() {
fill(mouseX, mouseY, 0);
ellipse(mouseX, mouseY, 50, 50);
};A programmer armed with the documentation can start building games at once and not focus on lengthy tutorials. The downside of processing is that it’s mainly made for educational purposes and interactive art. This gave the following problems:
Touch events are not natively supported, procressing only supports mouse clicks and can’t handle multitouch. This was mitigated by using the position of the mouse, for each frame the mouse position is reset so a change in position indicates a click. This is
It’s hard to get it to work in a responsive manner.
Processing was originally implemented in java and the port is not web first, leading to bad errors.
It’s Hard to interact with the DOM.
A way to get around some of these problems is to use this excellent extension which makes it responsive and mobile friendly.
Since I built my project the javascript version of processing has gotten a successor p5 which solves these problems.
1.2 The structure of a game
Each game starts with a html file that loads the framework and the css required to make it responsive, lastly it loads .pde files and creates a canvas
The next step is to load the images required using the preprocessing directive > /* @pjs preload="image1.jpg"; */
Using these directives it’s simple to create a loading screen and scale the images once they are loaded. The setup and draw functions are placed in the file code.pde which controls the game’s state and the core game logic. Each game has a file game.pde that contains the data structures and classes for each game.
1.2.1 The memory game
This game task the player to remember an ever increasing sequence of tiles. In the first level the user is shown three tiles numbered from one to three. After the timer runs out the numbers are hidden and the player must remember their order.
The game was made to show that we can “trick” our mind into remembering more information by storing it efficiently. First the kids had to check how they performed when trying to remember the positions of each tile. Afterwards they instead were told to remember the path and notice how their performance increased.
Implementation
The game’s logic starts with creating a grid of a tile class, which holds the position and value for each tile, it exposes methods for hiding/showing and drawing it self. The game randomly picks tiles corresponding to \(levelNumber + 2\) ranks them from \([1,levelNumber]\) and draws them.
The state loop in game.pde starts a timer and turns tiles when needed. When the player loses they are given the option of posting their score or trying again.
1.2.2 The “tabel” game
This game presents the player with at table that keeps scrolling down, at the bottom of the screen is the current “task” for the bottom row. The task can be picking the sum of two numbers, picking a number \(n\) such that \(3 \mid n\), etc. If the player fails a task the row goes red and one extra row will stay red for the rest of the game.
The goal of the game was to have the kids find a way of avoiding doing the actual computation and find a pattern that could solve the task, I.e \(5 \mid n\) can be solved by finding a number that ends in 5 or 0.
Implementation
The game creates 5 rows containing 6 instances of the tile class. The rows scroll down and when they hit the bottom of the screen they are moved to the top again. When a row is “reset” the numbers on the tile are changed so they continue the sequence from the row nearest the top that isn’t red. The non red row closets to the bottom is the active one that the current task should be performed on. If a task is completed the row turns blue and active row and current task is changed.
1.2.3 The reaction game
This game tests the players reactions and ability to perform simple cognitive tasks. It was inspired by the Batak board
The player has to hit a specified number of nodes in the graph, before the time runs out.