WIP: Circuit Sandbox

I’ve been working on an HTML5 Canvas game recently, designed to be an educational sandbox that allows people to create logic gates and build circuits. You’ll start with just transistors and wires, and have to build nand, nor, and, or, xor, not, etc logic gates, which you can then re-use to build more complex circuits like half-adders and full-adders.

So far I’ve just been working on the core mechanics, and don’t have a lot done, but I can correctly simulate AND gates now. Still got a lot of kinks to work out before moving to more complex features. I am having quite a bit of fun though, and learning a lot about canvas (such as improving performance).

Here’s a powered NAND gate with one high input (1) and one low input (0). Since only one input is on, the output is high (1):


Here is the NAND gate with two high inputs (1). Because both transistors are on, the circuit is grounded and the output is low (0):

grounded-circuitAs you can see, I’m worrying more about the elements important to people learning how circuits and logic gates work, not the electrical engineering aspect (e.g. no resistors). Here is a screenshot of the current UI:

full-screenshotIf I get to a point where all the base mechanics are working, I’ll probably make the GitHub repo public and put it online somewhere.

Leave a Reply