Show HN: Q8, an In-Browser VM for Learning and Visualizing Bytecode Programming | Hacker News Reader

Show HN: Q8, an In-Browser VM for Learning and Visualizing Bytecode Programming

anchovieshat.github.io

145 pointsanchovieshat28 comments

[I'm the author] Q8 is a little tool I started as an experiment to visualize low level code as it manipulates raw data in memory, but has evolved into a full-fledged experimental environment for learning about low level programming. I'll be around to answer any questions. Thanks for looking at my project!

If you like this, you can catch my other projects at http://pentaquine.com. If you happen to be hiring I'd love to hear from you. I've recently moved to the West Coast and am currently looking for a new job.

This tool is great. Good job.

Thats a great tool in learning low level code. I really like to understand in machine level but i have no idea how machine works. Like what is a raw data memory. Character size in terms of memory availability. Can i get this with this tool or can you please recommend a resource to start learning machine level?

Hey, there's a lot you can learn from Q8, but if you want to look at something deeper, you might want to look into x86 or ARM assembly.

https://ocw.mit.edu/courses/electrical-engineering-and-compu...

https://www.cl.cam.ac.uk/projects/raspberrypi/tutorials/os/

http://opensecuritytraining.info/IntroX86.html

thanks for those resources

Seems like a great project! Can this be used alongside the NAND to Tetris project[0] for understanding low level programming?

[0] http://www.nand2tetris.org/

While it isn't quite the same emulated machine, and therefore has a different instruction set, it does tread similar ground to Nand2Tetris's project 4, however it lacks an assembler, so you'd have to input directly in byte sequences.

Great stuff... However in the sidebars containing disassembly for first 3 samples all adresses seems to be offset by +1 (or memory image contents is offset by -1)

Wow, I'm not sure how I missed that. Thanks! I've pushed the fix up, and it should be live shortly.

Huge props for putting this all together!

The lessons and guides you published are definitely my key takeaway from this project. I think there is an opportunity for an integrated trove such as this to serve as a great learning platform; timed just right, as simple, minimal chips and vms are recently experiencing new enthusiasm.

So keep up the good work!

In a similar vein, here is a VM I made for educational purposes.

https://zenoamaro.github.io/chip3/

It runs in the browser, featuring a fully inspectable CPU and RAM, rewindable execution, and simple inline disassembly of the source. It's also got a simple assembler (no GUI yet, sorry for that) which it uses to run the example program[1].

The hardware is as simple as possible:

- 3-bit instruction set, for a grand total of 8 instructions, inspired by the PDP-8

- 5-bit addressing, giving 32 words of 8 bit RAM

- A simple, integrated printer

The source is, I hope, documented well enough[2]. There is a handbook available[3], and a small IDE is in the works.

[1]: https://github.com/zenoamaro/chip3/blob/master/dist/index.ht...

[2]: https://github.com/zenoamaro/chip3/blob/master/src/System/CP...

[3]: https://github.com/zenoamaro/chip3#programmers-handbook

This is very cool, zenojevski! Good luck with your VM!

Cute little cpu! I like the OPR instruction, neat way of handling increment/decrement (DEC by way of NOT and INC). Are ROR and ROL also chained? That's neat too.

Thanks! It is derived PDP-8's own OPR instruction, which goes even further, with many carefully aligned combinations leading to clever results. A testament of ingenuity which reveals fine craftsmanship.

In reality, I've considered switching to a regular mapping, so to have 32 no-operand instructions instead, which would fit the original five operations, all sensible combinations, plus more.

But chaining operands is definitely a more extravagant thing, so I think it can be instructive in showing how creative a solution can be in face of limitations .

The chaining kind of reminds me of how z80's ALU works [1]. It's kind of chained in together over time.

[1] http://www.righto.com/2013/09/the-z-80-has-4-bit-alu-heres-h...

The visualizations remind me of the game "Human Resource Machine", which also allows to program in some pseudo-assembly instruction set and visualizes the execution through characters which are moving boxes. I really liked that for the facts that you could immediately see and feel how code optimizations influenced the runtime behavior.

It looks neat but I could not figure out what exactly was happening.

It might help if you did some smaller programs first where it is clear what the numbers in the grid really mean. Do those numbers map over (assemble) to the instructions?

I guess they do but I never could find a table that said "store" is this number...

It does look cool though!

On the page with the editable grid, https://anchovieshat.github.io/Q8/q8.html there's a table that maps numbers to instructions, and gives a brief description. It wraps below the grid to better support smaller screens. If you have a larger screen, you can expand the browser window, or if not, scroll down the page, and it should all be there for you.

In addition, once you have filled in the boxes a little, you can step through the code and the blue box under the grid will give you another, very brief bit on the instruction that your program counter is on.

Thanks for asking!

What exactly is one expected to do in order to solve say the very first puzzle? I can click on the grid to highlight a cell but I can't alter the contents.

If I use the buttons to run the existing program it does nothing but check if register A is zero, jumps to cell 254 and executes the error instruction.

There is something I'm missing but perhaps what I am missing is not so obvious.

I think this is meant to be a "hello world" level puzzle. You literally just click the cells and type to edit them.

Are you sure you can't edit once you highlight a cell? If so that's probably a bug.

It's inconsistent for me - it seems to sometimes get stuck in a state where I can't update any of the cells.

Sometimes it will allow me to update the cells but whatever I type merely appends to the existing contents with no obvious way to clear an individual cell.

Press backspace to delete a character inside a cell.

That's the very first thing I tried and it wasn't working at all for me earlier. Backspace was navigating to the previous page.

Now it seems to work... sort of... sometimes it'll clear one of the characters in the cell and sometimes instead the global handler traps it and attempts to navigate to the previous page in my web history.

I believe I've corrected the backspace bug with a little help from a pull request, preventing default behavior and patching it through the same route the delete key follows. My machine doesn't have a backspace key, so I missed it during testing. Thanks for the heads up!

I like it a lot, was looking for something like this to teach 13 with, so, thanks! Had trouble editing values in the tiles tho - backspace made the browser go back to HN and delete had no effect. This was in the most recent chrome on my ubuntu machine. Is there another way?

Ah, this appears to be a chrome problem -- it works fine in firefox.

Really neat! Is there a list of the full instruction set somewhere?

Really cool visualization of the VM!

Reply on news.ycombinator.com