How to Make a Calculator out of Checkboxes
Building a Ripple-Carry Adder with Origami Studio
I spent the better part of 2017 learning Origami Studio, a tool for user interface prototyping. Though Origami was made for UI design, the flow-based programming language immediately reminded me of the logic diagrams I studied years ago in computer architecture classes.
Among the toughest of these was the ripple-carry adder: a diagrammatic monster that, we were promised, added two numbers together.
We’d eventually learn to think of an adder as a binary calculator. But it wasn’t easy figuring this out from a text book in a theory class. And without a practical prototyping tool, you never had the satisfaction of seeing the circuit actually work.
With Origami Studio, I was able to revisit the ripple-carry adder in a hands-on and visual way. This article shows how you, too, can build this binary calculator with Origami, and maybe develop a new appreciation for the computers we use every day.
Wanna follow along? You’ll need a very basic understanding of Origami Studio and its Wireless Broadcaster/Receiver patches. You’ll also need Binary Calculator Kit to install some custom patches.
Binary Calculator Kit ▸
Getting Computers to Understand Numbers
Computers don’t understand anything. Not even numbers. Modern digital computers are essentially a collection of electrochemical on/off switches. But when we combine these switches in certain ways, we can make a computer seem like it understands numbers and math.
Virtually all human cultures represent numbers in a decimal system. This means we count in cycles of ten: 0, 1, 2 … 9. Historically, this comes from the ten fingers on our hands. But numbers don’t have to be represented in cycles of ten. For example, Mickey Mouse has eight fingers, and Dory has two pectoral fins. How might they count?
Notice how Dory counts in cycles of two: 0, 1, 10, 11, etc. She uses a binary system based on two numbers: 0 and 1.
Now remember that a digital computer is made up of a bunch of on/off switches. These on/off switches can represent the two binary numbers 1 and 0. When we build a computer, we can group multiple switches to represent binary numbers, which we can then translate to decimal numbers.
We often think of binary as the native language of computers, but it’s really a language between people and computers. Binary, like any other notion of numbering, isn’t inherently understood by a computer.
So what is the native language of a digital computer? Switches! And they can take many forms: punched cards, relays, vacuum tubes, plugs, transistors, and even checkboxes in a visual UI.
This is where Origami starts to show its circuit design potential. Origami uses checkboxes to represent Booleans: values that are 0 or 1. We can use Booleans to simulate the switches in our computer.
A single Boolean can represent only two numbers. To create larger numbers, we combine multiple Booleans.
The Binary to Decimal patch in Binary Calculator Kit combines multiple binary digits or bits into a larger binary number. The patch then converts this binary number to a people-friendly decimal number.
Binary Math is Decimal Math
The way we show numbers doesn’t change the way math works. Binary math and decimal math give us the same numbers, even if the numbers are represented differently.
But how do we get a computer to do this? To understand how digital computers do math, we need to know a little about how they “think.”
Getting a Computer to Add Numbers
Digital computers make decisions by evaluating conditions that are either true or false. Certain parts of a computer program will run only when a specific condition is true. For example, if an app condition “has new messages” is true, the computer could display a badge on the app icon.
Sometimes a computer needs to consider multiple conditions at once. In these cases, the computer feeds all the conditions into circuits that output “true” or “false” based on how well all the conditions are met. We call these circuits logic gates.
We can see these gates working in Origami with the And and Or patches. Binary Calculator Kit adds a patch for Exclusive Or.
Just like on/off switches, we can represent true/false conditions as binary numbers. A truth table numerically shows all the possible outcomes of the logic gates. The left side of the table shows all the permutations of inputs A and B. The right side shows the corresponding logic gate outputs.
Let’s relate this back to binary addition.
We can break down any binary addition problem into a series of additions between two bits. These additions will output a sum bit and a carry bit, which we can show in a truth table.
Now watch what happens when we compare the addition and logic outputs in a single truth table…
Notice that Sum matches XOR, and Carry matches AND. This means a computer can add numbers using XOR and AND gates. In other words, we can build a simple addition calculator using only checkboxes!
We can see this for ourselves in Origami, using Exclusive Or and And patches.
We call this addition circuit a half adder. Binary Calculator Kit bundles all of this in a single Half Adder patch.
Adding Bigger Numbers Together
Half Adder adds only two bits. If we want to add larger numbers, we need to use several adders together, each representing a column in the addition. For example, if we wanted to add the 4-bit numbers 0101 and 0111, we’d need four adders to total each column.
We can try to make this work with some Half Adders…
… but the Half Adders don’t account for the carry bit from the adjacent column. We need a different kind of adder, one that includes the carry bit as an input. We need a full adder.
The Full Adder patch adds three bits: the two addend bits, plus a third bit that represents the carry from the adjacent column. We can connect the carry bits of multiple Full Adders to create a ripple-carry adder.
So what’s going on inside those Full Adders to make this work? Full Adder uses two Half Adders: one for adding the addends, then another for adding the carry. Full Adder also outputs a carry bit if either of its Half Adders outputs a carry bit.
Putting it All Together
Here’s what my complete ripple-carry adder looks like in Origami.
To operate the adder, you flip the addend checkboxes at top. A visual interface shows how the checkboxes correspond to binary and decimal numbers. It’s pretty neat finally seeing this circuit work!
Wireless Broadcaster/Receiver patches and patch grouping were essential in making the prototype. These features helped break the circuits down into smaller and more understandable components. They also reduced the number of elements and criss-crossing lines that made the original logic diagrams so hard to read.
What’s Next?
I won’t be taking up circuit design, but I hope this article inspires some future engineering students with a new tool for learning computer architecture. Origami has built-in patches for AND, OR, and NOT gates, which should allow you to model all the functions of a digital computer.
And if there are any UI designers who have read this far (whoa!) I hope it was fun taking a closer look at our digital medium. Who knows? As tools like Origami create ways to prototype how things actually work, we might start to blur the line between design and invention.
