Creating Animations

To create animations in Paper.js, we use the onFrame handler. When this function is defined, it is called up to 60 times a second by Paper.js. The view is redrawn automatically after the onFrame function has been executed.

function onFrame(event) {
	// Your animation code goes in here
}

The onFrame handler function receives an event object which contains information about the event:

event.count: the number of times the frame event was fired.
event.time: the total amount of time passed since the first frame event in seconds.
event.delta: the time passed in seconds since the last frame event.

function onFrame(event) {
	// the number of times the frame event was fired:
	console.log(event.count);

	// The total amount of time passed since
	// the first frame event in seconds:
	console.log(event.time);

	// The time passed in seconds since the last frame event:
	console.log(event.delta);
}

The following are a number of examples that make use of the onFrame handler to create animations.

In the following example, a rectangle shaped path is created on execution and each frame it is rotated by 3 degrees:

The following script creates a circle shaped path item with a red fill color. Then, each frame it slightly changes the hue of the color:

The following script creates a text item and moves it smoothly to a random destination point in the view. When the text item comes near the position, another random destination point is created. The contents of the text item is the distance between its current position and that of the destination point.

The following example shows a star field like animation. The speed that the circles move depends on their width. When a star leaves the view, it is moved back to left of the view.

The following script creates a path and then changes the position of its segment points in the onFrame handler: