
Show HN: Q8, an In-Browser VM for Learning and Visualizing Bytecode Programming - anchovieshat
https://anchovieshat.github.io/Q8/index.html
======
anchovieshat
[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](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.

~~~
capex
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/](http://www.nand2tetris.org/)

~~~
anchovieshat
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.

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

[https://zenoamaro.github.io/chip3/](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...](https://github.com/zenoamaro/chip3/blob/master/dist/index.html#L25)

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

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

~~~
beefok
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.

~~~
zenojevski
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 .

~~~
beefok
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...](http://www.righto.com/2013/09/the-z-80-has-4-bit-alu-heres-how-
it.html)

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

------
tonetheman
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!

~~~
anchovieshat
On the page with the editable grid,
[https://anchovieshat.github.io/Q8/q8.html](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!

~~~
alyandon
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.

~~~
_dps
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.

~~~
alyandon
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.

~~~
gpsx
Press backspace to delete a character inside a cell.

~~~
alyandon
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.

~~~
anchovieshat
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!

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

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

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

------
beefok
Really cool visualization of the VM!

