16-Bit Virtual Machine in JavaScript 001

[@mayur9876]

You're doing amazing work. Don't stop.

[@gjergjkadriu9460]

+1, it would be a shame if the OP had chosen the easy path and made content for beginners, instead he chose to actually contribute something.

[@renato.bohler]

Very, very cool. This is the kind of channel that really deserves to grow. I'm definitely sharing.

[@LowByteProductions]

Thanks Renato!

[@EvilFlipTV]

Hi! I'm long time self-taught web developer from Ukraine! Hardware and software engineering was always my passion, but in my city there's no good CS universities. So thank you for your work, so I can implement such thing as VM along with you step-by-step and try my best to make sure, that I learn logic behind all this stuff!

[@SavingShredz]

god dammit now i have to binge watch these even though they're not entirely relevant to what i'm doing

[@milenneshterov6765]

Too relatable :D

[@SavingShredz]

hey I'm back

[@wlockuz4467]

I have hard time believing how criminally underrated your channel is, You're basically teaching university level of topics for free! I can't thank you enough for this content!

[@LowByteProductions]

Thank you WloCkuz, much appreciated. Tell a friend!

[@wlockuz4467]

@@LowByteProductions Sure thing!

[@simonc997]

On so many levels, this is genuinely one of the best tech videos I've ever watched. Bravo!

[@eflat__major]

I don't have a particularly large following but I shared it on Twitter and Discord anyway because this channel deserves exposure and growth.

[@ElliotdeVries]

Looking forward to more. Never done (or even really looked at) any low-level programming, and seeing it for the first time in JavaScript is both odd and fascinating.

[@deckarep]

This channel is gold. I’m super impressed with your videos and your clear, quick explanations please make more videos on this subject!

[@darqed]

I just found this video and its absolutely amazing. I wish there were more channels like you!

[@StereoPT]

I've just discovered this channel and I have to comment to say that this is really good content. Can't wait to see the progress going forward!

[@LowByteProductions]

Awesome, glad you're enjoying it! Tell you're friends!

[@keithrobinson2016]

Just found the best channel on KZbin!

[@monman42]

This is incredible man. Please keep up the good work.

[@MisterMojoRising]

This is amazing, I'm currently going through my computer organization course in university and this video really helps putting all the concepts togheter. Keep it up!

[@LowByteProductions]

Glad to hear it!

[@shekharaakula6233]

I am so sad I couldn't find this channel earlier! It's a gold mine for programmers.

[@LowByteProductions]

At least you know it now!

[@michaelxtronik2809]

Man.. This is weirdly satisfying. I think I finally start to understand how CPUs work

[@singhyuvraj122]

Great video, This makes Javascript for everything possible

[@IannoOfAlgodoo]

This is so sick to get to know lower level code in a language that I understand.

[@edwardmacnab354]

I'm surprised that you don't have more subscribers frankly .

[@billmcbungabine9404]

Blown away by your channel mate - thank god the internet enables me to find this kind of stuff - keep it up (y)

[@LowByteProductions]

Thanks Bill, it means a lot!

[@artemmangilev7561]

Thank you for this series! I watch it during reading game engine architecture book (the part about hardware) and it helps a lot with understanding info from book

[@arslanrozyjumayev4015]

U are something else, amazing content, thank you!!!!

[@icebrn]

This looks super cool. I hope you continue with the serie Keep the good work

[@waheedafolabi6264]

Nice...I am keen on implementing this along.

[@keilanknight8513]

Argghh....just what I don't need, an easy introduction to emulation in javascript, here goes 18 months of my life writing a Z80 emulator which will never work in javascript which has probably already been written a million times, but whats the fun in using libraries eh kids?! Awesome video.....just wish I hadn't seen it!

[@LowByteProductions]

It hurts so good

[@GamerRui275]

Can't wait for the 002 video now.

[@thebirdhasbeencharged]

Woah, exciting man

[@limitless9483]

this video is like a movie lol thanks, keep up the good work i'll make sure to always star your repos.

[@spencerk7187]

If you could increase font size that would be great.

[@RictorScale]

This is insanely informative and honestly amazing. WOW!

[@elgs1980]

Super cool!! Thank you so much!

[@rebelmachine88]

Wow, this clarifies so much! Thanks for the videos

[@JoseSilva-lf1ve]

Amazing work! I learned so much just from this episode. 👌

[@Zawibis]

Amazing content and production quality. Keep it up!

[@brandnewmark9232]

Absolutely amazing content, thanks

[@iyappansriram9854]

Hey these videos are really amazing! I wish it had Subtitles on though (instead of the auto-translate). I wasn't able to find a way to upload my own subtitles either. If there was any way I would love to do so! Thank you for such an awesome and well prepared video. You've earned a subscriber!

[@stefanosbek]

This is too good

[@theitatit]

Really good content!

[@pieteroverbeek1341]

Very interesting!

[@matibor]

This just melts my brain

[@rajughorai3909]

Bro you have good content in your channel.

[@DonatoBencosme]

amazing!!!

[@vanellope9565]

i ve been learning java script for 3 months now and i wanted to do a new project and thought a 16 bit computer will be interesting enough. upon trying to grasp the logic behind arrayByBuffer and DataView and misserably failing i ve come to the conclusion that i know way less about computers then i thought i do. Maybe someday i ll be ready for this.

[@LowByteProductions]

Push through! If it was all easy and made sense straight away, you wouldn't be learning, right. Try reading and watching different sources talking about the same ideas. The more you expose yourself to it, the more familiar it will seem, and the less alien. I promise. Things don't all have to make sense at once, but there'll come a point where different pieces will start clicking together. You're ready for it now. Just keep going.

[@vanellope9565]

@@LowByteProductions thank you :) i was doing that now my idea is to make a fetch decode execute loop that counts up that would be easier for the beginning

[@PendragonDaGreat]

Awesome tutorial, but I have a different question: What theme are you using? I love the shading to help keep track of indent level.

[@Fernando-du5uj]

Incredible content! I think I'm gonna build this same VM but in C. Thanks anyway!

[@LowByteProductions]

Thanks Fernando - sounds like fun!

[@brambeer5591]

I can only sub your channel after this excellent video, thanks for the content!

[@miguelrivasperez2699]

Great video!

[@vancheloChanel]

Amazing 👍👍👍

[@crispy_rw]

I am a noob please help me understand this on 0:12:10 you were showing how instructions should be aligned on each line. You aligned 0x10 0x12 0x34 which in total is 3 bytes yet we are developing a 16 bit(2 bytes) VM. my question is what does 16-bit represent in your VM? is it related to how instructions are aligned? thanks

[@LowByteProductions]

Hi Christian - This can be a somewhat confusing topic so no worries 😁 16-bits really refers to the width of the data - not the instructions. So when you store and retrieve values in memory, you're getting values in the range 0x0000-0xffff. The tricky thing is that sometimes we're also reading (and later on writing) 8 bit values too - but it's the maximum size that is most important.

[@crispy_rw]

@@LowByteProductions " width of data" sounds a bit more technical to me but anyway thanks for the explanation. so is there a limit of bytes you can align on a single line?

[@LowByteProductions]

You can think about it this way: If the CPU were real hardware, inside there would be 16 wires transporting the individual bits of a number back and forth between registers to memory, the alu, and other parts of the CPU. That's what's meant by data width. In some architectures, the instructions themselves are always the same size the data width (e.g. RISC-V or ARM), but in others the instructions can be variable size (e.g. x86 or Z80).

[@crispy_rw]

@@LowByteProductions I appreciate your help. Without you, I wouldn't know what these terms means🙏🙏🙏

[@limitless9483]

this guy is the alpha male of Javascript

[@ValeAbby91]

First of all amazing job, the quality of the content is well high and I'm glad that I've randomly spotted this on reddit. On second hand at 6:26 you mention that you produced a previous video on array buffer which I cannot find. Would you mind to put the link in? Because I would love to check it out.

[@LowByteProductions]

Thanks! ArrayBuffers are used in the binary episodes of the parser combinators series

[@itsval6716]

Cool!

[@ehguacho2008]

amazing mate 👏👏👏 have you ever developed a dynamic binary translator (aka "dynarec")?

[@XsmaelTheBest7]

WoooW this is so cooool! I really like this; and the effort and i'm also wondering, is there any use case for this(the finished project), in real life ?

[@LowByteProductions]

This specific project is serving its real use case, which is to be a teaching tool for a lot of different concepts. But VMs in general have tons of real world use cases. Java, python, and a bunch of other languages have an underlying byte code VM, meaning you don't compile them to actual machine code like x86_64, but rather to this virtual architecture. The benefits of such are design are things like portability, a decoupled representation allowing for multiple implementations, and the ability for the VM implementation to make different kinds of optimisation trade offs when running your code.

[@christiansakai]

I am curious, you mentioned that you've been building VMs in JS multiple times before. What was the use case? What kind of company?

[@LowByteProductions]

They've really ony ever been side projects. I worked on 16bitjs, which was a RISC inspired VM with a pretty compact instruction set and nice stuff in the assembler like pseudoinstructions. There were a few different evolutions on the concept, like vmfc, a VM I designed for the purpose of being a fantasy console. I started going down a compiler path on that one as well which was a lot of fun, but I never finished it. I also worked on multiple emulators: a few different gameboy implementations for various languages and platforms, as well as some unfinished nes implementations. I'm hoping to one day do a deep dive into the SNES and showcase it on the channel. Professionally I have done some stuff adjacent to VM, but not quite. I've implemented some systems as state machines that bear a resemblance if you squint, but usually without being Turing complete, and being aimed at a very narrow domain. I can't say too much more than that as they are not public or open source projects.

[@christiansakai]

@@LowByteProductions That's very cool. As a web dev those kinds of stuff always mystifies me. How does one even get such kinds of jobs?

[@antonionotbanderas9775]

In the search for the easiest game engine I ended up learning about Turing machines, Vonn Newman architechture, assembly language, and Virtual Machines.

[@pdelaguardia1]

Do you have a Patreon account by any chance? Would love to contribute. This is invaluable content you are putting out. Keep it up!

[@gerardokolie1829]

Am finding it difficult to understand the difference between the fetch and fetch16 functions, can please explain a bit

[@pepn]

This is amazing ! Is your voice distorted somehow ? I hear some weird, tremolo-like artifacts in your voice. But yeah anyway, great video!

[@vipzip8863]

Awesome video! I'm kind of confused on why we are splitting the value into 2 bytes. Also, what font are you using? The font looks nice :)

[@LowByteProductions]

The reason is that the machine code that gets generated is only really a series of raw bytes. How many bytes any instruction is can be variable, and is thus open to interpretation. Imagine the instruction pointer is at 1 instead of 0 at the start. The CPU would read the instruction as 0x03 (the r1 register), but it would be interpreted it as another instruction entirely. Where the instruction pointer actually is at any given time defines how those series of bytes look as actual code. This is one of the reasons bugs can be tricky to solve in asm - because you think you wrote one program but the CPU is executing something else entirely. We'll get deeper into this when we start tallking about jumping instructions that let you change the instruction pointer. As for the font, I'm using "Hasklig", which I think is just "Source Code Pro" but with a bunch of additional ligatures.

[@vipzip8863]

@@LowByteProductions Thanks for the prompt answer, I guess I'll have to wait and see :) I'm pretty new to all of this but have been studying the code for a bit while trying to understand every part of the code. The only part that had me confused was splitting the value into two bytes. Guess I'll have to wait and see the bigger picture.

[@Eugensson]

"registers[]", is it the same as the Register File?

[@LowByteProductions]

Yes, the register file is modelled as an array here.

[@beepbeepimasheep237beepbee3]

Are we using node.js?

[@LowByteProductions]

Yes we are indeed. Later on, when the VM is used as the base for the fantasy game console emulator, we move the same code into the browser.

[@beepbeepimasheep237beepbee3]

@@LowByteProductions Works for me.

[@beepbeepimasheep237beepbee3]

also I need help: Cannot read property 'forEach' of undefined debug() { this.registerNames.forEach(name => { console.log(`${name}: 0x${this.getRegister(name).toString(16).padStart(4, '0')}`); }); console.log(); } nvm u have github

[@nsoeaung]

Great

[@benjamintpoon]

Help me understand --- In handling instruction 0x12 "add", aren't you getting the values in register1 and register2 already with the two calls to `this.fetch()` ? Why are those calls followed by the two lines where you directly reach into memory? *scratches head*

[@LowByteProductions]

Those calls to fetch only get the indexes of the registers. The indexes can be used to read the registers. Fetch goes to memory (RAM) and the registers are found on the CPU itself.

[@benjamintpoon]

@@LowByteProductions Ah, I understand now. The part that tripped me up was you said earlier that you made a design decision to pair the MOV instruction with a specific register as in MOV_LIT_R1, however, this was occuring in ADD_REG_REG which wasn't specifically paired to any registers, which is why the register indices needed to be grabbed from memory! Also... thanks so much for making these awesome videos! Do you have a patreon? I would love to support you.

[@LowByteProductions]

Yeah true - I mainly want to really illustrate the tradeoff. We're used to having near infinite resources in day to day js, but its good to keep the constraints in mind. With the add instruction if we did a similar thing, then you would need to create one for each possible pairing (around 50 instructions). If we had a subtract instruction that would double since the order of the operands matters. As for Patreon, I don't have one yet, but I'm planning on setting one up. Thanks for the enthusiasm!

[@atabac]

get the datasheet of the cpu of your laptop. start coding in assembly. there are free assemblers from gnu/gcc. its easier to learn that way. assuming have already read some computer architecture/organization.

[@SIGMA_BLYAT]

what about to build a vm in C? :D

[@miguelrivasperez2699]

I am truly enjoying this learning, but I find it very hard to read all the code. Would you kindly make the font bigger next time to increase readability?

[@LowByteProductions]

Glad to hear it Miguel! It's something I've had a lot of feedback on, and in the later videos I've made some changes to make sure important code is always readable when the connection is not as good or the quality is lower.

[@christiansakai]

For the next series, can you teach how to build your own database engine in Javascript

[@LowByteProductions]

Definitely adding this to the list of ideas

[@christiansakai]

@@LowByteProductions Yes please!!! By the way, your explanations are super approachable and very clear. This is my favorite JS channel.

[@devhonking721]

The registers are in a 16 bit value ? (I code this in Java, this is why i ask this question)

[@LowByteProductions]

Yes that's right - the registers are 16 bits wide. JavaScript supports a few specific bit-widths via the special Arrays (U)int8Array, (U)int16Array and (U)int32Array. The standard number type in JS is always 64-bit floating point, even when the number is an integer.

[@devhonking721]

​@@LowByteProductions Ok, thanks !

[@devhonking721]

TIP : If you code in Java, you can use char(a 16-bit unsigned value)

[@codevibin7137]

Excuse me for being dim, but what is the point of all this? Is this solely for education/research or are there real-world applications for this? It seems very interesting, but I just can't work out why.

[@LowByteProductions]

This particular project doesn't really have any real world application - apart from perhaps the fantasy game console it will eventually become. It's job is - like you say - mainly to educate people about how assembly and machine code work, and illustrate concepts like building parsers and compilers. But virtual machine in general are very much an applicable concept. For example, languages like python and java have a virtual machine that underpins them - and in the case of java that has allowed other language creators to target the virtual machine as a compilation target. Regardless of what you think of cryptocurrency, Ethereum - which has the idea of smart contracts - has a virtual machine that languages like Solidity target. The use of the predictable, constrained virtual machine allows people to be (relatively) sure about how their code will actually perform. Mainly, this series is about exposing people to all of these concepts in a hopefully interesting way, through a relatively complex project that is built from the ground up.

[@valentinthevoz7776]

I didn’t understand shit but it was still entertaining

[@jordixboy]

When you are writing the first program min 18, why do you split it? writeableBytes [0] = MOV_LIT_R1 writeableBytes [1] = 0x12 writeableBytes [2] = 0x34 Each element in the writeableBytes array represents 1 byte (8 bits) Also, if you join this instruction, its longer than 16 bits afaik, how can that work on a 16 bit cpu?: MOV_LIT_R1 0x12 0x34. Im getting confused by the splitting, this should look like this: writeableBytes [0] = MOV_LIT_R1 writeableBytes [1] = 0x1234 1 byte reserved for the instruction (MOV To R1), and 1 byte reserved for the parameter, in this case the 0x1234 literal But obviously 0x1234 doesnt fit into 1 byte. This for me is the logical thing: writeableBytes [0] = MOV_LIT_R1 writeableBytes [1] = 0x1234 This is 16 bits, 2 bytes. A 16 bit cpu should: - Instruction + parameters should fit into 16 bits (2 bytes) so this seems correct: writeableBytes [0] = MOV_LIT_R1 writeableBytes [1] = 0x1234 but as said before: 0x1234 This doesnt fit into a byte, so its being split like this: writeableBytes [0] = MOV_LIT_R1 writeableBytes [1] = 0x12 writeableBytes [2] = 0x34 But doesnt this make the cpu 24 bits? Im not understanding something, anyone could help?

[@Hyperboid]

Something to note is that the returns in the switch statement are crutial. Otherwise, you will get strange results.

[@LowByteProductions]

Yes that can definitely (and in my case has) cause some tricky debugging issues

[@EverythingOS]

How to run it?

[@LowByteProductions]

You need to install "node js", which you can find on the node website (nodejs.org/en/ ) or in your package manager if you're using linux. When you have it installed, you can run "node index.js" (without quotes) in the same directory as the source files.

[@whtiequillBj]

well... modern computers are closer to a hybrid of Harvard and Von Neumann. On that note. How what would be done differently if modeling from the Harvard architecture?

[@LowByteProductions]

Modern computers are still von Neumann, but they have other mechanisms like privilege levels and memory mapping units (MMU) which allow the flat address space to be remapped arbitrarily. If it were a harvard architecture, you'd need a separate address space for program code and data, along with specialised registers and instructions for accessing and manipulating. Often you cannot modify any program data at runtime, but I don't think that's a hard requirement. Take a look at AVR for a good example of a hardware architecture

[@anuraghazra4772]

Please increase the fontSize of editor..... and that margin in the vscode window makes it even worse to see the code.

[@nagarajuss8887]

Make fonts size bigger...

[@Malsavahara]

interesting

[@ThisCanNotBTheFuture]

Excellent lesson, but honestly moves really fast.

[@LowByteProductions]

Thanks for the comment! Were there specific parts that you found went too quickly?

[@ThisCanNotBTheFuture]

@@LowByteProductions Honestly, just the whole aspect of the writing of code being sped up (either that or you type amazingly fast). It makes it rather hard to enter the code while following along. But that's a minor criticism. Otherwise, the material and presentation are fantastic.

[@JobvanderZwan]

> And the prospect of building something like this that is able to perform those functions sounds quite daunting I think I'm misunderstanding what you mean here, but isn't Brainfuck is like... close to if not the easiest to implement programming language in existence and meeting all of the requirements?

[@LowByteProductions]

I meant in hardware, but in yeah totally. Building an actual Turing machine is not even impossible, but it is a pretty tricky hardware challenge.

[@TheLostBijou]

@@LowByteProductions not even impossible == uneven possible

[@_slier]

make your font bigger next time

[@nagarajuss8887]

Most of us can't see

[@LowByteProductions]

I've improved the visibility much more in later episodes. Unfortunately I can't do anything to fix the older ones!

[@yusuf9884]

Run four of these and you can run 64bit