jquery / processing.js - calling a processing.js function from javascript / jquery

Question

I've got an application set up which needs to call a processing.js function but none of the methods I've seen for accessing the processing instance seem to be working. Here's my setup - in my HTML, I have a link, which when clicked needs to call the processing function:

<div id="wrapper">
    <canvas id="donut" datasrc="donut.js" width="400" height="400"></canvas>
    <div id="creator">Create Donut</div>
</div>

$('#creator').click(function(){
    //var p = Processing.instances[0]; //DOESN'T WORK
    //var p = $('#donut')[0]; //DOESN'T WORK
    var p = Processing.getInstanceById('donut');
    p.createDonut();
});

And in processing (donut.js):

void createDonut() {
    console.log('createDonut');
}

When I attempt to call this function, I get this error:

Uncaught TypeError: Object function Processing(aElement, aCode) {
...
} has no method 'getInstanceById'

And none of the commented methods of linking to processing work either.

Answer 1

it looks like you need to have a data-processing-sources attribute on your canvas for it to find it, and it looks like that needs to be a .pde file in there so like data-processing-sources="donut.pde" instead of datasrc="donut.js"

i'm not 100% sure about the .pde thing so maybe try data-processing-sources="donut.js" first