Before Refactoring

One of the first problems that I needed to solve was about when things were being drawn. In order to draw on top of the book cover, I needed to draw the cover in setup and use draw to let the user draw on top of it. (The other alternative would be to continuously capture and redraw the entire canvas, a computationally-costly approach.)

When a cover is active, I was struggling to figure out how to control when it was being drawn. I wouldn’t be able to run a typical p5 setup function, because I needed it to wait for the images to load from the server. Additionally, I would have to reset the setup every time a different book cover was selected.

My approach was to move the cover to the canvas, and then try to control whatever was happening in the canvas in a repeatable way. This required a ton of global variables. The code was complicated and frankly, not very fun to work on. It was a struggle to get things working even just a little bit better.

After sleeping on it, I realized that if I rewrote the bookcovers to be a class, I could control the individual covers from the CLASS level, rather than trying to control them through what was going on in the canvas. This was the beginning of a big refactoring push, as I had to re-translate the entire system to accommodate this switch.

‍

After Refactoring

Refactoring was slow and there wasn't much to screenshot or look at. It was basically about breaking things one at a time, and then slowly correcting them. I often found myself thinking "I can probably delete this whole code section." When I felt that way, I would comment it out and then come back to delete it when I had run things enough time and in enough ways to ensure I could do without.

As soon as the book covers were in place as classes, everything became easier. The code was fun to work on again. It was no longer painful to debug and work on issues. The code overall became significantly more readable.

This was the biggest refactor, but it also made it easier for me to see how to rewrite and simplify other sections of the code. Overall, the code is a lot less reliant on global variables now. It’s also more clearly separated into the overall project flow, versus the flow relevant to the individual bookcovers.

With these changes, it was easy for me to see how to expand on the overall functionality. Rather than pulling just the #1 bestseller from 5 lists, I updated the server code to pull the top 5 sellers from those 5 lists, and provide users with a way to select the list they wanted to be petty over. While the overall functionality still has some bugs, especially when moving between the different lists, the experience feels a lot smoother than before. It’s easier for me to iterate and start to build in more of the fun ideas and integrations.

Details

With the refactoring complete, I was able to put more time into some of the details. I spent an inordinate amount of time figuring out the right size, texture, and outerglow to put around the stars.