Paper.js library not working with no errors

Question

I am trying to run one of the paperjs website examples, but when I run a local server, I just get a blank screen with no errors. I used bower to install the library, and I am linking to the right paperjs source file. Here is my code:

index.html:

<!DOCTYPE html>
<html>
 <head>
        <script type="text/javascript" src="bower_components/paper/dist/paper-full.js"</script>
        <script type="text/paperscript" src="csim.js" canvas="myCanvas"></script>
 </head>
 <body>
        <canvas id="myCanvas"></canvas>
 </body>
</html>

csim.js:

paper.install(window);

window.onload = function () {
    
paper.setup(document.getElementById("myCanvas"));

var values = {
 paths: 50,
 minPoints: 5,
 maxPoints: 15,
 minRadius: 30,
 maxRadius: 90
};

var hitOptions = {
 segments: true,
 stroke: true,
 fill: true,
 tolerance: 5
};

createPaths();

function createPaths() {
 var radiusDelta = values.maxRadius - values.minRadius;
 var pointsDelta = values.maxPoints - values.minPoints;
 for (var i = 0; i < values.paths; i++) {
  var radius = values.minRadius + Math.random() * radiusDelta;
  var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
  var path = createBlob(view.size * Point.random(), radius, points);
  var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
  var hue = Math.random() * 360;
  path.fillColor = { hue: hue, saturation: 1, lightness: lightness };
  path.strokeColor = 'black';
 };
}

function createBlob(center, maxRadius, points) {
 var path = new Path();
 path.closed = true;
 for (var i = 0; i < points; i++) {
  var delta = new Point({
   length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
   angle: (360 / points) * i
  });
  path.add(center + delta);
 }
 path.smooth();
 return path;
}

var segment, path;
var movePath = false;
function onMouseDown(event) {
 segment = path = null;
 var hitResult = project.hitTest(event.point, hitOptions);
 if (!hitResult)
  return;

 if (event.modifiers.shift) {
  if (hitResult.type == 'segment') {
   hitResult.segment.remove();
  };
  return;
 }

 if (hitResult) {
  path = hitResult.item;
  if (hitResult.type == 'segment') {
   segment = hitResult.segment;
  } else if (hitResult.type == 'stroke') {
   var location = hitResult.location;
   segment = path.insert(location.index + 1, event.point);
   path.smooth();
  }
 }
 movePath = hitResult.type == 'fill';
 if (movePath)
  project.activeLayer.addChild(hitResult.item);
}

function onMouseMove(event) {
 project.activeLayer.selected = false;
 if (event.item)
  event.item.selected = true;
}

function onMouseDrag(event) {
 if (segment) {
  segment.point += event.delta;
  path.smooth();
 } else if (path) {
  path.position += event.delta;
 }
}
}

score 0 · Answer 1 · answered May 13 '17 at 19:03

0

You have a typo in your HTML doc. The line

<script type="text/javascript" src="bower_components/paper/dist/paper-full.js"</script>

Is missing a closing > before opening the closing tag </script>

answered May 13 '17 at 19:03

Ivo

535
2
13

Thank you! Now it is still blank but there is an error. The console prints "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience." How do I fix this? Does it have to do with my version of paperjs? The error is for the paper-full.js file. – Hobbes May 13 '17 at 19:06
That is a whole separate question for which you can find answers already: http://stackoverflow.com/questions/24639335/javascript-console-log-causes-error-synchronous-xmlhttprequest-on-the-main-thr – Ivo May 13 '17 at 19:09

Paper.js library not working with no errors

1 Answers1