Kaleidoscope: Distributed Machine System.
We designed a game system that works over a wireless network to allow users to play games with each other from a distance in real time.
Roles: All designers. This was a group project with Isabel Freedman and Abigail Radey
Timeline: 4 weeks
Context: Coursework
Motivation: We designed a virtual kaleidoscope game that is part of a larger online game platform to allow kids in physically distanced locations to interact with each other to combat loneliness in Covid times.
We began by brainstorming what different users would control, then thought through how to make a kaleidoscope interesting and new. Then, we designed a new controller that would be better than an arduino and created the UI of the platform.
Tools: Adobe XD, Adobe Photoshop, Adobe Illustrator, Excel, Inventor Pro, 3DsMax, Adobe Premiere Pro, p5.js, Arduino, Glitch
Project Overview.
Our goal was to create a cheap game system for young kids to primarily play with their friends while they and their friends are both online.
Our solution was a game system where each player owns a controller that connects to their computer, then they sign into the game platform website called Groovy Games, and invite their friends to play with them.
In the full implementation, the user would not need to understand coding or these specific platforms, it would function as a ‘black box.’
Our project reduces loneliness in younger children by providing a cheap and easy way to take part in a constructive activity over the internet, without risking Covid exposure from in-person meetups.
Each Arduino passes potentiometer and button data through a service called Pubnub which runs software on a different service called Glitch to allow all the button and potentiometer data from each Arduino to work together to form one large kaleidoscope picture.
Background to issues.
The Covid pandemic has been going on for a long time, and people are becoming fatigued with following the rules and restrictions.
Therefore, finding ways for young kids to continue maintaining and forming meaningful connections is very important. These kids are used to incredible amounts of socialization, so finding ways to allow them to interact safely is critical to their development. Our solution will allow the users to interact in meaningful ways, through a distributed machine system over the internet.
User Personas
How the User Interacts
System Constraints.
The system is constrained by environment, machine, and operator factors. Luckily, as this product is made for fun and enjoyment, few, if any, of these constraints will prevent the goals of the system from working short of a complete mechanical or electrical failure.
Environmental.
Internet speed
Internet outage
Servers under heavy load
Machine.
Computer hardware
Broken controller
Ambiguous UI
Sensors misread data
Lag from time of input to visualization on screen
Discrete outputs too coarse or too finite
Operator.
Lack of training
Incorrect mental model
Impairment from illness, medical condition, or intoxication
Automation Strategy.
There is a limited amount of automation that takes place in our design. Interestingly, each stage is typically entirely automated or completely manual. There are few stages in which the person and the machine share some amount of responsibility. This model is more indicative of a machine that serves the operator to make their lives easier and the entire process seamless.
System Architecture.
Each of the three players will have a controller, a computer, and an internet-enabled device.
The user will plug the controller into their computer which will transmit the data from the controller’s potentiometer to a central service (called Pubnub).
Each user’s controller will access the other player’s data to understand the other player’s inputs. The code will allow two of the users to each control the X axis, the Y axis, and the third player controls the color of the drawing point of a kaleidoscope.
Our Solution
The Solution
Our solution is a game service website where players can purchase a controller and sign in to play games online with their friends.
Each user can control either their own player character or be part of one of the team-building games such as Krazy Kaleidoscope where all players work together to make one picture.
The design was created to be the most appealing to kids around the age of 10. These users are very affected by the pandemic because they are used to seeing many of their friends for so many hours a day and now they cannot. In addition, they do not usually have access to other game platforms such as Xbox or PlayStation which also have games that are not appropriate for their age. This platform, however, has games specifically designed for these users so they are guaranteed to be educational, constructive, and age-appropriate. Additionally, with the pandemic, families have less money than usual, so this system is much cheaper as it relies on a cheap controller and a computer (hardware that families already own).
Each controller has several buttons and a potentiometer. Future generations of the controller may feature more options for input such as light sensors, sound sensors, speakers, microphones, and gyroscopes to get user input. Each game will require the use of different buttons which will be mapped to each game. For example, Krazy Kaleidoscope uses just the button on the side of the controller and the potentiometer knob to operate the game and control your part.
The system works by taking each player’s button and potentiometer (and any other sensor) readings and sending it to a server. Then, the other players that are playing the game can read that information which is used to generate the game or the image.
How it works.
Plug your controller into the computer.
Each of the three players plugs the controller into their own computer to begin transmitting the data to the server.
Connect with friends online.
Sign in to Groovy Games to access the newest game Krazy Kaleidoscope as well as several other games from the library to play with your two friends.
Play lots of games or create art.
Each game can be played through the Groovy Games website. The newest game, Krazy Kaleidoscope, is a fun game where all three players work together to make cool art.
All three players control something different.
X-Axis.
Y-Axis.
Color.
This is a video showing our system working in real-time. One player is controlling the X axis, one player is controlling the Y axis, and one player is controlling the color of the points. The next step is to put the controls into the controller we designed.
Kaleidoscope art made by three players.
The Controller.
Constraints.
The design of the controller was constrained by cost, two hand operation, and current trends. The most important need for the controller was to be cheap to produce and buy, while still being appealing to 10 year olds.
Functions.
Each of the buttons and knobs can be mapped to different functions for the needs of different games. For Krazy Kaleidoscope, the potentiometer (knob) is mapped to either the X axis, the Y axis, or the color. The side buttons are mapped to 'sending’ the data to the server.
Affordances.
Each of the buttons on the controller is raised above the surface which affords pressing. When players hold the controller in their hand, the side buttons are where their fingers will end up which allows for easy pressing.
Instructions.
Each game will display a screen indicating how to use the controls for the specific game. Some of the controls naturally show how to use them, such as the knob which can only be twisted, or the power button has a label.
Feedback.
The potentiometer has detents so that players will know that they have twisted the knob, the buttons have clicks to signify that they have been pressed. Future iterations will have a vibration motor for haptic feedback.
Operation.
To use the controller, the player will follow the on-screen prompts. The shape and side of the controller and its buttons will make it relatively clear how to use the product.
The User Interface.
Login.
Once the player has plugged their controller into the computer, they will go to Groovy Games and sign in to their account. They will then land on the homepage.
Homepage.
The home page features the game library, a list of friends who are currently online and not online, and the merchandise shop. All of the games are kid-friendly. Players can see who is online and invite them to play games together.
Game Screen.
Once a player selects a game to play, such as choosing to play Krazy Kaleidoscope, then they will see some of the highlights from their most recent times playing such as the past artwork. They can play a new game by inviting friends.
Invitation.
To start drawing, players will need to invite two other friends who also have the system and controller to play. They can select their friends from a list of friends who are online.
Select Position.
Once their friends have accepted the invitation, they can select which of the three positions they want to control: X axis, Y axis, or color. Then they are ready to begin drawing.
Loading Minigame.
While the server sets up the game, players are introduced to the controls of the game through a loading screen minigame. For Krazy Kaleidoscope, the main control is twisting the knob, so the minigame teaches players how to do that.
Krazy Kaleidoscope.
This is the screen that players will see while playing Krazy Kaleidoscope. The big window shows the current drawing. The right panel shows who they are playing with, what they are controlling (their position), and how to operate the controller for this current game.
Constraints.
Like the controller, this system was constrained by the need to make it appealing for kids. Therefore, there are bright colors and bold fonts to make kids enjoy the site. Everything is also simple because the site is streamlined to perform a few functions well.
Menus and Choices.
There are few menus so that the site is easy to navigate for young kids. There is a home screen with the games that can take the players to other screens in a few clicks. Players are able to choose their game, and who to invite.
Affordances.
All of the buttons follow current conventions such as rounded edges and green font to signify a good thing. Drop down menus have arrows so users know there is more content. Pop-up messages have X’s in the left corner.
Functions.
The main functions of Groovy Games are to connect players to each other for online video game experiences with friends. The system does that through an easy to navigate game library and easy access to connect with friends.
Feedback.
As users click and manipulate the controls for games, the screen updates in real time so users know that the system registered their input. Further, when a user invites a friend to play, their name is circled in a green bubble to show that the system knows its a player.
Operation.
Like most websites, Groovy Games is operated with the keyboard and mouse. However, once the player enters a game, the controls switch to the controller. However, the user can still use the computer with the keyboard and mouse, that input just will not register for the game.
Software Architecture
The software was by far the most difficult part of the project. Our development team was comprised of only human factors engineers rather than computer scientists.
We wanted our product to be as appealing for kids as possible, which required making the front-end system different than the one provided. The vision for this system is that a user would not need to understand computer science or Arduino to enjoy and use Groovy Games.
However, the system worked through a program called p5.js reading in the sensor data from the potentiometer and the button. The Arduino had previously been given code to read these values in. Once these values were read in to the computer, they were sent and uploaded to a service called PubNub. This service essentially stored the values and allowed other Arduinos to read and write data for all of the players to access. Then, each player could access the kaleidoscope through a website called Glitch. We made few changes to the code other than updating the framerate to improve usability, changing the background color, and changing the function for player 3 from changing the size of the drawn dot to changing the color to a prettier color.
Objectives.
Our objective was to make the kaleidoscope as attractive as possible to kids. Before, the kaleidoscope was black and white on a dark grey background. We wanted the colors to pop and to create cool, complex patterns.
Challenges.
Our greatest challenge in the software was mapping the colors for player 3 to colors that looked nice. At first, we tried to set the potentiometer reading directly to either a red, green, or blue value [0-255], but we quickly discovered that it did not look good. Instead, we choose to use an if-else chain with a color palette so that we knew all the colors looked nice together.
Reflections.
Overall, this project was extremely successful. We found a fun solution that helped bring a sense of togetherness to both the development team, as well as to anyone that tried the product. We found a cool way to allow players to interact in a constructive way at a distance using a machine system over a large geographic distance.
Once the system was running, it performed really well. There were a few issues such as an inconsistent framerate, but we were able to improve that dramatically from the base that we started with. To improve this product more, it would require faster internet and optimizations of data.
Next Steps.
There were some key constraints to make the process work, for example, we were unable to develop our UI into the actual working UI of Groovy Games or Krazy Kaleidoscope. Furthermore, to actually operate the controls, players needed to run p5.js which ideally would not be part of the product once it is shipped to customers as it is harder to use and requires small amounts of coding knowledge.
Future iterations of Groovy Games will focus on incorporating automation to streamline the process for users such as recommending games to players based on their interests, adding new sensors and using that data, and running the entire system through Groovy Games rather than p5.js and Glitch.