Call Processing.js function from within Javascript?

Question

So, I've been looking into the Processing.js library/language. I recently downloaded it, and, unfortunately, was immediately confused. I just want to see if I can call Processing.js functions and objects from my Javascript code. This is what I'm trying to do:

var p = new Processing(document.getElementById("canvas"));

var orange = new p.color(204, 102, 0);
var blue = new p.color(0, 102, 153);
var orangeblueoverlay = p.blendColor(orange, blue, p.OVERLAY);

console.log(orangeblueoverlay);

While the above code doesn't give me any errors, it doesn't exactly behave like expected. I get an alert message containing '0', which isn't what I was looking for. What am I doing wrong? (maybe a better question is, "am I doing anything right?")

First thing first. Stop using alert, learn to use the developer console and then live a long and happy life. — hugomg
– hugomg, Commented Mar 16, 2012 at 4:30
Those two go hand in hand? I'll change to console.log then. :) — Elliot Bonneville
– Elliot Bonneville, Commented Mar 16, 2012 at 4:31
Just don't shorthand yourself function print(txt){if(window.console) {console.log(txt);}} and expect it not to bring up the print dialog when you call it. True story. — dwerner
– dwerner, Commented Mar 16, 2012 at 4:34

rfinz · Accepted Answer · 2012-03-18 04:03:17Z

1

From here and experience: http://processingjs.org/articles/jsQuickStart.html

You'll need to create a function to pass into your processing instance when it's instantiated, and that function will minimally need to override the processing setup() function or draw() function.

function sketchProc(processing) {
  processing.draw = function(){
  //in here is where you can drop your code. setup() runs once, draw() will run
  //continuously
  var orange = new processing.color(204, 102, 0);
  var blue = new processing.color(0, 102, 153);
  var orangeblueoverlay = processing.blendColor(orange, blue, processing.OVERLAY);

  console.log(orangeblueoverlay);

 };

 }

Then create your processing instance like this:

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

That all being typed, I prefer to write the processing with processing and then just bind it to a canvas. It ends up being more succinct. You can even use Processing inner classes! That's something I found out a little too late for my website, which has a good example of processing.js at work...(http://www.rfinz.me)

edited Mar 18, 2012 at 4:03

answered Mar 16, 2012 at 6:44

rfinz

3726 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rfinz Over a year ago

Did that all worked as planned? I had some typos from where I copied and pasted...

Elliot Bonneville Over a year ago

I haven't integrated it yet, but this is high on my list of things-to-do. :) That looks right, though, and nobody else answered, so I accepted even though I haven't got it working yet.

Collectives™ on Stack Overflow

Call Processing.js function from within Javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related