16-Bit Virtual Machine in JavaScript 001

Поделиться
HTML-код
  • Опубликовано: 18 окт 2024

Комментарии • 131

  • @mayur9876
    @mayur9876 5 лет назад +88

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

    • @gjergjkadriu9460
      @gjergjkadriu9460 5 лет назад +12

      +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.

  • @SavingShredz
    @SavingShredz 5 лет назад +37

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

  • @renato.bohler
    @renato.bohler 5 лет назад +35

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

  • @EvilFlipTV
    @EvilFlipTV Год назад +3

    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!

  • @ElliotdeVries
    @ElliotdeVries 5 лет назад +7

    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.

  • @wlockuz4467
    @wlockuz4467 2 года назад +2

    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
      @LowByteProductions  2 года назад

      Thank you WloCkuz, much appreciated. Tell a friend!

    • @wlockuz4467
      @wlockuz4467 2 года назад

      @@LowByteProductions Sure thing!

  • @StereoPT
    @StereoPT 4 года назад +9

    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
      @LowByteProductions  4 года назад +2

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

  • @shekharaakula6233
    @shekharaakula6233 4 года назад +3

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

  • @deckarep
    @deckarep 5 лет назад +3

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

  • @IannoOfAlgodoo
    @IannoOfAlgodoo 5 лет назад +5

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

  • @MisterMojoRising
    @MisterMojoRising 5 лет назад +4

    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!

  • @darqed
    @darqed 11 месяцев назад

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

  • @monman42
    @monman42 5 лет назад +4

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

  • @eflat__major
    @eflat__major 5 лет назад +2

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

  • @singhyuvraj122
    @singhyuvraj122 9 месяцев назад

    Great video, This makes Javascript for everything possible

  • @michaelxtronik2809
    @michaelxtronik2809 5 лет назад +9

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

  • @simonc997
    @simonc997 2 года назад

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

  • @edwardmacnab354
    @edwardmacnab354 2 года назад

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

  • @keithrobinson2016
    @keithrobinson2016 2 года назад

    Just found the best channel on RUclips!

  • @spencerk7187
    @spencerk7187 5 лет назад +14

    If you could increase font size that would be great.

  • @arslanrozyjumayev4015
    @arslanrozyjumayev4015 2 года назад

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

  • @artemmangilev7561
    @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

  • @billmcbungabine9404
    @billmcbungabine9404 3 года назад

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

  • @keilanknight8513
    @keilanknight8513 4 года назад

    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!

  • @icebrn
    @icebrn 5 лет назад +1

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

  • @waheedafolabi6264
    @waheedafolabi6264 5 лет назад +1

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

  • @iyappansriram9854
    @iyappansriram9854 3 года назад +2

    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!

  • @GamerRui275
    @GamerRui275 5 лет назад +1

    Can't wait for the 002 video now.

  • @limitless9483
    @limitless9483 5 лет назад

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

  • @ehguacho2008
    @ehguacho2008 3 года назад

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

  • @elgs1980
    @elgs1980 5 лет назад +1

    Super cool!! Thank you so much!

  • @RictorScale
    @RictorScale 3 года назад

    This is insanely informative and honestly amazing. WOW!

  • @JoseSilva-lf1ve
    @JoseSilva-lf1ve 4 года назад

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

  • @brandnewmark9232
    @brandnewmark9232 3 года назад

    Absolutely amazing content, thanks

  • @Zawibis
    @Zawibis 5 лет назад

    Amazing content and production quality. Keep it up!

  • @pieteroverbeek1341
    @pieteroverbeek1341 5 лет назад +2

    Very interesting!

  • @theitatit
    @theitatit 5 лет назад +1

    Really good content!

  • @rebelmachine88
    @rebelmachine88 4 года назад

    Wow, this clarifies so much! Thanks for the videos

  • @PendragonDaGreat
    @PendragonDaGreat 2 года назад

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

  • @thebirdhasbeencharged
    @thebirdhasbeencharged 5 лет назад +2

    Woah, exciting man

  • @rajughorai3909
    @rajughorai3909 5 лет назад +2

    Bro you have good content in your channel.

  • @matibor
    @matibor 5 лет назад

    This just melts my brain

  • @Fernando-du5uj
    @Fernando-du5uj 2 года назад

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

  • @stefanosbek
    @stefanosbek 5 лет назад +2

    This is too good

  • @brambeer5591
    @brambeer5591 5 лет назад +1

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

  • @vanellope9565
    @vanellope9565 4 месяца назад

    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
      @LowByteProductions  4 месяца назад +1

      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
      @vanellope9565 4 месяца назад

      @@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

  • @antonionotbanderas9775
    @antonionotbanderas9775 6 месяцев назад

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

  • @DonatoBencosme
    @DonatoBencosme 5 лет назад +2

    amazing!!!

  • @miguelrivasperez2699
    @miguelrivasperez2699 4 года назад

    Great video!

  • @pepn
    @pepn 5 лет назад +1

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

  • @XsmaelTheBest7
    @XsmaelTheBest7 4 года назад

    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
      @LowByteProductions  4 года назад

      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.

  • @vancheloChanel
    @vancheloChanel 3 года назад

    Amazing 👍👍👍

  • @pdelaguardia1
    @pdelaguardia1 5 лет назад +2

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

  • @vipzip8863
    @vipzip8863 5 лет назад

    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
      @LowByteProductions  5 лет назад +2

      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
      @vipzip8863 5 лет назад

      @@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.

  • @ValeAbby91
    @ValeAbby91 5 лет назад

    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
      @LowByteProductions  5 лет назад +1

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

  • @limitless9483
    @limitless9483 5 лет назад

    this guy is the alpha male of Javascript

  • @itsval6716
    @itsval6716 3 года назад

    Cool!

  • @christiansakai
    @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
      @LowByteProductions  Год назад +1

      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
      @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?

  • @valentinthevoz7776
    @valentinthevoz7776 Год назад

    I didn’t understand shit but it was still entertaining

  • @christiansakai
    @christiansakai 5 лет назад +1

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

    • @LowByteProductions
      @LowByteProductions  5 лет назад +1

      Definitely adding this to the list of ideas

    • @christiansakai
      @christiansakai 4 года назад

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

  • @nsoeaung
    @nsoeaung 4 года назад

    Great

  • @miguelrivasperez2699
    @miguelrivasperez2699 4 года назад

    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
      @LowByteProductions  4 года назад

      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.

  • @gerardokolie1829
    @gerardokolie1829 Год назад

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

  • @jordixboy
    @jordixboy 2 года назад

    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?

  • @ThisCanNotBTheFuture
    @ThisCanNotBTheFuture 5 лет назад

    Excellent lesson, but honestly moves really fast.

    • @LowByteProductions
      @LowByteProductions  5 лет назад

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

    • @ThisCanNotBTheFuture
      @ThisCanNotBTheFuture 5 лет назад

      @@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.

  • @codevibin7137
    @codevibin7137 4 года назад

    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
      @LowByteProductions  4 года назад +1

      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.

  • @Hyperboid
    @Hyperboid 2 года назад

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

    • @LowByteProductions
      @LowByteProductions  2 года назад

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

  • @irina_divine
    @irina_divine 10 месяцев назад

    interesting

  • @crispy_rw
    @crispy_rw 3 года назад

    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
      @LowByteProductions  3 года назад +1

      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
      @crispy_rw 3 года назад

      @@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
      @LowByteProductions  3 года назад +1

      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
      @crispy_rw 3 года назад

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

  • @sigmawolf228
    @sigmawolf228 3 года назад

    what about to build a vm in C? :D

  • @devhonking721
    @devhonking721 4 года назад

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

    • @LowByteProductions
      @LowByteProductions  4 года назад

      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
      @devhonking721 4 года назад

      ​@@LowByteProductions Ok, thanks !

    • @devhonking721
      @devhonking721 4 года назад

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

  • @whtiequillBj
    @whtiequillBj 2 года назад

    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
      @LowByteProductions  2 года назад

      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

  • @benjamintpoon
    @benjamintpoon 5 лет назад

    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
      @LowByteProductions  5 лет назад

      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
      @benjamintpoon 5 лет назад

      @@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
      @LowByteProductions  5 лет назад

      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
      @atabac 4 месяца назад

      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.

  • @beepbeepimasheep237beepbee3
    @beepbeepimasheep237beepbee3 3 года назад

    Are we using node.js?

    • @LowByteProductions
      @LowByteProductions  3 года назад

      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
      @beepbeepimasheep237beepbee3 3 года назад

      @@LowByteProductions Works for me.

    • @beepbeepimasheep237beepbee3
      @beepbeepimasheep237beepbee3 3 года назад

      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

  • @Eugensson
    @Eugensson Год назад

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

  • @anuraghazra4772
    @anuraghazra4772 4 года назад

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

  • @JobvanderZwan
    @JobvanderZwan 5 лет назад +1

    > 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
      @LowByteProductions  5 лет назад

      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
      @TheLostBijou 5 лет назад +1

      @@LowByteProductions not even impossible == uneven possible

  • @nagarajuss8887
    @nagarajuss8887 4 года назад +1

    Make fonts size bigger...

  • @EverythingOS
    @EverythingOS 2 года назад

    How to run it?

    • @LowByteProductions
      @LowByteProductions  2 года назад

      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.

  • @_slier
    @_slier 8 месяцев назад

    make your font bigger next time

  • @yusuf9884
    @yusuf9884 2 года назад

    Run four of these and you can run 64bit

  • @nagarajuss8887
    @nagarajuss8887 4 года назад +1

    Most of us can't see

    • @LowByteProductions
      @LowByteProductions  4 года назад +1

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