Finite Grids
by
Finite Grids is a project surrounding completeness, the completeness of every possible iteration of an 8x8 black and white grid. The ordered grid you see is always unique, and has 18,446,744,073,709,551,616 possible states,
a finite set, but impossible for a human to comprehend. As the calculations below show, the ordered grid will take 1.9 billion years to complete, longer than this website probably, and the randomized grid would take an estimated 86 billion years.
| The Math |
|
Total Possible Patterns
264 = 18,446,744,073,709,551,616
Ordered Completion Time
300 Patterns / Second
264
300
= 6.15 x 1016 seconds
= 1.95 x 109 years
= 1,949,040,000 years
= 1.95 billion years
(14% age of universe)
Random Completion Estimate
300 Patterns / Second
264 x 44.36
300
≈ 8.18 x 1018 seconds
≈ 8.66 x 1010 years
≈ 86,600,000,000 years
≈ 86.6 billion years
(6x age of universe)
|
| Citations | ||
| The Theory of Completeness | The Library of Babel is a theoretical library containing every possible 410 page book, and the Library of Babel website has a 3,200 character limit, making both technically finite, much like Finite Grids but on an astronomical scale unthinkable. | Borges, Jorge Luis. “The Library of Babel.” Accessed Jan 2026. https://libraryofbabel.info/ |
| The Theory of Exhausting | Rob Weychert, building upon Sol LeWitt’s variations on open cubes, created a digital version of every possible open cube. It basically 'exhausts' every variation possible, much like how Finite Grids exhausts every variation of an 8x8 grid. | Rob Weychert. "Variations of Incomplete Open Cubes." Accessed Jan 2026. https://cubes-revisited.art/ |
| The Theory of Time & Trust | On Kawara’s 'Date Paintings' exist based on his personal claims from the 60s to the 2010s, no one can realistically verify his huge project, and technically, neither can you verify Finite Grids because it takes almost 2 billion years. | The Art Story. "On Kawara." Accessed Feb 2026. https://www.theartstory.org/artist/on-kawara/ |
| Glitch Inspiration | Originally a website I found during my web design project for my Graphic Design 2 course, inspiring the character glitching on the title intro screen. | Departure Mono. "Departure Mono." Accessed Feb 2026. https://departuremono.com/ |
| Shop T-Shirt Image | A blank white T-Shirt image used as the canvas to make the Finite Grid shirt on the shop page, I designed the layout seperately on Affinity to print, and then replicated it with code onto this blank shirt later. | Jacques Durocher. "White T-Shirt Plain Mockup." Adobe Stock. Accessed Feb 2026. https://stock.adobe.com/ca/images/white-t-shirt... |
| Software Tools | I used Google Docs to track my research links, store and write my discussion posts. I used Google Sheets to track all my citations which are now listed here on this page. I used VSCodium for coding all the webpages. | Google Docs, Google Sheets & VSCodium. https://docs.google.com/ |
| CSS Property: Pretty | Just a random text wrapping CSS property I found which I thought was interesting and funny. 'text-wrap:pretty' actually prevents some elements of bad typography, like orphans at the bottom of bodies of text, instead of having to manually add line breaks like I usually would. | WebKit. “Better typography with text-wrap: pretty.” Accessed Feb 2026. https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/ |
| Total Possible Patterns | While easily calculatable, I found this reddit thread early on, one of the comments mentions how many possible variations an 8x8 grid contains, I actually originally thought it would be 64^2 since there's 64 cells that can be black or white, but it turned out to be the opposite 2^64. | Reddit. “All Possibilities of 3×3 Bits Assembled.” r/dataisbeautiful. Accessed Jan 2026. https://www.reddit.com/r/dataisbeautiful/comments/jddkgd/ |
| Code Citations | ||
| document.addEventListener | This is a function in the Javascript that waits for certain 'events' to happen, a key place where it's used on the site is waiting for the 'start' button on the title screen to be clicked and that 'event' makes the patterns start generating. | W3Schools. “JavaScript HTML DOM EventListener.” Accessed Feb 2026. https://www.w3schools.com/jsref/met_document_addeventlistener.asp |
| document.getElementById | Sort of similar to how divs work in HTML, assigning an ID to one certain element in Javascript helps control it specifically. (I also learned this in a Computer Science course I'm taking this semester). | W3Schools. “HTML DOM Document getElementById().” Accessed Feb 2026. https://www.w3schools.com/jsref/met_document_getelementbyid.asp |
| document.querySelectorAll | Unlike getElementById above which only grabs one element, An example of where I used this on the site was selecting all the size selection buttons on the Shop page to change their code together. | Mozilla Developer Network. “Document.querySelectorAll().” Accessed Feb 2026. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll |
| const variableName | Some variables on the site change, like the grid patterns and counter, but having a 'const' variable means having it never change and stay constant, some elements like that are like the container around the grid, or the speed slider. | Mozilla Developer Network. “const.” Accessed Feb 2026. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const |
| let variableName | This is pretty much the opposite of const, 'let' variables would be ones that change a lot and are repeatedly updated in the code, like the counter under the ordered grid continously updating it's number. | Mozilla Developer Network. “let.” Accessed Feb 2026. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let |
| BigInt(0) | Numbers larger than 2^53 need this function to run, even more necessary for my grid to get up to 18 quintillion. (I also found out about this from another student's citation Prof Craig linked to the discussion post) | W3Schools. “JavaScript BigInt.” Accessed Jan 2026. https://www.w3schools.com/js/js_bigint.asp |
| for (let i = 0; i < 64; i++) |
You'd notice that there's not much HTML code for the actual grid on the home page code, this loop automates that process, creating those grid cells within the browser memory as they come. | Mozilla Developer Network. “for statement.” Accessed Jan 2026. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for |
| arr.forEach | So in my understanding an array is more like a list of elements, like the grid cells made using the loop above, and then functions applied to an array effect all the elements within it together. | W3Schools. “JavaScript Array forEach().” Accessed Feb 2026. https://www.w3schools.com/JSREF/jsref_foreach.asp |
| document.createElement | This automatically creates an element in the HTML through Javascript, in my site it creates the entire grid on the home screen, instead of having the code permanently in that HTML, and this function can also create other elements like images or buttons based on other customizations. | W3Schools. “HTML DOM Document createElement().” Accessed Jan 2026. https://www.w3schools.com/jsref/met_document_createelement.asp |
| parent.appendChild | This is basically a second-part to the element created above, this takes that div created from the memory, and actually pastes it into the HTML of the page, essentially the transporter of the grid code from the Javascript to the HTML. | W3Schools. “HTML DOM Node appendChild().” Accessed Feb 2026. https://www.w3schools.com/jsref/met_node_appendchild.asp |
| element.classList.toggle | This adds or removes the CSS classes on the grid cells to make them either white or black, ironic that I referred this code from the tutorial on how to make a 'dark mode' site, but it works. | W3Schools. “How TO - Toggle Dark Mode.” Accessed Feb 2026. https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp |
| element.classList.add | Quite similar to the toggling function above, but this only does one action, like adding a CSS class and that's it, this same function wouldn't remove or change that one as well. | W3Schools. “How TO - Active Element.” Accessed Feb 2026. https://www.w3schools.com/howto/howto_js_active_element.asp |
| const arr = [] | So this is basically like an empty array placed in the Javascript before the 64 grid cells are generated so that when they are, they can be grouped together into this array to be customizable later. | W3Schools. “JavaScript Array Const.” Accessed Jan 2026. https://www.w3schools.com/js/js_array_const.asp |
| arr.push | This is similaer to the classList adding, while the 64 cells are being generated and then are associated with that array, this function actually 'pushes' the squares into that said array completing that action. | Mozilla Developer Network. “Array.prototype.push().” Accessed Feb 2026. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push |
| Math.random() | So this is pretty interesting and relates to the random grid, it's essentially like a coin toss, generating a random 1 or 0 to decide wheter a cell in the random grid should be black or white. This basically tosses 64 coins at once every single to decide if the cells on the grid should be black or white. | W3Schools. “JavaScript Math.random().” Accessed Jan 2026. https://www.w3schools.com/jsref/jsref_random.asp |
| Math.floor() | This one is pretty straightforward, randomly generating within a range can give decimal digits, and this basically rounds those off, so the 1s and 0s would be definitely 1 or 0 and nothing decimal in between. | W3Schools. “JavaScript Math.floor().” Accessed Feb 2026. https://www.w3schools.com/jsreF/jsref_floor.asp |
| setInterval | This creates a set interval at where a function would run in the code, in our case having a particular version of the grid pattern generate in a second, or 300 of them in a second, this decides the interval at which the function is repeated. | W3Schools. “Window setInterval().” Accessed Jan 2026. https://www.w3schools.com/jsref/met_win_setinterval.asp |
| clearInterval | This function would not be necessary on my site since the patterns never stop generating, that's the idea, generating for billions of years, but when it comes to changing the speed of the ordered grid, one interval has to be cleared before a different speed interval is added to change the speed of pattern generation. | W3Schools. “Window clearInterval().” Accessed Feb 2026. https://www.w3schools.com/jsref/met_win_clearinterval.asp |
| setTimeout | This is used more for the glitchy title screen, it acts a a countdown to a function within a set interval, in my case waiting a couple of seconds, I believe 3 in this case, and then glitching some of the letters to alternate ones, then it resets and starts over. | W3Schools. “Window setTimeout().” Accessed Feb 2026. https://www.w3schools.com/jsref/met_win_settimeout.asp |
| index >> BigInt(63-i) | This took me a while to understand but I think the way I understand it is that there's a single large number holding the binary of the entire grid at once, and this basically cut down and specifies which part of that full binary number is for which specific cell. | GeeksforGeeks. “JavaScript Program to Generate All Binary Strings.” Accessed Jan 2026. https://www.geeksforgeeks.org/... |
| Bitwise & 1n | This basically works alongside the function above, simplifying that piece of binary to just a 1 or 0 to decide if the cell is supposed to be black or white. | Mozilla Developer Network. “Bitwise AND (&).” Accessed Jan 2026. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_AND |
| parseInt | For some reason the HTML input of sliders comes out as a 'word label' instead of an actual number, so if the slider is moved to 50 patterns per second, it doesn't read as the number 50, but this function converts it to a number. | W3Schools. “JavaScript parseInt().” Accessed Feb 2026. https://www.w3schools.com/jsref/jsref_parseint.asp |
| <input type="range"> | This is the slider itself, considred a 'range' input in the HTML, in which I then added a minimum and maximum range. | W3Schools. "HTML Input Types." Accessed Jan 2026. https://www.w3schools.com/tags/att_input_type_range.asp |
| num.toLocaleString | This automatically formatted large numbers to use commas after every 3 digits, it's used many times throughout the site, clumping all the digits together makes it harder to understand how large the number is I feel. | W3Schools. “JavaScript Number toLocaleString().” Accessed Feb 2026. https://www.w3schools.com/jsref/jsref_tolocalestring_number.asp |
| str.split | This basically takes words apart and 'splits' them, in my site's case, on the title screen the main heading FINITE GRIDS is split into individual letters to be customized individually to glitch to certain characters. | Stack Overflow. "Randomly change text characters in JS." Accessed Feb 2026. https://stackoverflow.com/questions/78282373 |
| arr.map | This works along the split function above this, going through and picking which characters are to be specifically changes, in my case I customized certain ones to do certain things, like S to glitch to $ because they look similar. | Stack Overflow. "Randomly change text characters in JS." Accessed Feb 2026. https://stackoverflow.com/questions/78282373 |
| arr.join | This takes that split title and putsit back together to display on the title screen, so the last two functions and this one work together for one small task. | Stack Overflow. "Randomly change text characters in JS." Accessed Feb 2026. https://stackoverflow.com/questions/78282373 |
| str.replace | I used this for a very specific reason, I wanted to dim the color of the commas used throughout all numbers on the site because while they were useful they were also distracting, so this automatically selects them and applied a CSS class to them to be dimmer. | W3Schools. “JavaScript String replace().” Accessed Feb 2026. https://www.w3schools.com/jsref/jsref_replace.asp |
| element.innerHTML | This specifies that when code like the one above are adding text as an element, it doesn't go through as just plain text but actual HTML specifically. | W3Schools. “HTML DOM Element innerHTML.” Accessed Feb 2026. https://www.w3schools.com/jsref/prop_html_innerhtml.asp |
| element.style.display | After the title screen is transitioned-out, it's still technically there, so to avoid any overlapping clicking or errors this completely removes the title screen entirely. | Mozilla Developer Network. “HTMLElement.style.” Accessed Feb 2026. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style |
| onclick="function()" | This makes sure that the function starting the grid pattern generation starts only AFTER the start button is clicked, so that if someone took their time entering the site, the patterns haven't generated well past the first one. | W3Schools. “HTML DOM Event onclick.” Accessed Feb 2026. https://www.w3schools.com/jsref/event_onclick.asp |
| clip-path: inset | I found a site that has a library of available CSS transitions to use, and found a simple one most closely matching the style of my site, the one I chose being a square-closing type transition. | Argyle, Adam. "Transition.style." CSS Transitions. Accessed Feb 2026. https://www.transition.style/ |