Halloween in Design Studio - the preparation

[jeroenvandera]

As you keep trying out new things it is nice to have a theme that you can use as an inspiration for further development.

It happens that Halloween is quite near, so why not use that as a theme? I have started a little project and added a few things and in the coming weeks I will add things and improve the current ones.

If you would like to use them or pick up the current version to add something yourself, here are the downloads :

The application           : https://dl.dropboxusercontent.com/u/140695/HALLOWEEN.rar

The source code         : https://dl.dropboxusercontent.com/u/140695/com.hyronimous.halloween.rar

and installation file       : https://dl.dropboxusercontent.com/u/140695/halloween.zip

So what do we have until now?

The initial look is this :

as you notice the font is very particular for Halloween. As you cannot expect that everyone has this font the font is encoded in the CSS file :

Second you may notice the birds in the screenshot. The screenshot does not do this Justice as a lot of these birds are actually flying around.

Unsurprisingly that is one of the SDK component, based on the three.js JavaScript library.

In this example I used 125 birds starting from a predefined location. You can either start randomized or from a specific location. For the application I will choose the latter as this gives the effects of birds being disturbed and flying away.

Second in the SDK file is an audio component that is based on the example. The difference is that this has some more control options so you can play scary music at the appropriate times.

If you're looking for music that is full of tension I would suggest this : Mussorgsky A Night on Bare Mountain - YouTube

Finally There is a video component, that I haven't used in the application yet. It is a video component, based on three.js again, where a cinema screen is rendered where a movie is played. Additionally you are able to zoom in or out or turn the screen with your mouse movement.

You can set up a video file in the properties. Additionally you have to set the movie dimensions in the properties to align the cinema screen size with the movie size.

In the coming weeks I will try to add new things and see where it goes. Also any contribution is most welcome! I think using these kind of scenario's helps one to sharpen your knowledge. Tricks you learn here or components that you develop have a way to become useful at some client in the future where they have a requirement that happens to fit something you made just for fun.

Additionally I will try to move the things to Github, but I just created the account tonight and still have to learn how it works 🙂

Jeroen