Last friday I went to the NorDevCon http://www.nordevcon.com/ and the most inspirational talk was the one using code to control web API’s from Ruth John. Ruth works for the Lab at O2, UXing, designing and front end coding.

She embarked on a journey back into her vj’ing past when using tape and video (heavy on the thundercats) and wondered if she could recreate the entire experience using code loading directly into a web browser.

She started with a ‘simple’ css animation and showed us the development of the stages she took, adding another functionality until she eventually had video dynamically loading in time to the beat of a music track (also dynamically loaded) she also had her working browser reacting to noise input from us!

These web apis are out there, people are animating, drawing and interacting with their browsers, they are being developed and improved and new functionality added day by day.

Ruth John’s slides from NordevCon

http://rumyras-talks.herokuapp.com/web-vs-native-nordevcon/#/

You need to have a play with this… the animating beats are amazing and got me excited about more code interactivity.

Direct link to the fun demos – http://dancing.rumyra.com/

Ruth recommended this – The Web Audio API O’Reilly book by Boris Smus is free to read online!

I spoke to Ruth afterwards, asking if she had tried interacting between a leap motion and the browser and she thought that it would be possible, so not only can images and video load dynamically, but it could be controlled by gesture.

Explaining my interest and where I was in my research – at the beginning – she recommended that I use javascript as my language to get going on this.

But alongside the .js for mobile/web interactivity, I wanted to look into processing, again this is able to draw, animate and interact within your browser, I don’t know if they are compatible, but will endeavour to find out, but lots of things to play with and look at!

processing examples

https://processing.org/examples/

Books

Getting-Started-Processing-Hands-Introduction

Form-Code-Design-Architecture-Briefs form+and+code

Advertisements