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 701 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


I had never thought this was possible. Now seeing your content I am excited. Now, I will also try this.Thanks you are amazing and loved your articles.


My uncle likes this


Beautiful sharing and explanation. Thanks.


Watch ICC cricket world cup 2019 here. Check world cup live Score at sportsbignews.com. ICC Cricket World Cup 2019 Live Streaming available here for free. Watch cricket world cup 2019 Final or check world cup live Score or Live Stream. -www.sportsbignews.com


Acquisto orologi usati ⌚ La piu rapida e la migliore offerta ✌ Compriamo orologi Rolex ⌚ Patek Philippe anche rotti oppure non funzionanti ✅ Pagamento immediato


Compro orologi usati 💶 Vuoi vendere il tuo Orologio⌚? Visita il nostro sito e riceverai la migliore offerta per Rolex, Cartier, Patek Philippe ✅


DURSUN EVDEN EVE NAKLİYAT
dursunevdenevenakliyat.com


Quality content is the secret to interest the people to
pay a quick visit the web site, that’s what this web page
is providing.


cocuk porno sitesi bursa escort coccuk


good


hy vọng sẽ phát triển hơn nữa


Nội dung chất lượng là bí mật để mọi người quan tâm đến việc
truy cập nhanh vào trang web, đó là những gì trang web này
đang cung cấp.


Tôi đã nhận được trang web này từ người bạn của tôi, người đã chia sẻ với tôi về trang web này và tại thời điểm này tôi đang truy cập trang web này và đọc nội dung rất nhiều thông tin tại thời điểm này.


Thank you nice post.


Great Article.


google hack ın my sites go to my website


Super geschrieben.Vielen Dank.


When wiping down a gun with an oil cloth, must i take
care not to get the oil upon the wooden? I just
make use of a Hoppe’s #9 oil cloth, and before I put my guns away after
managing them, I usually clean the receiver and barrel down with the fabric, I usually try not to wipe any of the wood however, many usually still gets on the website, so I’m
wondering whether it’s poor or if it generally does not actually
matter if it gets on… show more This will depend on the finish on the share.
Generally speaking, in the event that you get oil on the wood, just wipe it off
completely with a dry rag or paper towel and you
won’t damage it, that i would think you’ll do anyhow.
The oil can damage the finish on the wood stock,
so you don’t wish to leave it on the stock. Besides,
who would like a slippery share!


Gut geschrieben. Echt toll. Danke.


Wow! Convey you! I constantly welcome to compose on my place something similar that. Can I buy a concern of your call to my place?


Good post. I be taught something more difficult on different blogs everyday. It is going to all the time be stimulating to learn content material from different writers and practice just a little one thing from their store. I’d choose to make use of some with the content on my blog whether or not you don’t mind. Natually I’ll give you a link on your internet blog. Thanks for sharing. viagra without a doctors prescription


These are genuinely enormous ideas in regarding blogging.

You have touched some nice things here. Any way keep up wrinting.


Hello there! I know this is kinda off topic but I was wondering if you knew where I could locate a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having difficulty finding one? Thanks a lot!


Amazing blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple adjustements would really make my blog jump out. Please let me know where you got your design. Many thanks


You are so interesting! I don’t believe I’ve truly read anything
like this before. So nice to find someone with a few genuine thoughts on this subject.
Seriously.. many thanks for starting this up. This
website is one thing that is needed on the web, someone with some originality!


Generally I do not read post on blogs, however I wish to say that
this write-up very pressured me to try and do so!

Your writing taste has been amazed me. Thank you, very great post.


I revalue, entity I plant vindicatory what I was looking for. You’ve ended my foursome day protracted trace! God Declare you man. Tally a great day. Bye


Nice post. I learn something totally new and challenging on websites I
stumbleupon on a daily basis. It’s always interesting
to read content from other writers and practice something from their sites.


I think other web site proprietors should take this site as an model, very clean and excellent user genial style and design, let alone the content. You’re an expert in this topic!


Hey would you mind sharing which blog platform you’re working with?
I’m planning to start my own blog soon but I’m having a hard time deciding between BlogEngine/Wordpress/B2evolution and Drupal.

The reason I ask is because your design and style seems different then most blogs and I’m
looking for something completely unique.
P.S Apologies for being off-topic but I had to ask!


thanks a lot considerably this website can be
conventional along with simple


Hello. remarkable job. I did not imagine this. This is a excellent story. Thanks! canadian pharmacy


Impressive piece of content! The way we wish had that understanding. I’m hoping to study a lot more on your side. You will find you might amazing details combined with idea. I’m sure tremendously contented with that info.


Thank you for another informative website. The place else could I get
that kind of info written in such a perfect approach? I have a undertaking
that I am simply now operating on, and I’ve been at the glance out for such information.


Hi, the whole thing is going perfectly here
and ofcourse every one is sharing facts, that’s really
fine, keep up writing.


I enjoy, cause I found just what I used to be having a look for.
You’ve ended my 4 day lengthy hunt! God Bless you man. Have a great day.
Bye


Leave a Comment