Helps writing Processing.js sketches in CoffeeScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Helps writing Processing.js sketches in Coffeescript.


Add this line to your application's Gemfile:

gem 'coffee-processing'

And then execute:

$ bundle

Or install it yourself as:

$ gem install coffee-processing


A sample Processing.js sketch written in Coffeescript with the help of coffee-processing.

setup = ->
  size $(window).width(), $(window).height()
  frameRate 30
  background 255

draw = ->
  for i in [0..10]
    s = random(100)
    stroke random(255), random(255), random(255)
    ellipse random(width()), random(height()), s, s

Ruby code for compiling it into Javascript.

require 'coffee-processing''compiled.js', 'w') do |f|
  f << CoffeeProcessing.compile('this.sketch', code)

And the HTML page.

<script src='compiled.js' type='text/javascript'></script>
<canvas id='sketch'></canvas>
<script type='text/javascript'>
  var processing = new Processing(document.getElementById("sketch"), this.sketch)

Preloading (Experimental)

Asynchronous nature of Javascript requires preloading of images and fonts. Processing.js allows you to preload assets with @pjs directives. However they are only applied during the compilation of Processing syntax, and there's currenty no direct way to preload in Javascript-only Processing.js code.

If you define preload object in your coffee-processing code as the following example, coffee-processing will delay the execution until those assets are ready. (Although the way it does so seems quite hacky.)

preload =
  images: ['/images/image1.png', '/images/image2.png']
  fonts:  ['/fonts/font.ttf']

setup = ->
  font = createFont '/fonts/font.ttf', 0 
  img1 = loadImage '/images/image1.png'
  img2 = loadImage '/images/image2.png'

coffee-processing script

usage: coffee-processing [--template] <js object name> <sketch file>

        --template                   Create a template page for the sketch
    -h, --help                       Show this message


Non-constant, instance variables of Processing object, such as width, frameCount and __mousePressed (among others) should be accessed through their corresponding shortcut functions as follows.

# __mousePressed, frameCount, width and height are functions, not values.

setup = ->
  size 100, 100, P3D

draw = ->
  if __mousePressed()
    point frameCount() % width(), frameCount() % height()

Or equivalently, you can access them as the properties of processing object. This is slightly more efficient.

# Alias for processing instance
p5 = processing

setup = ->
  size 100, 100, P3D

draw = ->
  if p5.__mousePressed
    point p5.frameCount % p5.width, p5.frameCount % p5.height


Check out examples directory.

Also check out a Sinatra demo app.


  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Added some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request