« »

This JavaScript makes colorfull dots follow mouse. Very cool.

Label: Pinwheel

Demo
Enlarge
Reload
New window

Code
JavaScript
Print

Copy All x2

<SCRIPT language=JavaScript>
var xLayerNo=0;

function xLayer(xHtml, x, y, w)
{
	if(x==null)x=0;
	if(y==null)y=0;
	if(w==null)w=100;
	if(document.layers)
	{
		this.layer=new Layer(w);
		this.layer.document.open();
		this.layer.document.write(xHtml);
		this.layer.document.close();
		this.layer.moveTo(x,y);
		this.images=this.layer.document.images;

/*** These used to be prototypes (like  IE ) but when NS (communicator) 4.7 ***/
/*** first loads up, for some reason the prototypes do not get assigned ***/
this.moveTo 	= function(x,y) 	{ this.layer.moveTo(x,y); }
this.moveBy 	= function(x,y) 	{ this.layer.moveBy(x,y); }
this.show		= function() 	{ this.layer.visibility = "show"; }
this.hide 		= function() 	{ this.layer.visibility = "hide"; }
this.setzIndex	= function(z)	{ this.layer.zIndex = z; }
this.setBgColor 	= function(color) { this.layer.bgColor = color; }
this.setBgImage 	= function(image) { this.layer.background.src = image; }
this.getX 		= function() 	{ return this.layer.left; }
this.getY 		= function() 	{ return this.layer.right; }
this.getWidth 	= function() 	{ return this.layer.width; }
this.getHeight 	= function() 	{ return this.layer.height; }
this.getStackingOrder = function()	{ return this.layer.zIndex; }
this.isVisible 	= function() 	{ return this.layer.visibility == "show"; }
this.setContent   = function(xHtml)
{
	this.layer.document.open();
	this.layer.document.write(xHtml);
	this.layer.document.close();
}

this.clip = function(x1,y1, x2,y2)
{
	this.layer.clip.top	=y1;
	this.layer.clip.left	=x1;
	this.layer.clip.bottom	=y2;
	this.layer.clip.right	=x2;
}
	}
	else
	if(document.all)
	{
		var xName="xLayer" + xLayerNo++;
		txt =   "<DIV ID='" + xName
			+ "' STYLE=\"position:absolute;"
			+ "left:"  + x + ";"
			+ "top:"   + y + ";"
			+ "width:" + w + ";"
			+ "visibility:hidden\">"
			+ xHtml 
			+ "</DIV>";
		document.body.insertAdjacentHTML("BeforeEnd",txt);
		this.content = document.all[xName];
		this.layer   = document.all[xName].style;
		this.images  = document.images;
	}
	return(this);
}

if(document.layers)
{
/**** START prototypes for NS ***/
/*** END NS ***/
}
else
if(document.all)
{
/*** START prototypes for IE ***/
xLayer.prototype.moveTo = function(x,y)
{
	this.layer.pixelLeft = x;
	this.layer.pixelTop = y;
}

xLayer.prototype.moveBy = function(x,y)
{
	this.layer.pixelLeft += x;
	this.layer.pixelTop += y;
}

xLayer.prototype.show		= function() 	{ this.layer.visibility = "visible"; }
xLayer.prototype.hide		= function() 	{ this.layer.visibility = "hidden"; }
xLayer.prototype.setzIndex	= function(z)	{ this.layer.zIndex = z; }
xLayer.prototype.setBgColor	= function(color) { this.layer.backgroundColor = color; }
xLayer.prototype.setBgImage	= function(image) { this.layer.backgroundImage = image; }
xLayer.prototype.setContent   = function(xHtml)	{ this.content.innerHTML=xHtml; }
xLayer.prototype.getX		= function() 	{ return this.layer.pixelLeft; }
xLayer.prototype.getY		= function() 	{ return this.layer.pixelRight; }
xLayer.prototype.getWidth	= function() 	{ return this.layer.pixelWidth; }
xLayer.prototype.getHeight	= function() 	{ return this.layer.pixelHeight; }
xLayer.prototype.getStackingOrder = function()	{ return this.layer.zIndex; }
xLayer.prototype.isVisible	= function()	{ return this.layer.visibility == "visible"; }
xLayer.prototype.clip		= function(x1,y1, x2,y2)
{
	this.layer.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")";
	this.layer.pixelWidth=x2;
	this.layer.pixelHeight=y2;
	this.layer.overflow="hidden";
}

/*** END IE ***/
}
else
{
xLayer.prototype.moveTo 	= function(x,y) 	{  }

xLayer.prototype.moveBy 	= function(x,y) 	{  }

xLayer.prototype.show 		= function() 	{  }

xLayer.prototype.hide 		= function() 	{  }

xLayer.prototype.setStackingOrder = function(z) {  }

xLayer.prototype.setBgColor 	= function(color) {  }

xLayer.prototype.setBgImage 	= function(image) {  }

xLayer.prototype.getX 		= function() 	{ return 0; }

xLayer.prototype.getY 		= function() 	{ return 0; }

xLayer.prototype.getWidth 	= function() 	{ return 0; }

xLayer.prototype.getHeight 	= function() 	{ return 0; }

xLayer.prototype.getStackingOrder = function()	{ return 0; }

xLayer.prototype.isVisible 	= function() 	{ return false; }

xlayer.prototype.setContent   = function(xHtml) { }



}
</SCRIPT>
<SCRIPT language=JavaScript>
var theTimer=null;

var mouseX = 100;

var mouseY = 100;



var oneDeg=(2*Math.PI)/360;



/*** Pinwheel type 1 ***/

var Radius = 5;

var NumStars=32;

var NumSteps=16;

var StepAngle=(25)*oneDeg;



/*** Pinwheel type 2 ***/

//var Radius = 10;

//var NumStars=16;

//var NumSteps=8;

//var StepAngle=(22.5)*oneDeg;



/*** Pinwheel type 3 ***/

//var Radius = 5;

//var NumStars=16;

//var NumSteps=16;

//var StepAngle=(22.5)*oneDeg;



/*** Pinwheel type 4 ***/

//var Radius = 10;

//var NumStars=32;

//var NumSteps=16;

//var StepAngle=(11.25)*oneDeg;



var StarObject=new Array();



var hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");

function dec2hex(dec)

{

	return(hexDigit[dec>>4]+hexDigit[dec&15]);

}

function hex2dec(hex)

{

	return(parseInt(hex,16))

}



function CreateStar()

{



	this.layer 		= new xLayer(" ", 100, 100, 10);

	this.currAngle 	= 0;

	this.step		= 0;

	this.x		= 100;

	this.y		= 100;

	return (this);

}



function restart()

{

	for(i=0;i<NumStars;i++)

	{

		StarObject[i].currAngle = (StepAngle*i);

		StarObject[i].step = (i%NumSteps);

		StarObject[i].x = mouseX;

		StarObject[i].y = mouseY;

		StarObject[i].layer.moveTo(mouseX, mouseY);

		StarObject[i].layer.show();

	}

}

/*** Choose a random pinwheel configuration ***/

function next_random()

{

	var num=Math.floor(Math.random()*4);

	

	for(i=0;i<NumStars;i++)

		StarObject[i].layer.hide();



	if(num==0){

		Radius = 5;

		NumStars=32;

		NumSteps=16;

		StepAngle=(25)*oneDeg;

	}

	else

	if(num==1){

		Radius = 10;

		NumStars=16;

		NumSteps=8;

		StepAngle=(22.5)*oneDeg;

	}

	else

	if(num==2){

		Radius = 5;

		NumStars=16;

		NumSteps=16;

		StepAngle=(22.5)*oneDeg;

	}

	else{

		Radius = 10;

		NumStars=32;

		NumSteps=16;

		StepAngle=(11.25)*oneDeg;

	}





	for(i=0 ; i<NumStars; i++)

	{

		var s=StarObject[i];

		s.currAngle = (StepAngle*i);

		s.step = (i%NumSteps);

		s.x=mouseX;

		s.y=mouseY;

	}



	restart();



	theTimer=setTimeout("next_random()", 10000);

}

function start()

{

if (document.all)

	document.onmousemove = IE_MouseMove;



if (document.layers) {

	window.captureEvents(Event.MOUSEMOVE);

	window.onmousemove = NS_MouseMove;

}



	for(i=0 ; i<NumStars; i++)

	{

		StarObject[i]=new CreateStar();

		StarObject[i].currAngle = (StepAngle*i);

		StarObject[i].step = (i%NumSteps);

		StarObject[i].layer.clip(0,0,2,2);

		StarObject[i].layer.setBgColor("red");

	}



	for(i=0 ; i<NumStars ; i++)

		StarObject[i].layer.show();



	/*** Remove this if you only 1 type of pinwheel ***/

	theTimer=setTimeout("next_random()", 10000);



	Rotate();

}



function changeColour(s)

{

	var colour="";



	r2= Math.floor(Math.random()*2)*255;

	g2= Math.floor(Math.random()*2)*255;

	b2= Math.floor(Math.random()*2)*255;



	if(r2==0 && g2==0 && b2==0)

		r2=255;



	colour = "#" + dec2hex(r2) + dec2hex(g2) + dec2hex(b2);

	s.layer.setBgColor(colour);



	s.x=mouseX;

	s.y=mouseY;

}

function Rotate() 

{

	var x;

	var y;

	for (i = 0 ; i < NumStars ; i++ ) {

		var s=StarObject[i];

		

		if(s.step==0)

			changeColour(s);



		var angle = s.currAngle;

		var rad   = s.step*Radius + 10;

		x = s.x + rad*Math.cos(angle);

		y = s.y + rad*Math.sin(angle);



		s.layer.moveTo(x,y);



		s.step = (s.step+1)%NumSteps;

	}



	setTimeout("Rotate()", 30);

}





function IE_MouseMove()

{

	mouseX = document.body.scrollLeft+event.x;

	mouseY = document.body.scrollTop+event.y;

}

function NS_MouseMove(evnt) {

	mouseX = evnt.pageX;

	mouseY = evnt.pageY;

}



function handle_resize()

{

	if(document.layers)

		start();

}



window.onresize=handle_resize;

window.onload=start;

</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->