For reasons beyond my control, this week I got swamped by music-project-related chores; among other things, this included putting out an EP, hiring a PR company, and lots and LOTS of design. Not so much a necessary evil as a great kick in the butt that prompted me to *put more art-things out there*, the purpose for which this Tumblr was created (and as high of a calling as I can imagine in this world – not being a doctor, etc.)

I rebranded my 2014 musical project as Qualia, because QVALIA is annoyingly impossible to pronounce and thus a too high a price to pay for Roman stylization. The domain is now the very sensible qualia-music.com and the rest of the social accounts follow suit. The current page is a teaser/promo for the EP, coming out in about two weeks; since it will consist of three thematically-unrelated songs I thought of no better name than the ambiguous “Triptych”, and no better symbol than an interactive watery tetrahedron.

Nothing too exciting to tell about this little landing page – I resorted to dear ol’ three.js for the water pyramid, and used jQuery and Bootstrap to make my life easier design-wise.

The one interesting hurdle and solution(!) was that the shmancy water shader didn’t translate that well to mobile, and being all about responsive design as I’ve been since that class in my Udacity FEND, I knew something had to be done; can’t leave my mobile-using fans stranded with a crappy dark-looking pyramid. Now, I knew all about dealing with mobile-specific CSS, but three.js? Nobody said anything about responsive Javascript in that class, or anywhere else for that matter.

The solution was incredibly simple – you can watch out for media query changes and condition your JS code in accordance to what you need! I implemented the solution offered here to great success. Now, if you check out qualia-music.com from mobile, you won’t get a water shader (and it’s a shame, it’s beautiful and glitchy), but a more traditional bump mapped snakeskin thing. But at least it works – and with responsive design, compromise is the name of the game.

The EP comes out 9/15 and more surprises are in store; it’s fun to work on a cohesive project for a while after 9 weeks of small experiments. Till next week!