HTML 5 Canvas Experiment.

27 May 2013

Working with the Canvas

The HTML 5 canvas element can be used in a wide variety of different situations, but it is always used to display graphical content to the user. Using javascript in conjunction with HTML 5, I began writing a small proof of concept that would allow users to create fractal art.

“Fractal art is a form of algorithmic art created by calculating fractal objects and representing the calculation results as still images, animations, and media. Fractal art developed from the mid-1980s onwards.[1] It is a genre of computer art anddigital art which are part of new media art. The Julia set and Mandlebrot sets can be considered as icons of fractal art.”

Fractal art (especially in the western world) is not drawn or painted by hand. It is usually created indirectly with the assistance of fractal-generating software, iterating through three phases: setting parameters of appropriate fractal software; executing the possibly lengthy calculation; and evaluating the product.” - Wikipedia

By recursively drawing bezier to the canvas with randomly generated origins, fractal evolutions can be dynamically visualized. The user can directly manipulate the growth of fractals using simple touch gestures.

Simply click (or touch) to draw fractals, swipe left or right to change colours. I implemented the canvas2image javascript library so users could download their creations but it seems to crash for very large files (fair warning). Simply click Save and add a .png file extension to the downloaded file.

Try it out here, Fractal HTML 5 Canvas Experiment

1. zsh

Last updated: Sun May 31 17:29:48 on ttys000
Rohan-Likhites-MacBook-Pro:~ rohanlikhite$ cd Documents
Rohan-Likhites-MacBook-Pro:Documents rohanlikhite$ cat myBio.txt

About
-----/
>Toronto-based Software Engineer specializing in product-driven architecture and distributed systems. My technical background spans from engineering secure biometric authentication frameworks to architecting high-availability logistics and fulfillment engines for national-scale e-commerce platforms. A dedicated contributor to the open-source ecosystem, I focus on building scalable, community-driven code. Beyond the IDE, I’m an avid tennis player, F1 enthusiast, and family man.

Skills
------/
> Languages: Ruby, Rust, Typescript, GoLang
> Security: Biometric Auth, OAuth, JWT, OWASP

Other Interests
---------------/
-Tennis
-Reading
-Formula One
-Architecture
-Music
-Cooking

Links
-----/
Email: rohan[at]likhite.email
Github: imRohan
LinkedIn: rohan-likhite


>Press ESC to close window


Rohan-Likhites-MacBook-Pro:Documents rohanlikhite$