I'm Aza Raskin @aza. I make shiny things. I simplify.

I'm VP at Jawbone, focusing on health.

 

ContextFree.js & Algorithm Ink: Making Art with Javascript

In honor of the the release of Firefox 3, I’m releasing ContextFree.js today, along with the demo site Algorithm Ink. ContextFree.js is about drawing striking images—and making art—with minimal amounts of code.


An introduction to ContextFree.js & Algorithm Ink

Computers programs lost something important when displaying a splash of color stopped being one line of code. As a kid, I remember being able to type “plot x,y” on the Apple II to throw up a phosphorescent splotch. When the simplicity of the one-line plotter went away, so did the delight at being so effortlessly generative—in a visual way—on the computer. ContextFree.js is a stab at making it easy again. It’s like a grown up version of Logo (or at least the Turtle Graphics part of Logo).

Go ahead and play with it on Algorithm Ink. It has goodies like a gallery to see other people’s art, the ability to view the source-code of any piece of art, and the ability to save the art to your desktop with a single right-click (that comes along for free, more on this in a second). It works best in Firefox 3, but should also work in Opera and Safari.

The inspiration and kick-in-the-pants motivation for this project came from the always-excellent John Resig (also of Mozilla) finally releasing Processing.js.

It’s All About the Javascripts

ContextFree.js is a port of Context Free Art by Chris Coyne. Algorithm Ink uses open-web, standards-based tools: no plugins required. It uses Canvas to to the drawing, and Javascript to compile and interpret the Context Free grammar. The code that does the compiling and render is open-source and available here. Handling thumbnails and other manipulations of images is just a couple lines of Javascript. No need to muck around with server-side black magic. With the addition of arbitrary transforms to Safari 3.1, all modern browsers, except IE, support Canvas fully enough to run ContextFree.js.

One of the great things about using open-web standards is that it plays nicely with user expectations. If you like a particular piece of art, you can just right click to save it as an image. It would also be possible to use an image as the background for a blog—imagine a unique piece of art adorning your site, one that’s different for every visitor. The bleeding edge versions of Webkit have, in fact, implemented the ability to use Canvas with CSS. Open-web technology helps to break down the silos of inaccessibility: backgrounds images done with Flash have never been adopted because of the heavy-weight feel, as well as the lack of interoperability with the rest of the DOM. As Canvas takes becomes more wide spread, I’m looking forward to an explosion of infographics and other data visualizations that weren’t possible before without a heavy server-side setup, or without a compile step that breaks the ability to view-source-and-learn cycle of the web (Flash, Java, &c, I’m looking at you).

A Peak at the Syntax

The grammar is pretty simple. Let’s start by making a circle:


startshape shape

rule shape{
 CIRCLE{}
}

This says start by drawing the rule named “shape”. The rule shape says to draw a circle.

Now let’s make things more interesting:


startshape shape

rule shape{
 CIRCLE{}
 shape{ s .5 b .2 x -.25 }
}

We’ve added a single line which says that part of the rule for “shape” is to draw itself, scaled down by half, with a slightly increased brightness, drawn on the left side of its parent circle. This makes an off-centered bulls-eye pattern.

Now let’s go to the right, as well as the left:


startshape shape

rule shape{
 CIRCLE{}
 shape{ s .5 b .2 x -.25 }
 shape{ s .5 b .2 x .25 }
}

For comparison, this is what the equivalent code in Processing.js looks like:


// Processing.js code to make the same circle pattern.
void setup()
{
  size(200, 200);
  noStroke();
  smooth();
  noLoop();
}

void draw()
{
  drawCircle(126, 170, 6);
}

void drawCircle(int x, int radius, int level)
{
  float tt = 126 * level/4.0;
  fill(tt);
  ellipse(x, 100, radius*2, radius*2);
  if(level > 1) {
    level = level - 1;
    drawCircle(x - radius/2, radius/2, level);
    drawCircle(x + radius/2, radius/2, level);
  }
}

It’s much longer, involves more setup, and more fiddly calculations. In fact, the entire ContextFree.js source is as long as the setup function. Of course, by simplifying so much in ContextFree.js, we’ve also removed the flexibility Processing.js affords.

Adding one more line of code gives an unexpected result: The Sierpinski Triangle. I’ll leave it as an exercise for the reader to figure out what that line of code is, but I doubt that it will be much of a puzzle.

Follow the mouse

The equivalent of “Hello, World!” for a graphical environment is a dot that follows the cursor, replete with a fading trail. This is what it looks like in ContextFree.js:


startshape DOT

rule DOT{
  SQUARE{ s 4 b 1 a -.9 }
  SQUARE{ s .3 }
}

rule MOUSEMOVE{
  DOT{ }
}

We start by defining the rule “DOT” which draws two things: A large square (scaled up 4x), which is white (brightness of 1), and mostly transparent (alpha of -.9), and then a smaller black square. The large transparent white square acts to fade out more and more of the previous DOTs that have been drawn (it’s a standard trick for doing motion blur effects). The rule MOUSEMOVE simply draws a dot at the current mouse position, whenever the mouse moves.

Here’s the result.

There’s one more example that demonstrates the rest of the features that makes ContextFree.js powerful at the end of this post.

The Big Picture

Besides being pretty, why is ContextFree.js interesting? Because it shows the power of Open web technologies for making graphically-enabled, compelling interaction. The true power of the web revolves around anyone being able to dive in, see what someone else has done, and expand upon it. Canvas lowers the cost of entry to creating graphical mashups and other dynamic, graphical content. It also shows the progress the web has made: a year ago, this demo would not have been possible. Canvas wasn’t ready, and Javascript interpreters weren’t fast enough. Looking at the qualitative difference in speed from Firefox 2 to Firefox 3 indicates the amazing and substantial progress made towards speeding up Javascript since the last major browser release cycle.

Implementation

There are three major components to ContextFree.js: a tokenizer, a compiler, and a renderer. Each can be instantiated and used separately. The compiler returns a JSON object of the parsed code, which makes it easy to write a new front-end. I’d be interested to see if a Flash implementation of ContextFree.js would be faster than the pure Javascript, and if so, how much faster. As a side note, I’d also like to see an implementation of the Canvas API done in Flash, as a better replacement for excanvas for IE.

Because the computation and drawing of fractals can be intensive, the rendering occurs in it’s own threaded queue. How quickly it iterates over the shapes is dependent on how long the last drawing operation happened. This helps to keep ContextFree.js from freezing the browser.

There were a couple problems with browser inconsistencies and Canvas deficiencies that make the renderer interesting.

The first problem I ran into was that whilst the Canvas specification does support setting the transformation matrix, it does not support getting the transformation matrix. This means that if you want to know how large a shape will be when you draw it (for instance, to know when an element in a fractal is too small to be seen and is therefore safe to not draw), or want to draw in a threaded environment where you can’t guarantee a global transformation state, you need to re-implement the entire transformation infrastructure. This is a bad breakage of DRY, and slow from a development standpoint. According to Ian Hickson, the reason for the lack of a getter seems to stem from a possible implementation detail, although I don’t understand the argument. In personal communications with irrepressible Mozillian Vlad Vukićević, it appears that there is an possibility of adding the getter to the Firefox Canvas API.

The second problem I ran into was that versions of Safari older than 3.1 do not support setting the transformation matrix. The work around isn’t pretty. It involves taking the desired transformation matrix, de-convolving it into an equivalent set of rotations, scales, and translations, and then applying those base transforms to the Canvas. That’s a lot of math and eigen values. Luckily, Dojo already did the heavy lifting and I was able to stand on their shoulders for ContextFree.js.

The last problem I ran into is that even the latest editions of Safari do not support .setTransformation, which means that there is no call to return to reset the current transformation matrix to the identity. I used lead Webkit-developer Maciej Stachowiak’s solution, which is to save the pristine transformation state (using .save), perform the desired transformation and draw step, and then restore the pristine transformation state (using .restore).

The end result is that while there are inconsistencies, JS libraries can tide us over until us user-agents get fully in sync. That said, I recommend the addition of .getTransformation to the Canvas specification: it will save a lot of unnecessary code rewriting, most of which is matrix multiplication best done in a low-level language.

Improvments

There are a number of improvements to be made to both ContextFree.js and Algorithm Ink. With the former, it isn’t a full port (it’s missing things like comments, z-index, and loop notation). With the later, there is still a strong disconnect between a text-based input and a graphical output. I would love the ability for authors to indicate which variables are interesting in their code, and have the UI expose that variability through sliders and other graphical means. I’d also like to graphically teach the system rules: for example draw a couple shapes, group them, copy and scale them, and have Algorithm Ink generalize that as a rule, translate that rule to code, and draw the full fractal.

The ever-inspiring Bret Victor had some excellent suggestions that I hope someone takes up:

* Highlight a section of code (or “mark” a rule somehow), and the parts of the picture that were generated by by that code/rule are marked somehow—by applying a tint or a glow, perhaps. Because things are so recursive, you should be able to tell when a part of the picture has been marked multiple times—darker tint, eg. The idea is to be able to quickly explore a program and see what’s doing what.

* The opposite: put the mouse over a pixel, and see what code is responsible for that pixel. Ideally, you could see the entire call stack. Perhaps with annotated pictures so you can see what was drawn at each level of the call stack. Let the artist answer the question, “Why did this [part of the picture] happen?”

* Scrub through the construction of the pic. At each timestep, both the picture being added and the code responsible for it are highlighed. The current transform matrix is shown. I can step through time and understand what is happening and why.

Given that ContextFree.js’s “bytecode” is simply a JSON object, as I mentioned above, it wouldn’t be hard to write a new front-end. For example, here’s the “bytecode” for the “follow the mouse” example:


{
  startshape:"DOT",
  DOT:[
  {
   weight:1,
   draw:[
    {shape:"CIRCLE", s:4, b:1, a:-0.9},
    {shape:"CIRCLE", s:0.33, b:1, a:-0.5},
    {shape:"CIRCLE", s:0.3, b:0.5, sat:0}
   ]
  }],
  MOUSEMOVE:[{ weight:1, draw:[{shape:"DOT"}] }]
}

Get Involved

ContextFree.js is open source and hosted on Google Code. Feel free to jump in. Feel free to email me at my first name at mozilla.com.

Appendix A: Full Example

The last example adds demonstrates a couple more features that make ContextFree.js powerful:


startshape scale

rule scale{
  spiral{s .1 y -.5 x 1}
}

rule spiral{
 SQUARE{ a -.5 }
 spiral{ y 1.5 r 10 s .99}
}

rule spiral .01 {
 TRIANGLE{ }
 spiral{ y 1.5 r 10 s .95}
 spiral{ y 1.5 r 10 s .95 flip 90}
}

Let’s step through the code. The “scale” rule simply makes everything smaller and translates it down and to the right. Let’s look at the first rule “spiral”. It creates a half-transparent square, then makes a slightly smaller square that’s transposed and rotated ten degrees to the left. Repeating this gets a stepping-stone spiral. There are, however, two rules for “spiral”. This is where randomness comes into the design: whenever the rule “spiral” is encountered, ContextFree.js randomly chooses one definition among all definitions of that rule. The number after the rule name indicates the weight of the choice, where the default weight is 1. Thus, this rule draws something like this:

Modify the code slightly we can get an almost hand-drawn look that makes for a compelling background image.


startshape scale

rule scale{
  shape{s .1 y -.5 x 1}
}

rule shape{
 SQUARE{ b 1 s 1.1 }
 SQUARE{ a -.5 }
 shape{ y 1.5 r 10 s .99}
}

rule shape{
 SQUARE{ b 1 s 1.1 }
 SQUARE{ }
 shape{ y 1.5 r 5 s .99}
}

rule shape .03 {
 TRIANGLE{ }
 shape{ y 1.5 r 10 s .95 b .1}
 shape{ y 1.5 r 10 s .95 flip 90 b .1}
}

A large version of this image is also available. You can also play with this pattern live on Algorithm Ink. And for those who missed it, here’s the ContextFree.js code. Email me, or comment below to get involved.

RT @aza ContextFree.js & Algorithm Ink: Making Art with Javascript | Follow @aza on Twitter | All blog posts

View all 664 comments


wqedcqwecv qwercfwq


qcv rvweqrfgvwqefv vqwerv


a lot off comment your post


artikel yang sangat menarik


semoga sukses selalu


werfg werfgvwerfgvwev


werfweq rtfgvbw3fw


artikcle yang sangat bagus


artikcle yang sangat bagus


werfgwer


wertgwertg


wergfwerg


tewrtgwe bwertfgwerb wrebrtgwerg


sarıyer evden eve nakliyat


This is one of the best article i have ever read keep Sharing this type of article For moe information about e wallet just create an account


nice comments. thank you.


Diyarbakır çiçekçilik


Diyarbakır çiçekçi


good life. inner city mama



T.j

infonya sangat bermanfaat



T.j

terimakasih banyak


I was very proud of my nickname throughout high school but today- I couldn’t be any different to what my nickname was.
خرید اینترنتی لباس


orjinal zayıflama çayı resmi satış sitesi formda kal send ekullan hemen sipariş ver yes cam on


wertgwergv


erthwernwreghwerg wergwerg


weghwerb erfgvweqrfgw


ewrthwyrtbn weqrgfwqer


It is wonderfull article
Thanks for Sharing


The second problem I ran into was that versions of Safari older than 3.1 do not support setting the transformation matrix


Very useful information, I will try,
Villa murah di Lembang


Thanks for the points you have shared here. Something important I would like to mention is that laptop memory demands generally increase along with other improvements in the technology. For instance, whenever new generations of processors are introduced to the market, there’s usually a similar increase in the size and style demands of both pc memory plus hard drive room. This is because the application operated simply by these cpus will inevitably increase in power to take advantage of the new engineering.


Accordingly, the mechanics in connection with promos in Facebook are usually easily manipulated
or cheated by people who have a sizable network of friends.
Google includes a different form of souped up that extends well beyond how marketers behave on .

If bid price is high for a particular keyword, you simply could be unable to acquire the clicks you’ll need in your limited budget.


Howdy I am so excited I found your webpage,
I really found you by mistake, while I was searching on Aol for something else, Regardless I am here now and
would just like to say many thanks for a remarkable
post and a all round thrilling blog (I also love the theme/design),
I don’t have time to read it all at the minute but I have book-marked it and also
added in your RSS feeds, so when I have time I will be back
to read more, Please do keep up the awesome work.


Mecanizado de piezas, larga y media serie, fresadoras, torno y centros de mecanizado C.N.C. reparación de válvulas. Con los mecanizados CNC de Sevilla puedes obtener la misma calidad con menos trabajadores y al mismo tiempo conservar los altos niveles de producción.


İstanbul Koltuk Yıkama, İstanbul genelinde yerinde koltuk yıkama, koltuk temizleme, çekyat yıkama, çekyat temizleme ve yatak yıkama hizmeti vermektedir.


KLINIK ABORSI RESMI, tempat dimana anda bisa mendapatkan penanganan terbaik dan informasi seputar Aborsi serta menggugurkan kandungan yang aman dan benar,
https://www.klinikaborsiresmi.com/


It’s a beautiful site. Thank you.


Quality posts is the secret to be a focus for the viewers to go to see the web site, that’s what this website
is providing.


very nice


very nice article and thanks – Tamilnadujobs


Thank you for sharing in this article I can a lot and could also be a reference I hope to read the next your article update


pokeronline88 website anjing


Excellent way of explaining, and fastidious pst to get facts regaarding
my presentation subject matter, which i am going tto deliver in institution oof
higher education.


Really when someone doesn’t know after that itts up to other
users that they will assist, soo here it happens.


Se cerchi un posto per vendere i tuoi oggetti usati e i tuoi diamanti cerca Zani Oro compro diamanti e avrai la massima valutazione con pagamento immediato.


Do you have newsletter feed to follow up by email, Sir?


And for those who missed it, here’s the ContextFree.js code. Email me, or comment below to get involved. And for those who missed it, here’s the ContextFree.js code. Email me, or comment below to get involved.


Very Nice about Program, Thanks For Sharing We are here to learn More



Raju

Best article i have seen on closure,this article given me best javascript training.iam living in hyderabad but through internet lucky i got this article.
javascript training in hyderabad


Thank you for your information

reavt js training in hyderabad

react js training in hyderabad


reactjs training in hyderabad

react js training in hyderabad


android training in hyderabad


android-training-in-hyderabad


Government Jobs Seekers, who Looking for Govt Jobs 2019 in India to get Latest Government Jobs Recruitment / Vacancies completely published in the Govt Jobs Page. 8th Pass, 10th Pass, 12th Pass, ITI, Diploma, Degree (BA, B.Sc, B.Com, BE), Post Graduate (M.Sc, MA, M.Com, MSW, MBA, MCA, ME, M.Tech etc.) and all other educational qualified Indian Citizens find your Qualification / Eligibility wise Latest Govt Jobs 2019-20 and Upcoming Government Jobs 2019 Notifications listed in this page. Government Job opportunities in Central Government, State Government, Public Sector Companies, Public Sector Banks, Indian Railway, Army, Navy, Air Force and Government organizing Institutions, Organizations and Universities. Everyday 24X7, IndGovtJobs Blog updating Free Govt Jobs Alert of Educational Wise Govt Jobs, Qualification wise Govt Jobs, Central and State Govt Vacancies and Public Sector Jobs for all type of Job Seekers. This page vacancy Numbers are approximate, but not accurate details.Latest Government Jobs


Leave a Comment