Dino Data: A HTML5 experience.

Brief.

The brief for this project was to create a flashy website utilising many of the new features available in html5. In order to achieve this we have created a child’s dinosaur information website with a ‘top trumps’ style interactive experience, and other fun activities, that are flashy, fun and meaningful.

Introduction.

It was after heavily researching all the available elements new in html 5 we decided that making a fun interactive website aimed at children would be the best way to incorporate as many elements as possible. We picked the theme of dinosaurs, as its topic children are generally interested in at that age.
We mocked up the example below to illustrate the overall look and feel we hoped to accomplish with the final product.



How we went about it.

With a concept image of our idea to work from, it made it easier to focus on what elements of HTML 5 we were going to need.
In relation to the brief and the target audience of which we chose children, the website was to be made as ‘flashy’ as possible.

To start with we used Adobe illustrator to create background and dinosaur images that appeal to children. The main background image is simply set as this simply in the document.

HTML5 allows for audio and video to be incorporated in a much easier fashion.
The background music is played using the new ‘audio’ tag which is auto played when the website first loads up, and the 3D video is played using the ‘video’ tag and styled using JavaScript.

To give the user a more personal experience we included the use of local storage, so that the website would remember the users name and how many times they had visited the site to create a basic user profile.

We have used the new canvas elements to display graphics multiple times. First of all to create the top trumps at the bottom, to draw the Dino cards to the page. Secondly we used it to draw the dinosaur stickers to the scene creation game. The images are scalable and moveable due to JavaScript.

We have used time and date time tags in the basic information about dinosaurs to create a site that is in tune with the idea of the semantic web. By giving certain parts of the information e.g. 100 million years ago, these tags it allows the text to conform to the ideologies of the semantic web.

Finally we used meter tags to provide a rating system for each dinosaur card. Aside from the aesthetic purpose we included meter tags due to the fact it enables the data to be semantic.

Final product.

Our final product demonstrates a wide variety of elements available with the release of html5. The information on the website could be further expanded but this is a good example of how the site works. There is an ever-growing list of elements available in html5, but if we were to utilise them all, it would be to the final sites detriment.

Link to project

www.busy-signal.co.uk/DinoData.html

Our final product is available by clicking here. While it can be viewed in safari it is best viewed in Google chrome so that all the elements can be utilised.

Visualisation as Art.

I dont think anyone would dispute the fact that visualisation is art, especially when it engages more than one of the human senses.
I have an obsession with music visualisation, because it adds to the euphoric experience when you go and see live music. It can tell a story, engage emotion and even disorientate the senses.

Below is Chris Cunninghams visualisation for one of Aphex Twins track. The visualisation for this song is powerful, energetic and very artistic. There are underlying emotions, themes and narratives in this video that can be interpreted differently depending on the viewer. To me that is art.





Chris Cunningham and Aphex Twin


In this video you can see various lighting arrangements and visual display that have been chosen and carefully designed for a reason. Matching with the theme, tempo and energy of the music it gives the user an overpowering experience visually.




Carl cox live ibiza 2009

html5 Proposal

We decided to base our HTML5 website on dinosaurs, and therefore make it a fun interactive environment for children. The mock up below shows a simple layout of the way the site may look. Their are five main HTML5 elements that we intend to include. Embedded audio which will autopsy on the load of the page, Embedded video which will be altered by a 3D effect, the canvas element will be used to display different din fact cards, linked to this all data will be 'tagged' to make the page more semantic, and finally we intend to use the local storage element to build up, and display unique user profiles of favourite dinos etc. 

Most of the elements we intend to use can be demoed at w3schools, a good example of what we wish to do with our embedded video can be found here, and the fact cards on the canvas element example can be found here. 

Final Blog Conclusion.

Even though after effects has not been as reliable as I thought it would be, and many hours have been spent searching for solutions to errors, and the dome correction plugin wouldn't work,I'm very proud of myself and my project.

I set out to create an animation with a meaningful cultural narrative that suitably animated to the progression of audio, and that's exactly what it does. After testing on the inflatable dome I can also see that my animation creates a 3d environment from nothing but 2d animations, something I didn't think I would achieve.

Looking back I wish I could have created my project in blender, but I struggled so much, and I think I would have had to come up with a much more simplified idea, and I just didn't want to do that.

Obviously my idea and project are open to opinion but I achieved what I set out to create, and i hope the audience enjoy watching it as much as I enjoyed creating it.

Blog 11. Question time.

Why didn't I use blender?

When using blender I felt I just couldn't get to grips with the simplest of tutorials, and i knew it would hinder my idea greatly. Also I had not seen any current projects where someone had related audio and video effectively with a 3d package. My idea was also very abstract and colourful when I thought about it, and its something blender couldn't give me in such a small time with a high learning curve.



Why did I use after effects?


Very easy to get to grips with, and much more suited to my project than blender. With a vast array of plug-ins and tutorials it seemed silly not to choose After effects. While i did run into small errors here and there they were easily solved by an overwhelming user community on the web.

What would i do differently?

I would have loved to have spent alot more time fine tuning my project, but the deadline was a factor obviously.
In the time we had i managed to teach myself After effects and produce an animation which im very proud of.

Although it is not dome corrected due to the plugin refusing to work with my animation, I think I've done a good job of creating a 3d immersive animation that is visually exciting.

Blog 10. Finishing off.

Design

Credits


The music has climaxed, the animation is done, and hopefully the audience have gained a good experience form it. So now all that's left is to title my animation and give thanks to the artist of the song.

I called my animation 'ideas of life' because I related to the themes and ideology of 'ideas' and 'life' throughout, so it made sense.

Blog 9. Climax

Design

Technical


At the time of storyboarding I wasn't sure how I was going to animate the 16 seconds of audio in which the music climaxes. I just knew that i wanted lots of colour and movement to represent the concept of an idea being destroyed.

I finally decided to use trapcode particular as it was something I knew how to use by now, be it very basically. The particles move towards the audience with a motion blur effect applied to give a deeper sense of movement. The velocity increases as the audio becomes more intense in the build up and fades as it drops.




Narrative


By this point the entire colour scheme has changed, just like the narrative. Instead of having the calm blue lighting I used earlier on in my animation, I used a white light on a black background, that you can almost associate with death, while that is dark, it is representing the death of the artists idea concluding with a visual explosion.

The words " and destroyed just as easily" appear concluding the sentence left open at the start. I wanted to send a message to the audience that we can all relate to without being a pretentious wally. However I may have done just that, still its something i had to include so that the audience realise they aren't just looking at a collection of different animations with no meaning.