58 lines
1.3 KiB
JavaScript
58 lines
1.3 KiB
JavaScript
// The amount of segment points we want to create:
|
|
var amount = 3;
|
|
|
|
// The maximum height of the wave:
|
|
var height = 300;
|
|
|
|
// Create a new path and style it:
|
|
var path = new Path({
|
|
// 80% black:
|
|
strokeColor: [0.8],
|
|
strokeWidth: 30,
|
|
strokeCap: 'square'
|
|
});
|
|
|
|
var raster = new Raster({
|
|
source: 'trame.svg',
|
|
position: view.center
|
|
});
|
|
|
|
path.clipMask = true;
|
|
// path.selected = true;
|
|
path.closed = true;
|
|
// path.fullySelected = true;
|
|
|
|
// Add 5 segment points to the path spread out
|
|
// over the width of the view:
|
|
for (var i = 0; i <= amount; i++) {
|
|
var maxPoint = new Point(700, 700);
|
|
|
|
var point = maxPoint * Point.random(view.size) + 70;
|
|
path.add(point);
|
|
|
|
// path.add(new Point(500 / 700) * view.size);
|
|
}
|
|
|
|
// 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; i++) {
|
|
var segment = path.segments[i];
|
|
// A cylic value between -1 and 1
|
|
|
|
var sinus = Math.sin(event.time * 0.05+ i);
|
|
|
|
// Change the y position of the segment point:
|
|
segment.point.y = sinus * height + 500;
|
|
}
|
|
// Uncomment the following line and run the script again
|
|
// to smooth the path:
|
|
path.smooth();
|
|
}
|
|
|
|
var copy = path.clone();
|
|
copy.fullySelected = true;
|
|
copy.position.x += 500;
|
|
copy.smooth();
|