Malloc Visualizer
Motion, Web Development (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–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.
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. Please contact me if you would like to
access the private pages.
The opening page is interactive, functioning as a black-box
representation of malloc.
TO DO: WRITE ABOUT MVCt mimics a calendar interface,
an interaction that is usually familiar to college students.
Using Adobe After Effects, I created animations to illustrate specific concepts.
Visualizing two data structures:
TO DO: SHOW BEFORE AND AFTER
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.
Takeaways:
More pictures, less words. establishing consistency.