More HTML5 Canvas experiments
It is more of the same, but figuring out the capabilities and performance of the html5 canvas element resulted in two nice animations. Check them on our Random Studio labs site, html5 web, and html5 worms.
Latest Entries
Heinz First Harvest
Boondoggle Amsterdam asked us (Random Studio) to help think of, and create a website to promote the new Heinz First Harvest product. Heinz First Harvest is a once in a year limited edition of the a tastier Heinz ketchup, for which only the best products are used. Through the website the users can get information about the production process, from the planting of the seed until the botteling. We made a highly interactive plant, which grows over time, unlocking new content. Weather conditions are loaded in dynamically to reflect the current situation of the plants.
The campaign also had two competitions that used Facebook connect. The first was giving away 300 of the Heinz First Harvest bottles. The second competition element used the unique code on each bottle to win a trip to Lisbon in Portugal. The whole campaign is currently running in 6 countries, The Netherlands, Belgium, Germany, France, Sweden and Spain.
Below you can find the promotion video for the campaign, created by Boondoggle Amsterdam:
Flocking
I’ve always been interested in artificial intelligence and always wondered how hard it was to create or implement a flocking algorithm. I ended up using a simplified version by some described in articles I found online.The “Boids“ will follow or repel each other based on distance, speed and travelling direction. If there is no Boid to base the speed and direction on, the Boid will try to travel towards the mouse location. Try it out over here.
WSBF~ Poetry tool
A good friend of Random Studio, thisissaf.com, asked if we could create a poetry tool to fortify his brand “When seven becomes fourteen”. I took it upon myself to create the website from backend to frontend including social network integration. With only a week of development time there is certainly room for improvement, but I’m sure we’ll do some updates soon. You’re a poet and you know it, so start over here.
Gazelle Twin interactive album
Beginning of juli 2011, Gazelle Twin launched an interactive album to promote their new album “The entire city”. Champagne Valentine is responsible for the art direction and I was the programmer at Random Studio to breath life into it all. You can see the interactive album with your own eyes over here.
Another Flash particle animation
I used a basic version of the following animation on the random.nu portfolio website. But after adding it, I played around with it a bit more, and ended up with this:
http://www.hdinteraction.nl/blog/experiments/web/
Random Studio portfolio site
Finally we launched our new site for Random Studio. The site shows of both projects and experiments in a quick and responsive way. I did the original development architecture and animation style but everybody at Random participated in the development of this site. It was a tough cookie to crack, but in the end I am very pleased with the result. I also created the two initial experiments: The weather man, and Message in a bottle. The site is backed up by a shadow html site, for all the people that haven’t installed Flash on their devices (iPad/iPhone), but the design for that still needs some work.
HTML 5 canvas particles
Finally, a year and a half after I wrote that I was still waiting with html5 development, I’ve finally took my first steps in exploring the canvas element. I took a familiar subject, particles, mixed it with my basic javascript knowlegde and Google search skills, which resulted in the following (Chrome and Safari only):
http://www.hdinteraction.nl/blog/experiments/html5/particles/
First comparison to developing Flash applications:
- Haven’t found nice development tools yet (tips are welcome)
- Debugging javascript takes a lot of time
- Cross browser support for the techniques I used is poor
- Browser performance varies greatly
- But, it is a lot of fun
Fun with circles
It has been a while since I made something fun, but today I had an idea that could be done fairly quick. So after a quick test if it actually looked alright, I started tweaking colors, sizes, angles etc. And before I knew it I had a little tool. Just mess around with the controls, and see what happens. You can see it, and play around with it over here.
Champagne Valentine landing page
Already a bit old, but I still find this website to be a lot of fun, mainly because it is so simple and it runs smooth on most computers (unlike some other websites I did). I don’t know how long this website is going to be up since Champagne Valentine tend to change their minds, so check it out on www.champagnevalentine.com or over here. Or just check the video below.