How can I combine animations in onFrame?

Question

My goal is to make the wave segments move from the bottom of the screen to the top, while animating the wave. The code I'm using to make the wave comes from paperjs.org:

http://paperjs.org/tutorials/animation/creating-animations/#animating-path-segments

Ideally, I'd like to close the path with points that stay anchored to the bottom left and right of the viewport. This is so I can fill the wave with a solid color.

Answer 1

Simply add points to your path before and after the for-loop that generates your evenly distributed segments:

path.add(new Point(0, 1) * view.size);

// Add 5 segment points to the path spread out
// over the width of the view:
for (var i = 0; i <= amount; i++) {
path.add(new Point(i / amount, 1) * view.size);
}

path.add(new Point(1, 1) * view.size);

This will give you points anchored to the bottom of your view. To account for the new segments, change the for loop in the onFrame function to read:

for (var i = 1; i <= amount+1; i++) {