trying to get the overlay to work

Author: henry-lang

assets/scripts/effects.js

@@ -1,22 +1,66 @@
 'use strict'
 
-// Initial ascii stuff (Look, I don't like creating a temporary canvas either, but...)
+function choose(arr) {
+    return arr[Math.floor(Math.random() * arr.length)]
+}
 
-const context = document.createElement('canvas').getContext('2d')
-context.font = getComputedStyle(document.querySelector('.ascii')).font
+// Initial ascii stuff (Look, I don't like creating a temporary canvas either, but...)
+const asciiStyle = getComputedStyle(document.querySelector('.ascii'))
+const globalFont = asciiStyle.font
+const globalFontSize = asciiStyle.fontSize
+const globalFontFamily = asciiStyle.fontFamily
+let context = document.createElement('canvas').getContext('2d')
+context.font = globalFont
 const charDimensions = context.measureText('.') // Monospace font assumed
 const charWidth = charDimensions.width
 const charHeight = charDimensions.fontBoundingBoxAscent
 console.log(`Using font: ${context.font}`)
 console.log(`Found ascii char width: ${charWidth}px, ascii char height: ${charHeight}px`)
+context = null;
+
+const screenWidthChars = Math.floor(window.innerWidth / charWidth);
+const screenHeightChars = Math.floor(window.innerHeight / charHeight);
 
 const seaElement = document.querySelector('.sea')
-const seaWidth = Math.floor(window.innerWidth / charWidth);
-const seaHeight = Math.floor(window.innerHeight / charHeight * .25)
-const seaTPS = 3;
+const seaWidth = screenWidthChars
+const seaHeight = Math.floor(screenHeightChars / 4)
+const seaTPS = 3
 const seaText = []
 const seaChars = ['~']
 
+const overlay = document.querySelector('.overlay')
+const overlayTPS = 1
+const overlayChars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '#', '$', '^', '.', ',', '%', '$', '$', '.', '.', ',']
+const ctx = overlay.getContext('2d')
+const scale = window.devicePixelRatio
+
+overlay.width = Math.floor(window.innerWidth * scale)
+overlay.height = Math.floor(window.innerHeight * scale)
+ctx.font = `${Number(globalFontSize.slice(0, globalFontSize.length - 2)) * 2}px ${globalFontFamily}`
+const s = ctx.measureText('.')
+const w = s.width
+const h = s.fontBoundingBoxAscent
+function rgbToHex(color){
+    const rgba = color.replace(/^rgba?\(|\s+|\)$/g, '').split(',');
+    const hex = `#${((1 << 24) + (parseInt(rgba[0]) << 16) + (parseInt(rgba[1]) << 8) + parseInt(rgba[2])).toString(16).slice(1)}`;
+    
+    return hex;
+}
+const fontHex = rgbToHex(asciiStyle.color)
+window.setInterval(() => {
+    ctx.clearRect(0, 0, overlay.width, overlay.height)
+    for(let i = 0; i < overlay.height / h; i++) {
+        for(let j = 0; j < overlay.width / w; j++) {
+            let alpha = Math.floor(i / (overlay.height / h) * 255).toString(16)
+            if(alpha.length == 1) {
+                alpha = '0' + alpha
+            }
+            ctx.fillStyle = `${fontHex}${alpha}`
+            ctx.fillText(choose(overlayChars), j * w, (i + 1) * h);
+        }
+    }
+}, 1000/5)
+
 function setOptimizedInterval(element, render, tps) {
     render()
     let handle = setInterval(render, 1000 / tps)
@@ -43,17 +87,3 @@ function setOptimizedInterval(element, render, tps) {
 function randomSeaChar() {
     return seaChars[Math.floor(Math.random() * seaChars.length)]
 }
-
-function updateSea() {
-    seaText.length = 0
-    for(let i = 0; i < seaHeight; i++) {
-        for(let j = 0; j < seaWidth; j++) {
-            seaText.push((Math.random() > (0.9 * i / seaHeight + 0.1)) ? randomSeaChar() : ' ')
-        }
-        seaText.push('\n')
-    }
-
-    seaElement.innerText = seaText.join('')
-}
-
-setOptimizedInterval(seaElement, updateSea, seaTPS)

assets/scripts/palette.js

@@ -7,7 +7,7 @@ function setUserPalette(palette) {
 }
 
 function rotateUserPalette() {
-    let userPalette = getUserPalette();
+    let userPalette = getUserPalette()
 
     return userPalette == 'light'
         ? 'dark'

assets/styles/styles.css

@@ -10,7 +10,7 @@ body::-webkit-scrollbar {
 }
 
 body::-webkit-scrollbar-track {
-    display:none;        /* color of the tracking area */
+    display: none;        /* color of the tracking area */
 }
 
 body::-webkit-scrollbar-thumb {
@@ -36,20 +36,18 @@ a {
 
 .overlay {
     background-color: var(--bg-0);
-    font-size: 1.5rem;
-    color: var(--fg-0);
     position: absolute;
     top: 0;
     left: 0;
-    margin: 0;
-    min-width: 100vw;
-    min-height: 100vh;
+    width: 100vw;
+    height: 100vh;
     z-index: 100;
 }
 
 .ascii {
     white-space: pre;
     font-size: calc(3vmin);
+    word-wrap: normal;
 }
 
 .splash-ascii {
@@ -93,10 +91,6 @@ a {
     display: flex;
 }
 
-.raindrop {
-    
-}
-
 #name {
     color: var(--fg-0);
     font-size: calc(4vw + 4vh);
@@ -125,7 +119,7 @@ a {
 }
 
 :root {
-    --font: Iosevka;
+    --font: Iosevka, monospace, 'Courier';
 }
 
 :root[data-palette="dark"] {

index.html

@@ -4,7 +4,7 @@
 
 <script async defer src="/assets/scripts/effects.js"></script>
 
-<!-- <p class="overlay"></p> -->
+<canvas class="overlay"></canvas>
 
 <header class="splash">
     <div class="splash-ascii">