Using JSON from Processing-JS

Question

I want to write an application using processing-JS, and I'd like to be able to load it with server-side data. I haven't written the server side yet so I can use anything, but it seems the obvious AJAX thing would be to use JSON to upload the data into the page.

How can I get access to that data from my processing code? Is it something as easy as the data is in scope, or could be attached to the window object and directly accessed from the processing code?

Update: Let me refine the question a little bit. I'm comfortable with JSON (but thanks for the links) and with writing code for both the client and server; my real question (which admittedly could be somewhat silly) is: if I get data with, e.g., JQuery, and want to manipulate it in processing-js, is it in the same namespace? Do I have to do anything special to access it?

Answer 1

Your Processing code gets "sloppily" parsed and converted into JavaScript. Anything the parser doesn't understand just gets ignored, which means you can freely mix bits of JavaScript code in with your Processing and it will, in general, "just work".

Have a look here for more information: http://processingjs.org/reference/articles/best-pratice

Answer 2

You could use jQuery like this to get JSON results from your server and iterate them to do whatever. I'm sure there wouldn't be a problem with using processing-JS and jQuery together.

Answer 3

i think you should visit www.json.org
There it explains how to use json both server-side and client-side from within a web-app.
Practically there should be many library implementations server-side that you can include in your web applications to transform your platform objects to json objects.
For sure there is an implementation that transforms java objects to JSON objects. To interpret client side data i think you can use another library that it should be on the same web site. The only problem is that i don't know if you can use javascript scripts into processing javascript to use javascript objects

Answer 4

Shoot, I was hoping there would be a better answer here. Here's a tutorial on processing.js's website. All they do is process the JSON using javascript and use it to call functions in your Processing code.

Apparently you don't want to just pass in JSON. You can however, pass in XML, although there isn't XPath support so you've gotta whip out your for loops if you want to get anything out of it.

Answer 5

To pass data from JQuery/ Javascript into Processing.js, you call the global scope function Processing.getInstanceById, which gives you a reference to the Processing PApplet object (well, the javascript equivalent):

// get a reference to the Processing PApplet object:
var proc = Processing.getInstanceById("the_id_of_your_canvas");

Then you can call any functions available in your Processing sketch, e.g.:

// call any function that is defined inside the Processing sketch
// in this case, one of the built in ones:
proc.frameRate(4);

So you write your JSON parsing code in Javascript/ JQuery and can then pass data through to Processing functions like that.