Bit of History

There were certain things we couldn't do on the web before. Things that were only reserved to other technologies such as Flash or Java applets. For a long time UI developers were forced to use simplest controls - input boxes, buttons, radio buttons and they were unable to provide instant feedback as every user action had to end with a page-refresh.

Web-developers where forced to reload the page to display something that had to be computed on the server side. Form validation process was slow and painful. Things were getting lost between 'Preview' and 'Submit' stages and more complex operations such as live image manipulation were impossible without relying on mentioned 'non-native' techniques.

Things started changing when someone realized ECMAScript is out there and it can do some pretty amazing stuff as long as it doesn't run on IE.

It is indeed JavaScript that changed everything. Suddenly every website started using Lightbox to display image gallery and even calendar control that pop-outs in a new window is now considered ancient as window.open() was replaced by $('#cal').datepicker(); Everyone went crazy with AJAX and if it wasn't Google who stopped the craze of "let's load all content from the server using JavaScript" we'd be stuck in a nasty place of unregulated hacky websites where browser 'Back' button doesn't work properly.

Things changed again, when HTML5 arrived in the town. Most of us welcomed it with joy (Chrome, Safari, Firefox), other tried to smile (Internet Explorer), and another weren't happy at all (Flash).

This new, exciting technology gave UI Developers new tool of interaction with the users and provided even more interesting ways of feedback.

It's all about Feedback

Weezeeweeg, or WYSIWYG or What You See Is What You Get is a known concept in UI design allowing users to see what they will get in the end. This type of the interface is often used in the text editors (both online and offline) allowing users to preview in real time all changes to the text they're editing. This responsive type of the user interaction replaced old "write a command -> save -> preview" model. WYSIWYG puts user in the center of interest, it endorses user-centric design.

However, WYSIWYG doesn't stop here. Any type of user interaction supported by instant feedback of the final state of the object under user's manipulation can be considered as What You See Is What You Get - it can be considered as user-centric.

MohawkJs - HTML5 WYSIWYG concept

To explore the concept of WYSIWYG manipulation in HTML5 I created quite unusual (and I hope original) demo you can see above.

In my demo, HTML5 canvas is used for constant feedback as it is updated every time user changes the parameters of the image. jQuery-powered controls allow the user to directly manipulate the image in real-time.

Additionally, I designed save-state system that allows to save generated image by publishing it's parameters in a form of a URL. You can try any of these links to see different effect:
http://rocha.la/mohawk?p=f,77,21:1e00ff,ff0303,ffffff,
http://rocha.la/mohawk?p=s,48,8:1cf000,05daff,b7ff00,f7b900,
http://rocha.la/mohawk?p=s,95,17:ffffff,050505,fa0a1e,40ff00,dffc00.

By default (or when url parameters are missing) code creates random mohawk encouraging the user to modify something that already exists.

Code consists of two main classes:

- Punkify - independent class used to print Mohawk on the HTML5 canvas.
- Punkconfig - jQuery-dependent class, used to create UI. Also dependent on modified version of ColorPicker.

That's it for now! Feel free to ask questions and please share your creations on twitter!

TBC