Matthew Spillman's
Processing Projects

Electric Circuit Designer

Pick a starting circuit setup. Click on the blue buttons to change the circuit input, press the play button, and the yellow lights will show the circuit output. To try other inputs, press the reset button to reset the gates. To edit a circuit, select something in the left panel and click on the grid.

This is an interactive electric circuit designer. It shows how wires and logic gates can be connected to perform complex operations like, for example, binary addition. The flow of current is represented as actual pulses flowing through the wires. This representation is pretty, but not realistic, and its consequences will be discussed more later.

How to use the designer

The main menu offers a few starting setups. The "Basic Setup" shows off pretty well how the designer works. Essentially, you can use the items in the panel on the left to build a circuit from components like wires, logic gates, buttons, and lights. These components are discussed in more detail in the "Components" section. Buttons represent the binary "inputs" to a circuit. You can click them to turn them on and off, and an active button generates a current which can flow down adjacent wires. Logic gates like AND, OR, and NOT gates can modify these currents to make them perform complex operations. Finally, wires typically lead to yellow lights which represent the binary outputs of a circuit.

To run a simulation of the circuit, first click on the buttons to configure the circuit's input. Then, press the play button on the right. The flow of current through the circuit should be visualized and at the end the lights will be lit up with the circuit's output. To try a different set of inputs, press the reset button on the right.

It is important when creating a circuit with this designer to not put multiple NOT gates in a loop. This will display an error message and the NOT gates will not function properly. This is a result of the unusual way the designer represents currents.

Components

Wire - Wires simply transfer current. If a wire or button in an adjacent cell to a wire becomes active with current, the wire will become active and then transfer the current to any of its inactive neighbors.

Up Wire and Down Wire - The designer has a concept of "layers" which allows more space for circuits and allows different wires to cross over each other without touching. Current does not transfer between layers without the use of "up wires" and "down wires". When an up wire or down wire is created, the opposite type is created in the same position on an adjacent layer. They transfer current between each other, so that current can go up or down a layer. To see this in action, look at the bottom part of the "Basic Setup" to see two wires crossing over each other using up wires and down wires. To change the layer you are viewing, use the layer selector on the right of the screen.

Button - A button is the basic input to the circuit. When you click on it, it looks bigger and brighter, indicating that it is active. When you press play, an active button will transfer a "pulse" of current to adjacent wires.

Light - A light is how you view the output of the circuit. When a wire adjacent to a light becomes active, the light turns on or off.

AND Gate - An AND gate has two inputs and one output which are created as wires when the gate is created. If both of the inputs to an AND gate are activated at some point (not necessarily at the same time) then the output wire of the AND gate becomes active. An AND gate which has had one input activated is colored yellow, and an AND gate which has had both inputs activated is colored red. All gates can be rotated using the rotate buttons or by pressing 'r'.

OR Gate - An OR gate has two inputs and one output like an AND gate. If at any point either input to an OR gate is activated, the output wire is activated and the OR gate is colored red.

NOT Gate - A NOT gate has one input and one output (the input goes into the flat side). A NOT gate outputs the opposite of its input. In this designer, this means a NOT gate waits the maximum amount of time it would take for its input to be activated. If its input hasn't been activated by then, the NOT gate's output wire is activated. The maximum wait time for each NOT gate is calculated right before a new simulation is begun during the "Preparing" screen.

Templates

Empty - A completely empty setup.

Basic Setup - A setup that shows off the functionality of all the parts. It has a few simple gates and some up/down wires to demonstrate crossing wires.

4-bit Addition - This setup shows how a slightly more complicated circuit would work. If you know how binary addition works, this should be somewhat straightforward. At the top of the circuit, there are 2 rows containing 4 buttons each. Each button represents a bit in a 4-bit binary number, where the rightmost digit represents the 1's place and the leftmost digit represents the 16's place. A button that's pressed represents a 1, and a button not pressed represents a zero. To see the circuit in action, enter two numbers using the buttons while the simulation is paused. Press play, and the 5-bit sum of the two entered numbers will be displayed in the 5 lights below the circuit.

How current is represented

This designer visualizes the flow of current as actual yellow pulses traveling down the wire. This is not accurate. Real electric current is applied throughout an entire wire continuously, with current changes traveling at nearly the speed of light. When I made the designer, I didn't fully understand this, so I settled on the pulse model because it looked nice. This does cause a little bit of awkwardness when NOT gates are involved, because then each NOT gate needs to determine how long it should wait for an input current before firing its output pulse. This is calculated during the "Preparing" screen when you press play. Despite this, the designer is still capable of simulating any feed-forward circuit. Other circuits like SR latches which rely more on the real properties of electricity do not work in this program.