topical media & game development
#readme.cfg / cfg
fountain
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(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>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
