Full version: jsB@nk » Pointer » Trailer » Pinwheel
URL: https://www.javascriptbank.com/pinwheel.html
This JavaScript makes colorfull dots follow mouse. Very cool.
Full version: jsB@nk » Pointer » Trailer » Pinwheel
URL: https://www.javascriptbank.com/pinwheel.html
<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;}}elseif(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 ***/}elseif(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;}elseif(num==1){Radius = 10;NumStars=16;NumSteps=8;StepAngle=(22.5)*oneDeg;}elseif(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-->