// 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();