jeisenma/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Projectile Class Example</title>
<script type="text/javascript" src="http://paperjs.org/static/js/paper.js"></script>
<script type="text/paperscript" canvas="canvas">

var projectiles = [];						// array to hold all the projectiles

var Projectile = Base.extend( 			// define a class called "Projectile"
{
	initialize: function(id, size, color, location, velocity)	// the initialize function is a special function that creates a
	{								// new object (given the three customization parameters: size, color, and position)
		this.id = id;
		this.r = size;			//  how big is the projectile?
		this.v = velocity;		//  initial velocity
		this.slow = 0.9;		//  friction/damping to make the projectile slow down eventually (set to 1.0 for perpetual motion!)
		this.gravity = new Point(0,3);

		this.path = new Path.Circle(location, this.r);	// draw a circle
		this.path.fillColor = color;
		this.path.strokeColor = 'black';
	},

	move: function(event)						// the move function (could be called anything) is called on each frame...
	{                                                               //   ( from onFrame() ) it moves the projectile according to certain rules
		this.v += this.gravity;					// update the velocity by adding in gravity
		this.path.position += this.v;				// update circle position using velocity
		if( this.path.position.x > view.size.width-this.r )	// right wall bounce
		{
			this.path.position.x = view.size.width-this.r;	// put the Projectile back on the wall
			this.v.x = -this.v.x; 				// reverse the x velocity
			this.v = this.v*this.slow;
		}
		if( this.path.position.x < this.r )			// left wall bounce
		{
			this.path.position.x = this.r;			// put the projectile back on the wall
			this.v.x = -this.v.x; 				// reverse the x velocity
			this.v = this.v*this.slow;
		}
		if( this.path.position.y > view.size.height-this.r )	// floor bounce
		{
			this.path.position.y = view.size.height-this.r;	// put the projectile back on the wall
			this.v.y = -this.v.y; 				// reverse the y velocity
			this.v = this.v*this.slow;
		}
		if( this.path.position.y < this.r )			// ceiling bounce
		{
			this.path.position.y = this.r;			// put the projectile back on the wall
			this.v.y = -this.v.y; 				// reverse the y velocity
			this.v = this.v*this.slow;
		}
	}
});

function onFrame(event)
{
    for (var i = 0; i < projectiles.length; i++)		// update the position of all the projectiles
    { projectiles[i].move(); }
}

function onMouseDown(event)
{
	// when mouse is clicked make a new projectile with the following attributes:
	var radius = 20;
	var color = new HSBColor(Math.random()*360, 1, 1);
	var position = event.point;
	var velocity = Point.random()*100 - 50;
	projectiles.push(new Projectile( projectiles.length, radius, color, position, velocity ) );
}

</script>
</head>
<body style="margin:0;overflow:hidden">
	<canvas id="canvas" resize></canvas>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Projectile Class Example</title>
	<script type="text/javascript" src="http://paperjs.org/static/js/paper.js"></script>
	<script type="text/paperscript" canvas="canvas">

	var projectiles = []; // array to hold all the projectiles

	var Projectile = Base.extend( // define a class called "Projectile"
	{
	initialize: function(id, size, color, location, velocity) // the initialize function is a special function that creates a
	{ // new object (given the three customization parameters: size, color, and position)
	this.id = id;
	this.r = size; // how big is the projectile?
	this.v = velocity; // initial velocity
	this.slow = 0.9; // friction/damping to make the projectile slow down eventually (set to 1.0 for perpetual motion!)
	this.gravity = new Point(0,3);

	this.path = new Path.Circle(location, this.r); // draw a circle
	this.path.fillColor = color;
	this.path.strokeColor = 'black';
	},

	move: function(event) // the move function (could be called anything) is called on each frame...
	{ // ( from onFrame() ) it moves the projectile according to certain rules
	this.v += this.gravity; // update the velocity by adding in gravity
	this.path.position += this.v; // update circle position using velocity
	if( this.path.position.x > view.size.width-this.r ) // right wall bounce
	{
	this.path.position.x = view.size.width-this.r; // put the Projectile back on the wall
	this.v.x = -this.v.x; // reverse the x velocity
	this.v = this.v*this.slow;
	}
	if( this.path.position.x < this.r ) // left wall bounce
	{
	this.path.position.x = this.r; // put the projectile back on the wall
	this.v.x = -this.v.x; // reverse the x velocity
	this.v = this.v*this.slow;
	}
	if( this.path.position.y > view.size.height-this.r ) // floor bounce
	{
	this.path.position.y = view.size.height-this.r; // put the projectile back on the wall
	this.v.y = -this.v.y; // reverse the y velocity
	this.v = this.v*this.slow;
	}
	if( this.path.position.y < this.r ) // ceiling bounce
	{
	this.path.position.y = this.r; // put the projectile back on the wall
	this.v.y = -this.v.y; // reverse the y velocity
	this.v = this.v*this.slow;
	}
	}
	});

	function onFrame(event)
	{
	for (var i = 0; i < projectiles.length; i++) // update the position of all the projectiles
	{ projectiles[i].move(); }
	}

	function onMouseDown(event)
	{
	// when mouse is clicked make a new projectile with the following attributes:
	var radius = 20;
	var color = new HSBColor(Math.random()*360, 1, 1);
	var position = event.point;
	var velocity = Point.random()*100 - 50;
	projectiles.push(new Projectile( projectiles.length, radius, color, position, velocity ) );
	}

	</script>
	</head>
	<body style="margin:0;overflow:hidden">
	<canvas id="canvas" resize></canvas>
	</body>
	</html>