Parallax Animations, Solar System Puzzles, and Polymorphic Associations
They say if you have no idea what to do when you are decorating a room, pick a piece of furniture and design around it. This is the method I used to pick my project idea for phase 4 of Flatiron’s software development program. Since we were getting into javascript, I knew I wanted to use javascript to create a cursor based parallax animation, using the parallax effect to create fake depth. I felt the most intuitive and easiest concept for this was space, with layers of stars. This I was doing space, an Air and Space Museum website just seemed like the project that made the most sense.
So the first thing I worked on was a full view background of space that created a parallax animation based on your cursor, I started by looking up codepen examples to see how other people did it and the code was surprisingly simple.
You set up your div with multiple background images, set variables for your window height, width, mouse x and y position, create a separate depth for each of the layers of your background based on the mouse position and window size (you’ll notice they *.00001, it’s that multiplier that creates the sense of depth and creates the real magic). Then you save all of them to a variable, and set that to the backgroundPosition. All of this is updated on “mousemove”.
I wanted to take it a step further, so I looked up accessing the accelerometer of mobile devices. Javascript has built in functions for accessing the accelerometer, so it was just a matter of accessing “deviceorientation” and setting a timeout, then an if statement to check if the browser has access to DeviceOrientationEvent and onTouchStart in order to determine whether to use the mobile version or the desktop version.
This code still needs some refining. Currently most of my background layers have flattened, and I’m not fully sure yet if that is due to the mobile browser being incompatible with multi-background css, or if there is another issue, but I’ll continue debugging that. I also will need to eventually set up a permission request (which you can see I’ve already started) for Apple Devices, which require permission to access the accelerometer. But I’ll continue to work on the mobile version of this effect.
Another goal I had for this website was a little educational game. Since this was an Air and Space museum website, and museum’s always have little interactive educational elements on them, I wanted to make a little “put the solar system in order” puzzle. This was another surprisingly simple task. Though there were a few issues. I used the CreateJS library and Canvas to simplify the task.
The 2 issues I ran into were that javascript wasn’t able to access the scope of this.slot0.x from inside the function inside the loop. So my workaround for that was saving the x positions to an array. Then I ran into another issue, as my plan had been to use variable i from my loop to dynamically figure out which element in the array I needed, but I wasn’t able to access variable i from inside the function inside the loop either. So I ended up splitting the name of the target, and saving the number from the name to a new variable, and using that number to call the appropriate array number. This is how I’m determining when you are dropping the pieces in the correct place.
The next big task I had was my polymorphic associations. I had three main models in my project. Making reservations for the museum, the theater in the museum (museums always have those theaters, often 4D, with educational movies), and the cafeteria at the museum. All of these generated (has_many) tickets. So it made sense to set up a polymorphic association with a tickets model. This was my first time using this feature, but it turned out to be decently easy. Setting up my columns properly, and telling it to be polymorphic true.
The other challenges I faced were positioning iFrames, since I used 2. (My game, and the video I embedded on the front page.) But overall I’m decently happy with the final. Of course I don’t think I’ll ever call it totally finished. But how many people ever look at a project and say “Yeah, I think that’s finished”? ;)
