mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
27781d44ac
The original technique isn't horrible when it happens once per mouse move but if used once per frame it completely destroys the browser. To see the leak in the chrome task manager - furiously move the mouse and see the top cpu process keep rising in memory usage.
50 lines
1.3 KiB
HTML
50 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>Chain</title>
|
|
<link rel="stylesheet" href="../css/style.css">
|
|
<script type="text/javascript" src="../../dist/paper.js"></script>
|
|
<script type="text/paperscript" canvas="canvas">
|
|
// Adapted from the following Processing example:
|
|
// http://processing.org/learning/topics/follow3.html
|
|
|
|
var path = new Path();
|
|
path.style = {
|
|
strokeColor: '#E4141B',
|
|
strokeWidth: 20,
|
|
strokeCap: 'round'
|
|
};
|
|
var size = 25;
|
|
var segments = path.segments;
|
|
var start = view.center / [10, 1];
|
|
for (var i = 0; i < size; i++)
|
|
path.add(start + new Point(i * 100, 0));
|
|
|
|
function onMouseMove(event) {
|
|
segments[0].point = event.point;
|
|
for (var i = 0; i < size - 1; i++) {
|
|
var nextSegment = segments[i + 1];
|
|
var position = path.segments[i].point;
|
|
var vector = position - nextSegment.point;
|
|
vector.length = 35;
|
|
nextSegment.point = position - vector;
|
|
}
|
|
path.smooth();
|
|
}
|
|
|
|
function onMouseDown(event) {
|
|
path.fullySelected = true;
|
|
path.strokeColor = '#e08285';
|
|
}
|
|
|
|
function onMouseUp(event) {
|
|
path.fullySelected = false;
|
|
path.strokeColor = '#e4141b';
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" resize></canvas>
|
|
</body>
|
|
</html>
|