Malloc Visualizer (Under Construction)

Web Development, 2024-2025.

Malloc is a lab assigned in the CMU course, 15213: Introduction to Computer Systems. After the lab, the students gain a deeper understanding of malloc at a systems level, fluency in pointer arithmetic, and practice writing performance-critical and bug-free systems code.

During the lab, I saw an opportunity to make improvements that could help students learn the abstract concepts through playful visual diagrams.

Process:

Students are encouraged to write modular code to help create flexible changes in the future and I wanted the design to reflect that. Hence, I drew inspiration from Swiss Design principles such as enforcing a modular grid system and minimal elements.

I wanted the memory blocks to have personality and give the user a sense of agency when they interacted with them. Rounded corners also evoke a sense of friendliness.

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 if the author chooses to implement LIFO insertion, 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.

Block Insertion:

A challenging part of the malloc lab is implementing four kinds of block insertion as well as the edge cases that come with them. To maintain consistency with the explicit list illustration, I used the two separate data structures–the heap and the free list–to demonstrate what is happening at each case.