Programming Enchiladas

A ClojureScript-based HTML5 Canvas and SVG Graphics Playground, much like http://bl.ocks.org/ but specifically designed for showcasing small ClojuresScript code demos: The underlying agenda is to show how small simple functional programs can generate complex behaviour.

I was getting sick of setting up yet another lein/noir for every new folly, so it made more sense to have a framework which loads public ClojureScript gists directly from github, compiles them on the fly and serves them out.

This allows shared/social and version-tracked editable ClojureScripts to be run by anyone anywhere with a reasonably modern browser (tested in Chrome/FF/Safari). In order to compile and run any .cljs files in gist https://gist.github.com/rm-hull/5278162 (for example), go to http://programming-enchiladas.destructuring-bind.org/rm-hull/5278162 - see below for more examples.

As part of the available 'stack' (for want of a better word), the following client-side clojureScript bindings are available:

Function	Notes
enchilada/canvas	A canvas object, which you can resize, move, whatever.
enchilada/ctx	The graphics context, on to which you draw your stuff.
enchilada/svg	An SVG object, on to which you insert DOM stuff (initially hidden).
enchilada/proxy-request	Returns a URL which will be proxied through self.
turtle.*	https://github.com/rm-hull/turtle graphics library
dommy.template/*	Templating based on Clojure's Hiccup html templating library.
monet.*	All the https://github.com/rm-hull/monet canvas drawing functions.
jayq.*	https://github.com/ibdknox/jayq jQuery bindings.
c2.*	Kerninglabs C2 data visualization library.
vomnibus.*	https://github.com/lynaghk/vomnibus bindings.
cljs.core.logic/*	MiniKanren implementation.
cljs.core.async/*	Communicating sequential processes implementation.
tailrecursion.priority-map/*	Clojurescript implementation of data.priority-map

The following javascript libraries are loaded and available:

• http://jquery.com/ v2.0.1
• http://arborjs.org/ v0.9.2
• http://www.senchalabs.org/philogl/ v1.5.2

NOTE: This software is definitely alpha work-in-progress, please treat as such.

Examples

• WebGL Photospheres
• OM - Chess Demo
• 3D Polyhedra Taxonomy
• Big-Bang - Rock Paper Scissors
• Big-Bang - Parametric Equations
• OM mouse move vs. Big-Bang mouse move
• OM - Google Maps
• OM - Contacts Demo
• WebGL Planets
• Tumbling 3D Torus
• Boids!
• Dijkstra's Maze Solver
• US Choropleth C2
• World Choropleth C2
• Psychedelic Animation
• Quadratic Residues & Fixed Points
• 3D Auto-stereograms
• Champernowne's Constant and other transcendentals
• Flower of Life
• Turmites
• Chroma-Spirals
• Heighway Dragon
• Penrose Tiling
• Arnold's Cat-map
• ClojureScript says Boo!
• Turtle graphics demo
• Compilation error
• Ajax example (from stack overflow)
• Core.async - Daisy chain benchmark
• Core.async - Rob Pike
• Core.async - Hello world!
• Core.async - Martin Trojer's Sine Generator
• Core.async - Timothy Baldridge's Blocks
• Core.logic - simple demo
• Core.logic - Classic AI
• Core.logic - Unit Test Suite
• Core.logic - Einstein's Zebra Puzzle
• ClojureScript Quine

Prerequisites

You will need Leiningen 2.1.2 or above installed.

Running

To start a web server for the application, run:

$ lein ring server

This will start the server at port 3000 or thereabouts. Then create your ClojureScript gist, and slot in the login and id, and hack on.

Optional: If a connection to a MongoDB database is supplied via config variable MONGODB_URL as below (substitute values for user, password, host and db as appropriate), then minimal usage stats will be written out for gamification purposes:

$ export MONGODB_URL=mongodb://user:password@host:10046/db

If using heroku, add a config param:

$ heroku config:add MONGODB_URL=mongodb://user:password@host:10046/db

Optional: By default, Github aggressively throttles requests if requests are anonymous (60 requests per hour); Set GITHUB_OAUTH_TOKEN to a generated authentication token to increase the rate limit to 5000 requests per hour:

$ export GITHUB_OAUTH_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxx

or

$ heroku config:add GITHUB_OAUTH_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxx

(See application note on authorizing 3rd party access to github here: http://developer.github.com/v3/oauth/#create-a-new-authorization)

Troubleshooting

Q. Why doesn't my clojurescript compile, it looks ok?

A1. Did you include a namespace? e.g. (ns example)

A2. Did you name it with a .cljs extension?

NEW! Now supports source maps

Clojurescript debugging/line-stepping in Chrome is now supported. And it works really well! :)

TODO

• UI -> home page (carousel of recently viewed, most viewed, rated, etc)
• UI -> allow in-page editing
• Stats / tracking
• More examples
• Documentation
• Stop using local storage - using Heroku's ephemeral FS not so good for permanent storage (github, Amazon S3 instead?)
• Sitemap based on mongo-db rather than Heroku's ephemeral FS.
• Automatic screenshot capability with https://github.com/ariya/phantomjs/wiki/Screen-Capture
• Add CORS headers to proxy
• Implement simple big-bang (http://docs.racket-lang.org/teachpack/2htdpuniverse.html#(form._world._((lib._2htdp/universe..rkt)._big-bang)))

Known Bugs

• Routing does not support private gists properly FIXED: 21/12/2013
• Arbor/PhiloGL externs don't work properly - must be compiled with no optimization
• Capture all error scenarios (inc. Google closure warnings and errors & trap javascript errors)

Contributing

If there are other ClojureScript (or JavaScript) libraries that would be useful to include, please create a new issue.

There is plenty to do, let me know if you can help out; submit a request for commit access.

References

• The (New) Turing Omnibus, A.K.Dewdney
• http://himera.herokuapp.com/index.html
• http://codepen.io/stuffit/pen/KrAwx
• http://js1k.com/2013-spring/demo/1362
• http://bl.ocks.org
• Closure Compiler Externs Extractor

License

Copyright © 2013 Richard Hull

Use/copy/fork as per: Creative Commons.