Malloc Visualizer
Front-End Web Development, Motion
Duration: 7 months
malloclab.com
CMU's 15-213: Introduction to
Computer Systems has played a major role in the way CS is taught today–they have not
only pioneered lab assignments, such as
bomblab and attacklab, but also created
educational slide decks that have proliferated other prestigious
institutions' computer systems curricula, setting a higher standard
for modern CS education.
malloclab is the second major coding lab in the course,
where students implement a dynamic memory allocator in C.
After completing the assignment, 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.
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 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.
You may also like
