katrinaproject1

=Project 1 =

(works in all the browsers I could test it for: chrome, safari and firefox)
 * This is the site.**
 * If it doesn't work, your computer is stupid. If it's too dark, your computer is also stupid. Please use a brighter monitor.**

My collection is books, and I figured that books sort of take you to another world that you explore through reading :). Soo, I'm sorting my books into four different worlds/planets: Geek Planet, Children's Planet, Culture planet, and Mind Planet.

=Process: =

**Pictures: **
media type="flickr" key="57911681@N05" ARG0="&lang=en-us&format=rss_200" width="500" height="500"

===**Original Sketches: ** ===   = =

Astro Graham:
→ (heavily influenced by Jennifer) I wanted to do animated .gifs for this, however in order to get a transparent background, it didn't work well. If my site's background was white, perhaps I could've done something... but with the space background, it just didn't work :(

Figuring out the Planets:
I still haven't yet made the actual planets that will relate to the book genres. I wanted to figure out how to make a good looking planet in the first place. So with the help of a tutorial here, I used a landscape shot I took on a trip to Shanghai and made it into a demo planet:



For the actual planets, I plan to do something like make my own landscape/add to a landscape, and put in things that relate to the book genres.

In then, for the final planets, I didn't use this technique too much, however, I did use it to wrap around a photo of mine for the culture planet, as well as get the pencil crayons to circle the children planet.

[[image:spaceandstuff.png]]
=== I was thinking of moving the planets around a bit, but there really wasn't any room if I wanted to include space for the books to be displayed, so I thought I'd put them aligned like a navigation at the bottom. ===

Coding:
I got the drag and drop jquery ui from here and here. Luckily, this code was pretty easy to work with and I was able to get Astro-Graham to snap to the top part of the planet regardless of where you placed him on the planet, as well as I got him to be unmovable when placed on a planet until the image gallery was closed.

The jquery I'm using for the book display is slidedeck, from here. I've only just put it in and slightly styled it, I plan to work on that more over the week:

===**Projecting the book pictures: ** ===

The pictures go inside the panels, in relation to which planet he is on... (the original screen cap was saved over, but it was essentially like this, but less finish and styled... e.g. the background panels were not transparent)