Sleeping_Troll
05-31-2009, 05:46 AM
This is a script that fills a "screen" with floating Orbs, if you mouse over the orbs they will frezze in place. Questions, comments you know what to do.
HTML:
<html>
<head>
<title>Floating Orbs</title>
<script type="text/javascript" src="Resources/prototype.js"></script>
<script type="text/javascript" src="Scripts/orbs.js"></script>
<link rel="stylesheet" href="CSS/style.css" type="text/css">
</head>
<body onLoad="init()" onResize="resize()">
<div id="content">
<div id="container">
</div>
</div>
</body>
</html>
CSS:
#content {
position: relative;
background-color: #6600FF;
left: 0px;
top: 0px;
border: 0;
margin: 0;
width: 100%;
}
#content #controls {
position: absolute;
border: 0;
margin: 0;
}
#content #container{
position: relative;
background-color:#000000;
overflow: hidden;
border: 0;
margin: 0;
}
#content #container img{
position: absolute;
border: 0;
margin: 0;
}
Javascript:
var numOrbs=36; //number of Orbs
var InitialVelocity;
var Zeye; //perspective:distance of eye from box centre
var Zscreen; //perspective:distance of screen from box centre
var OrbBaseRadius
var OrbProximityFactor;
var Xmin,Ymin,Xmax,Ymax,Zmin,Zmax;
var Perspective;
var Dimensions=[];
var Orb=[];
window.onerror = handleError;
function handleError() {
resize();
}
function init(){
for(i=0;i<numOrbs;i++){
Orb[i]=[];
Orb[i].Img=new Element("img",{id:i, src:"./images/Orb.png", style:"display=none"});
$("container").insert(Orb[i].Img);
Orb[i].Img.static=0;
resize();
var theta;
var phi;
Orb[i].PositionX=Xmax/2;
Orb[i].PositionY=Ymax/2;
Orb[i].PositionZ=Zmax*.0001;
theta=Math.PI*2*Math.random();
phi=Math.asin(Math.random());
if(Math.random()>0.5)phi=-phi;
Orb[i].VelocityX=InitialVelocity*Math.sin(theta)*Math.cos(phi);
theta=Math.PI*2*Math.random();
phi=Math.asin(Math.random());
if(Math.random()>0.5)phi=-phi;
Orb[i].VelocityY=InitialVelocity*Math.cos(theta)*Math.cos(phi);
theta=Math.PI*2*Math.random();
phi=Math.asin(Math.random());
if(Math.random()>0.5)phi=-phi;
Orb[i].VelocityZ=InitialVelocity*Math.cos(phi);
Orb[i].renew=0;
Orb[i].Img.observe("mouseover", function(){
this.static=1;
});
Orb[i].Img.observe("mouseout", function(){
this.static=0;
$("snapshot").style.display="none";
});
}
setInterval("collisions()",100);
}
function collisions(){
var i,q,Proximity,VelocityXa,VelocityYa,VelocityZa,VelocityXb,VelocityYb,VelocityZb,Xdisplacement,Ydispl acement,Zdisplacement,Xvector,Yvector,Zvector,m,ResultantTotal,Xresultant,Yresultant,Zresultant;
for(i=0;i<numOrbs;i++){
Perspective=(Zeye-Zscreen)/(Zeye+Orb[i].PositionZ);
Orb[i].size=OrbBaseRadius*Perspective;
OrbProximityFactor=4*Orb[i].size*Orb[i].size;
for(q=(i+1); q<numOrbs; q++){ //Note:The original iterated both a and b from 1 to numOrbs, skipping the a=b case
Proximity = (Orb[i].PositionX-Orb[q].PositionX)*(Orb[i].PositionX-Orb[q].PositionX)+(Orb[i].PositionY-Orb[q].PositionY)*(Orb[i].PositionY-Orb[q].PositionY)+(Orb[i].PositionZ-Orb[q].PositionZ)*(Orb[i].PositionZ-Orb[q].PositionZ);
if (Proximity <= OrbProximityFactor){
Proximity = Math.sqrt(Proximity);
VelocityXi= Orb[i].VelocityX;VelocityYi=Orb[i].VelocityY;VelocityZi=Orb[i].VelocityZ;VelocityXq=Orb[q].VelocityX;VelocityYq=Orb[q].VelocityY;VelocityZq=Orb[q].VelocityZ;
Xdisplacement=Orb[q].PositionX-Orb[i].PositionX;
Ydisplacement=Orb[q].PositionY-Orb[i].PositionY;
Zdisplacement=Orb[q].PositionZ-Orb[i].PositionZ;
if (Math.abs(Proximity)>0.0001){
Xvector=Xdisplacement/Proximity;Yvector=Ydisplacement/Proximity;Zvector=Zdisplacement/Proximity;
m = Math.sqrt(VelocityXi*VelocityXi+VelocityYi*VelocityYi+VelocityZi*VelocityZi);
if (Math.abs(m)>0.0001){
TotalResultant = (Xvector*VelocityXi+Yvector*VelocityYi+Zvector*VelocityZi);
Xresultant=TotalResultant*Xvector;
Yresultant=TotalResultant*Yvector;
Zresultant=TotalResultant*Zvector;
VelocityXi -= Xresultant;
VelocityYi -= Yresultant;
VelocityZi -= Zresultant;
VelocityXq += Xresultant;
VelocityYq += Yresultant;
VelocityZq += Zresultant;
}
m = Math.sqrt(Orb[q].VelocityX*Orb[q].VelocityX+Orb[q].VelocityY*Orb[q].VelocityY+Orb[q].VelocityZ*Orb[q].VelocityZ);
if (Math.abs(m) >0.0001){
TotalResultant = (Xvector*Orb[q].VelocityX+Yvector*Orb[q].VelocityY+Zvector*Orb[q].VelocityZ);
Xresultant=TotalResultant*Xvector;
Yresultant=TotalResultant*Yvector;
Zresultant=TotalResultant*Zvector;
VelocityXi += Xresultant;
VelocityYi += Yresultant;
VelocityZi += Zresultant;
VelocityXq -= Xresultant;
VelocityYq -= Yresultant;
VelocityZq -= Zresultant;
}
Orb[i].VelocityX=VelocityXi;Orb[i].VelocityY=VelocityYi;Orb[i].VelocityZ=VelocityZi;Orb[q].VelocityX=VelocityXq;Orb[q].VelocityY=VelocityYq;Orb[q].VelocityZ=VelocityZq;
}
}
}
}
moveOrbs();
}
function moveOrbs(){
for(i=0;i<numOrbs;i++){
if(Orb[i].VelocityZ==0)VelocityZ=1;
if(Orb[i].Img.static==0){
Orb[i].PositionX += Orb[i].VelocityX;
Orb[i].PositionY += Orb[i].VelocityY;
Orb[i].PositionZ += Orb[i].VelocityZ;
Perspective=(Zeye-Zscreen)/(Zeye-Orb[i].PositionZ);
Orb[i].size=Math.round(OrbBaseRadius*Perspective);
Orb[i].Img.style.zIndex=Orb[i].PositionZ;
Orb[i].Img.style.display='block';
if (Orb[i].PositionX<Xmin-(Orb[i].size)){
Orb[i].PositionX=Xmax+Orb[i].size;//wrap
}
if (Orb[i].PositionX>Xmax+(Orb[i].size)){
Orb[i].PositionX=Xmin-Orb[i].size;//wrap
}
if (Orb[i].PositionY<Ymin-(Orb[i].size)){
Orb[i].PositionY=Ymax+Orb[i].size;//wrap
}
if (Orb[i].PositionY>Ymax+(Orb[i].size)){
Orb[i].PositionY=Ymin-Orb[i].size;//wrap
}
if (Orb[i].PositionZ<Zmin&&Orb[i].VelocityZ<0){
Orb[i].VelocityZ=-Orb[i].VelocityZ;//rebound
}
if (Orb[i].PositionZ>Zmax&&Orb[i].VelocityZ>0){
Orb[i].VelocityZ=-Orb[i].VelocityZ;//rebound
}
try{
Orb[i].Img.style.left=Orb[i].PositionX-Orb[i].size+'px';
Orb[i].Img.style.top=Orb[i].PositionY-Orb[i].size+'px';
Orb[i].Img.style.width=Orb[i].size+'px';
Orb[i].Img.style.height=Orb[i].size+'px';
}
catch(err){
moveOrbs();
}
}
}
}
function resize(){
if (window.innerWidth){ //if browser supports window.innerWidth
Dimensions.width=window.innerWidth;
Dimensions.height=window.innerHeight;
}
else if (document.all){ //else if browser supports document.all (IE 4+)
Dimensions.width=document.body.clientWidth;
Dimensions.height=document.body.clientHeight;
}
Zmax=Dimensions.width*2;
Xmax=Dimensions.width*.6;
if(Ymax<Xmax){
Ymax=Xmax*(Dimensions.height/Dimensions.width);
}
else{
Ymax=Xmax*.6;
}
$("container").style.top=Dimensions.height*.05+"px";
$("container").style.left=Dimensions.width*.1+"px";
$("container").style.width=Xmax+"px";
$("container").style.height=Ymax+"px";
OrbBaseRadius=Xmax/50;
Xmin=0;
Ymin=0;
Zmin=0;
Zscreen=Zmax*.25;
Zeye=Zmax*1.05;
InitialVelocity=Dimensions.width/Xmax*4;
}
Also you will need an Orb Image 100x100 with transparent background in .png format placed in the appropriate directory.
To see an application of this script (much modified) http://huduzu.trollnest.com
HTML:
<html>
<head>
<title>Floating Orbs</title>
<script type="text/javascript" src="Resources/prototype.js"></script>
<script type="text/javascript" src="Scripts/orbs.js"></script>
<link rel="stylesheet" href="CSS/style.css" type="text/css">
</head>
<body onLoad="init()" onResize="resize()">
<div id="content">
<div id="container">
</div>
</div>
</body>
</html>
CSS:
#content {
position: relative;
background-color: #6600FF;
left: 0px;
top: 0px;
border: 0;
margin: 0;
width: 100%;
}
#content #controls {
position: absolute;
border: 0;
margin: 0;
}
#content #container{
position: relative;
background-color:#000000;
overflow: hidden;
border: 0;
margin: 0;
}
#content #container img{
position: absolute;
border: 0;
margin: 0;
}
Javascript:
var numOrbs=36; //number of Orbs
var InitialVelocity;
var Zeye; //perspective:distance of eye from box centre
var Zscreen; //perspective:distance of screen from box centre
var OrbBaseRadius
var OrbProximityFactor;
var Xmin,Ymin,Xmax,Ymax,Zmin,Zmax;
var Perspective;
var Dimensions=[];
var Orb=[];
window.onerror = handleError;
function handleError() {
resize();
}
function init(){
for(i=0;i<numOrbs;i++){
Orb[i]=[];
Orb[i].Img=new Element("img",{id:i, src:"./images/Orb.png", style:"display=none"});
$("container").insert(Orb[i].Img);
Orb[i].Img.static=0;
resize();
var theta;
var phi;
Orb[i].PositionX=Xmax/2;
Orb[i].PositionY=Ymax/2;
Orb[i].PositionZ=Zmax*.0001;
theta=Math.PI*2*Math.random();
phi=Math.asin(Math.random());
if(Math.random()>0.5)phi=-phi;
Orb[i].VelocityX=InitialVelocity*Math.sin(theta)*Math.cos(phi);
theta=Math.PI*2*Math.random();
phi=Math.asin(Math.random());
if(Math.random()>0.5)phi=-phi;
Orb[i].VelocityY=InitialVelocity*Math.cos(theta)*Math.cos(phi);
theta=Math.PI*2*Math.random();
phi=Math.asin(Math.random());
if(Math.random()>0.5)phi=-phi;
Orb[i].VelocityZ=InitialVelocity*Math.cos(phi);
Orb[i].renew=0;
Orb[i].Img.observe("mouseover", function(){
this.static=1;
});
Orb[i].Img.observe("mouseout", function(){
this.static=0;
$("snapshot").style.display="none";
});
}
setInterval("collisions()",100);
}
function collisions(){
var i,q,Proximity,VelocityXa,VelocityYa,VelocityZa,VelocityXb,VelocityYb,VelocityZb,Xdisplacement,Ydispl acement,Zdisplacement,Xvector,Yvector,Zvector,m,ResultantTotal,Xresultant,Yresultant,Zresultant;
for(i=0;i<numOrbs;i++){
Perspective=(Zeye-Zscreen)/(Zeye+Orb[i].PositionZ);
Orb[i].size=OrbBaseRadius*Perspective;
OrbProximityFactor=4*Orb[i].size*Orb[i].size;
for(q=(i+1); q<numOrbs; q++){ //Note:The original iterated both a and b from 1 to numOrbs, skipping the a=b case
Proximity = (Orb[i].PositionX-Orb[q].PositionX)*(Orb[i].PositionX-Orb[q].PositionX)+(Orb[i].PositionY-Orb[q].PositionY)*(Orb[i].PositionY-Orb[q].PositionY)+(Orb[i].PositionZ-Orb[q].PositionZ)*(Orb[i].PositionZ-Orb[q].PositionZ);
if (Proximity <= OrbProximityFactor){
Proximity = Math.sqrt(Proximity);
VelocityXi= Orb[i].VelocityX;VelocityYi=Orb[i].VelocityY;VelocityZi=Orb[i].VelocityZ;VelocityXq=Orb[q].VelocityX;VelocityYq=Orb[q].VelocityY;VelocityZq=Orb[q].VelocityZ;
Xdisplacement=Orb[q].PositionX-Orb[i].PositionX;
Ydisplacement=Orb[q].PositionY-Orb[i].PositionY;
Zdisplacement=Orb[q].PositionZ-Orb[i].PositionZ;
if (Math.abs(Proximity)>0.0001){
Xvector=Xdisplacement/Proximity;Yvector=Ydisplacement/Proximity;Zvector=Zdisplacement/Proximity;
m = Math.sqrt(VelocityXi*VelocityXi+VelocityYi*VelocityYi+VelocityZi*VelocityZi);
if (Math.abs(m)>0.0001){
TotalResultant = (Xvector*VelocityXi+Yvector*VelocityYi+Zvector*VelocityZi);
Xresultant=TotalResultant*Xvector;
Yresultant=TotalResultant*Yvector;
Zresultant=TotalResultant*Zvector;
VelocityXi -= Xresultant;
VelocityYi -= Yresultant;
VelocityZi -= Zresultant;
VelocityXq += Xresultant;
VelocityYq += Yresultant;
VelocityZq += Zresultant;
}
m = Math.sqrt(Orb[q].VelocityX*Orb[q].VelocityX+Orb[q].VelocityY*Orb[q].VelocityY+Orb[q].VelocityZ*Orb[q].VelocityZ);
if (Math.abs(m) >0.0001){
TotalResultant = (Xvector*Orb[q].VelocityX+Yvector*Orb[q].VelocityY+Zvector*Orb[q].VelocityZ);
Xresultant=TotalResultant*Xvector;
Yresultant=TotalResultant*Yvector;
Zresultant=TotalResultant*Zvector;
VelocityXi += Xresultant;
VelocityYi += Yresultant;
VelocityZi += Zresultant;
VelocityXq -= Xresultant;
VelocityYq -= Yresultant;
VelocityZq -= Zresultant;
}
Orb[i].VelocityX=VelocityXi;Orb[i].VelocityY=VelocityYi;Orb[i].VelocityZ=VelocityZi;Orb[q].VelocityX=VelocityXq;Orb[q].VelocityY=VelocityYq;Orb[q].VelocityZ=VelocityZq;
}
}
}
}
moveOrbs();
}
function moveOrbs(){
for(i=0;i<numOrbs;i++){
if(Orb[i].VelocityZ==0)VelocityZ=1;
if(Orb[i].Img.static==0){
Orb[i].PositionX += Orb[i].VelocityX;
Orb[i].PositionY += Orb[i].VelocityY;
Orb[i].PositionZ += Orb[i].VelocityZ;
Perspective=(Zeye-Zscreen)/(Zeye-Orb[i].PositionZ);
Orb[i].size=Math.round(OrbBaseRadius*Perspective);
Orb[i].Img.style.zIndex=Orb[i].PositionZ;
Orb[i].Img.style.display='block';
if (Orb[i].PositionX<Xmin-(Orb[i].size)){
Orb[i].PositionX=Xmax+Orb[i].size;//wrap
}
if (Orb[i].PositionX>Xmax+(Orb[i].size)){
Orb[i].PositionX=Xmin-Orb[i].size;//wrap
}
if (Orb[i].PositionY<Ymin-(Orb[i].size)){
Orb[i].PositionY=Ymax+Orb[i].size;//wrap
}
if (Orb[i].PositionY>Ymax+(Orb[i].size)){
Orb[i].PositionY=Ymin-Orb[i].size;//wrap
}
if (Orb[i].PositionZ<Zmin&&Orb[i].VelocityZ<0){
Orb[i].VelocityZ=-Orb[i].VelocityZ;//rebound
}
if (Orb[i].PositionZ>Zmax&&Orb[i].VelocityZ>0){
Orb[i].VelocityZ=-Orb[i].VelocityZ;//rebound
}
try{
Orb[i].Img.style.left=Orb[i].PositionX-Orb[i].size+'px';
Orb[i].Img.style.top=Orb[i].PositionY-Orb[i].size+'px';
Orb[i].Img.style.width=Orb[i].size+'px';
Orb[i].Img.style.height=Orb[i].size+'px';
}
catch(err){
moveOrbs();
}
}
}
}
function resize(){
if (window.innerWidth){ //if browser supports window.innerWidth
Dimensions.width=window.innerWidth;
Dimensions.height=window.innerHeight;
}
else if (document.all){ //else if browser supports document.all (IE 4+)
Dimensions.width=document.body.clientWidth;
Dimensions.height=document.body.clientHeight;
}
Zmax=Dimensions.width*2;
Xmax=Dimensions.width*.6;
if(Ymax<Xmax){
Ymax=Xmax*(Dimensions.height/Dimensions.width);
}
else{
Ymax=Xmax*.6;
}
$("container").style.top=Dimensions.height*.05+"px";
$("container").style.left=Dimensions.width*.1+"px";
$("container").style.width=Xmax+"px";
$("container").style.height=Ymax+"px";
OrbBaseRadius=Xmax/50;
Xmin=0;
Ymin=0;
Zmin=0;
Zscreen=Zmax*.25;
Zeye=Zmax*1.05;
InitialVelocity=Dimensions.width/Xmax*4;
}
Also you will need an Orb Image 100x100 with transparent background in .png format placed in the appropriate directory.
To see an application of this script (much modified) http://huduzu.trollnest.com