Malloc Visualizer

CS Education, Front-end Dev (Svelte, TypeScript, Vite)

malloclab.com

CMU's 15-213: Introduction to Computer Systems has played a major role in the way CS is taught today. The class not only pioneered well-known labs such as bomblab and attacklab, but their slide have been used by computer systems courses at other universities, setting a higher standard for modern CS education.

During the lab, I observed places where clearer visuals and fewer words could help students grasp the key concepts more effectively. I decided to create a website to explore this idea.

Malloc Typography
Malloc Colors
Malloc Site Structure

The opening page is interactive, functioning as a black-box representation of malloc. To keep the code clean, I used a Model View Controller structure to separate mouse interactions from drawing logic.

Using Adobe After Effects, I created animations to illustrate specific concepts.

Visualizing two data structures:

When I did the lab for the first time, I had a difficult time grasping the concept that heap and the explicit free list are two separate data structures and that the blocks in the free list may be out of address order. I wanted to clearly establish that concept when describing the difference between the implicit and explicit list. Hence, the explicit list has lines that point blocks in the heap to their corresponding location in the free list.

Explicit Slide

Closing Thoughts:

My goal was to communicate the concepts I struggled on with as few words as possible, relying on pictures and animations to do the heavy lifting. Not only did I strengthen my understanding of the material, but I also saw so much growth in my abilities to communicate complex ideas through images. It was definitely an interesting challenge to find ways to create a consistent visual language to visually represent different data structures at play. However, I also had a lot of fun making use of my knowledge of animation to portray abstract concepts in an engaging way. My favorite part was when I used sinusoidal motion and a speed ramp to give the explicit list a more organic feel.

15-213 was one of the most challenging yet rewarding classes I have taken at CMU. I not only learned about the intricacies of how computers work, but also saw so much growth in my abilities to design, write, and debug code. When I first started the lab, I felt overwhelmed by how many small details I needed to keep track of to make the library work. My hope with this project is to help future students appreciate how beautiful and rewarding this lab can be.

Malloc Code