Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Helps writing Processing.js sketches in CoffeeScript
Ruby CoffeeScript Shell
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
bin
examples
lib
test
.gitignore
CHANGELOG.md
Gemfile
LICENSE
README.md
Rakefile
coffee-processing.gemspec

README.md

coffee-processing

Helps writing Processing.js sketches in Coffeescript.

Installation

Add this line to your application's Gemfile:

gem 'coffee-processing'

And then execute:

$ bundle

Or install it yourself as:

$ gem install coffee-processing

Usage

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'

File.open('compiled.js', 'w') do |f|
  f << CoffeeProcessing.compile('this.sketch', code)
end

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)
</script>

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

Caveats

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

Examples

Check out examples directory.

Also check out a Sinatra demo app.

Contributing

  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
Something went wrong with that request. Please try again.