Problem with mathematical operations on Point objects

[croqaz]

I'm running Paper.js on https://observablehq.com/ ; It works, but there are a few weird things. The exact same code is running on http://paperjs.org/tutorials/ and http://sketch.paperjs.org/, but it's not working correctly on observableHQ.

I suspect it has something to do with observableHQ, but I don't know how to debug it, or how to deal with it.

Problem

The colors as name are not working: fillColor = 'blue' doesn't do anything, only the CSS value works (except for Safari, colors as name work in Safari)

Adding or substracting points is not working in any browser:

var point1 = new Point(5, 10);
var point2 = new Point(10, 20);
console.log(point1 + point2);
console.log(point2 - point1);

This prints: { x: 5, y: 10 }{ x: 10, y: 20 } NaN

Also the getNormalAt code examples from http://paperjs.org/reference/path/#getnormalat-offset is returning NaN.

Test: https://observablehq.com/@croqaz/paper-js-test Feel free to hack the code, it's editable.

Tested on 3 browsers: Firefox latest 72.0b8, Brave latest 1.2.28 Chromium: 79.0.3945.79 and Safari latest 13.0.4 on macOS.

[sapics]

@croqaz Thanks for report!

The colors as name are not working: In my Windows 10, Chrome and Firefox, fillColor = 'blue' looks work.

Adding or substracting points is not working in any browser: Usually, arithmetic operations for Point are only works in paperscript. http://paperjs.org/tutorials/getting-started/paperscript-interoperability/ is the tutorial for paperscript.

If you would like to use arithmetic operations for Point without paperscript, it might be possible with PaperScript.execute or PaperScript.load which have reference in http://paperjs.org/reference/paperscript.

getNormalAt ... returning NaN: You are using arithmetic operations for Point without paperscript, it makes return NaN.

[croqaz]

It works. I had no idea it needs the paperscript execute, but now I can see the documentation. In case of adding points, it's easy to just replace with .add() and so on, but I don't see any way of calculating the tangent or normal with Javascript, outside of paperscript. But I can hack it together somehow.

Thank you for your response. I think you can close the issue.

[lehni]

All math operators have JS equivalents, see Math Operator Functions here: http://paperjs.org/reference/point/#add-number http://paperjs.org/reference/point/#multiply-number etc.

So this should work in pure JS:

// Create an arc shaped path:
var path = new Path({
    strokeColor: 'black'
});

path.add(new Point(40, 100));
path.arcTo(new Point(150, 100));

// We're going to be working with a third of the length
// of the path as the offset:
var offset = path.length / 3;

// Find the point on the path:
var point = path.getPointAt(offset);

// Find the normal vector on the path at the given offset
// and give it a length of 30:
var normal = path.getNormalAt(offset).multiply(30);

var line = new Path({
    segments: [point, point.add(normal)],
    strokeColor: 'red'
});

http://sketch.paperjs.org/#V/0.12.4/S/bVJNa8JAEP0rQy4mEDRie0npoQg9lkILPRgPazJJlmxmZTNVivjfu19Woeb0Znbe2/cye0pIjJiUyceAXPdJntS6cfViAWuDghEEgTA1TL3YYwN7wX1Z0UEYD+EZCI/wbmF6qgjsN7HRA6610qaE2U6JephVdM6eKqrIceaiaVLP0pI4fShyWBZF5gbCsak/9c3A8vFmoiLr7AtnBqGzpx2whh3CUZvBVUdpPQngXpoGdGsBgkLquPfE2PHOxeSxbtsJOUYKhQ3ljQQiLGB1ufhVUhMUnDPQ9Cd3+Se+H/kdsk/wwmkQzv7pkDajUHDAmrW51QPBHnfygBR9eaqwTNcEyTZotGhzrYpoIUpePbz5xtXEfPxWLPfqJ10VwZGjKUl4b5vYjUg8lbDx2fIQMezQC2fb/N7iDTZh7fZN7exLGjxvSsrN9vwL

[croqaz]

You're right! I thought the function getNormalAt doesn't work, but in fact the getNormalAt*integer doesn't work, that was the subtle difference! Everything works perfect! Thank you for this amazing library!

[croqaz]

I will delete the Paper.js test from ObservableHQ

[lehni]

you're welcome!