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.
JavaScript:
<html>
<head>
<title>Animated Fullscreen Plasma 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 = 11;
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 * 255;
y = debugY / size * 255;
r = 255;
g = 255;
b = 255;
// r = Math.ceil(Math.sin(phase / divisor) * 127) + 127;
// g = Math.ceil(Math.sin(phase / divisor + (Math.PI / 3 * 2)) * 127) + 127;
// g = Math.ceil(Math.sin(x*y/5000) * 127) + 127;
// g = Math.ceil(Math.sin(x/30+phase/4) * 127) + 127;
// g = Math.ceil(Math.sin(x*y/5000) * 63 + Math.sin(x/30+phase/4) * 63) + 127;
// g = Math.ceil(Math.sin(y/30+phase/4) * 127) + 127;
// r = Math.ceil(Math.sin(x/50+phase/5) * 127) + 127;
// b = Math.ceil(Math.sin((x+y)/50+phase/5) * 127) + 127 + 64;
b = Math.sin(x/50-phase/6) * Math.cos(y/70) * 127 + 127;
r = Math.sin(x/70) * Math.cos(y/50-phase/5) * 127 + 127;
g = (b + r) / 2;
// b = Math.ceil(Math.sin(phase / divisor + (Math.PI / 3 * 4)) * 127) + 127;
color = "rgb(" + Math.round(r) + "," + Math.round(g) + "," + Math.round(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>
0 comments:
Post a Comment