Here is a little fun thing to do in the lab: changing colors. If you have a little javascript project and you want to make it fun, this little color morphing script can come in handy. It opens up the door to understanding how the color components on your screen works. The combination of red, green and blue to make up a color you see on a screen can be shown in this little experiment. Here are the codes:
|
<html> <head> <script> var runTimer; var rCom, gCom, bCom; // Red, Green, Blue component var rComN, gComN, bComN; // Red, Green, Blue step/speed var rComDir, gComDir, bComDir; // Red, Green, Blue direction (value going up/down) var tRCom, tGCom, tBCom; // target Red, Green, Blue component var morphSpeed = 100; // 100ms interval between changes var started = 0; var currentRGB; function runColorBar() { if (!started) { rCom = Math.floor((Math.random()*256)).toString(16); // random color start for red component gCom = Math.floor((Math.random()*256)).toString(16); // you can also fix it to something like "AA" in hex or 170 in decimal bCom = Math.floor((Math.random()*256)).toString(16); rComDir = Math.floor((Math.random()*1))+1; // random direction - increasing or decreasing gComDir = Math.floor((Math.random()*1))+1; bComDir = Math.floor((Math.random()*1))+1; rComN = Math.floor((Math.random()*5))+1; // random increasing/decreasing speed gComN = Math.floor((Math.random()*5))+1; bComN = Math.floor((Math.random()*5))+1; runTimer = setInterval("changeBarColor()",morphSpeed); started = 1; } } function stopColorBar() { if (started) { clearInterval(runTimer); started = 0; } } function changeBarColor() { tRCom = parseInt(rCom, 16); rComDir == 1?tRCom+=rComN:tRCom-=rComN; // decide to increase or decrease color value tGCom = parseInt(gCom, 16); gComDir == 1?tGCom+=gComN:tGCom-=gComN; tBCom = parseInt(bCom, 16); bComDir == 1?tBCom+=bComN:tBCom-=bComN; if (tRCom >= 255) { // if overshoot, change direction rComDir = 2; tRCom = 255; } else if (tRCom <= 0) { rComDir = 1; tRCom = 0; } if (tGCom >= 255) { gComDir = 2; tGCom = 255; } else if (tGCom <= 0) { gComDir = 1; tGCom = 0; } if (tBCom >= 255) { bComDir = 2; tBCom = 255; } else if (tBCom <= 0) { bComDir = 1; tBCom = 0; } rCom = tRCom.toString(16); gCom = tGCom.toString(16); bCom = tBCom.toString(16); if (rCom.length == 1) { rCom = "0"+rCom; } // every color component requires at least two digits if (gCom.length == 1) { gCom = "0"+gCom; } if (bCom.length == 1) { bCom = "0"+bCom; } currentRGB = "#"+rCom+gCom+bCom; document.getElementById('colorBar').style.backgroundColor = currentRGB; document.getElementById('cvalue').innerHTML = currentRGB; } </script> <body onload="runColorBar()"> <table width=500 align=center valign=top><tr><td width=500 height=20 align=center id=colorBar>Color Bar</td></tr><tr><td align=center><br><a href="javascript:stopColorBar()">Stop Morphing</a> <a href="javascript:runColorBar()">Run Color Bar</a><br><br>Current Color Value: <span id=cvalue></span></td></table> </body> </html> |
Of course, if you understand all the mechanics in the codes, you can reset the values to something of your preference such as the color at the beginning, the speed of color morphing for each color component and so forth. I hope you enjoy this little experiment in this Javascript lab and I'll see you in the coming experiments!
No comments:
Post a Comment