Improved Strobe 
Monday, July 2, 2012, 11:33
Posted by Administrator
It has been much too long since I made an entry here! I keep meaning to post but had been very busy with classes and graduating and now working full time but things are finally starting to settle down into a nice routine and I'm able to find time on the weekends and at nights lately.

I've made some additions to that strobelight Javascript that I put together quite a while back. By adding some nice cross browser event handling code provided by the nice folks over at OpenJs I was able to easily add key commands to control the flash rate and colours used by the strobe as well as throbbing effect.

The left and right arrow keys decrease and increase the flash rate respectively, and the up and down arrows switch out the first and second flash colour. For the black and white throb hit the Ctrl key, and to turn it off press Alt.

I'd eventually like to add the throb to work with any of the other colour settings but this is going to take some more thought. I don't want to define separate arrays for all of the combinations, but how to manage to increment the saturation of a RGB hex code in a generic way is eluding me currently. Perhaps I could mask the value somehow after shifting off the pound sign so that I just hit the right values.

Or another possible feature I see would be to have it just generate a random similar shade in an incremental pseudo-random path.

Here is the current page code I have developed:

<html>
<head>
<title>strobe - arrow keys change settings + ctrl + alt</title>
<script type="text/javascript" src="shortcut.js"></script>
<script>

var colors = new Array("#000000","#FFFFFF","#FF0000","#FFFF00","#FF00FF","00FFFF","#0000FF","00FF00");
var bwthrob = new Array("#000000","#111111","#222222","#333333","#444444","555555","#666666","777777","#888888","#999999","#AAAAAA","#BBBBBB","#CCCCCC","#DDDDDD","#EEEEEE","#FFFFFF","#EEEEEE","#DDDDDD","#CCCCCC","#BBBBBB","#AAAAAA","#999999","#888888","#777777","#666666","#555555","#444444","#333333","#222222","#111111");

var c1 = "0";
var c2 = "1";
var speed = "80.00";
var i = 0;

  shortcut.add("Ctrl", function() {
        i = 1;
  });

  shortcut.add("Alt", function() {
        i = 0;
  });

  shortcut.add("Up", function() {
        c1 = (c1 + 1) % colors.length;
  });

  shortcut.add("Down", function() {
        c2 = (c2 + 1) % colors.length;
  });

  shortcut.add("Left", function() {
        speed = speed + 10;
  });

  shortcut.add("Right", function() {
        speed = speed - 10;
  });

  function strobe() {

    if ( i == 0 ) {
      document.bgColor = document.bgColor == colors[c2] ? colors[c1] : colors[c2];
    }
   
    else {
      document.bgColor = bwthrob[i%bwthrob.length];
      i++;
    }
    
    setTimeout('strobe()', speed);

  }
</script>

</head>
  <body onload='strobe();'>
  </body>
</html>


You play with the strobe through the link below. Enjoy :D.

--> The Strobe <--

add comment ( 18178 views )   |  permalink   |  $star_image$star_image$star_image$star_image$star_image ( 3 / 5352 )

<<First <Back | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next> Last>>