This Is My Jam

How We Built “Music Looks Awesome” & How You Can Join In

For those interested in the design and tech behind our “Music Looks Awesome” release, this is a follow-up post to our announcement about the new jam backgrounds.

We got the project started with some design research into visual styles and trends in music culture, looking to things like album covers, videos, internet trends, and street and runway fashion for inspiration. Trends are something we choose to view “as epithet”; they’re useful visual shorthand for conveying a mood or style about a certain piece of music. Something pretty unique about Jam is it’s a place where old music surfaces alongside new releases, so we wanted to offer a spectrum of styles that walked the line between current trends and old-school classics. This is some of the early inspirational material we collected:

Once we had a few visual directions to try, Andreas and I divided up the work, deciding that some would be better approached first as a technical prototype, and others with a drawing. As our work progressed it overlapped more and more, moving back and forth between sketches, Illustrator, Photoshop, PIL, aggdraw, and scipy. In the end, every background required something beyond just a mix of our skill-sets. The problems we had to solve sat between our individual comfort zones with our tools; we continually had to reach across this gap, grasping at an understanding of each other’s disciplines and tools to build something passable. Here’s where we got to:

• Damon (aka blur): Damon became the new default you get when you pick a jam. A larger-than-life blurred image of the jam art. It’s neutral, doesn’t assume anything about your music choice and pretty much always looks good. Even with the cruddiest of small pixellated images. Hat tip to ScreenFeeder.
  
  
• Lucy (aka kaleidoscope): Inspired by the kaleidoscope patterns of psychedelic rock as much as current aesthetics and projects like Rorschmap, Lucy is made by taking a right angled triangle from the bottom right corner of the jam image, copying and pasting the corner reversed, flipped and turned around eight times in a circle.
  
  
  
• Sid (aka halftone): Since a lot of the music posted on Jam is from another decade, we wanted something that could evoke the cheap old printing or photocopies. Using the Black Keys poster hanging in our studio space as reference, we created this by placing lots of little filled circles along a triangular grid. The radius of the circle is based on the average gray value in its containing square, and the width/height ratio is subtly randomized to make the pattern appear a bit less computerized.
  
  
  
  
• Shade (aka bokeh): After creating Damon, we were really pleased with how nicely a blurry background makes your jam image stand out, so in a nod towards photo-editing apps we created Shade, a bokeh background that grabs a colour in your jam image, increases the saturation and replaces the black and white shades in a 24-bit PNG image. Getting our heads around color replacement was made easier with this test color-chart (original on top, replacement below):
  The next five backgrounds (João, Kurt, Shania, Kimbra and Amy) are using the same programmatic coloring technique as Shade:
  
  
• João (aka leaves): Inspired by fashion trends and the graphics of record labels like Soundway, this was the beginning of rounding out the set to include more organic imagery.
  

• Kurt (aka plaid): A classic pattern as well as a current trend, we couldn’t ignore how linked this is with music, too.
  
  
  
• Amy (aka tats): Rockabilly inspired tattoo-art! As a lot of the filters are quite abstract was an attempt to do something a bit more representational. The background is mapped to a light color from the jam image and the illustrations are mapped to darker ones (with increased saturation).
  
  
• Shania (aka leopard) 
  Surfacing in music from everything from pop to punk, we felt animal print was an important trend to include. Similar to Amy, certain values in this illustration map to light or dark colors from the jam image.
  
  
• Kimbra (aka ombré)
  Rounding out the more abstract / organic backgrounds, Kimbra was based on painterly spring fashion and album cover trends and drawn in India ink. 
  

• Dizzy (aka pxl) Created by Dan Catt and originally inspired by PXL, Dan realised this would be a useful effect for blowing up thumbnail images – the same problem we were grappling with in generating backgrounds from jam images. Our implementation is based on Will McCutchen’s triangulizor.
  

• ASAP (aka glitch) 
  Making something look beautifully broken is harder than it looks. For this filter we found a proof-of-concept JPEG encoder and broke it by randomizing parts of the JPEG lookup tables. Because the result can be pretty chaotic, we compute the difference between the original jam image and the “glitched” output, and keep running until we have something that still resembles the original.
  

• Béla (aka triangles): Based on an album cover of violin music, we generated background images by drawing equilateral triangles in colours we extract from the jam image. On top of the triangles we composite a transparent layer of subtle texture created in Photoshop.

• Jamie (aka stitch): A happy accident through improvisation, Jamie started as a CGA-style background. After many attempts to get the CGA imagery to nicely complement a jam image (combined with the fact that ASAP was already quite similar), we quickly brainstormed on what else we could do with the stub of code that draws squares based on your jam imagery. After some quilt-esque experimentation and deciding it was too close to Dizzy (but perhaps with my mind still on sewing), I remembered seeing some modern cross-stitch patterns on sweatshirts in the window of an East London shop and asked Andreas about drawing the lines across the square diagonally instead of at right angles. As soon as we saw the squares transform into X’s, we knew it was just a matter of tweaks to turn this into something we could publish. 
  
• Herman (aka space): A bit of an in-joke, this: when we were first working on the initial designs for Jam, I used a space background on a profile screen to get a feel for the type of content we thought people might put there. Lovely with pretty much any kind of music and relevant to album covers and current trends too, The picture is from NASA’s public domain Hubble imagery, and then has a subtle gradient overlaid on top. The colours for the gradient are pulled from the jam image and then have their saturation bumped up to evoke the enhanced type of color we’re used to seeing in space imagery.

The code is all open-source on GitHub. So, if you have an idea for a background aesthetic (perhaps in tribute to a musician), send us a pull request and we’ll get in touch :)

- Han, Andreas, & Team Jam