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 :

/wp-content/uploads/2014/10/screenshot_566702.png

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 :

css with fontface.png

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.

/wp-content/uploads/2014/10/swarming_birds_566705.png

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.

/wp-content/uploads/2014/10/movie_screen_566704.png

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

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. James Rapp

    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

    (0) 
    1. Jeroen van der A Post author

      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

      (0) 
      1. James Rapp

        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!

        (0) 

Leave a Reply