Save the Below JavaScript code in notepad with .html extension. Open that file with browser and see the magic. The colors are moving on the browser.
<html>
<head>
<title>Animated Fullscreen Radar with JavaScript</title>
<style type="text/css">
body{
background:#000;
color:#FFF;
margin:0;
overflow:hidden;
padding:0;
}
address{
bottom:10px;
font-family:Georgia,sans;
font-style:normal;
position:absolute;
right:10px;
text-align:right;
}
a:link,a:visited{
color:#CCC;
}
a:hover{
color:#FFF;
}
td{
}
</style>
<script type="text/javascript">
var size = 9;
var phase = 0;
var divisor = 10;
function drawFrame()
{
for (var debugY = 0; debugY < size; debugY++)
{
for (var debugX = 0; debugX < size; debugX++)
{
x = debugX / (size - 1) * 255;
y = debugY / (size - 1) * 255;
r = 0;
g = 0;
b = 0;
/* ACE: COPY FROM HERE */
/*
x = x - 128;
y = y - 128;
g = 255 - Math.floor(phase * 10 - Math.sqrt(x * x + y * y) * 2) % 256;
r = 128 + Math.floor(g / 2);
*/
/* BIS HERE */
/*
Doppelradar
x = x - 128;
y = y - 128;
r = 256 - (Math.floor(phase * 6 - Math.atan(y / (x + 0.001)) / Math.PI *
256)) % 256;
*/
//Einfaches Radar
x = x - 128;
y = y - 128;
w = Math.atan(y / (x + 0.001));
if (x < 0) w += Math.PI;
r = Math.floor(phase * 5 - w / Math.PI * 256);
r = 256 - r % 512;
if (r > 255) r = 0;
b = 64 - r / 4;
color = "rgb(" + r + "," + g + "," + b + ")";
document.getElementById("x" + debugX + "y" + debugY).style.backgroundColor
= color;
}
}
phase++;
window.setTimeout('drawFrame()', 50);
}
</script>
</head>
<body onload="drawFrame()">
<script type="text/javascript">
document.write('<table border="0" cellpadding="0" cellspacing="0" height="100%"
width="100%">');
for (var y = 0; y < size; y++)
{
document.write('<tr>');
for (var x = 0; x < size; x++)
{
document.write('<td id="x' + x + 'y' + y + '"> </td>');
}
document.write('</tr>');
}
document.write('</table>');
</script>
</body>
</html>
Click Here For JavaScript Basic Notes
0 comments:
Post a Comment