Digital Circuit Simulator In JavaScript: 7400 Subscriber Special!
Вставка
- Опубліковано 4 жов 2024
- =[ ℹ About ℹ ]=
In this special 7400 subscriber special of Low Level JavaScript we're going to build a digital logic simulator, inspired by the famous 7400 series logic chips. Starting with logic gates and moving up to Flip Flops, Registers, and more - this simulator could be used to build something as complex as even a CPU!
=[ 🔗 Links 🔗 ]=
⭐️ Patreon: / lowleveljavascript
💌 Updates to your inbox: tinyletter.com...
- Github Repo: github.com/Low...
Ben Eater: / eaterbc
Boolean Logic: en.wikipedia.o...
Building A Real D-Flip Flop in Hardware: • D flip-flop
High Impedance: en.wikipedia.o...
Tristate Logic: en.wikipedia.o...
Logisim: www.cburch.com/...
Renato Bohler's Logosim Project (logisim in JS): github.com/ren...
Takes me back to the time I was learning this for the first time at university and the frustrations of using logisim.
Great video.
Thanks! I've tried all of the various forks over the years as well. Many improvements, but a lot of the same problems. Logisim Evolution is pretty good - it even has some FPGA integration features built in!
I remember finding you from a post on reddit. So glad I found your channel, keep up the amazing videos
Thanks Ibrahim - I'm really glad you're enjoying them!
السلام عليكم ورحمة الله وبركاته, ممكن طريقة تواصل مع حضرتك
This is absolutely wonderful for translating what I know in Javascript down into the lower-level details of hardware electronics. I absolutely love it, and look forward to seeing more!
Thanks for the excellent content!! :D
These videos just make me so happy. Thank you!
It would be great to start an open source project on github called "Modern Logisim with javaScript" or something like that.
Have you checked out Falstad circuit simulator? its a pretty modern equivalent to logisim
Thanks a lot
Great video!
I love your videos!
Just one tiny request, could you put the code in the middle and maybe increase the font size?
I am usually watching this either side by side with an editor or on my phone and coding along makes it really hard to read.
Have a nice day :)
Really glad to hear it! I'll see if I can bump it up a bit more. It's a hard balance, because I think it's pretty important to be able to see a whole block at a time. I might experiment with dynamic sizing throughout the video
My own js logic gate sim: drag and drop, integrated circuits, configurable ics and more stuff: logic-gate-simulator.herokuapp.com/
All controls can be found here: github.com/Mateiadrielrafael/logicGateSimulator/blob/master/docs/tutorials/controls.md
Repo: github.com/Mateiadrielrafael/logicGateSimulator
Also, i forgot to mention how the sim supports multiple bits per pin (aka u can do logiv operations on say 4 bits or whatever using the bit mergers & splitters)
If u need any more help contact me at "yugiohxlight!#6117" on discord:)
Short explanation:
To add a logic gate click "logic gates" and click on the gate u want to add
Move around / zoom / drag stuff with the mouse
To connect 2 pins click on 1 of them and then click on the other
To delete a gate hold it w the mouse and press delete
You can also select multiple stuff at once w the mouse (i think i also made ctrl + mouse to add to selection)
To delete a wire click on the input pin its connected to
There are a lot of actions (select all,copy,paste, undo etc) avabile in the "simulation" section, it also shows up the keybindings for them
Some gates (the 2 types of delayers in the sim) are "configurable": aka u can left click on them to edit their props
If u left click on a configurable gate inside an ic, ull see an "external" checkbox. If u activate that, the ic itself will become configurable and will pass the values to the external gates inside. (Youll also have a label textfield so u know who you pass the props to).
Hope ull have fun, and dont forget to ctrl s often or u might lose stuff
Creating simulations is simple: click "create simulation" and answer the questions (name of the simulation, should it be an ic? etc)
You can open other stuff with the "Open simulation" button
This is great Adriel! Are you actively working on this project?
@@LowByteProductions well, i originally made it last summer but fixed some bugs and added some features for some friends this week:)
(I basically come back at it every once in a while)
@@LowByteProductions disclaimer: this was originally made for a national programming contest for high school students called "infoeducatie". (I got the second place with it :D) A friend told me today on discord about ur video so I thought I might comment here
"infoeducatie" - I guess you must be Dutch then :D Gefeliciteerd met de competitie man! De enige ding wat ik mis is modules. Is het mogelijk modules met inputs en outputs te maken (e.g flip flop, clock, etc)? Ik denk dat dat een super feature zou zijn!
@@LowByteProductions im romanian:)
This is so so so cool!!
Evaluating 5 times to cater for feedback seems to work nicely. But I wonder if there could be an event-driven way to do this so that you don't have to remember to increase that value as your circuits get more complex. Great video.
The good thing about doing it this way is that it's sort of like how gates actually work. Every gate actually takes a measurable amount of time to change state after it's inputs change.
That said, architecturally that sounds quite interesting!
@@LowByteProductions Perhaps instead of running the evaluation n times, it could work by simply comparing the current states of all components to their previous states in a loop, and break the loop when the states of the components are all equal to the last step?
@@Grillparzer problem with that is you quickly run into systems that don't ever settle in a single state, but keep oscillating (think SR-latch with both inputs high).
You have 32k subs now, time for a 32 bit os build. 🤣
You're right, basically no choice now 😉
Great work. How do you implement Bus (Wire), Program counter and tri-state buffer in this?
Without these three, making a cpu seems very difficult if not impossible.
Most FPGAs do not support tri-stating signals internally. Multiplexers and control signals can model a bus.
Edit: I thought this moment was in relation to my latest video, so my reply probably doesn't make any sense. You would need to introduce more possible states that 0 or 1, and make sure that gates propagate results correctly based on a high impedence signal.
@@LowByteProductions Hmm. So, it's not only me. Many face the same challenge it seems. And I am also facing a huge roadblock while modeling bus and tri-state buffers. Definitely, I will read more on your suggestions and try to implement something on my emulator.
Once again, thank you very much for making all your knowledge and hard work publicly available for free.
I'm not up for the "Build a GUI" challenge but how about an IDE instead... dkilfoyle.github.io/logic/
Use a verilog-like mini DSL to describe the logic gates, parse with Arcsecond to build the gate array, simulate and then view the traces.
Amateur code and really just an exercise to experiment with building a toy DSL and code editor but provides a fun interface to examine various logic circuits. I'll expand the library with more examples. Update: New version major rewrite at dkilfoyle.github.io/logic2
Dean this is absolutely amazing 🔥🔥🔥
@@LowByteProductions Thanks! Version 0.3 now supports binary operation expressions eg F = (~sel & a) | (sel & b) which is much more concise and easier to understand at a glance. Episode 9 of your 16-bit VM series was essential. State machines were definitely the answer as my initial attempt using a recursive parser produced stack-overflow infinite loops.
New version:
dkilfoyle.github.io/logic2/
Now with JupyterLab/Lumino UI, ANTLR based parser and monaco editor. More examples (and adding more).
@@dkilfoyle2 Wow this has come a long way! Such a great project man. By the way, I found out that hackaday wrote up an article recently about this video, and specifically mentioned your project as well (hackaday.com/2020/11/02/ttl-simulator-in-javascript/).
@@LowByteProductions Thanks! Work in progress enables building a logic expression from a truth table (sum of products) and then logic minimization via Karnaugh map. See ua-cam.com/video/wVMYCO6rvLY/v-deo.html for a demo. Not fully tested yet but interesting to watch a horrendous SOP circuit simplified by kmap down to just a few gates.
Does anybody know how to draw these logic gates using javascript? (an interactive circuit actually)
the font size is so small that even straining my eyes didn't helped me to see it. BTW a nice video.
Thanks - this was the last video I made before making sure the font size was more accessible, so you should have better luck with the newer ones
How can I like this 5 times??
Send it to 4 friends? 😁
@@LowByteProductions done. You deserved it
@@LowByteProductions Hey man, I am asking this as a very polite and humble request. Could you please make a video on how one would simulate analog circuits?? Preferably using Typescript??
Hey Anderson - it's a nice idea! Unfortunately I don't really know enough about analog circuits to feel confident tackling that (I'm much more of a digital guy myself haha).
I am learning a lot more these days about the field, so who knows- maybe in a yeah or two that might change.
Low level JavaScript in the most literal sense lol.
I'm trying to find the bottom 😁 I think there's at least a couple more levels I can go before we're just simulating electrons.
i made same kind of simple thing and currently working on it
my circuit has inbuilt suupport for simple latches where you can use feedback connections too...
still might have errors on generate tt
#include
#include
using namespace std;
//use vector to keep track of gates
class gate{
public:
int out=-1,gateType=-1,i=0,noOfInputs=0;//i is counter , out is output value ,
gate *input[4];//4 input max
gate(){}
gate(int n,int noi=2){
gateType=n;
if(gateTypeout&&input[0]->out));
}else if(gateType==5){ //nor gate
setOutput(!(input[0]->out||input[0]->out));
}else if(gateType==6){ //xnor gate
setOutput(!(input[0]->out^input[0]->out));
}else if(gateType==7){ //and gate
setOutput(input[0]->out&&input[0]->out&&input[2]->out);
}else if(gateType==8){ //or gate
setOutput(input[0]->out||input[0]->out);
}else if(gateType==9){ //xor gate
setOutput(input[0]->out^input[0]->out);
}
}else if(input[0]->out!=-1 || input[1]->out!=-1){
if(gateTypeout);
}else if(gateType==3){ //not gate
setOutput(!(input[0]->out));
}else if(gateType==4){ //nand gate
setOutput(1);
}else if(gateType==5){ //nor gate
setOutput(!(input[0]->out||input[0]->out));
}else if(gateType==6){ //xnor gate
setOutput(!(input[0]->out^input[0]->out));
}else if(gateType==7){ //and gate
setOutput(0);
}else if(gateType==8){ //or gate
setOutput(input[0]->out||input[0]->out);
}else if(gateType==9){ //xor gate
setOutput(input[0]->out^input[0]->out);
}
}else{
if(gateType2){
for(int a=0;asimulate();
}
}
if(gateTypeout);
}else if(gateType==3){ //not gate
setOutput(!(input[0]->out));
}else if(gateType==4){ //nand gate
setOutput(!(input[0]->out&&input[0]->out));
}else if(gateType==5){ //nor gate
setOutput(!(input[0]->out||input[0]->out));
}else if(gateType==6){ //xnor gate
setOutput(!(input[0]->out^input[0]->out));
}else if(gateType==7){ //and gate
input[2]->simulate();
setOutput(input[0]->out&&input[0]->out&&input[2]->out);
}else if(gateType==8){ //or gate
setOutput(input[0]->out||input[0]->out);
}else if(gateType==9){ //xor gate
setOutput(input[0]->out^input[0]->out);
}
i=0;
}
}
};
void generateTruthTable(gate gatesArray[],bool tracer=false){
int numberOfInputs=0,numberOfOutputs=0,s;
for(int i=0;i
So Let me add one more subscriber
Great to have you on board!
10:15 I guess that's not a flip-flop, that's latch
The terms are actually synonymous en.m.wikipedia.org/wiki/Flip-flop_(electronics)
But in this case, the logic circuit shown on screen is pretty much universally known as a D type flip flop.
@@LowByteProductions no, they're different. Latch it's triggered by level and flip flop - by edge.
The Wikipedia link I sent has a whole section about edge VS level triggering, and the ambiguity of the definition. The long and short of it is that flip flops can be either level or edge triggered,and if you want to avoid ambiguity, you should mention how it's triggered.
(but I do agree that using flip flop to refer to edge triggered circuits *would* be a better definition. the trouble is that it's not used consistently across the board, and depending on what text you read or which institution you were educated at, you're going to get a different kind of "truth", so to avoid that it's better to acknowledge that it's a historically ambiguous term, and mention the trigger mechanism explicitly if you need to clarify)
@@LowByteProductions agree!
Since you used boolean && and ||, why not use boolean ! instead of ~?
Honestly - this is a mistake that I think I'll wake up in the night cringing from for years to come 😁
I had originally used bitwise operators, but it seems when I filmed it I switched 'and' and 'or' to their logical counterparts.
Thank god for (or curse!) JavaScripts overly relaxed type coercion!
Not that I am trying to be a smarty pants, but what about Node-Red?
That seems to be a very popular JS platform and you just make the logic nodes and all is good.
Node red is great! But it's more about building flows for IoT devices than simulating logic gates. That said, I think it would be a really cool project to try to build that in node red!
Code is barely seeable even on 480p quality.
That's because it's low level
How do you code the module of 1 bit register. You abstract the group as a symbol type with inputs.
Well a register is just a collection of logic gates wired together in a specific way, where we only care about the input and output of a few of those gates. Since it always behaves the same, we can write a function that takes in our "high level" inputs and outputs and generates the appropriate gates and connections. Then we can use that function to create "instances" of a register (which actually just add more individual gates to the array).
So in that way there's no need to code the way that registers work specifically,since the gate simulation covers it. The only thing that is not possible with the current setup is being able to react only on the positive or negative edge of a signal. For that, an extra primitive type would need to be added to the system.
7400
How are you actually running the code? I'm on windows, I tried using p5js.org editor and it's giving me compiling issues, I've even tried other online javascript compilers - interpreters... and still can not seem to get this code to run... P5 is complaining that "Trace" isn't defined when it is, and other sites give different errors... I'd just like to know what your setup or your environment is like... other than that... I do like this video! I am working on a Windows platform...
I'm using a JavaScript environment called node.js. Install it, then save your JavaScript to a .js file, and then run it with node in the command prompt.
You can also load that js file into an HTML document and run it in the browser.
But node is easier and something really useful to learn anyway!
@@LowByteProductions I tried installing their latest version 14.4.0, but it only supports Win 8.1 or higher... So I'm going to try using v12.18.1 instead...
@@LowByteProductions I had to uncomment one line of code and it is now working, at least within the command prompt! Thank You!
Awesome! Glad to hear it. Keep learning and experimenting!
@@LowByteProductions Well, I'm use to C/C++, your compiled languages... I've been learning Python for a little over a year. As for JavaScript, I mess around with it here and there... So, I'm guessing when I was using p5js.org it was failing because it didn't have the libraries that are packaged in node.js ...
I've worked with Logisim before and I have actually built BenEater's 8-bit CPU in Logism (original and not Evolution). The hardest part was mimicking his `bus` design since he was using tristate buffers, and Logisim only allows their pins to be either input or output but not both... I was able to simulate the same behavior but wiring the bus took some extra work... I had to add in some extra muxes and demuxes to prevent multiple components from talking to the bus at the same time... I was able to run his example programs in it.
I like the idea of Hardware Emulation... it's one of the topics that I find interesting next the 3D Graphics programming, Physics Simulations, Animations, A.I. and Machine Learning, Compiler Design... and some others... I'm just trying out similar concepts in different languages... This is for learning and experimental purposes...
Can u please please please please please please increase the font size in your editor?
Hey Anurag, I see what you're saying. It's definitely meant to be seen at a higher resolution (HD), but I understand that it's frustrating if you're watching on a smaller device or an internet connection that doesn't allow for that. It's a hard balance, because I think it's pretty important to be able to see a whole block at a time. In the next might experiment with dynamic sizing of the text throughout the video - so zoomed in when it makes sense and a bit more or an overview when it's need. The feedback is appreciated 👍
@@LowByteProductions yes also it is matter of Internet bandwidth and speed... i cannot watch full hd videos because of limited internet access. so if you bump up the size it i can your videos even on 360/240p :D
I'd never heard of logisim but have thought about making the same thing for HTML5 before. It's nice to know I'm not the only one who wants it.