Halloween in Design Studio – the preparation
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
Hi Jeroen,
I stumbled on this a bit late, but found it to be immensely helpful in creating my first three.js extension. I noticed that I get an exception (from your component and my own) when rendering the extension at design time. Of course it works when looking at it in the browser...
I was wondering if you had any opinion on this? Design Studio leverages a browser related component to render in the designer, so it seems it should be possible. I tried both the CanvasRenderer and WebGLRenderer with the same result (albeit with a different exception!).
Thanks and again, great creative work on display here!
Jim
hi james,
thanks. I must admit I have to look it up again as it is a while ago.
in december I showcased the flying birds where I didn't have a problem. But I will look into it.
Jeroen
Hi Jeroen,
I happened to upgrade my browser to IE 11 and the problem went away 🙂
I always use Chrome so I didn't even realize there was this hidden dependency. How interesting!
Hi Jeroen,
The download links seem to be broken, do you mind updating them?
I would really like to look at the code. Thanks. 🙂