Multiple script/paperscripts in the same paperscope

StackOverflow https://stackoverflow.com/questions/14039554

  •  12-12-2021
  •  | 
  •  

Question

I'm starting with paper.js. I like the fact that it introduces the possibility to have a script with a text/paperscript mime type, which runs in its on scope. However, scripts can become large pretty soon, so I want to be able to divide it in multiple scripts for readability. I thought I could just add more than one script tag and have them all run in the same scope, but apparently this isn't the case.

Both scripts are loaded and do run, but the second script doesn't seem to be in the paper scope.

I've set up an example here: http://barbata.nl/SO/Maps/ This example has some code, but I'll point out the important bits.

It contains two paperscripts:

  • Maps.js is the main script, which rasterizes the image and allows moving it around. You can ignore the code in this script, for it works fine so far.

  • Zoom.js is the script in which I wanted to isolate zooming functionality. It uses jq.mobi to capture the scroll wheel of the mouse, since Paper.js doesn't seem to have that event. It then translates that to a call to onMouseScroll, in a similar way Paper does it.

So far so good. The actual problem arises with the zoomIn and zoomOut functions in zoom.js.

It works if I explicity use the paper object to reference the view I want to zoom:

function zoomIn()
{
  if (paper.view.zoom < 2)
  {
    paper.view.zoom = paper.view.zoom * 2;
  }
}

But it fails when I remove paper and just reference the view:

function zoomIn()
{
  if (view.zoom < 2)
  {
    view.zoom = view.zoom * 2;
  }
}

This surprises me, as I expected the script to be a Paperscript, running in the Paperscope. It works fine if I put this code in Maps.js, so it seems that although zoom.js is loaded by Paper.js (the developer tools in the browser confirm this), it isn't run in the Paperscope.

My question is: are my findings correct? Am I doing something wrong? What is the right way to divide a Paper.js application into multiple units for readability?

Of course I can get it running, but I want to make sure I do it right.

Was it helpful?

Solution

This is indeed how it works. I've opened an issue on GitHub

OTHER TIPS

I found that the "cleanest" way is to do it with this.install(window). It also makes error finding with Chrome developer tools easier since it is more adapted to reporting on the line errors in java-script than "paperscript".

in index.html (for example):

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

<script type="text/paperscript" canvas="canvas">
this.install(window);
/*no code 'required' here */
</script>
<body>
    <canvas id="canvas" width="1500" height="500"></canvas>
</body>

Then in the js/other_lib.js i just add code as normal:

var r = new Path.Rectangle([100,100],[200,200]);
r.fillColor = 'black';
/*more code here*/

This should generate a rectangle.

What DOES'T NOT WORK for me (as of Paper.js v0.10.2 Release Date: 9. July 2016) is the object operators. Such as adding vecrots pointc = pointa + pointb; for me this is giving a lot of NaN values. I have had to edit a few libs to get this working, but the change is simple:

var pointc = new Point(pointa.x+pointb.x,pointa.y + pointb.y);

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top