scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-20 22:39:50 -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

56
examples/Scripts/lines.html
View file

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