Diagram Appropriation

Diagram Appropriation is my index. Through displaying collected artifacts, I reframe the time spent studying in a more playful light.

Timeline: 1 week

Process:

I was inspired by the natural shapes created by my Deterministic Finite Automaton diagrams. To make a more elegant image, I drew inspiration from Mark Lombardi's diagrams and I tried to look for ways I could change the relationship between the nodes and the edges.

Looking through loose papers, I noticed that a majority of them were done with pencil or pen. I wanted to make sure that the interface did not distract from the content, so I decided to keep it simple with black text on a white background with minimal node movement.

Graph Movement:

Since the project is 2D, it made the most sense to use p5.js for my implementation. To create my graph, I started with working spring code created by Golan Levin. Mimicking my early sketches, I opted for bezier curves instead of straight lines to connect the nodes.

I asked a few people to test the site interaction. A common piece of feedback I got was that the recoil of the springs was too fast and it was too difficult to see the topology of the graph. One person said that the oval nodes looked confusing so I decided to change the node shape to tiny A4 papers. While the rectangular nodes might not have the same, organic, quality as my sketches, it feels more intuitive to the user that the nodes represent pieces of paper.

Storing the Data:

Not all edges hold the same meaning. Some pages had scratch work for multiple classes and I needed a way to distinguish between different courses. Hence, I used an adjacency matrix to store the edge information. Instead of populating the matrix with 1's to represent a non-zero value, I used the course number. The nodes could be accessed through indexing into the first row of the matrix.

Takeaways:

In this project, a key takeaway has been enforcing constraints for better design. Grid systems helped me organize my information to look pleasing to the eye. Working with fewer constraints, then gradually adding smaller changes taught me that less is more. At the beginning, I was not sure to include all scratch work or only scratch work done on A4 papers. However, using A4 rectangles instead of circular nodes led to a more intuitive interface.

Another key takeaway was practicing asking for constructive criticism from my peers. Asking questions about the site interactions without giving any context to the project's purpose gave me insight to see interactions were effective and which were not.

Additionally, thinking a few steps ahead encourages implementing features with modularity, allowing for flexible changes in future iterations. That led me to using an adjacency matrix to store the graph information which makes it easy for me to add information as I accumulate more papers in the future.

Lastly, practicing honesty by openly sharing the courses I dropped or did not pass has been valuable. It was a tough decision for me to share that information but I believe that it candidly shows my personal growth as a student.

Github

You may also like