Sunday, 28 November 2010

jQuery and Digital Fiction

Changed, a digital fiction project for desktop and iPad

Dreaming Methods is concerned as much with the visual appearance and manipulation of its digital words as their actual meaning. For us, being able to apply graphical styles and time-related effects to the very writing we produce is of extreme importance, which is why we've started building up an interesting toolkit that explores what it's possible to do with jQuery  - an open source javascript framework - when it comes to creating digital fiction.

We've been using jQuery in commercial web design projects for a long time now, but it's only recently with our experimental move towards developing a 'web app' for the iPad that it's come into our minds as one potential solution to creating electronic literature.

Basic jQuery and HTML/CSS isn't rocket science. Although it requires learning some syntax and 'going under the hood' rather than clicking a few buttons in a visual editor, it's a long way from deliving into hardcore programming and you can see quick, rewarding results with very little effort.

Example scripts and tutorials are everywhere on the web. There are 'extensions' galore available - most of them free to download - and, in contrast to working in Flash, there is no compile/publish procedure required to generate an end result. jQuery is free; no 3rd party plugins are needed; it's generally cross-browser friendly; and it even works, with some processing speed limitations, on the iPad.

So far, through pure experimentation and using a combination of relatively simple jQuery and HTML/CSS, we've managed to achieve the following:

- blurring of text, either static or over time
- glowing text effects, static or over time
- narratives that trigger others to appear or disappear 
- click (or touch) areas to show/hide narrative segments 
- slow fading of narrative segments over time 
- transformation of sentences (adding or removing words) on click/touch
- draggable graphic or text objects

- rotatable graphic or text objects (via jQuery Touch; iPad only)
- plugin-free video and audio playback 

Whilst the above may seem like a relatively simple technical checklist (almost all of it is incredibly easy to do in Flash), it is in fact an indicator that the Dreaming Methods 'canvas' onto which we can write purely digitally - outside of Flash - is being slowly primed.

Once we have built up our skills and resources enough produce work in an environment that takes our existing techniques and principles further (rather than forcing them backwards), we will undoubtedly start to assemble new stories in this manner.

Should any digital writers be interested in mixing their own work with the same kind of approach/technology, we would be happy to share our findings and, who knows, maybe even strike up a collaboration.

It would be good to create forum/hub for digital fiction writers - particularly those interested in breaking away from their central reliance on Flash into open source technologies - where discoveries such as these can be posted and scripts and tutorials sought and freely downloaded.

Please do contact us if you think this is a good idea. If we had enough interest, Dreaming Methods would be more than willing to open up some kind of 'digital fiction writers resource' for all to share.

1 comment:

Anna Pitt said...

Hi Andy

I think a digital fiction writer's hub would be a great idea.

I like the idea of code sharing and to have somewhere I could offer help / ask for help.

I went through a stage of wanting to learn Flash but find that I like the simplicity of creating stuff in html and javascript so for now my plan is to stick to the open source solutions.
Anna