CoffeeScriptでProcessing.jsが書けるはずなので試してみた。

ほい。

• JavaScript Quick Start | Processing.js

の Writing JavaScript-only Processing.js code あたりを参照。

まずHTML5でcanvasを用意します。

/ Slim
doctype 5
html
  head
    title "Processing.js Test"
    script src="processing.min.js"
    script src="jquery.min.js"
  body
    h1 Processing.js Test
    p This is my first Processing.js web-based sketch:
    canvas#p-canvas

とりあえずcanvasのサイズを300px × 300pxくらいにしておきます。

/* Sass
#p-canvas
  width: 300px
  height: 300px

後はCoffeeScriptでダーッと書いておしまい。

# CoffeeScript
$ ->
  canvas = $('#p-canvas')[0]
  processingInstance = new Processing(canvas, sketch_proc)

sketch_proc = (processing) ->
  processing.draw = ->
    center_x = processing.width / 2
    center_y = processing.height / 2
    max_arm_length = Math.min center_x, center_y

    draw_arm = (position, length_scale, weight) ->
      processing.strokeWeight weight
      processing.line center_x, center_y,
        center_x + Math.sin(position * 2 * Math.PI) * length_scale * max_arm_length,
        center_y + Math.cos(position * 2 * Math.PI) * length_scale * max_arm_length

    processing.background 224

    now = new Date()

    hours_position = (now.getHours() % 12 + now.getMinutes() / 60) / 12
    draw_arm hours_position, 0.5, 5

    minutes_position = (now.getMinutes() + now.getSeconds() / 60) / 60
    draw_arm minutes_position, 0.80, 3

    seconds_position = now.getSeconds() / 60
    draw_arm seconds_position, 0.90, 1

にしても、JavaScriptオンリーでProcessing書きたい人っているのかな？結構しんどい気が…。