Malloc Visualizer
Front-End Web Development, Motion
Duration: 7 months
malloclab.com
malloc
is a lab assigned in the CMU course, 15213: Introduction to
Computer Systems. After the lab, the students gain a deeper
understanding of the malloc library's implementation at a systems
level, fluency in pointer arithmetic, and practice writing and
debugging systems code to meet performance requirements.
During the lab, I saw an opportunity to make improvements that
could help students learn the abstract concepts through playful
visual diagrams.
Certain pages of the site are private in order to follow CMU's
academic integrity policy.
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, as well as the visual language of the NYC Subway system.
The opening page is interactive, functioning as a black-box
representation of malloc. It mimics a calendar interface—an
interaction that is usually familiar to college students.
While users can overlap blocks on the landing page, it is worth
noting that this does not reflect the expected behavior of malloc.
This visual choice was made purely for aesthetic purposes.
Using Adobe After Effects, I created playful 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 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.
