27 Aug 2014

AKA, this website. All mine, from art to code. This is what went into that.
(for an overview of the project, including source code and general information, check the bottom of this post. everything above that is an in-depth detailing of the creative and technical process)
It started with a quote. “I had better never see a book, than to be warped by its attraction clean out of my own orbit, and made a satellite instead of a system.”
I talked about this in detail over in my blog, but I’ll reiterate slightly here. The quote came from Ralph Waldo Emerson while he was describing the importance of never becoming so lost in the ideas of others that you become blind to ideas of your own. It resonated with me, especially while trying to figure out this website layout, because that’s really what this is all about: forging my own system, littered with my own work, such that I make my mark, release into the world my ideas, instead of being droned out and influenced solely by the ideas of others. The site is my system, proof that I have not been warped “clean out of my own orbit,” and the visuals couldn’t really hit you harder over the head with that imagery.
The website’s literally a solar system.
As is my typical fashion in designing websites, the first step after coming up with the idea is to figure out exactly how it’s going to look. That meant, in this case, opening up Photoshop and creating and fitting together a variety of images. The important bit here was that everything was my own, down to the individual pixel art of the planets, because this was my system. The first thing that came out of this drafting process was the design for the homepage. Shortly after came the post page, and after that I had all of the graphics that I needed to get cracking on the actual code.
The HTML, of course, came first and, having done this plenty of times before, that wasn’t particularly complicated. The layout is more or less straightforward, and although I like to think I brought it to life in my own unique way, the underlying markup is nothing remarkable. What’s novel is less the layout and more the stylesheet underneath. This site was my first time experimenting with @media tags in CSS, and thus my first time achieving true responsive design, and I think it altogether worked rather well. As of right now, there are still some problems with mobile devices in landscape, but the website otherwise scales very nicely for all different screen sizes, with all of the elements knowing when they need to get out of the way to make room for content on smaller and smaller screen. The workings for all that are at the very bottom of the stylesheet code.
But, even after all that—the images and the HTML and the CSS—there was still something bland about the whole thing. HunterLightman.com needed something to bring it to life. The first step was the background. That’s what you could see in the original .psd mockup, and it entailed the stars and a couple of static images of galaxies/nebulae. I could’ve hardcoded all of it into the site—sticking the stars at the same point in every page—but (1) that would have looked weird and (2) it would have taken way too much time, so instead I turned to ol’ trusty javascript to get the job done right. background.js thus got tacked on to the end of every page. It’s sole job to populate the #background div with stars and other elements, strewn randomly across the screen. To make everything a bit more lively, I have a system by which stars get deleted and created in new locations constantly, providing for a kind of twinkling effect in the night sky if you look close enough. It looked nice.
But, still, that wasn’t enough. The site looked good and had a strong, characteristically me feel to it, but it wasn’t quite cool enough. The stars twinkled, sure, but nothing moved. And that, indeed, was the next step. This was, indeed, much easier than I’d expected it to be. The moon was the first thing to move, and for that I just stuck some preliminary code in background.js (since the moon needed to move on every page). After that some simple trigonometry hooked up to an interval in the js did the trick and got the moon moving around whatever #earth object was on the screen. Another trick, one I’m a bit more proud of, was the way in which I manipulate the DOM to keep anything from getting messed up by the movement. In the non-animated page, the moon is positioned relative on the screen. This works well for placing everything relative to other elements on the screen… until the moon element starts to move, and then everything starts to get all messed up. The solution was to, upon beginning the animation, store the absolute x and y position of the moon, then detach it from its container and re-add it as an element positioned absolutely on the screen at the same x and y coordinates that it had before. Thus its position remained unchanged and it could thereafter be animated freely without disrupting any other element on the screen.
Getting the planets to move was a slightly-more-complicated extension of the moon logic. You’ll note, at the bottom of background.js, I define a Planet class. The Planet defined there has all kinds of systems in place for positioning it absolutely (like the hack with the moon, I need to make the relative-positioned planets position themselves absolutely in the proper position), controlling its movement around a central element (a star), and stopping its movement when its parent button is hovered over.
From there, the work was simple. A for-loop on each page iterates through the different .planet elements in the menu list and uses each one to make an instance of Planet, adding it to a list that will get updated at constant time intervals. Some specifics separate the homepage code from the regular page code (namely in that the regular page allows the planets to loop all the way around the star while the homepage oscillates the planets based on a sin function), but otherwise everything falls neatly into place. The planets orbit their central star and everything looks really really nice. That, in a nutshell, is my solar system. I hope you like what you’ve seen so far.
With all that having been explored, we can move onward, to the basics:
Name: HunterLightman.com WordPress theme: PixelSystem
Language: HTML/PHP/CSS. Javascript for everything that moves and changes.
Source: Right here.
Tools: WordPress, Photoshop, jQuery