Monday, November 17, 2014

Javascript Color Morphing


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