Fork me on GitHub
Goto Gallery + IDE =>

(c) @applegrew

This is a Chrome Experiment

Art made easy.

Old video of CInk version 0.1. Current version is 2.

What is CInk?

CInk is an interpreter for the CFDG language3, an acronym for Context Free Design Grammar. To be precise, CInk implements CFDG26, since it supports a lot of things which the original language doesn't have. CInk is not the first interpreter of this language though. The other named, ContextFree3 (Yeah! its name is a terse version of the language's name), is a standalone product developed in C. CInk, on the other hand, is written purely in Javascript, and thus, allows you to compile and run CFDG programs in the browser itself. In addition it is also modular.

Why do we need CFDG?

It's because CFDG allows creating designs, simple and quick. CFDG is not a mainstream programming language to get things done. Its an artist's language with which you should play and experiment. Think of it like GW BASIC7 for artists. By the way, by artists I mean anyone who loves to create designs or simply loves art. Programs and technologies of today's world need too much boiler plate code in order to create something as naive as a plain circle.

In CFDG all you need is:-
startshape CIRCLE

Yeah. That's it! Well ofcourse this example is way to simple to draw any conclusions. The only way to understand this, is to go to the gallery8, check out their arts and get inspired!

Does CInk implement the full language specifications of CFDG?

Well, I guess there isn't any full language specification yet. This is by a hobbyist for hobbyists. CFDG was invented by Chris Coyne2. He implemented it in PHP. Later this was implemented in C, and named ContextFree3, which I already mentioned before. I implemented CInk considering ContextFree as the benchmark. As of version 2, CInk implements all language constructs supported by ContextFree and much more. Check out Learning CFDG2 to learn more. CInk has extendend CDFG language to a significant extent now, and thats the reason why I mentioned earlier that CInk implements CFDG2.

CInk History

Sometime back I stumbled upon Aza Raskin's very inspiring and beautiful Algorithm Ink1. I found it easy to use and it enabled creating some truly amazing arts. From there I learnt that it is a Javascript implementation of CFDG. Also, that CFDG contained more language constructs that Algorithm Ink didn't support, like loops, z-index, etc. Instead, it provided a link to C implementation of CFDG – ContextFree3. What truly inspired me to re-implement CFDG in Javascript, were some amazing stuffs that people had posted there, in particular, an artwork titled "Bleak"4 :-P.

Why Javascript?

CInk is not a replacement for Context Free, but adds to it. Firstly, it allows a way for random nettizens to stumble on it and create something amazing, even if by chance. Secondly, CInk clearly separates parsing and rendering logics, making it possible to be used to draw your site's background. Yeah I find that cool ;-). Lastly, the trick that Aza used for preventing the browser from locking up (as the script draws the art), resulted in a visual treat as a side-effect. The C counterpart fails to provide this visual treat, as it is too efficient and quick to render :-P.

Algorithm Ink vs. CInk vs. ContextFree

CInk can be considered an enhancement of Algorithm Ink, as the fundamental concept of the rendering logic was inspired by Algorithm Ink. Other than that it is purely a new product. The parser has been created using JSCC5. I have built CInk's grammar file using the one given in ContextFree's source code. Outputs rendered by CInk and ContextFree are now quite alike. CInk retains support for MOUSEMOVE and MOUSECLICK predefined rules, introduced by Aza. One major difference between CInk and Algorithm Ink is that, Algorithm Ink used HSL to RGB color conversion, whereas CInk mimics ContextFree and uses HSV to RGB conversion.

Overall CInk is compatible with Algorithm Ink and ContextFree. So, codes for Algorithm Ink and ContextFree will run in CInk, however, codes for Context Free, at times, may require scaling down. You can use size{} command for that. Learn more at Learning CFDG2.

What's more?

Scout through the links on the navigation menu on the left.

  1. http://azarask.in/projects/algorithm-ink (Algorithm Ink)
  2. http://chriscoyne.com (CFDG inventor)
  3. http://www.contextfreeart.org/mediawiki/index.php/Context_Free_Art:About (Context Free Art)
  4. http://www.contextfreeart.org/gallery/view.php?id=2550 (Bleak Artwork)
  5. http://jscc.jmksf.com/ (JS Compiler Compiler)
  6. Learning CFDG2
  7. GW Basic (Wikipedia article)
  8. Arts Gallery