Petty About Books
Petty About Books
An Experience for the Bitter Writer
When presented with the task of integrating both an API and the p5 library, I tried to focus on what was an enjoyable interaction in p5. I find that I often just really enjoy the weird glitchy, making a mess of things moment the best. As I researched available API's, I came across the NYTimes Bestseller List. After doing some research, I learned that there is a bit of controversy, desire, and bitterness surrounding this list. With these starting points, I came up with the idea for what I have been calling "The bEsTsElLeR List." I wanted to invite resentful writers to fully enjoy the shallowness of those petty feelings, and give them the opportunity to digitally "spill wine" on the book cover.
I started by first just linking up the API and seeing if I could access the information. I also realized that there were multiple lists. While it wasn't in my MVP, I decided to plan ahead for the pulling of additional information and set up my code to first pull the names of the lists, and then use that information to pull the list that I wanted to access. This would make it possible for me to easily extend the project scope in the future. With that in place, I sketched out the user experience and the language that would help set the appropriate tone.
With that mapped out, I went into figma to develop the design strategy. I modeled the type and layout on the NYTimes website aesthetic, as I felt the more serious, straight-forward tone would contrast with the activity, and make the pettiness feel more rebellious and pleasurable. Having this visual plan also made it easy for me to setup the HTML and CSS structure in a logical and consistent way.
Separately, I worked in the p5 web editor to develop the various ways of messing up the book cover. The interactions on their own weren't too challenging to develop. However, I realized that setting up the interactions, whlie integrating with the cover and existing mess was not so straight-forward. I ended up setting the different mess-making moments up as flows, which were controlled in one array. Pushing the bottom button would end one flow and move the user into the next one. As the user moved, if needed I'd capture the existing image and then redraw it as needed. This led to some interesting glitches as the pixelDensity needed fine-tuning, and the timing/nuance of the interactions needed a great deal of work to have them function in a way that felt natural to the user.
While I wanted to develop more interactions, I ended up getting log-jammed on a flow which invited users to cut up the cover. In order to ensure that I had an MVP standing up for the presentation, I decided to trim the scope and move forward with the interactions that I were up and running. From here, I integrated everything into VSCode, where I encountered one more big ol' bug. I was able to call the book cover image and update an html element with it, but I couldn't figure out how to get it onto the p5-ready html canvas. I tried a number of different techniques and timings in the calling of the API, or trying to copy the image data, but I couldn't seem to resolve it. I ended up presenting the work with an image being pulled in locally, in order to demonstrate the overall intention of the project.
Updates and a resolution will hopefully be forthcoming!