scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-01 02:38:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update lines.html example.

Browse source
This commit is contained in:
Jonathan Puckey 2011-03-12 15:17:08 +01:00
parent 5079259a8e
commit f39895a945
1 changed files with 41 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
examples/Scripts/lines.html
View file

@ -6,25 +6,53 @@
<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 = new Point(document.size) / 2;
var mousePos = position;
var children = document.activeLayer.children;
var count = 0;
setInterval(draw, 20);
function draw() {
function iterate() {
count++;
document.activeLayer.children = [];
var point = new Point(document.size) / 2;
var vector = new Point(100, 0);
for (var i = 0; i < 180; i++) {
var center = point + vector.rotate(i * 2).normalize(30);
var length = 30 + Math.abs(Math.sin((i + count / 20)) * 300);
var end = point + vector.rotate(i * 2).normalize(length);
var path = new Path.Line(center, end);
path.strokeColor = i % 4 ? 'black' : 'red';
var delta = (mousePos - position);
position += delta / 10;
for (var i = 1; i < amount; i++) {
var length = Math.abs(Math.sin(i + count / 20) * 300);
children[i].segments = [
position + delta / 1.5,
position + { angle: i * 2, length: length },
position + { angle: (i + 1) * 2, length: length }
];
children[i].fillColor.hue = count - length;
}
document.redraw();
}
var lastRedraw = 0;
setInterval(draw, 30);
function draw() {
iterate();
var now = Date.now();
if(now - lastRedraw > 30) {
document.redraw();
lastRedraw = now;
}
}
function onMouseMove(event) {
iterate();
lastRedraw = Date.now();
mousePos = event.point;
}
</script>
</head>
<body>
<body style='background-color:black'>
<canvas id='canvas' width=1024 height=768></canvas>
</body>