Aesthetic.

About the Project

Aesthetic is an interactive, distorting grid that can be customized and shared with others. My original intention with this project was to make an interesting visual feature for the homepage of my website without using any other libraries than those provided by the browser. Once I was finished making the distorting grid part of Aesthetic (essentially a grid that distorted randomly over time), I decided to make it standalone with an interface for changing grid settings with intentions of submitting it to Chrome Experiments (how Experiements with Google). I made it a little more customizable and, most importantly, added some sassy phrases to overlay the grid.

Giving it an Interface

I took static values within my code and assigned them to properties that were attached to controls in a JavaScript library called dat.GUI. I was then able to test my experiment and various features that I added to it. As I kept testing my web app on desktop and mobile (touchscreen input was a hassle), I began to realize the limitations of dat.GUI, especially on mobile devices. While it works on mobile, it was obviously not designed for it. This led me to create my own dat.GUI replacement that used new HTML5 controls.

This new interface that I made worked out nicely and allowed me to customize it further. I decided to go for a 90's aesthetic, with an interface resembling Windows 95. The new interface actually took almost as long to make as the distorting grid. The interface itself was easy but the sharing feature was a bit more complicated than anticipated.

Sharing with Others

There are many properties in the distorting grid that can be changed so in order to generate a URL that could be shared with others, I would have to compress these properties to a short string. The string turned out longer than I hoped it would since I decided not to use a database for storing longer URLs. Since this is just a small project for fun, I decided not to add a database to the project but I now know in the future to do so. While creating the custom URLs was not complicated, I did have to create separate encoding and decoding functions for the string. Overall, adding the ability to share yours creation with others took almost as much time as creating the distorting grid app itself.

A Chrome Experiment

Once I finished my Aesthetic project, I decided to post it to Chrome Experiments where it stayed on the front page for about six months and has attracted around 60,000 visitors (and still counting). It remains on Experiments with Google, if you'd like to check it out!