Design Lab: Interactive Hardware & Software Demo Projects
A series of interaction design conceptual projects testing new design inspiration while exploring the capability of hardware x software
The page is currently under development, with more details being added – but you are more than welcome to find below a short introduction for each project. Have fun exploring!
Project A - Hogwarts Magical Gallery
The idea was to create a virtual gallery of Hogwarts portraits, where the fans of Harry Potter can explore and navigate through the life stories of different characters in that wizarding world, in a more interesting and novel way.
Hence, I created a simple GUI to present the users with a wall of magical portraits, where they can select any specific portrait that they are interested in using the left and right buttons on hardware. They can also place their finger on a magic phototransistor to access a live video biography of the character that portrait belongs to.
This was inspired by the Pensieve in Harry Potter, which is a magical device used to review any stored memories of a person, and it allows memory to be viewed from a non-participant, third-person view. In my project, the user can also have control of how long they want to view that person’s life story using their fingertips.
Hardware Components
• 1 x Arduino board
• 1 x Phototransistor
• 3 x 10k Ohm resistors
• 2 x Buttons
• n x Electronic cables
Software Used for Coding & Communication
• Arduino IDE
• P5. serialcontrol
• Visual Studio Code (HTML, P5.js)
Interaction Overview
As can be seen from the flow chart above, a user firstly approaches the hardware connected to a computer via USB cable (part A), once the GUI website is open they will see the virtual portrait gallery, with the leftmost portrait selected by default (part B). They can press the left/right button(part C) to navigate to another portrait (part D), or put their finger on the phototransistor (part E) to see the emerging video of the current portrait (part F). Whenever they move their finger away, the video will pause and disappear until they place their finger back to restore.
Project B - 2D Virtual Mind Palace
This project aims to create the prototype of a conceptual 2D mind palace, where the user can access the message they want to remember – which was stored and hidden behind some furniture in the room. Each furniture object contains one piece of information and can be either retrieved or hidden from the external OLED display, fully controlled by the user.
Moreover, the colour status of an object can be changed to reflect how familiar the user is with that piece of information.
The project is inspired by the method of loci, which is an ancient memory enhancement tool supported by psychologists. My original thought was to build a 3D model of the room with furniture that can be accessed in Virtual Reality, however, given the time limit and software, I decided to first build its 2D version. And in future, a 3D variation can also be developed once there are more time and resources available.
Hardware Components
• 1 x Arduino Uno
• 1 x Adafruit OLED Display
• 1x Breadboard
• 3 x Pushbuttons
• 1 x Potentiometer
• 3 x 10k Ohm resistors
• 1 x PC
Software Used for Coding & Communication
• Arduino IDE
• P5. serialcontrol
• Visual Studio Code (HTML, CSS, P5.js)
Interaction Overview
Project C - Sing & Paint!
This project allows people to create their unique piece of painting using their sounds and microphone acceleration when singing.
As a melomaniac, my original motivation was to create an entertaining and relaxing form of interaction, where the loudness and pitch of one’s sound (with changes) can be represented by the hue and transparency of live, on-screen colours.
Hardware
• 1 x BBC Micro:bit
• 1 x USB to micro-USB cable
• 1 x Computer/laptop
Software Used for Coding
• Processing IDE
• Microsoft MakeCode(JavaScript)
Interaction Overview
The software presents a live painting process according to the multiple inputs recorded by Micro: bit, it then stops painting and save it as a pdf file when the recording is finished:
- The user connects the micro: bit with a PC (A)
- The user runs the software (B) and sees a simple instruction on the welcome screen (C)
- The user presses the “recording” button (D) and starts singing (E)
- The program begins to paint with the colour features change according to the user’s voice input (F).
- During the process, the user could always change the colour by flipping the micro: bit to a different angle, and by simply adapting voice loudness.
- Once the user finishes singing and presses the “stop recording” button, the painting process stops (G)
- What has been drawn is automatically saved as a pdf file to the canvas directory (H)
- The user could always re-run the program to begin a new painting process