%%@+ fountain

%% <load cfg=js-bounce>

%%@ init(s)
<script>
function hush() {
loadBouncingImages();
doMove();
}
</script>


<script>
//============================================================================================\\
//==                                      by Dan Pupius                                     ==\\
//==                               (c)2001 All rights reserved                              ==\\
//==                            www.pupius.net + www.endoflow.com                           ==\\
//============================================================================================\\

//@ primitive(s)
 //Makes a 3D coordinate
 //===================================================================
 function Point(x,y,z) {
  this.x = x;
  this.y = y;
  this.z = z;   //if omit z value, just make point 2D
  return this;
 }
 
 //Makes a 3D vector A(x,y,z) -> B(x,y,z)
 //===================================================================
 function Vector(a,b,c) {
  this.a = a;    //Point
  this.b = b;
  this.c = c;
  return this;
 }
 

 //The points are projected onto the plane defined by the viewport vector
 var viewport = new Vector(new Point(-100,-190,-100),new Point(100,10,-100), new Point(50,50));

 //The camera's position is used for calculating focal length and where
 //the points should be plotted on the viewport
 var camera = new Point(0,-90,-200);

//@ camera 
 //Set new camera position and redraw scene
 //===================================================================
 function setCamera(x,y,z) {
  camera.x = x;
  camera.y = y;
  camera.z = z;
  init(); 
 }

 function setViewport(x,y) {
  viewport.a.x = x;
  viewport.a.y = x;
  viewport.b.x = y;
  viewport.b.y = y;
  document.getElementById("back").style.width = y-x;
  document.getElementById("back").style.height = y-x;
 }
//@ plot
 //Plots a DIV at the correct position and resizes it
 //===================================================================
 function plotPoint(name, pos,age) {
  //Create objects for DIV
  obj = document.getElementById(name);
  css = document.getElementById(name).style;
  
  f = viewport.a.z - camera.z;  //Focal length

  //From ratios of a triangle get position of point relative to camera
  cy = (pos.y-camera.y) * f / (pos.z-viewport.a.z);  
  cx = (pos.x-camera.x) * f / (pos.z-viewport.a.z);

  //Position of point relative to viewport
  py = parseInt(camera.y + cy - viewport.a.y); 
  px = parseInt(camera.x + cx - viewport.a.x);

  if(pos.z > viewport.a.z && px > 0 && py > 0 && py < viewport.b.y - viewport.a.y && px < viewport.b.x - viewport.a.x) { 
   //Move object to correct position
   //alert("Moving " + name + " to (" + px + "," + py + ")");
   css.visibility = "";
   d = (150 - pos.z);
   css.backgroundColor = "rgb(" + (200-age*6) + "," + (200-age*6) + "," + (255) + ")";
   d /= 10000 / (viewport.b.x - viewport.a.x); //scale pixel to %age of viepwort
   if(d<1) d=1;
   css.width = 2 * d;
   css.height = 2 * d;
   css.left = 300 + 2 * ( px - d/2 + viewport.c.x );
   css.top = 2 * ( py - d/2 + viewport.c.y );
   css.zIndex = (100 - pos.z) + 1000;
  } else {
   css.visibility = "hidden";  //on this side of the viewport so hide it
  }
 }



 var points = new Array(50);
 for(i=1; i<=50;i++) {
  points[i] = { name: "divPoint" + i,
     x: 0, //Math.round((Math.random()*200)-100),
    y: 0, //Math.round((Math.random()*200)-100),
    z: 0 // Math.round(Math.random()*200)
       }
  points[i].alpha = 250; // Math.round(Math.random()*30) + 255;
  points[i].theta = Math.round(Math.random()*360);
  points[i].w = -10;
  points[i].decay = 0.5; //(Math.round(Math.random()*50) + 75) / 200;
  points[i].age = 0;
 }


 angle = 0;
 v = 5.5;
 count = 1;
 
//@ move
 function doMove() {
  if(count <=50 && !paused) count+= 0.5;
  a = degToRad(angle);
  rotX = [[1,0,0,0],[0,Math.cos(a),-Math.sin(a),0],[0,Math.sin(a),Math.cos(a),0],[0,0,0,1]];
  rotY = [[Math.cos(a),0,Math.sin(a),0],[0,1,0,0],[-Math.sin(a),0,Math.cos(a),0],[0,0,0,1]];
  rotZ = [[Math.cos(a),-Math.sin(a),0,0],[Math.sin(a),Math.cos(a),0,0],[0,0,1,0],[0,0,0,1]];   
  
  for(i=1;i<=count;i++) {
   if(!paused) {
    points[i].age++;
    points[i].z += v * Math.cos(degToRad(points[i].alpha)) * Math.sin(degToRad(points[i].theta));
    points[i].x += v * Math.cos(degToRad(points[i].alpha)) * Math.cos(degToRad(points[i].theta));
    points[i].y += -0.25 * points[i].w * v * Math.sin(degToRad(points[i].alpha));
    points[i].w += points[i].decay;
   }
   
   mat = [points[i].x,points[i].y,points[i].z,1];
   mat = matrixMultiply(mat,rotY);
   plotPoint(points[i].name, new Point(mat[0],mat[1],mat[2]),points[i].age);
   
   if(points[i].y > 0) {
    points[i] = new Point(0,0,0);
    points[i].name = "divPoint" + i;
    points[i].alpha = 250; //Math.round(Math.random()*30) + 255;
    points[i].theta = Math.round(Math.random()*360);
    points[i].w = -10;
    points[i].age = 0;
    points[i].decay = 0.5; //(Math.round(Math.random()*50) + 75) / 200;
   }
  }
  window.status = angle;
  setTimeout("doMove()",20);
 }

//@ turn
 var doTurn = false;
 function turn(amount) {
  angle += amount;
  if(angle>360) angle -= 360;
  if(angle<0) angle += 360;
  if(doTurn) setTimeout("turn(" + amount + ")",10);
 }

 var paused = false;
 function pause() { paused = !paused }

//@ aux(s)
 var pi = 3.14159265358979;  //pi to 15sf
 function degToRad(x) { return ( x/(360/(2*pi)) ); }
 function radToDeg(x) { return ( x*(360/(2*pi)) ); }

 function matrixMultiply(A,B) {
  var retVal = [0,0,0];
  for(var m=0;m<4;m++) {
   for(var n=0;n<4;n++)
    retVal[m] += A[n] * B[m][n]
  }
  return retVal;
 }
 
</script>

%% <div id="back" style="position: absolute; top: 50px; left: 50px; width: 200px; height: 200px; background-color: black;"></div>

%%@ div(s)

<div id="divPoint1" style="visibility: hidden; position: absolute; top: 119.278px; left: 153.278px; width: 3.44317px; height: 3.44317px; background-color: rgb(128, 128, 255); font-size: 1px;"></div>
<div id="divPoint2" style="visibility: hidden; position: absolute; top: 134.707px; left: 147.707px; width: 2.58622px; height: 2.58622px; background-color: rgb(134, 134, 255); font-size: 1px;"></div>
<div id="divPoint3" style="visibility: hidden; position: absolute; top: 145.664px; left: 144.664px; width: 2.67146px; height: 2.67146px; background-color: rgb(146, 146, 255); font-size: 1px;"></div>
<div id="divPoint4" style="visibility: hidden; position: absolute; top: 163.372px; left: 144.372px; width: 3.25553px; height: 3.25553px; background-color: rgb(158, 158, 255); font-size: 1px;"></div>
<div id="divPoint5" style="visibility: hidden; position: absolute; top: 180.489px; left: 138.489px; width: 3.02292px; height: 3.02292px; background-color: rgb(170, 170, 255); font-size: 1px;"></div>
<div id="divPoint6" style="visibility: hidden; position: absolute; top: 204.444px; left: 148.444px; width: 3.11177px; height: 3.11177px; background-color: rgb(182, 182, 255); font-size: 1px;"></div>
<div id="divPoint7" style="visibility: hidden; position: absolute; top: 223.519px; left: 148.519px; width: 2.96238px; height: 2.96238px; background-color: rgb(194, 194, 255); font-size: 1px;"></div>
<div id="divPoint8" style="visibility: hidden; position: absolute; top: 194.207px; left: 164.207px; width: 1.58587px; height: 1.58587px; background-color: rgb(0, 0, 255); font-size: 1px;"></div>
<div id="divPoint9" style="visibility: hidden; position: absolute; top: 192.685px; left: 206.685px; width: 2.62998px; height: 2.62998px; background-color: rgb(0, 0, 255); font-size: 1px;"></div>
<div id="divPoint10" style="visibility: hidden; position: absolute; top: 175.675px; left: 203.675px; width: 2.64946px; height: 2.64946px; background-color: rgb(0, 0, 255); font-size: 1px;"></div>
<div id="divPoint11" style="visibility: hidden; position: absolute; top: 156.96px; left: 178.96px; width: 2.07985px; height: 2.07985px; background-color: rgb(0, 0, 255); font-size: 1px;"></div>
<div id="divPoint12" style="visibility: hidden; position: absolute; top: 145.666px; left: 197.666px; width: 2.66816px; height: 2.66816px; background-color: rgb(8, 8, 255); font-size: 1px;"></div>
<div id="divPoint13" style="visibility: hidden; position: absolute; top: 133.646px; left: 195.646px; width: 2.70788px; height: 2.70788px; background-color: rgb(20, 20, 255); font-size: 1px;"></div>
<div id="divPoint14" style="visibility: hidden; position: absolute; top: 126.81px; left: 115.81px; width: 2.38081px; height: 2.38081px; background-color: rgb(32, 32, 255); font-size: 1px;"></div>
<div id="divPoint15" style="visibility: hidden; position: absolute; top: 101.278px; left: 204.278px; width: 3.44408px; height: 3.44408px; background-color: rgb(44, 44, 255); font-size: 1px;"></div>
<div id="divPoint16" style="visibility: hidden; position: absolute; top: 72.0568px; left: 132.057px; width: 3.88634px; height: 3.88634px; background-color: rgb(56, 56, 255); font-size: 1px;"></div>
<div id="divPoint17" style="visibility: hidden; position: absolute; top: 113.812px; left: 168.812px; width: 2.37534px; height: 2.37534px; background-color: rgb(68, 68, 255); font-size: 1px;"></div>
<div id="divPoint18" style="visibility: hidden; position: absolute; top: 110.705px; left: 121.705px; width: 2.59019px; height: 2.59019px; background-color: rgb(80, 80, 255); font-size: 1px;"></div>
<div id="divPoint19" style="visibility: hidden; position: absolute; top: 98.3898px; left: 112.39px; width: 3.22047px; height: 3.22047px; background-color: rgb(92, 92, 255); font-size: 1px;"></div>
<div id="divPoint20" style="visibility: hidden; position: absolute; top: 109.511px; left: 118.511px; width: 2.97899px; height: 2.97899px; background-color: rgb(104, 104, 255); font-size: 1px;"></div>
<div id="divPoint21" style="visibility: hidden; position: absolute; top: 118.594px; left: 125.594px; width: 2.81124px; height: 2.81124px; background-color: rgb(116, 116, 255); font-size: 1px;"></div>
<div id="divPoint22" style="visibility: hidden; position: absolute; top: 123.398px; left: 125.398px; width: 3.20496px; height: 3.20496px; background-color: rgb(128, 128, 255); font-size: 1px;"></div>
<div id="divPoint23" style="visibility: hidden; position: absolute; top: 138.577px; left: 163.577px; width: 2.84698px; height: 2.84698px; background-color: rgb(140, 140, 255); font-size: 1px; z-index: 1100;"></div>
<div id="divPoint24" style="visibility: hidden; position: absolute; top: 152.649px; left: 145.649px; width: 2.70273px; height: 2.70273px; background-color: rgb(152, 152, 255); font-size: 1px;"></div>
<div id="divPoint25" style="visibility: hidden; position: absolute; top: 167.61px; left: 145.61px; width: 2.78097px; height: 2.78097px; background-color: rgb(164, 164, 255); font-size: 1px;"></div>
<div id="divPoint26" style="visibility: hidden; position: absolute; top: 190.499px; left: 155.499px; width: 3.00263px; height: 3.00263px; background-color: rgb(176, 176, 255); font-size: 1px;"></div>
<div id="divPoint27" style="visibility: hidden; position: absolute; top: 214.478px; left: 151.478px; width: 3.04316px; height: 3.04316px; background-color: rgb(188, 188, 255); font-size: 1px;"></div>
<div id="divPoint28" style="visibility: hidden; position: absolute; top: 199.271px; left: 147.271px; width: 1.45843px; height: 1.45843px; background-color: rgb(0, 0, 255); font-size: 1px;"></div>
<div id="divPoint29" style="visibility: hidden; position: absolute; top: 231.273px; left: 57.2733px; width: 3.45341px; height: 3.45341px; background-color: rgb(0, 0, 255); font-size: 1px;"></div>
<div id="divPoint30" style="visibility: hidden; position: absolute; top: 195.391px; left: 225.391px; width: 3.21776px; height: 3.21776px; background-color: rgb(0, 0, 255); font-size: 1px;"></div>
<div id="divPoint31" style="visibility: hidden; position: absolute; top: 170.489px; left: 214.489px; width: 3.02298px; height: 3.02298px; background-color: rgb(0, 0, 255); font-size: 1px; z-index: 1100;"></div>
<div id="divPoint32" style="visibility: hidden; position: absolute; top: 159.88px; left: 152.88px; width: 4.24078px; height: 4.24078px; background-color: rgb(2, 2, 255); font-size: 1px;"></div>
<div id="divPoint33" style="visibility: hidden; position: absolute; top: 141.96px; left: 172.96px; width: 2.08095px; height: 2.08095px; background-color: rgb(14, 14, 255); font-size: 1px;"></div>
<div id="divPoint34" style="visibility: hidden; position: absolute; top: 123.434px; left: 206.434px; width: 3.13296px; height: 3.13296px; background-color: rgb(26, 26, 255); font-size: 1px;"></div>
<div id="divPoint35" style="visibility: hidden; position: absolute; top: 85.0143px; left: 119.014px; width: 3.97141px; height: 3.97141px; background-color: rgb(38, 38, 255); font-size: 1px;"></div>
<div id="divPoint36" style="visibility: hidden; position: absolute; top: 101.339px; left: 95.3392px; width: 3.32169px; height: 3.32169px; background-color: rgb(50, 50, 255); font-size: 1px;"></div>
<div id="divPoint37" style="visibility: hidden; position: absolute; top: 71.0697px; left: 155.07px; width: 3.86057px; height: 3.86057px; background-color: rgb(62, 62, 255); font-size: 1px;"></div>
<div id="divPoint38" style="visibility: hidden; position: absolute; top: 76.142px; left: 174.142px; width: 3.71604px; height: 3.71604px; background-color: rgb(74, 74, 255); font-size: 1px; z-index: 1100;"></div>
<div id="divPoint39" style="visibility: hidden; position: absolute; top: 114.848px; left: 153.848px; width: 2.3035px; height: 2.3035px; background-color: rgb(86, 86, 255); font-size: 1px;"></div>
<div id="divPoint40" style="visibility: hidden; position: absolute; top: 87.1942px; left: 161.194px; width: 3.61163px; height: 3.61163px; background-color: rgb(98, 98, 255); font-size: 1px;"></div>
<div id="divPoint41" style="visibility: hidden; position: absolute; top: 102.29px; left: 171.29px; width: 3.41938px; height: 3.41938px; background-color: rgb(110, 110, 255); font-size: 1px;"></div>
<div id="divPoint42" style="visibility: hidden; position: absolute; top: 120.496px; left: 123.496px; width: 3.00854px; height: 3.00854px; background-color: rgb(122, 122, 255); font-size: 1px;"></div>
<div id="divPoint43" style="visibility: hidden; position: absolute; top: 127.297px; left: 143.297px; width: 3.40624px; height: 3.40624px; background-color: rgb(134, 134, 255); font-size: 1px;"></div>
<div id="divPoint44" style="visibility: hidden; position: absolute; top: 144.356px; left: 137.356px; width: 3.28715px; height: 3.28715px; background-color: rgb(146, 146, 255); font-size: 1px;"></div>
<div id="divPoint45" style="visibility: hidden; position: absolute; top: 160.579px; left: 157.579px; width: 2.84151px; height: 2.84151px; background-color: rgb(158, 158, 255); font-size: 1px;"></div>
<div id="divPoint46" style="visibility: hidden; position: absolute; top: 180.49px; left: 157.49px; width: 3.01966px; height: 3.01966px; background-color: rgb(170, 170, 255); font-size: 1px;"></div>
<div id="divPoint47" style="visibility: hidden; position: absolute; top: 202.471px; left: 143.471px; width: 3.05813px; height: 3.05813px; background-color: rgb(182, 182, 255); font-size: 1px;"></div>
<div id="divPoint48" style="visibility: hidden; position: absolute; top: 226.484px; left: 146.484px; width: 3.03155px; height: 3.03155px; background-color: rgb(194, 194, 255); font-size: 1px;"></div>
<div id="divPoint49" style="visibility: hidden; position: absolute; top: 234.864px; left: 210.864px; width: 4.27272px; height: 4.27272px; background-color: rgb(0, 0, 255); font-size: 1px; visibility: hidden;"></div>
<div id="divPoint50" style="visibility: hidden; position: absolute; top: 189.791px; left: 97.7907px; width: 2.41851px; height: 2.41851px; background-color: rgb(0, 0, 255); font-size: 1px;"></div>