Strobe Light  
Tuesday, June 7, 2011, 12:17
Posted by Administrator
Over the last few days I've been working on a small JavaScript/PHP website to turn a monitor into a strobe light.

I used to use a windows program called flasher3000 that would do this same effect but decided it would be more fun just to make my own than to get a windows machine up and running just to strobe for me.

Getting JavaScript to change the background color back and forth was the easiest part, its just a matter of setting document.bgColor to a new value in a loop and then using setTimeout to pause for a few hundred milliseconds. After wrapping that in a function and calling it with an onLoad the page starts running the strobe.

A day or two after playing with this idea I decided to write some PHP to pick a pseudo-random color and speed from an array and send that to the JavaScript so that every time the page is refreshed the strobe likely has different settings.

The complete code for the strobe is below:
<html>
<head>
<title>strobe - refresh to change settings</title>

<?php 
// Colors array
$colors = array('ff0000','ffff00','ffffff','00ffff','0000ff','ff00ff','00ff00');
// Pick a random key for a color
$randomColor = array_rand($colors);
// Get the color at that key
$color = $colors[$randomColor]; 

// Refresh rate array
$speeds = array('16.666','41.666','55','65','75','80','83.333','90','100','110','120','130','140','150');
// Pick a random key for a speei
$randomSpeed = array_rand($speeds);
// Get the speei at that key
$speed = $speeds[$randomSpeed];
?>

<script>
function strobe() {
  document.bgColor = document.bgColor == '#<?php echo $color ?>' ? '#000000' : '#<?php echo $color ?>';
  setTimeout('strobe()', <?php echo $speed ?>);
}
</script>

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

<?php 
echo "<font color='" . $color . "'>" . $color . " - " . $speed . "ms</font>";
?>

</body>
</html>

Here is a link to the strobelight itself.

Its worked on all the browsers I've tested it on so far after I debugged a small problem where IE wasn't interpreting uppercase RGB hex values correctly.

Additional things I'm thinking about adding to it are key inputs to cycle through the colors or possibly form the colors themselves. As well as keys to change the refresh rate so that the strobe light can be even more customizable on the fly without having to refresh the page.
add comment ( 6561 views )   |  permalink   |  $star_image$star_image$star_image$star_image$star_image ( 3 / 5307 )

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