Visulator: Learn about CPUs and Assembly on an interactive Playground in the Browser

[thlorenz]

Visulator

Learn about CPUs and Assembly on an interactive Playground in the Browser

Abstract

Do you feel like you are unsure about what's going on inside a computer under the hood? Have you ever wondered if you should learn assembly to help you understand, but were afraid it was too hard? Don't you fret, this talk and visulator are here to help!

visulator is a visual CPU emulator designed as an interactive resource to learn about assembly language and the CPU. Not only can you play with the examples and see whats going on inside the CPU but also detailed documentation and links to other resources are included with the repo. The animations are designed to help you understand how registers and flags are affected by each instruction. Additionally specific instructions like add are animated in detail.

In this talk I will explain how visulator was built using current web technologies and give some insight into how a CPU processes assembly instructions.

Outline

This talk will have two sections. In one I'll demystify how CPUs work and how assembly language relates to the processed instructions. In the other I'll detail how visulator was built and how it works.

CPUs and Assembly

• assembly assembled to opcodes
• opcodes read and processed by the CPU
• registers and/or memory updated after each instruction is processed
• flags set depending on outcome of instruction to affect next instruction
• high level explanation of techniques like pipelining which improve CPU performance

  Visulator

• JavaScript built, tests powered by node, web app powered by browserify
• all animations are CSS based
• disassembler uses capstone compiled to JavaScript via emscripten
• tests are generated from assembly examples via gai, a GDB scripting tool I wrote, which also produces the below output in order to make it easier to understand the CPU you want to emulate
• instructions are really emulated as you step through the assembly
• built for learning not for speed, code authored for readability as well and heavily commented
• the project has Mad Science status and lots of work remains as there are hundreds of instructions that still need to be implemented
• end goal is to allow loading arbitrary binaries and support editing assembly

Bio

Thorsten is a Jazz musician turned developer and is excited about Node.js and its community The fast turnaround from idea to working module has proven addictive for him and led to lots of modules which ended up on github and/or npm. He also contributes to other awesome open source efforts like browserify to which he added source map support.

Lately he has been focusing on understanding the Node.js stack in more depth, focusing on libuv and v8.

Thorsten works for NodeSource.

• Name : Thorsten Lorenz
• Twitter : @thlorenz
• Github : thlorenz
• Website : thlorenz.com

[a0viedo]

I'm really diggin this talk! I imagine that visulator could be great for a learnyouassembly workshopper

[thlorenz]

@a0viedo I thought about that as well - some ways to go, but definitely possible.