how do you guys use processing.js?

nootropic..

how do you guys use processing.js?

in Processing with Other Languages • 4 months ago

Hi!

I've began to play with processin.js and I think it is quite nice for web, for me (and I play with processing from years) better then other 2d frameworks. I've tried to use it as java compiled into javscript and it is ok, and i've tried pure javascript, and it is a little bit verbose when you always has to call processing object (like _p.fill() instead of still fill()) but it is ok too.

I'm a little bit attracted to plain javascript because I don't know the language very well and it could be challenging to learn.

How do you use processing.js in production code?

Replies(10)

GoToLoop

Re: how do you guys use processing.js?

4 months ago

I don't use it directly. I just publish my codes @ http://studio.sketchpad.cc or http://openprocessing.org/.

Processing/Java becomes Processing/JavaScript then!

benj.n.su..

Re: how do you guys use processing.js?

4 months ago

I felt the *exactly* same way about always having to call the processing object. It was a tiny thorn in the side of perfect. After trying it every which way I finally stumbled upon a solution.

Put this in yourSketch.html:

<html>
<head>
<script type="text/javascript" src="../../libraries/processing-X.X.X.js"></script>
</head>
<body>
<canvas datasrc="yourSketch.js" width="sketchWidth" height="sketchHeight"></canvas>
</body>
</html>

Put your JS in a file called yourSketch.js:

var x = 100;
var y = 100;
var w = 200;
var h = 200;
var bob = new Person("Bob");
void setup(){
size(400,400);
background(150);
noLoop();
}
void draw(){
fill(255);
rect(x, y, w, h);
}
function Person(name){
this.name = name;
};
Person.prototype.speak = function(){
println("My name is " + this.name);
};

And that's it! I think it works because the PJS preprocessor ignores any JS and automatically converts any Processing. If there are no draw backs to the method, then I think it should be the advertised way to write PJS because it makes the transition a lot easier for people who are coming from a purely Processing background. [edit: I mean for using PJS outside of the IDE and writing in pure JS. at least in my IDE you cannot create prototypical objects, and functions that take arguments in JS mode.]

Full disclosure: I have only tried this method with native Processing API, core JS functions/classes, and functions/classes of my own creation. I have not tried it with another library.

mbraendle

Re: how do you guys use processing.js?

4 months ago

For development, I use the Processing Development environment and write .pde files.

Testing is then done using either Java mode, or JavaScript mode/Web Export, and using the Developer Tools available in Safari/Chrome/Firefox/IE.

For production, I then pre-compile the code using the Processing.js helper page (you can also get an offline version from https://github.com/processing-js/processing-js/tree/master/tools ) and load it with the API-only production version (processing-1.4.1-api.min.js). This results in much faster load times.

lighttamer

Re: how do you guys use processing.js?

1 month ago

Do you have an HTML example, how to use the pre-compiled code?

I tried, but it don't work. Thank you

GoToLoop

Re: how do you guys use processing.js?

1 month ago

Some instructions on how to embed a .pde code into HTML:
http://processingjs.org/articles/p5QuickStart.html

And JavaScript mode generates such file when starting its server.

Also, this link transforms a P/Java into P/JS:
http://processingjs.org/tools/processing-helper.html

dimkir

Re: how do you guys use processing.js?

1 month ago

I also found useful this article, which shows how you can load XML data into your sketch from other websites (using your own php-proxy script).

http://www.autumn8.co.za/posts/loading-cross-domain-xml-into-processing-js/

lighttamer

Re: how do you guys use processing.js?

1 month ago

I have done some code, but it starts a bit slow on loading the page. So I try to use the precompiled code to speed up.

for example a small code:
test.pde

void setup()
{
size(200, 100);
}
void draw()
{
line(0, 0, width, height);
line(width, 0, 0, height);
}

and then I use this simple HTML

<html>
<body>
<script src="processing.js" type="text/javascript"></script>
<canvas data-processing-sources="test.pde" width="200" height="100"></canvas>
</body>
</html>

That works fine, but starts slow (not this code, but a bigger one)

I have compiled the test.pde to test.js:

// this code was autogenerated from PJS
(function($p) {
function setup() {
$p.size(200, 100);
}
$p.setup = setup;
function draw() {
$p.line(0, 0, $p.width, $p.height);
$p.line($p.width, 0, 0, $p.height);
}
$p.draw = draw;
})

And now my problem. How can I use it in my HTML? This one shows just a black canvas:

<html>
<body>
<script src="processing.js" type="text/javascript"></script>
<canvas datasrc="test.js" type="text/javascript" width="200" height="100"></canvas>
</body>
</html>

There is something simple wrong?

Thank you for helping

Thomas

mbraendle

Re: Re: how do you guys use processing.js?

1 month ago

Wrap your compiled sketch into a variable (which will be the function name):

var myTest = (function($p) {
function setup() {
$p.size(200, 100);
}
$p.setup = setup;
function draw() {
$p.line(0, 0, $p.width, $p.height);
$p.line($p.width, 0, 0, $p.height);
}
$p.draw = draw;
})

Your HTML code:

<html>

<head>

<script src="processing.js" type="text/javascript"></script>

<script src="test.js" type="text/javascript"></script>

</head>

<body>

<canvas id="mytwolines" width="200" height="100"></canvas>

<noscript>

<p>JavaScript is required to view the contents of this page.</p>

</noscript>

<script type="text/javascript">

var myCanvas = document.getElementById('mytwolines');

new Processing(myCanvas, myTest);

</script>

</body>

</html>

GoToLoop

Re: how do you guys use processing.js?

1 month ago

Not all browsers allow JS code and other plugins run on from offline HTML files:
http://forum.processing.org/topic/export-and-run-a-app-on-webspace

lighttamer

Re: how do you guys use processing.js?

1 month ago

Thanks to mbraendle (Grüezi) That is the piece of code I had looking for.
And now I've put it in my page. And it starts a bit faster.

Here you can see:
http://www.motivationsbaum.de/baumbearbeiten.php?id=zfaaf&p=rcxfcodghe
sorry the page is in german, next time I will translate it.

Greetings
Thomas

Top Reply