The visual results of this project are slightly different from the previous ones, as boxes fade in and out, instead of just appear and disappear. Also, they all become fully opaque, rather than have random transparency. The programming for this project, however, takes a large leap forward. I added two functions, one for fading elements in and one for fading elements out. I also made big changes to the createBox() function in order to get these results.
It is significant to point out that the previous projects were not actually recursive. They were only using setInterval to repeat indefinitely. This project uses two recursive functions to handle the random addition and removal of elements to the page. The recursion is necessary to handle the timing of these two functions so that the program can work its way through each state (adding elements and removing elements) properly.
Code Snippets for 04
For 04, I needed to set the initial opacity of elements added to the DOM to zero, and then fade them in. To do this, I updated the CSS at the top of the file.
In order to fade elements in and out, I had to make some fairly significant changes to the createBox() function, including making it fully recursive for the first time. Instead of using setInterval, I am using setTimeout on line 3. Then on line 27, instead of a simple loop to remove elements, you will see an if statement that checks the number of elements on the screen against the randomly chosen maximum number. If there are too many I enter a recursive fade function that fades the extra boxes out. I also added a function to fade boxes in called unfade() which you can see runs on line 21.
The unfade() function fades elements in as they are added to the page. I set an initial opacity of 0.05 and then run a timer which gets cleared when the element gets to full 100% opacity. The setInterval will run every 50 milliseconds adding 0.05 to the opacity each time, basically it runs 20 times, giving each element 20 steps from transparent to fully opaque.
The fade function takes and element and a counter. The counter is the number of boxes I want to fade out determined randomly in the createBox function above on line x. This function takes one element at a time, sets the opacity at 1 then subtracts 0.05 from that opacity. It does this every 50 milliseconds to the same element until its opacity hits 0.05 or less. At that point the timer for that element is cleared, the element is removed from the page, and the program checks to see if there is another element to fade out, if so, fade() is called recursively on that element (on line 12), when all the elements have been faded out, createBox() is called (on line 17) and we enter back into the main function.
Below, I have cleared a lot of the code out of the functions and put in comments to describe what is going on. It is important to understand how the createBox() and fade() recursive functions work together. Based on random conditions, the addition or removal of elements on the screen is getting passed back and forth between these two functions.