Integrating paperjs with rest of HTML/JS project

[ComputerFun]

Hello,

I'm creating some little interactive widgets. These currently exist as a paperjs canvas and some associated html elements (textfield, label etc). I wanted to instantiate the widgets dynamically via class-based scripting and add/remove them from the DOM when needed. I'd like to use the normal scope system with operators if it's possible (nice feature).

I've read the tutorials but I'm a bit confused as to the approach to take. Should I make a paperscript which is a library of functions, eg "setupWidgetA() setupWidgetB()", which sits alongside my js classes WidgetA, WidgetB, then instances of widgets can call the functions as needed? At first this seemed odd but its basically how Flash works, and the encapsulation of the visual stuff away from the HTML stuff is not so bad.

Still trying to get my head around how this will work though, can someone give me a rough idea of the approach to set up a project like this?

Thanks in advance

PS: On a side note, I seemed to have got randomly banned with my other Google account?? Google Groups sucks!

[Jürg Lehni]

Hi,

Scoped PaperScript run inside the global scope, and have access to all elements of the global scope. The normal JavaScripts running in the global scope (= window) will not see these PaperScopes, and won't have access to their variables.

There is a simple solution to exchange information between the two: Simply declare a global structure that you use to exchange tings back and forth, e.g.

window.globals = {
someValue: 10,
someFunction: function() { alert(globals.someValue); }
};

In your PaperScript, you can then access this simply through 'globals', since it's in the window scope:

globals.someValue = 20;
globals.someFunction();

And in the same way, you can use this structure from normal JavaScript.

Make sense?

Best,

Jürg

> --
> You received this message because you are subscribed to the Google Groups "Paper.js" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

[ComputerFun]

Thanks Jurg I really appreciate you taking the time to answer people's questions, and I think my question was a bit wooly.

I did a quick first sketch of a project:

1x html doc with 4x canvas, 4x external paperscripts for widgetA, B, C ,D

Now I've built js classes for each of the widgets so I'm calling `new WidgetA()` to create instances & their canvas elements dynamically.

Is there a way of hooking up external paperscripts to my dynamic canvases?

If I built this project in Flash, I'd dynamically attach Flash player objects for each widget.

In my head I want to work with Paper.js in a similar way, like this:

runPaperscriptOnCanvas(canvas, 'paperscriptA.js');

Then maybe there's some cleanup function to stop the script if I delete the canvas later on.

So I guess I'm talking about asynchronous loading of external paperscripts.

Could I dynamically attach my external paperscripts as <script> tags in the DOM?

Thanks again for your time!

[Joshua Penman]

Hi Jürg!

Thanks so much for making paperjs! It's wonderful.

I found this post referred to on StackOverflow.

I have been dealing with exactly this issue, and I can't figure it out, and of course, there's no tutorial.

I have done lots trying creating objects in global scope, with a window.globals object, but I can't seem to figure out how to tell paper which canvas to operate on.  It doesn't seem to be dependent on which PaperScope I create the function in!  And my paper.projects array only has one project in it!  

I'd like to be able to run a script in main.js, say:

$('document').ready($('#dfs').on('click', window.globals.makecircle))

and then in one of my PaperScript files, create

globals.makecircle = function () {

var o = new Path.Circle({

radius: 50,

center: new Point (200,200)

})

}

but there seems to be no way to specify which canvas/PaperScript is active, ready to be drawn upon, and the circle very easily goes to the wrong place.

Thanks so much for your help!

Joshua

[Jürg Lehni]

Hi Joshua. Glad you like it!

When working outside of the infrastructure that activates scopes automatically for you (e.g. paper.js handlers for onFrame / mouse events, etc), you can always use scope.activate() to activate a given scope at any given time:

http://paperjs.org/reference/paperscope/#activate

That should help.

For more options, visit https://groups.google.com/d/optout.

[Joshua Penman]

Hi Jürg!

Thanks so much for your help.

I still needed to poke around on this because I still couldn't figure out how to reference the different scopes, since I created them implicitly by invoking PaperScript scripts.  The key for me was PaperScope.get(id)  So, for the benefit of anyone with a similar problem Googling this later, what works is using this in the global scope:

pscope1 = PaperScope.get(1)

pscope2 = PaperScope.get(2)

and then, in a function:

pscope1.activate()

// cool Paper.js graphics functions

pscope1.view.update()

The last because paper won't automatically update unless there's user interaction, animation, etc.

Thanks again,

Joshua

[Jürg Lehni]

A hint: Inside a PaperScript, `this` will point to the current scope. You could use that and store it in the global object.

[Jan]

I have kind of the same problem with paperscript interoperability. I want to have javascript update a values interval based (like coordinates) and feed them into paperscript to show the data graphically. I got the javascript talking to paperscript via globals but can't get it update paperscript. I see that I have to use the 'pscop1.view.update()' as told above here. However i don't get how to incorporate the whole thing into my script. Could someone point me in the right direction or show a small example. Thank you in advance!

Op dinsdag 20 januari 2015 23:27:01 UTC+1 schreef Jürg Lehni:

[Nicholas Piano]

Hi, I've only been doing the paper script stuff for a little while, but I think I know the answer to your question, Jan. 

If you have a global var like:

window.paperFunction = function() {};

Then in paper script:

var path;

var internalFunction = function (x, y) {
  path.addPoint(new Point(x, y));
};

window.paperFunction = internalFunction;

Then from outside you can just call the function:

var externalFunction = window.paperFunction;
externalFunction(0, 0);

I think this is right. Please correct me if I am wrong.