Random Colored Circle

Just for fun, I made a circle filled with a random color. It runs with JavaScript.

This illustration is a circle filled with one of the five Christmas colors — red, green, gold, silver, and white. The color changes every 5 seconds.

(The demonstration was put in a div with a background color so the white-colored circle would be visible.)

The color selection is random, except it won't randomly show the same color selection twice in a row.

Wanna play?

First:

Construct the circle. It's HTML, a square div with rounded corners and a background color:

<div id="my-circle" style="
   background-color:transparent;
   width:100px; 
   height:100px; 
   border-radius:50% 50%;">
</div>

The div needs to have an id value. You may change my-circle to a different id value.

The div must be square to form a circle; otherwise, you end up with an oval. Change the two instances of 100px to the dimensions you prefer.

Second:

Place this JavaScript somewhere below the div with the circle. Customization notes follow.

<script type="text/javascript">
var IDofCircle = "my-circle";
var Colors = new Array( "red", "green", "gold", "#bab9c1", "white" );
var Frequency = 1; // number of seconds wait before new color; use 0 (zero) to avoid animation.
var LastSelection = -1;
var NumberOfColors = Colors.length;
function ChangeTheCircleColors()
{
   var Selection = Math.floor(Math.random() * NumberOfColors);
   if( NumberOfColors > 1 )
   {
      while(Selection==LastSelection) { Selection = Math.floor(Math.random() * NumberOfColors); }
   }
   LastSelection = Selection;
   document.getElementById(IDofCircle).style.backgroundColor = Colors[Selection];
}
ChangeTheCircleColors();
if(Frequency>0) { setInterval(ChangeTheCircleColors,parseInt(Frequency*1000)); }
</script>

The my-circle value in the JavaScript must be identical to the id value of the div with the cirle.

Replace "red", "green", "gold", "#bab9c1", "white" with your own list of colors. There is no built-in limit to how many colors you may specify. Colors may be specified as color name, hex, rgb, or hsl. For example, the color gold can be specified as "#fed631", "gold", "rgb(254,214,49)", or "hsl(48,99%,59.42%)".

The frequency value 1 represents 1 second between color changes. The value 2 would represent 2 seconds. 5 represents 5 seconds between color changes. So long as the number is more than 0 seconds, the color is supposed to change every specified number of seconds. To opt out of the color-change animation, specify the number 0.

You are ready to go. Load the page and watch the color changes.

(This content first appeared in Possibilities newsletter.)

Will Bontrager