Paper and Game presented in
CHIPLAY ‘25
foster embodied cognition + spatial strategy
make digital systems more intuitive by leveraging familiar artifacts
Keywords
Tools
Timeline
Objective
Figma, p5.js, Python, Arduino, Premiere Pro
3 months
Tangible User Interfaces (TUI)
Embodied cognition
Digital Game Design
Creative Coding
Interaction Design
Playtesting
To explore how physical actions with familiar objects like playing cards could be given digital meaning to create a more natural, intuitive, and collaborative gameplay experience.
Research & Ideation
First Prototype
second iteration Prototype
Process
Playtesting
Final Game Development
Playtesting
Final Showcase at CHIPLAY
A tangible, collaborative game where players physically balance a virtual raft to trap a crab, blending hands-on interaction with real-time digital feedback.
Research & Ideation
In an era of screen-based isolation, how can we make digital gaming more
The big question
social, intuitive, and physical?
Why Cards?
Tactile satisfaction in holding, shuffling, and placing a card.
Simple, tangible objects you can hold and move.
Carry hidden information that our game's digital world can interpret.
First Concept
Elements
Proposed Set-up & Mechanism
The cards represent weight according to their hierarchy. Eg, a 6 of any suite would be heavier than a 5 of any suite.
Physical cards as weights interacting with the game board divided into directional zones to balance a digital disk carrying a ball.
Disk with the eight directions to assist with placement of the weights.
The disc tilts according to the weights(cards) put on the board and the ball moves along it.
The disc has a curved surface to keep the ball from falling out.
Stacking cards will add on the weight.
x2/”right”
x1/”left”
y1/”right”
y1/”left”
First Prototype
Elements
Front depicts and objects with its corresponding heaviness value. Back of each card has a QR with the weight value stored.
Each piece of the gameboard holds a directional value and holds a certain weight, to which the raft directly responds.
Digital screen placed in the center of the board, displaying the digital raft and a crab on top.
Cards
Gameboard
Raft
Gameplay Loop
The game starts with the crab appearing at a random position on the raft.
Start
Card Placement
The player draw cards from the deck, and places at any of the eight directions.
The system scans the card and position.
Detection
The raft tilts, and the crab moves off-center if imbalanced.
The crab returns to center if perfect balance is achieved.
Feedback
The rounds repeat with new card draws and crab reposition.
Repeat
Phone camera captures the cards placed on the game board.
IP WebCam streams phone camera.
OpenCV detects and localizes QR codes.
Spatial location of code determines its directional zone.
Python pyzbar appends and updates the position totals, reflecting in p5 sketch
IPAD →Display
PLAYER MAT →Direction detection
→ zone distribution using pyzbar
PLAYER MAT →Direction detection
→ zone distribution using pyzbar
card detected by camera using QR
displaying
data sent to laptop (value+direction)
appends the data
PHONE →Camera, Image detection through OpenCV
Laptop/Mac → Data Transfer from phone to Ipad using python
Playtesting
Play-test Observations
Reversible actions
Real-time strategy development
Longer, more thoughtful turns
p5.js output in html
python backend
QR code scanning & appending
6
test rounds
12 participants
Swapping emerged naturally as a better and more strategic mechanic.
Arduino Mega
Esp 2866
Game board
Storage unit
Cards
MFRC522 (RFID)
Final Prototype
Updated Mechanics
Stack cards to create heavier weight
Swap cards to change the overall balance
Camera Detection and QR Codes
RFID Readers and Arduino
Swap the objects already on the raft to tilt the raft in desired direction
Net weight stays the same
More margin for error correction
Reusing same weight resources: game can go on
QR at the back → OpenCV → JSON string. → Websocket → p5 js sketch
Stack objects from your collection one over the other to tilt the raft
Net weight increases each turn
Less margin for error correction
Limited weight resources: game can end regardless of the win condition when weights get over
Back
Front: depicting weight
RFID Tag between the layers
Gameplay Screen Loop
Shuffle and place the cards face down on the direction zones
The initial tilt of the raft determines where the crab starts
Crab moves according to the net tilt of the raft as the cards are swapped
The boat reaches a correct level of tilt that traps the crab in the center.
starting state
→
→
game states 1,2...
(GS1,GS2,)
ending state
pick 2 cards
SWAP!
see crab movement
Coding & Hardware overview
Arduino
Bridge between Arduino and sketch.js
Allots value to RFID cards: weight (1-8)
Allots value to RFID sensors: directional zones (N, S, NE, SE etc)
Both values read and converted to JSON
p5.serialport
p5.js sketch
The code for visual (js and html)
Updates raft tilt based on the JSON
Gravity module for raft tilt
Internal map: live updates from the arduino data in the zone weight map.
The hardware is stored inside the box connected to the boards
The iPad gets fixed in the center
Embodied Cognition
via spatially direct mapping
Replayability
of digital games
Social
Co-presence
of board games
thank
you!
