Inspired by this code in the Generative Design book, Harmony by Mr.Doob aka Ricardo Cabello is a result of weekend play with various drawing algorithms and <canvas>.
Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component, later adopted by Gecko browsers and standardized for the next generation web technologies. It consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions allowing for dynamically generated graphics (wikipedia).
Ricardo’s app includes a number of different drawing styles generally driven by connecting previously drawn points together or tangenting off the same points creating a pencil shading type effect where the edges are not as clearly defined. Ricardo also points out that the web app is built modular so he can keep adding more brush styles in the future.
In addition, because the app is basicly based on WebKit, some adaptations to the code make it work on Webkit mobile (Android and iPhone). Whilst he hasn’t implemented multitouch support yet and is a little slow compared to desktop browsers, it is quite impressive nonetheless.
Read more about the app on Ricardo’s blog.
+ See also Mark Knol‘s flash version here.
Sketch by Edu
