Definitely could have used this back in school ;)

Nice companion is AllAboutCircuits online textbooks:

https://www.allaboutcircuits.com/textbook/digital/

Archive has the original Bell Labs manual from 1951, with some really beautiful logic gate diagrams

The Design Of Switching Circuits by William Keister, Alistair E Ritchie, Seth H. Washburn

https://archive.org/details/TheDesignOfSwitchingCircuits

This is insanely cool. Props to the author. I can see myself using this for sketching some personal projects up.

Unsure if the simulation is decoupled from the display, but it gets a little slow in graphical mode in Firefox. Could be a really interesting WebAssembly optimization project.

The rendering slowness is probably because every cell is rendered as an individual little HTML5 canvas (two, one for off state and one for on state).

Some browsers have no problem at all with so many little canvases, but in firefox it causes a slowdown.

A solution that will hopefully be faster is to make one big canvas instead of many little ones, and blit the cells on it every frame instead of using CSS visibility to swap between on and off states for each cell. Such rewrite of the rendering engine is a todo.

I was having the same problem using Chrome.

It seems there are just simply too many elements generated for some of the examples.

It would probably be possible to draw an interactive version to a single canvas— but probably more complex on the development end.

---

Beyond that, it's awesome!

It's now updated with a new faster renderer (one big canvas instead of many little ones), does it feel any faster now? Thanks!

Way better. Thanks!

WAY faster!

Any reason for not using canvas or some kind of framework like Vue/preact/etc?

The problem here is not a lack of framework, but the overkill usage of elements.

I think even a game-like approach of using a single canvas and re-rendering the whole screen when something changes would be more efficient than manual DOM mutations.

Not the OP but maybe because they wrote it in what they know and actually shipped.

Snarky comments will be ignored. ╭∩╮⎛○⏜⏟〤○⎞╭∩╮

Wasn't snark, Mr Hostility. DOM manipulation is a very expensive operation and is abstracted by a lot of useful libraries - was wondering if there was a specific reason to not use them.

Canvas is another type of abstraction - and blitting to the screen is easier with it - so same applies.

It's now updated with a new faster renderer (one big canvas instead of many little ones), does it feel any faster now? Thanks for trying

It runs faster for me in chrome and firefox in linux

This is way cool! I've recently been trying to explain this stuff to my 14 year old and now I don't have to! This would be a great learning resource for kids studying STEM. Many thanks! :)

Among many other things with them, explaining stuff to my kids is one of the best way I have found to connect with them.

As I work in tech, explaining tech works better to me than explaining non-tech stuff such as gardening or politics :-)

I just spent the past few hours going through the tutorials. Amazing work!

I agree! Well written and informative. Props to the author!

> This online logic simulator requires JavaScript to run and JavaScript is disabled in your browser.

Is there same thing, but in Python?

No, but there's one in Java, called "LogiSim" [1], and works offline.

[1]: http://www.cburch.com/logisim

Or circuitVerse