To begin my grand plan for the VHS Time Capsule, we’ll need a way to place a couple of div containers in random places. I played with this idea a while back with my “React!” application, creating randomly-sized divs in random positions within the viewport. Let’s take a look at the code:
iteration1.js
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
if (color == "#FFFFFF") {
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
} else {
return color;}
}
function makebox() {
var time=Math.random();
time=5000*time;
var top=Math.random();
top=top*400;
var left=Math.random();
left=left*400;
document.getElementById("box").style.top=top+"px";
document.getElementById("box").style.left=left+"px";
document.getElementById("box").style.backgroundColor=getRandomColor();
document.getElementById("box").style.display="block";
setTimeout(function() {
makebox();
}, time);
}
iteration1.html
<html>
<head>
<script type="text/javascript" src="iteration1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#box {
background-color: red;
width: 200px;
height: 200px;
position: relative;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
$(document).ready(function(){
makebox();
});
</script>
</body>
</html>
The HTML document is fairly sparse, existing only to frame the application by defining the initial CSS parameters of the div containers to be used (for error detection and so the function can identify the div), creating that initial div in the HTML body, then calling the makebox() function using a simple jQuery string that detects when the page is loaded:
$(document).ready(function(){ makebox(); });
The makebox() function is the heart of the application, so let’s take a look at it–line by line:
var time=Math.random(); This line defines the variable time and assignes it a randomized value between 0 and 1.
time=5000*time; This multiplies time by 5000 and stores the new value as time. This will set the delay between random changes that we will invoke using setTimeout() at the end of the function.
var top=Math.random();
top=top400;
var left=Math.random();
left=left400;
Just as with the time variable, we define top and left to be some random multiple of 400. Once we have all the properties defined, the next few lines of code re-define the CSS style of the div with ID box, moving any new divs created to the random positions defined by top and left:
document.getElementById("box").style.top=top+"px";
document.getElementById("box").style.left=left+"px";
document.getElementById("box").style.backgroundColor=getRandomColor();
document.getElementById("box").style.display="block";
At the end of the makebox() function, we invoke the setTimeout() function to create a delay as defined by time above before looping the makebox() function back to the beginning.
setTimeout(function() {
makebox();
}, time);
The last piece of the puzzle is the getRandomColor() function, which defines a random color using hexadecimal values:
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
if (color == "#FFFFFF") {
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
} else {
return color;}
}
The letters variable describes an array containing each of the possible hexadecimal values 0-A. The color variable is initially defined with the hashmark that precedes a hexadecimal color value. The for loop fills the 6 digits of our hexadecimal code:
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
First, the function tests the value of the i variable to see how many digits have been placed. If the value is less than 6, the function proceeds to fill each digit as follows:
Math.random() * 16 Selecting a random value between 0-16
Math.floor(Math.random() * 16) Dropping the decimal from the random value, leaving a whole integer. letters[Math.floor(Math.random() * 16)] Using the randomly selected value to select the value of the array corresponding to that position. color += letters[Math.floor(Math.random() * 16)] The += operator appends the digit selected to the value of the colors variable.
if (color == "#FFFFFF") {
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
If the value of color happens to end up as white (#FFFFFF), then the process repeats until the value is not white.
} else {
return color;}
If the value of color is something other than white (#FFFFFF), then the function returns the value of color.
When we put all this together, we get something like the following: A 200×200 pixel square that is filled with a random color and appears in a random X,Y position at random intervals.
