About This Project
Not the type of site I usually make, but I wanted an easy way to guess the Vans Warped Tour lineup for this year!
If you have had a chance to talk to me, or if you follow my Instagram at all, you probably know what sort of music I like. So it should come as no surprise that I am a regular attendee of the Vans Warped Tour. Last year I drove down to Orlando, Florida by myself and did the fest down there solo. This year I haven't decided just yet which (if any) stop I'll be at, but if I can sweet talk my wife enough I am hoping to be at Orlando again, if not both Orlando and DC.
One of my favorite parts of Warped Tour in particular is that they don't really announce the bands when they announce the festival, or even when they put tickets on sale. No, they wait and slowly release band names over several months. On January 30th, they kicked off 30ish Days of Warped, and every couple of hours we get a new Instagram post letting us know about a big or small band that's joining the line up at at least one of the five festivals this year.
This leaves a ton of room for guessing. Warped Tour releases a redacted image of the entire lineup, which makes it fun to try and fill in the blanks. Well, today I was stuck inside because of the snow and I decided I wanted to build a website where users could fill out their own guesses and share those guesses with others either via social media or by downloading a screenshot. And that's how https://lineupguesser.com/ was born!
The biggest challenge I had was finding the right font size and weight to match the original image, and finding a way to map inputs over the redacted bands so a user could add their guesses.
The quickest solution I could come up with for mapping the inputs to the images was actually to build a whole application for calibrating. This allowed me to drag a box over the image that then generated some code to map out percentage based coordinates for each field.
This was easily the most time consuming part of the build, but by the time I wrapped up I was so happy with the outcome. The fields are mapped almost perfectly.
The next challenge was the font. I knew that the font being used was an Adobe font - Alternate Gothic Condensed (very fortunate naming for a font used to represent a festival full of Alt-styled people). But every image had a different font size based on the amount of bands that would be playing - Mexico had much larger fonts than Long Beach or Orlando, for example. So I built in a scale to help with math, and that made the guess work of trying to get the text right a whole lot easier.
Finally, I wanted to add the ability for users to download or share an image of their guesses. This took a little guess work as well. I tried using html2canvas but had a really hard time getting the text positioning to work. Ultimately, I landed on calling the Canvas API directly to create the image (with some more text scaling to get it to look relatively good).
All in all, it was a fun experiment and I learned a lot of new things that I can use to help people build their showcase sites in the future.
If you're looking for a website, let me know! Feel free to sign up for a 30 minute call or send me a note! I'd love to chat with you.