Application in Spatial Augmented Reality tutorial Game of life


Let’s build an application

You acquired the hardware and you want to see what kind of programs you can create. This tutorial will guide you through the steps for the creation creation of a simple yet complete SAR application.

[TODO] screenshot


  • Hardware: Nectar Hardware (Fab-lab hw or more).
  • Operating system: Win/OSX/Linux, Tested on Linux, manjaro.
  • Language: Processing
  • Inkscape, or another drawing Software.
  • A printer, some paper and cissors.
  • Colored stickers, and small 3D printed colorful objects.
  • Time required: ? hour(s).
  • Difficulty: medium.

Step 1: Project idea.

A good way to find inspiration is to look around what other people did. In the Processing community Dan Shiffman is a hero, and his youtube playlist about “coding challenges” is full of project ideas.

SAR projects have two diffent purposes:

  • Enhance a physical activity by adding digital elements.
  • Make digital content more interactive with tangible interfaces.

Here we are in the second case.

Name: Game of life.

The game of life is a popular simulation that is based on simple rules that are applied to a black and white grid.

Video ressources:

Step 2: paper prototype.

At this step, we organize and create a “view” of what the application could look like. Here I made a simple drawing:

The space is divided in at least two different spaces on the table:

  • View of the Game of Life.
  • User interface.

Step 3: Let’s code.

Choose the language.

Before going deep into the code, we need to choose the programming language ! At the time of this tutorial we have the choice between:

  • Processing, PDE.
  • JRubyArt (Processing ni Ruby)
  • Java.
  • Unity3D.

Here we choose to use standard Processing, as all of the examples are already in this language.

Create the project.

We will start from an example that has some features we want:

  • A table screen.
  • Touch and color buttons.

Here we copy the first-examples/SAR/gui to apps/GameOfLife, rename gui.pde to GameOfLife.pde and run it.

Creation and placement of the TableScreens

There are two different “screens”, or “windows” identified by the two pieces of paper in the photo above.

Let’s create them, and place them. Here is the LifeRenderer initial code:

public class LifeRenderer  extends TableScreen {
    public LifeRenderer(){
	super(initPos.x, initPos.y, rendererSize.x, rendererSize.y);
    void setup() {}
    void drawOnPaper(){
	// setLocation(63, 45, 0);
        background(250, 0, 200);

The LifeGui code is the same as GUI, except for the placement:

PVector initPos = new PVector(-200, -100);
PVector rendererSize = new PVector(200, 200);

public class LifeGui  extends TableScreen {
   // ...
    public LifeGui(){
	super(initPos.x + rendererSize.x + 20, initPos.y, 150, 140);
//.... Remove also the loadMarkerBoard instructions.

Match between the sizes of the paper and digital interfaces.

First implementation

During the creation of the application, you need to be able to try it as often as possible progress smoothly.

During this first implementation we create the game of life mechanics, the variable and methods to interact with it. These are mapped to the mouse and keyboard at first and will be mapped to the buttons and sliders at the next step.


int gridSize = 10; // 1 cm.
PVector nbElements = new PVector(rendererSize.x / gridSize,
				                 rendererSize.y / gridSize);
Conway2D gameOfLife = new Conway2D((int) nbElements.x, (int) nbElements.y); 
 void drawGameOfLife(){
	byte[] data = gameOfLife.getData();
	int w = gameOfLife.getWidth();
	int h = gameOfLife.getHeight();
	int k = 0;
	for(int y = 0; y < h; y++){
	    for(int x = 0; x < w; x++ ){
		byte d = data[k++];
		fill(255, 0, 0);
		if(d == 0){
		if( d == 1){
		rect(x* gridSize,
		     (float) gridSize-0.2f);


float nbTickPerSec = 1;
int lastTick;

void draw() {
    nbTickPerSec = (float) mouseX / 250;
    int now = millis();
    float tickFreq = 1f / nbTickPerSec;
    float tickEvery = 1000f / tickFreq;
    if((now - lastTick) > tickEvery){
	  lastTick = now;

void keyPressed(){
    if(key == 'g'){
    if(key == 'i'){

With this we can generate a GameOfLife, populate it with the g key and either iterate by pressing the i key, or moving the move on the left of the window.

Here is a video of this version:

Back to design.

I created a grid in Inkscape, printed it and taped it to the table:

It looks already much sharper !

The next step is the creation of the user interface, again in Inkscape then in the code…