gbuesing/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Processing Test</title>
    <script type="text/javascript" src="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.js"></script>
  </head>
  <body>
    <canvas id="mysketch" data-processing-sources="sketch.pde"></canvas>
  </body>
</html>

## sketch.pde
float framerate = 60; // our "sketch" will have a framerate of 24 frames per second.

int ball_x;           // ball administration: x coordinate
int ball_y;           // ball administration: y coordinate
int ball_radius = 20; // ball administration: ball radius

void setup() {
  size(960,500);        // set draw area size
  frameRate(framerate); // set animation framerate
  ball_x = width/2;     // set the initial ball coordinates
  ball_y = ball_radius; // set the initial ball coordinates
  stroke(#003300);      // set the default shape outline colour
  fill(#0000FF);        // set the default shape fill colour
}

void draw() {
 // compute the ball height for this frame
 float bounce_height = height/2 * abs(sin(PI*frameCount/framerate));
 // because the top of the screen is 0, and the bottom is "height",
 float ball_height = height - (bounce_height+ball_radius);
 // clear the drawing area
 background(#FFFFEE);
 // set the new ball y position
 ball_y = (int) (ball_height);
 // draw the ball
 ellipse(ball_x,ball_y,ball_radius,ball_radius);
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Processing Test</title>
	<script type="text/javascript" src="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.js"></script>
	</head>
	<body>
	<canvas id="mysketch" data-processing-sources="sketch.pde"></canvas>
	</body>
	</html>
	float framerate = 60; // our "sketch" will have a framerate of 24 frames per second.

	int ball_x; // ball administration: x coordinate
	int ball_y; // ball administration: y coordinate
	int ball_radius = 20; // ball administration: ball radius

	void setup() {
	size(960,500); // set draw area size
	frameRate(framerate); // set animation framerate
	ball_x = width/2; // set the initial ball coordinates
	ball_y = ball_radius; // set the initial ball coordinates
	stroke(#003300); // set the default shape outline colour
	fill(#0000FF); // set the default shape fill colour
	}

	void draw() {
	// compute the ball height for this frame
	float bounce_height = height/2 * abs(sin(PI*frameCount/framerate));
	// because the top of the screen is 0, and the bottom is "height",
	float ball_height = height - (bounce_height+ball_radius);
	// clear the drawing area
	background(#FFFFEE);
	// set the new ball y position
	ball_y = (int) (ball_height);
	// draw the ball
	ellipse(ball_x,ball_y,ball_radius,ball_radius);
	}