<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
var amount = 180;
for(var i = 0; i < amount; i++) {
var path = new Path();
path.fillColor = new HSBColor(1, 1, Math.random());
path.strokeCap = 'round';
path.closed = true;
}
var position = document.bounds.center;
var mousePos = position;
var children = document.activeLayer.children;
var count = 0;
function iterate() {
count++;
var delta = (mousePos - position);
position += delta / 10;
for (var i = 1; i < amount; i++) {
var path = children[i];
var length = Math.abs(Math.sin(i + count / 20) * 300);
path.segments = [
position + delta / 1.5,
position + { angle: i * 2, length: length },
position + { angle: (i + 1) * 2, length: length }
];
path.fillColor.hue = count - length;
}
}
var lastRedraw = 0;
setInterval(draw, 30);
function draw() {
iterate();
var now = new Date().getTime();
if(now - lastRedraw > 30) {
document.redraw();
lastRedraw = now;
}
}
function onMouseMove(event) {
iterate();
lastRedraw = Date.now();
mousePos = event.point;
}
</script>
</head>
<body style='background-color:black'>
<canvas id='canvas' width=1024 height=768></canvas>
</body>