Question

I try to load image with processing.js using CoffeeScript and write this simple code:

canvas1_proc = (ps) -> 
    ps.setup = ->
        ps.noLoop()
        ps.size(550, 400)
        @img = ps.loadImage('1.png')
    ps.draw = ->
        ps.image(@img, 0, 0)

$(document).ready () ->
    canvas1 = document.getElementById 'canvas-1'
    processing = new Processing(canvas1, canvas1_proc)

CoffeeScript code is compiled into the code

var canvas1_proc;
canvas1_proc = function(ps) {
  ps.setup = function() {
    ps.noLoop();
    ps.size(550, 400);
    return this.img = ps.loadImage('1.png');
  };
  return ps.draw = function() {
    return ps.image(this.img, 0, 0);
  };
};
$(document).ready(function() {
  var canvas1, processing;
  canvas1 = document.getElementById('canvas-1');
  return processing = new Processing(canvas1, canvas1_proc);
});

The image is not displayed and no errors in js console. Where is my mistake?

Answer 1

David Humphrey’s code, ported to Coffeescript. Works like a charm:

canvas1_proc = (ps) ->
    ps.setup = () ->
        ps.noLoop()
        ps.size 550, 400
        this.img = ps.loadImage '1.png'

    ps.draw = () ->
        ps.image this.img, 0, 0

$(document).ready () ->
    sketch = new Processing.Sketch canvas1_proc
    sketch.imageCache.add '1.png'
    canvas1 = document.getElementById 'canvas-1'
    p = new Processing canvas1, sketch