Pure javascript pixel manipulation with processing.js - 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);