This code creates an interactive webpage with a performance-focused experiment...

September 1, 2025 at 06:01 PM

<!DOCTYPE html>
<head>
	<style>
		body {
			background-color: #000000;
		}
		t {
			color: #FFFFFF;
		}
	</style>
	<meta charset="UTF-8">
	<title> ench ark</title>
</head>
<body>
	<center>
	<div id="bgb" style="position: absolute;top: 0px;left: 0px;zIndex: 0;order: -0"></div> 
	<t id="player" style="position: relative; top: 500px;" contenteditable="true">Click to begin!</t>
	</center>
	<script>
		let thing = 0;
		let time;
		let gaming;
		let primes = [2, 3, 5, 7, 11];
		bgb.style.width = `${window.innerWidth}px`;
		bgb.style.height = `${window.innerHeight}px`;
		bgb.style.backgroundColor = `rgb(${Math.random()*100},${Math.random()*100},${Math.random()*100})`;
		
		function prime(a) {
			for (let i = 0; i < primes.length; i++) {
				if (Math.floor(a/primes[i]) == a/primes[i] || a == primes[i]) { return false } 
			}
			return true
		}
		
		function move() {
			let tlimit = Date.now()+16
			player.innerHTML = (prime(thing)) ? "PRIME: " + thing : ""
			player.innerHTML += "<br>COUNTER: " + thing + "<br>TIME: " + Math.floor((Date.now()-time)/100)/10
			while (Date.now() < tlimit) {
				thing += 1
				if (Date.now() > time+10000) {
					player.innerHTML = `It's about ${thing/1000}FPS`
					clearInterval(gaming)
					thing = 0
					tlimit = 0
				}
			}
		}
		
		document.body.onclick = function(e) {
			if (thing == 0) {
				time = Date.now()
				gaming = setInterval(move, 1);
			}
		}
		/*
			LOCAL W10 FIREFOX RECORD: 20000FPS -ish
			LOCAL UBNT FIREFOX RECORD: 38000FPS -ish

			LINUX WINS
		*/
	</script>
</body>

This code creates an interactive webpage with a performance-focused experiment that calculates prime numbers and measures how quickly the browser executes the calculations. Here is a summary of what the code does:

HTML:

The <style> tag defines styles for the webpage:
- Sets the background color of the page to black (background-color: #000000).
- Sets text color for <t> elements to white (color: #FFFFFF).
<meta charset="UTF-8"> ensures proper character encoding.
The <title> is set to "ench ark".

Body Content:

A centered <t> element (id="player") is styled to be positioned relatively at the center (top: 500px). It displays the initial text: "Click to begin!" and is editable via contenteditable="true".
An empty <div> (with id="bgb") acts as a background placeholder and changes size dynamically to match the browser's dimensions.

JavaScript:

The JavaScript portion drives the interactive behavior of the code:

Initialization:
- Variables are declared: thing (a counter), time (to record when the experiment starts), gaming (holds the interval timer), and a basic array of prime numbers primes = [2, 3, 5, 7, 11].
- The <div> with id="bgb is styled to fill the browser window (width and height), and its background color is set dynamically using RGB values based on random numbers.
Prime Checking Function:
- The prime(a) function checks if a number a is prime:
  - It iterates over the small list of primes and checks if a is divisible by any of those numbers.
  - Returns true if a passes the test (likely prime), or false if it is divisible or matches one of the base primes.
Animation and Calculations:
- The move() function runs when the experiment starts:
  - It updates continuously at intervals set to ~16 milliseconds (roughly 60 FPS).
  - Checks if the current thing value is prime and displays it in the player element along with the counter and elapsed time.
  - Tracks how many iterations/frames have occurred within a given 10-second window.
  - Once the 10-second duration has passed, it stops the interval, calculates the approximate FPS (thing/1000), and displays it.
Click Behavior:
- Attaching an onclick event to the document body allows the user to start the experiment by clicking anywhere on the webpage.
- Clicking starts the counter (thing), sets the start time (time), and begins a fast repeat loop (setInterval(move, 1)).

Experiment:

The purpose of this code is to:

Measure and display how many iterations of the counter the browser can complete per second (essentially measuring performance or FPS).
Demonstrates JS execution speed while calculating primes and dynamically updating the DOM (player element).

Notable Features:

Random background color refreshes on page load.
Displays whether the current iteration is a prime number on the screen.
Calculates and displays approximate FPS after 10 seconds of computation.

Additional Context:

Comments in the code reveal benchmark performance tests using Firefox on Windows and Linux, comparing their respective "FPS-like" values.

Generate your own explanations

Download our vscode extension

Read other generated explanations

Built by @thebuilderjr