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.
      
 
          