josie birch josie birch

PORTFOLIO
of
the mysterious Josie Birch

Web Designer | Illustrator | Animator | Coder

Beam me up Scotty!


How I made Captain Kirk, Spock & Dr McCoy materialise on the transporter pad

March, 2018 - by Josie

‘To boldly go where no one has gone before’

First things first I couldn’t have finished this animation without the expertise from the fantastic people at Brighton Codebar. Codebar is charity who run programming workshops for underrepresented people in tech, they can be found all over the world from New York U.S.A to Sydney Australia. If you’re interested in either becoming a tutor or a student head over to their website here: https://codebar.io/I can’t recommend it highly enough!

I was inspired to make this animation after taking Von Glitschka’s fantastic course on isometric design. You can check out his awesome work here

For this to work I used a combination of JavaScript and a little CSS. I created the graphics in illustrator and then saved them as SVGs. This makes them scalable and a lot crisper on the screen. It also enables us to use JavaScript to hook into those SVG elements to make cool things happen!

So to start I set up a basic html page and then added in some div tags to hold the content.

You can see from the html that I’ve got a section id of startrekkin which holds the content. Inside this I made a transporter id to hold the transporter graphic, an id of crew for the crew members and an id of console to hold the console graphic. You may notice that I also created some pulse id’s, these will be the pulse buttons to indicate where to click to make things work. Lets have a look at the CSS next.

The CSS above is fairly self explanatory, I’ve positioned the elements absolutely to keep everything where it should be. To make the animation responsive I will add in the media queries at the end. The console, transporter, Kirk, McCoy and Spock are all in the startrekkin id which has a height of 850px.

I also added in a transition for the crew so that they can fade in and out a few times when they transport to make it more like the original series. I played around with the coordinates on this website http://cubic-bezier.com/#.17,.67,.83,.67 to get it looking good. Finally I added in an animation for the fade.

The next block of css (above) contains the code for the pulse buttons. These are circles to which I added an animation which I called ping, this just basically increases the size of the circles whilst fading out to create a ping like effect.

As a neat little extra I created a new pointer/curser for Spock so that when you hover over him the cursor changes from a pointing hand to a live long and prosper one. To add the new cursor to the CSS all I had to do was add the url for the image to the cursor.

live long & prosper pointer

Next comes the JavaScript to get the animation to work properly.

Starting with sounds, I knew I wanted each character to say something different every time they were clicked on. To do this I created the constants $kirk, $spock & $mccoy and used the document.getElementById to grab them from the ids I had created in the html. Then I created an event listener to listen for a mouse click. Inside the function I created another constant called sounds to hold an array of mp3 sounds which I then randomised by using [Math.floor(Math.random()*sounds.length)]. I repeated this for each character.

Starting from the top of the script above I created the $crew constant so I could get the id from the html and use that later in a function for transporting the characters.

The $obj constant picks up the console object from the html and if you look at the html you’ll see that it’s in an object tag. This is to access the SVG using JavaScript.

The next constant color is an array of objects made up of top and bottom with colours assigned to them. These are the buttons on the transporter console object. The top colours are red, green and yellow and the bottom colours are slightly darker shades of those colours.

The pick from array function is set up ready to be used in a later function for the console buttons, this will randomise the colours of the buttons when the crew are being transported.

Finally we come to the last part of the script. First I appended the constant $obj to an event listener and created a function on load which contains the constants $energise and $buttons. The constant $buttons selects all of the ids in the SVG with the name button.

Then I appended the constant $energise which was created at the top of the function to an event listener and created a click event function. The $crew constant and fadeinout class from the CSS is toggled meaning the fadeinout class can toggled on and off on click. I also added the sound for the transporter pad by creating another sound constant and then calling the sound.play function.

Next I created a set interval function which I assigned to the constant called interval to keep it simple. This meant it could be cleared once the crew had transported off the pad. The interval was set to half a second.

The next part of the code takes every path of each the buttons, calls the picked from array function which randomises the colors array (which was made earlier containing the top and bottom colours of the buttons) and adds the style fill to the paths. An event listener is added to end the transition of the $crew constant and clear the interval.

The last thing I did in the CSS was to add the media queries into my website and as I had used SASS for this it made it simpler, for more info on media queries click here.

All done! This did take a while as I’m still a JavaScript newbie and it did involve a lot of trial and error but it works so all good 🙂 Thanks to Qubyte for helping me when I got totally stuck and Matt for the help keeping the button colors in sync.

One thing that didn’t make the cut was the Gorn, I just didn’t like him very much, maybe I’ll have another go illustrating him some other time and get him transporting on and off at alternate times with the landing party.