scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-07-11 12:14:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update Chain example.

Browse source
This commit is contained in:
Jonathan Puckey 2011-05-19 17:15:42 +02:00
parent 1e18c38d35
commit 958c19c572
1 changed files with 14 additions and 10 deletions

24
examples/Scripts/Chain.html
View file

@ -9,16 +9,18 @@
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
// Adapted from the following Processing example: // Adapted from the following Processing example:
// http://processing.org/learning/topics/follow3.html // http://processing.org/learning/topics/follow3.html
var path = new Path(); var path = new Path();
path.strokeColor = 'purple'; path.style = {
path.strokeWidth = 20; strokeColor: '#E4141B',
path.strokeCap = 'round'; strokeWidth: 20,
var size = 20; strokeCap: 'round'
};
var size = 25;
var segments = path.segments; var segments = path.segments;
var center = view.center; var start = view.center / [10, 1];
for (var i = 0; i < size; i++) for (var i = 0; i < size; i++)
path.add(center + new Point(i * 100, 0)); path.add(start + new Point(i * 100, 0));
function onMouseMove(event) { function onMouseMove(event) {
segments[0].point = event.point; segments[0].point = event.point;
@ -26,7 +28,7 @@
var nextSegment = segments[i + 1]; var nextSegment = segments[i + 1];
var position = path.segments[i].point; var position = path.segments[i].point;
var angle = (position - nextSegment.point).angle; var angle = (position - nextSegment.point).angle;
var vector = new Point({ angle: angle, length: 25 }); var vector = new Point({ angle: angle, length: 35 });
nextSegment.point = position - vector; nextSegment.point = position - vector;
} }
path.smooth(); path.smooth();
@ -34,13 +36,15 @@
function onMouseDown(event) { function onMouseDown(event) {
path.selected = true; path.selected = true;
path.strokeColor = '#e08285';
} }
function onMouseUp(event) { function onMouseUp(event) {
path.selected = false; path.selected = false;
path.strokeColor = '#e4141b';
} }
</script> </script>
</head> </head>
<body style='background-color: black'> <body>
<canvas id="canvas" resize keepalive="true"></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>