E R I C A K O P L I T Z
Synethesia Circuits
OVERVIEW
A 2D puzzle game that would interactively teach digital logic design concepts. By manipulating the order of logic gates in a circuit, students would be able to intuitively see the electrical current as colors that literally flow through wires.
Example size-comparison of all concept assets for the game.
CORE GAMEPLAY
The game would take place on a "circuit board" on which there would be blank spaces to place gates, connected by gray wires. The right end of the board would have a robot that requests a certain color from the player. The player would arrange gates on the board in a way that the robot would receive the desired color of ink after "Run Colors" is pressed, beginning the flow of ink through the wires from left to right.
Different colors of ink would stand for different logic values. Red ink stands for "0", or no current, and green ink for "1", which means that current is flowing through the wire. The logic value of red ink can also be expressed as "false", while green ink can be expressed as "true". Another way to visualize this concept would be to remove the red, flowing ink, and instead have an empty wire represent a logic value of 0. However, I think that the gate requirements are better visualized when red ink is present.
Each gate puts out a certain color based on the ink that is flowing into it. The logic of understanding and placing these gates would be discovered through playing the game. Given a certain combination of gates, the student is expected to solve each puzzle by placing gates correctly in the blank spaces.
Inverter
Flips the color of one wire - red becomes green, green becomes red
OR Gate
Outputs green if green flows through one or both input wires, red otherwise
AND Gate
Outputs green only if green is flowing through both input wires, red otherwise
XOR Gate
Also known as "Exclusive Or" - outputs green if one input wire is green, red if both or neither are green
ABOUT THE PROJECT
Educational material can be gamified through features like point systems, engaging media, and flow to provide positive reinforcement that motivates learners. However, rather than just motivate, I would like to present concepts directly through game mechanics. Students are more likely to remember concepts if they discover ideas for themselves, which I hope to achieve through interactive game design.
The first puzzles in this game would have a space for one single gate, with different arrangements of colors leading into it. The player could then trial and error gates for different puzzles in a way that allows them to make connections and discover the functions of the gates for themselves. The puzzles would introduce more blank spaces and more complex combinations of gates over time. They could also branch out into more advanced digital logic topics, including sequential logic circuits that "remember" past input values and use them in calculations performed on the present input.
PLATFORM
-
Browser
SOFTWARE
-
Unity
-
Photoshop
MY ROLE
-
Designed gameplay
-
Created concept assets
-
Implemented code
GATE DESIGN
A way to help understanding of the different gates is to draw them so that they visually represent the calculation that they will perform. In a normal schematic, the gates appear as symbols that have no obvious inherent meaning to them. I include these symbols in my designs, but I also added LEDs and markings that express the function of the gate. While the extra details may not be directly understandable on first sight, they would serve to reinforce any connections that the player makes between the gates and the way they work over the course of the game. If I developed these concepts further, I would make the on and off settings of the LEDs more distinguishable from each other in future designs.
Symbols for digital logic gates (CC0 from pixabay)
THE "OR" GATE
The OR Gate outputs green if at least one wire inputs green. I drew a yellow check mark around the green LED of the gate to visually show that it expects an input of green ink. Because the vertical positioning of the LEDs might be read by the player as requesting the wires in that specific order, as in red on top and green on bottom, I would arrange them horizontally in future designs. If the condition of the yellow check mark is met and green ink flows into the gate, the gate displays a correct symbol on the bottom right and produces green ink. Otherwise, it displays a red "X" and outputs red ink.
The OR gate with all possible inputs.
*Note that, for this gate and others, the vertical order of red and green wires can be switched and the outcome would remain the same.
THE "AND" GATE
The AND Gate outputs green only if green is flowing through both input wires. As with the OR gate, I drew a check mark around the green LED of the gate to visually show that it expects to receive green ink. However, I also added an X around the red LED to indicate that the output will fail if red ink flows into the gate.
The AND gate with all possible inputs.
THE "XOR" GATE
The XOR ("exclusive-or") Gate outputs green only if green ink flows into the gate through only one wire, not both. Again, I use a check mark to indicate that an input of green is necessary. However, I also drew a check mark around the red LED. If only one input wire can be green, the other must be red for the gate to output green.
The XOR gate with all possible inputs.
HARDWARE AS SOFTWARE
When I began implementing the circuit, I knew that each individual unit (wires, source inputs, inverters, and the four types of gates) would need to communicate its current charge to the units following it. I am also l̶a̶z̶y̶ efficient, so I want to avoid writing the same methods over and over again for each unit. To hit both birds with one stone, I came up with a hierarchy that allowed me to write generalized code:
Inverter
Wire
Or Gate
And Gate
Xor Gate
Gate
Unit
THE UNIT ABSTRACT CLASS
Because each component has its own way of calculating output and updating appearances, the Unit class abstracts these methods so that they may be called without knowing the specific type of component. This allows the digital values of the component to be calculated linked list style, with each unit relaying its charge to the ones following.
THE GATE ABSTRACT CLASS
The Gate class further defines the methods abstracted by the Unit class, as all gates operate similarly. They take in two input values and update which LEDs are lit up based on the input.
OR, AND, & XOR GATES
Because we've been able to generalize much of the gates' functionality in the Unit and Gate classes, the specific gates themselves only have to implement the "Calculate" function.
THE RESULT
By setting up GameObjects with the above code in Unity, outfitting them with colliders that I coded to fill out the Unit "next" list, and making a controller that triggers all of the source wires to run, I ended up with the following:
I plan on updating the assets and getting an animated flow going on. I also need to make the gates editable in-game. Then I can get to work designing educational challenges for players.
This project is aimed towards completing Unity's Global Student Challenge, where the theme is "Teach People Something." Find out more about the challenge here.