2

Using Paperjs:

<script type="text/javascript" src="paper.js"></script>
<script type="text/paperscript" canvas="myCanvas" src="myapp.js"></script>

Trying to create a class in myapp.js:

class Petal {
  constructor(index, x, y, diameter, round) {
    this.index = index;
    this.x = x;
    this.y = y;
    this.diameter = diameter;    
    this.round = round;

This creates a "syntax error unexpected token" in paper.js(not my code, thats the paperjs framework) at [paper.js:15421:12].

It refers to this (line 4 being 14521):

  function raise(pos, message) {
    var loc = getLineInfo(input, pos);
    message += " (" + loc.line + ":" + loc.column + ")";
    var err = new SyntaxError(message);
    err.pos = pos; err.loc = loc; err.raisedAt = tokPos;
    throw err;
  }

I'm new to coding like this and I'm just stumped. The class I'm making doesn't even use any code from paperjs so I don't know why it's creating an error in the paper.js file. Also new to stack overflow so please tell me what I am doing wrong.

dustycaviar
  • 45
  • 1
  • 6
  • 1
    Can you make sure that paper.js doesn't have an error in it by removing the script src? – Word Rearranger Nov 13 '19 at 23:49
  • ok so. The code in `myapp.js` is interpreted by paper js, not as full featured javascript but paperscript (`type="text/paperscript"`). I don't know for sure, but it seems you don't have all of the javascript es6 syntax available to you. So the answer is to reevaluate what you put into the paperscript script section. You might benefit from working through the tutorials on their [site](http://paperjs.org/tutorials/). – Paul Rooney Nov 14 '19 at 00:26
  • Thanks my dude! I almost had a feeling this might be it. – dustycaviar Nov 14 '19 at 01:57

1 Answers1

7

By specifying type="text/paperscript" on your <script> tag, you are loading your code as PaperScript rather than JavaScript.
This means that Paper.js will parse it first before passing it to the browser JavaScript engine.
In order to parse your code, Paper.js uses acorn, a parser library. And the version of acorn bundled with Paper.js doesn't support ES6 syntax.
What you can do to circumvent that, is loading a newer version of acorn (that supports ES6) before loading Paper.js.
This is actually what is done on the Paper.js playground: http://sketch.paperjs.org/

Here is a fiddle demonstrating the solution.
Note that I used https://unpkg.com to quickly load the latest versions of npm packages but you load them from wherever you want.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Debug</title>
    <!-- Load latest acron version first -->
    <script type="text/javascript" src="https://unpkg.com/acorn"></script>
    <!-- Then load Paper.js -->
    <script type="text/javascript" src="https://unpkg.com/paper"></script>
    <style>
      html,
      body {
          margin: 0;
          overflow: hidden;
          height: 100%;
      }

      canvas {
          width: 100%;
          height: 100%;
      }
    </style>
</head>
<body>
<canvas id="canvas" resize></canvas>
<script type="text/paperscript" canvas="canvas">
// Here you can now use ES6 syntax.
class MyClass {
    constructor() {
        new Path.Circle({
            center: view.center,
            radius: 50,
            fillColor: 'orange'
        })
    }
}

const myInstance = new MyClass();
</script>
</body>
</html>
sasensi
  • 4,610
  • 10
  • 35
  • Thank you, this looks like it would solve my problem, however I found that if I loaded myapp.js as type="text/javascript" instead of paperscript I can still access paperjs using the paper. notation. Is how I am doing it alright? What is the benefit of doing it the way that you have outlined? – dustycaviar Nov 14 '19 at 17:28
  • The benefit of using PaperScript over JavaScript is commonly more valuable for small projects or examples. The main advantage is to avoid prefixing classes with `paper.` and being able to do arithmetic operation on some objects like `Point` instances. With PaperScript, you can do for example: `pointC = pointA + pointB`... The JavaScript way is a bit more verbose. – sasensi Nov 15 '19 at 13:41