Paper.js code looks different in Chrome developer tools

Question

This is the code for a game where a circle jumps around the page and you need to click it within a certain amount of time ( naomikudren.com/Catch ).

var circleSize = 60;
var circle = new Path.Circle(new Point(50, 50), circleSize);
circle.fillColor = "red";
var counter = 0;
var counter2 = 0;
var speed = 60;
function onFrame(event) {
    counter2++
    if (counter2 % speed === 0) {
        var newPoint = Point.random() * view.size;
        circle.position = new Point(newPoint, newPoint);
    }
    console.log(counter2)
}
circle.onClick = function(event) {
    var newPoint = Point.random() * view.size;
    circle.position = new Point(newPoint, newPoint);
    this.fillColor = {
        hue: Math.random() * 360,
        saturation: 1,
        brightness: 1,
    };
    counter2 = 0;
    counter++;
    circle.scale(0.99);

    text.content = 'Score ' + counter;
}


var text = new PointText(new Point(50, 50));
text.justification = 'center';
text.fillColor = 'black';

That's all fine and dandy, but when I view the Paperscript file as a source in Chrome's developer tools it displays like this:

paper._execute = function(__$__,view,Point,Path,PointText,onFrame) {var circleSize = 60;
var circle = new Path.Circle(new Point(50, 50), circleSize);
circle.fillColor = "red";
var counter = 0;
var counter2 = 0;
var speed = 60;
function onFrame(event) {
    counter2 = __$__(counter2, "+", 1)
    if (__$__(counter2, "%" , speed) === 0) {
        var newPoint = __$__(Point.random(), "*" , view.size);
        circle.position = new Point(newPoint, newPoint);
    }
    console.log(counter2)
}
circle.onClick = function(event) {
    var newPoint = __$__(Point.random(), "*" , view.size);
    circle.position = new Point(newPoint, newPoint);
    this.fillColor = {
        hue: __$__(Math.random(), "*" , 360),
        saturation: 1,
        brightness: 1,
    };
    counter2 = 0;
    counter = __$__(counter, "+", 1);
    circle.scale(0.99);

    text.content = 'Score ' + counter;
}


var text = new PointText(new Point(50, 50));
text.justification = 'center';
text.fillColor = 'black';

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHR0cDovL25hb21pa3VkcmVuLmNvbS9DYXRjaC9jYXRjaC5qcyIsIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiaHR0cDovL25hb21pa3VkcmVuLmNvbS9DYXRjaC9jYXRjaC5qcyJdfQ==
return { onFrame: onFrame };
}

I don't understand what has happened here. Is Chrome not supposed to show the source file as it is? And why is it different than the source file, does this mean that some kind of compilation has happened here from Paperscript to plain JavaScript?

Answer 1

This is because you are using paperscript, not JavaScript. paperjs preprocesses your code when it is declared as paperscript and what Chrome is showing you is the result of that preprocessing. It makes sense if you think about it - Chrome needs to show you what is being executed in order to debug effectively. It can't be aware of all the transformation different types of script preprocessing might make.

It's one of the reasons that I always use paperjs in JavaScript mode even though 1) the operators don't work, functions have to be used, and 2) Path.Circle must be referred to as paper.Path.Circle (similar for all other paper objects and variables).

Using paperscript can result in odd behavior in some cases. For example, if you use view.onFrame = function() {...} in your code but also declare function onFrame() {...} then the view function will be called until your code completes and returns the object {onFrame: onFrame} at the end. At that point the onFrame function will replace the view handler.

I haven't tested this but here's a quick conversion of your code to native JavaScript. The primary differences are 1) I call paper.setup explicitly and 2) all references to paper items are prefixed with paper. . I also use the view.on handler for frame handling though there are other ways to get that to work.

paper.setup("myCanvas");

var circleSize = 60;
var circle = new paper.Path.Circle(new Point(50, 50), circleSize);
circle.fillColor = "red";
var counter = 0;
var counter2 = 0;
var speed = 60;

paper.view.on('frame', function(event) {
    counter2++
    if (counter2 % speed === 0) {
        var newPoint = paper.Point.random().multiply(paper.view.size);
        circle.position = new paper.Point(newPoint, newPoint);
    }
    console.log(counter2)    
});

circle.onClick = function(event) {
    var newPoint = paper.Point.random().multiply(paper.view.size);
    circle.position = new paper.Point(newPoint, newPoint);
    this.fillColor = {
        hue: Math.random() * 360,
        saturation: 1,
        brightness: 1,
    };
    counter2 = 0;
    counter++;
    circle.scale(0.99);

    text.content = 'Score ' + counter;
}


var text = new paper.PointText(new paper.Point(50, 50));
text.justification = 'center';
text.fillColor = 'black';