HueDrive: Sprint 2
Over the past week, I began progress on HueDrive by creating and layering three more base schemes for the 3D car — two from scratch, and one by adapting a paint scheme I’d previously made on another car model to line up properly on the one I’d more recently found. The latter, before becoming part of HueDrive, was part of a side project I’d undertaken over the fall and winter to hone my design skills in preparation for the thesis project: a rework of around fifty NASCAR liveries.
This obviously gave me a wealth of material when it comes to the base schemes that the user can select in HueDrive’s Creator function. I will not be using every single one, however, and the reason why speaks to the site’s specific purpose. A livery designer faced with a blank canvas always aims to create art that represents a certain car’s sponsor well. The curves of Jeff Gordon’s classic “rainbow” look arc in perfect harmony with DuPont’s oval logo, and Kevin Harvick’s throwback Busch livery from last year integrate the beer brand’s mountains into the hood design. I too kept this philosophy in mind when creating, for instance, a Target-branded machine that incorporated the store chain’s famous bullseye mark into its side panels. Something so specific to only one brand, however, will never work on HueDrive, a service I’ve conceptualized so that any team and any sponsor can create something that works for them. This does not mean there will not be varying styles and aesthetics available (stripes, flames, swooshes, etc.), only that, in whatever form they take, they must be versatile.
I also began attempting to begin the truly dirty work in regards to coding the Creator. Separating one of the bases I’d created into four separate images, I first created a separate class for each in CSS — three for the design’s three main colors, and one for the mask (a temporary layer that will help to define the shape of the car when laid out in 2D). I also used height and width attributes to shrink each separate image to a manageable size for web viewing, as the template’s default 1024x1024 resolution would obviously not have been ideal. In order to overlay the images in a proper stack — mask furthest towards the user, then the color layers — I assigned an absolute position to each of their classes, then used the z-index function to adjust their order in the stack accordingly. Yet, when I tested the page, the images only sat on top of each other in a conventional fashion (meaning I had to scroll down to see them all), and this issue persisted even after a few hours of testing. Nevertheless, I am aware that a solution to it must be found by next week.