54 lines
1.2 KiB
JavaScript
54 lines
1.2 KiB
JavaScript
// The amount of segment points we want to create:
|
|
var amount = [1, 2, 3, 4, 5];
|
|
|
|
var height = 200;
|
|
var width = 100;
|
|
|
|
// Create a new path and style it:
|
|
var path = new Path({
|
|
// 80% black:
|
|
// strokeColor: 'black',
|
|
// strokeWidth: 0,
|
|
// strokeCap: 'square'
|
|
});
|
|
|
|
var raster = new Raster({
|
|
// source: 'user/themes/r2c/images/trame.svg',
|
|
position: view.center
|
|
});
|
|
|
|
// path.clipMask = true;
|
|
// path.selected = true;
|
|
path.closed = true;
|
|
path.fullySelected = false;
|
|
path.fillColor = 'grey';
|
|
|
|
// Add 5 segment points to the path spread out
|
|
// over the width of the view:
|
|
|
|
for (var i = 0; i <= amount.length; i++) {
|
|
var maxPoint = new Point(300, 100);
|
|
var point = maxPoint * Point.random(view.size);
|
|
path.add(point);
|
|
}
|
|
|
|
// Select the path, so we can see how it is constructed:
|
|
function onFrame(event) {
|
|
// Loop through the segments of the path:
|
|
for (var i = 0; i <= amount.length; i++) {
|
|
var segment = path.segments[i];
|
|
var pulse = 0.7;
|
|
var sinus = Math.sin(event.time * pulse + i);
|
|
var cos = Math.cos(event.time * pulse + i);
|
|
segment.point.y = sinus * height + 300;
|
|
segment.point.x = cos * width + 300;
|
|
}
|
|
|
|
path.rotate(30);
|
|
path.smooth();
|
|
}
|
|
|
|
function onMouseDown(event) {
|
|
path.fillColor = 'blue';
|
|
}
|