jeisenma/PJSdemo2.html

## PJSdemo2.html
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>BallsWithClass : Built with Processing and Processing.js</title>
<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
<script type="application/javascript">
/*
 * This code searches for all the <script type="application/processing" target="canvasid">
 * in your page and loads each script in the target canvas with the proper id.
 * It is useful to smooth the process of adding Processing code in your page and starting
 * the Processing.js engine.
 */

if (window.addEventListener) {
  window.addEventListener("load", function() {
    var scripts = document.getElementsByTagName("script");
    var canvasArray = Array.prototype.slice.call(document.getElementsByTagName("canvas"));
    var canvas;
    for (var i = 0, j = 0; i < scripts.length; i++) {
      if (scripts[i].type == "application/processing") {
        var src = scripts[i].getAttribute("target");
        if (src && src.indexOf("#") > -1) {
          canvas = document.getElementById(src.substr(src.indexOf("#") + 1));
          if (canvas) {
            new Processing(canvas, scripts[i].text);
            for (var k = 0; k< canvasArray.length; k++)
            {
              if (canvasArray[k] === canvas) {
                // remove the canvas from the array so we dont override it in the else
                canvasArray.splice(k,1);
              }
            }
          }
        } else {
          if (canvasArray.length >= j) {
            new Processing(canvasArray[j], scripts[i].text);
          }
          j++;
        }
      }
    }
  }, false);
}
</script>
<script type="application/processing" target="processing-canvas">

// list to hold all the balls
ArrayList balls;

// a variable for remembering where the mouse was initially pressed
PVector mouseDown;

// set up the world
void setup()
{
  size(400,400);
  smooth();
  balls = new ArrayList();  // make some space for the "balls" list
}

// update each ball's state and draw it every frame
void draw()
{

  // draw the scene
  background(150);    // refresh the background
  strokeWeight(2);

  // if dragging, show slingshot line
  if(mousePressed)
  { line(mouseDown.x, mouseDown.y, mouseX, mouseY); }

  // update and draw all the balls
  for(int i=0; i<balls.size(); i++)
  {
    Ball b = (Ball)balls.get(i);
    b.update(balls);
    b.display();
  }
}

void mousePressed()
{
  // memorize where the mouse was clicked
  mouseDown = new PVector(mouseX, mouseY);
}

void mouseReleased()
{
  // random radius for each ball
  int radius = round(map(random(1),0,1,10,30));
  // the location of the new ball
  PVector position = new PVector(mouseX,mouseY);
  // use the mouse pressed position that we memorized earlier to generate an initial velocity
  PVector velocity = new PVector(mouseDown.x-mouseX, mouseDown.y-mouseY);
  // scale the velocity down so it isn't too fast
  velocity.mult(0.1);
  // make a new ball
  balls.add( new Ball( radius, position, velocity ) );
}
class Ball
{
  // properties (variables)
  float rad, d;
  PVector pos, vel, g;
  color col;
  float springyness = 0.25;

  // actions (functions)
  Ball(int r, PVector p, PVector v)    // the constructor -- responsible for creating new balls
  {
    rad = r;                          // radius of the ball
    pos = p.get();                    // initial position of the ball (make a copy of the parameter "p")
    vel = v.get();                    // initial velocity of the ball (make a copy of the parameter "v")
    g = new PVector( 0, 0.9 );        // gravitational force on the ball (make all the balls the same) -- remember positive Y is down
    d = 0.97;                         // damping: how much bounce?    (make all the balls the same)
    col = color(random(255), random(255), random(255));
  }

  void collide(ArrayList allBalls)    // bounce off the other balls (don't worry about the math here...)
  {
    for(int i=0; i<allBalls.size(); i++)
    {
      Ball other = (Ball)allBalls.get(i);
      float distance = dist(pos.x, pos.y, other.pos.x, other.pos.y);
      float mindist = rad + other.rad;
      if(distance < mindist)
      {
        float angle = atan2(other.pos.y - pos.y, other.pos.x - pos.x);
        PVector target = new PVector( pos.x + cos(angle)*mindist, pos.y + sin(angle)*mindist);
        PVector acc = PVector.sub( target, other.pos );
        acc.mult(springyness);
        float selfMass = sq(rad);
        float otherMass = sq(other.rad);
        PVector selfForce = PVector.mult(acc, otherMass/(selfMass+otherMass));
        PVector otherForce = PVector.mult(acc, selfMass/(selfMass+otherMass));
        vel.sub(selfForce);
        other.vel.add(otherForce);
      }
    }
  }

  void update(ArrayList allBalls)  // updates the "physics" of the ball
  {
    // springy collisions with other balls
    collide(allBalls);

    // update the velocity with the force
    vel.add(g);

    // update the position with the velocity
    pos.add(vel);

    // deal with wall collisions
    if(pos.y > height-rad)    // floor collision
    {
      pos.y = height-rad;
      vel.y = -vel.y;
      vel.mult(d);
    }
    if(pos.x < rad)          // left wall collision
    {
      pos.x = rad;
      vel.x = -vel.x;
      vel.mult(d);
    }
    if(pos.x > width-rad)    // right wall collision
    {
      pos.x = width-rad;
      vel.x = -vel.x;
      vel.mult(d);
    }

  }

  void display()  // draws the ball
  {
    fill(col);
    ellipse( pos.x, pos.y, rad*2, rad*2);  // draw the ball
  }
}


</script>
		<script type="text/javascript">
// convenience function to fetch ID of sketch html element
function getProcessingSketchID () { return 'BallsWithClass'; }
</script>

</head>
<body>
<canvas id="processing-canvas"> </canvas>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>BallsWithClass : Built with Processing and Processing.js</title>
	<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
	<script type="application/javascript">
	/*
	* This code searches for all the <script type="application/processing" target="canvasid">
	* in your page and loads each script in the target canvas with the proper id.
	* It is useful to smooth the process of adding Processing code in your page and starting
	* the Processing.js engine.
	*/

	if (window.addEventListener) {
	window.addEventListener("load", function() {
	var scripts = document.getElementsByTagName("script");
	var canvasArray = Array.prototype.slice.call(document.getElementsByTagName("canvas"));
	var canvas;
	for (var i = 0, j = 0; i < scripts.length; i++) {
	if (scripts[i].type == "application/processing") {
	var src = scripts[i].getAttribute("target");
	if (src && src.indexOf("#") > -1) {
	canvas = document.getElementById(src.substr(src.indexOf("#") + 1));
	if (canvas) {
	new Processing(canvas, scripts[i].text);
	for (var k = 0; k< canvasArray.length; k++)
	{
	if (canvasArray[k] === canvas) {
	// remove the canvas from the array so we dont override it in the else
	canvasArray.splice(k,1);
	}
	}
	}
	} else {
	if (canvasArray.length >= j) {
	new Processing(canvasArray[j], scripts[i].text);
	}
	j++;
	}
	}
	}
	}, false);
	}
	</script>
	<script type="application/processing" target="processing-canvas">

	// list to hold all the balls
	ArrayList balls;

	// a variable for remembering where the mouse was initially pressed
	PVector mouseDown;

	// set up the world
	void setup()
	{
	size(400,400);
	smooth();
	balls = new ArrayList(); // make some space for the "balls" list
	}

	// update each ball's state and draw it every frame
	void draw()
	{

	// draw the scene
	background(150); // refresh the background
	strokeWeight(2);

	// if dragging, show slingshot line
	if(mousePressed)
	{ line(mouseDown.x, mouseDown.y, mouseX, mouseY); }

	// update and draw all the balls
	for(int i=0; i<balls.size(); i++)
	{
	Ball b = (Ball)balls.get(i);
	b.update(balls);
	b.display();
	}
	}

	void mousePressed()
	{
	// memorize where the mouse was clicked
	mouseDown = new PVector(mouseX, mouseY);
	}

	void mouseReleased()
	{
	// random radius for each ball
	int radius = round(map(random(1),0,1,10,30));
	// the location of the new ball
	PVector position = new PVector(mouseX,mouseY);
	// use the mouse pressed position that we memorized earlier to generate an initial velocity
	PVector velocity = new PVector(mouseDown.x-mouseX, mouseDown.y-mouseY);
	// scale the velocity down so it isn't too fast
	velocity.mult(0.1);
	// make a new ball
	balls.add( new Ball( radius, position, velocity ) );
	}
	class Ball
	{
	// properties (variables)
	float rad, d;
	PVector pos, vel, g;
	color col;
	float springyness = 0.25;

	// actions (functions)
	Ball(int r, PVector p, PVector v) // the constructor -- responsible for creating new balls
	{
	rad = r; // radius of the ball
	pos = p.get(); // initial position of the ball (make a copy of the parameter "p")
	vel = v.get(); // initial velocity of the ball (make a copy of the parameter "v")
	g = new PVector( 0, 0.9 ); // gravitational force on the ball (make all the balls the same) -- remember positive Y is down
	d = 0.97; // damping: how much bounce? (make all the balls the same)
	col = color(random(255), random(255), random(255));
	}

	void collide(ArrayList allBalls) // bounce off the other balls (don't worry about the math here...)
	{
	for(int i=0; i<allBalls.size(); i++)
	{
	Ball other = (Ball)allBalls.get(i);
	float distance = dist(pos.x, pos.y, other.pos.x, other.pos.y);
	float mindist = rad + other.rad;
	if(distance < mindist)
	{
	float angle = atan2(other.pos.y - pos.y, other.pos.x - pos.x);
	PVector target = new PVector( pos.x + cos(angle)mindist, pos.y + sin(angle)mindist);
	PVector acc = PVector.sub( target, other.pos );
	acc.mult(springyness);
	float selfMass = sq(rad);
	float otherMass = sq(other.rad);
	PVector selfForce = PVector.mult(acc, otherMass/(selfMass+otherMass));
	PVector otherForce = PVector.mult(acc, selfMass/(selfMass+otherMass));
	vel.sub(selfForce);
	other.vel.add(otherForce);
	}
	}
	}

	void update(ArrayList allBalls) // updates the "physics" of the ball
	{
	// springy collisions with other balls
	collide(allBalls);

	// update the velocity with the force
	vel.add(g);

	// update the position with the velocity
	pos.add(vel);

	// deal with wall collisions
	if(pos.y > height-rad) // floor collision
	{
	pos.y = height-rad;
	vel.y = -vel.y;
	vel.mult(d);
	}
	if(pos.x < rad) // left wall collision
	{
	pos.x = rad;
	vel.x = -vel.x;
	vel.mult(d);
	}
	if(pos.x > width-rad) // right wall collision
	{
	pos.x = width-rad;
	vel.x = -vel.x;
	vel.mult(d);
	}

	}

	void display() // draws the ball
	{
	fill(col);
	ellipse( pos.x, pos.y, rad2, rad2); // draw the ball
	}
	}


	</script>
	<script type="text/javascript">
	// convenience function to fetch ID of sketch html element
	function getProcessingSketchID () { return 'BallsWithClass'; }
	</script>

	</head>
	<body>
	<canvas id="processing-canvas"> </canvas>
	</body>
	</html>