Pure javascript pixel manipulation with processing.js

Question

I would like to manipulate pixels with processing.js. I would like to do this in pure javascript but am having difficulties. The following simple case fails

<canvas id="canvas1"></canvas>
<script type="text/javascript">

function sketchProc(p){

// Configure page and init variables
function setup() {
    p.size(300, 300);
    console.log(p.pixels)
    p.background(100,200,100)
}

function draw() {
    p.loadPixels();
    for (var i = 0; i < 3000 ; i++) {
      p.pixels[i] = p.color(0,0,0)
    }
    p.updatePixels();
}

// Attach functions to processing object
    p.setup = setup;
    p.draw = draw;
}

var canvas = document.getElementById("canvas1")
var processingInstance = new Processing(canvas, sketchProc)
</script>

which (I believe) should convert the first 3000 pixels to black. Looking at the console.log for p.pixels I am wondering if this type of array access fails in pure javascript? Any suggestions welcome and thanks in advance.

Answer 1

That is because you must Attach the functions directly to p:

function sketchProc(p){

    // Attach functions to processing object
    p.setup = function setup() {
        p.size(300, 300);
        console.log(p.pixels);
        p.background(100,200,100);
    };

    p.draw = function draw() {
        p.loadPixels();
        for (var i = 0; i < 3000 ; i++) {
          p.pixels[i] = p.color(0,0,0);
        }
        p.updatePixels();
    };
}

var canvas = document.getElementById("canvas1");
var processingInstance = new Processing(canvas, sketchProc);