Paper.js - compatibilty with Chrome and IE

441 views Asked by At

I'm trying to do a silly thing : a flying sausage on a HTML page. I'm trying to do it from Paper.js http://paperjs.org/

here is the HTML code

<!DOCTYPE html>
<html>
<head>

 <meta charset="utf-8" />
    <title>SkyWurst</title>

<!-- Load the Paper.js library -->
<script type="text/javascript" src="paper.js">
</script>
<!--Load external PaperScript and associate it with myCanvas -->
<script type="text/paperscript" src="saucisse.js" canvas="myCanvas">
</script>

</head>
<body>

 <canvas  id="myCanvas" width="1600" height="900"
    id="tools_sketch" width="1600" height="900" 
    style="background: url(sky.jpg) no-repeat center center;">
 </canvas>

</body>
</html>

and here is the saucisse.js

// Adapted from the following Processing example:
// http://processing.org/learning/topics/follow3.html

// The amount of points in the path:
var points = 10;

// The distance between the points:
var length = 25;

var path = new Path({
 strokeColor: '#E4141B',
 strokeWidth: 70,
 strokeCap: 'round'
});

var start = view.center / [10, 1];
for (var i = 0; i < points; i++)
 path.add(start + new Point(i * length, 0));

function onMouseMove(event) {
 path.firstSegment.point = event.point;
 for (var i = 0; i < points - 1; i++) {
  var segment = path.segments[i];
  var nextSegment = segment.next;
  var vector = segment.point - nextSegment.point;
  vector.length = length;
  nextSegment.point = segment.point - vector;
 }
 path.smooth();
}

function onMouseDown(event) {
 path.fullySelected = true;
 path.strokeColor = '#e08285';
}

function onMouseUp(event) {
 path.fullySelected = false;
 path.strokeColor = '#e4141b';

}

sky.jpg, paper.js, saucisse.js and saucisse.html are in the same folder

Everything is fine with Firefox but with Chrome and IE, there is only the sky, and no sausage. Very sad.

Any idea ?

1

There are 1 answers

0
bmacnaughton On

I can't say definitively but I suspect that either paper.js or saucisse.js is not loading when you run it locally. It could be because the files are missing or in the wrong place.

Another possibility is that the server paper.js is paper-full.js while the local paper is paper-core.js. If that's the case both files would load but the saucisse script would fail because the paperscript features aren't loaded.

I did embed saucisse.js within the HTML file and referenced a version of paper that I know was correct and that runs locally using Chrome, IE, and Firefox. I don't know why Firefox runs correctly. Maybe Firefox had a tab that was already open to a correctly working version before you made a change that broke things? If so, it will continue to work until you reload the page.