project
mondrian.fun
Personal Project
Spring 2020
UX Design
Interaction Design
Fullstack Web Development
This was a fun personal project I completed during the COVID-19 lockdown. I wanted to create a virtual art studio and gallery space where people could create artwork and enjoy other people's work. I wanted to explore the idea of limiting the set of tools available to the user to encourage creativity whilst giving the works a sense of continuity. I used the artistic style of Piet Mondrian, a 20th Century dutch artist best known for his work with perpendicular lines and use of the primary colours to create an online space celebrating this iconic artistic style. This project created challenges in both design and engineering. I enjoyed the interaction design challenge of recreating the painting process digitally and exploring how this could be scaled down to mobile devices. I also devised an interesting method of storing the paintings people produced as binary trees rather than images to maximise rendering speed and quality.

Example Studio Interaction

Paintings are composed by creating a serious of vertical/horizontal splits, then tapping/clicking and dragging to adjust split position. Then the created segments can be painted in the primary colours used by Mondrian in his work. Finally the painting can be hung in the virtual gallery

project
project

Binary Tree Representation

project

Storing the paintings as binary trees instead of images dramatically reduces the file size and render time. The json file used to store a painting is roughly 50x smaller than if it was stored as a png. This means that paintings can be loaded and rendered into the gallery almost instantly. Additionally, due to the fact the paintings are represented as blocks of colour rather than pixels they can be scaled up without pixelation.