diff --git a/js/script.js b/js/script.js index e94b7b9..3b9f29b 100644 --- a/js/script.js +++ b/js/script.js @@ -1,4 +1,4 @@ -var firstInit = true; +let firstInit = true; function mobileConditions() { return !(window.innerWidth > 900 && window.innerHeight < window.innerWidth); @@ -7,7 +7,7 @@ function mobileConditions() { function tag(name, classes, id) { const el = document.createElement(name); if(classes) { - for(let c of classes) { + for(const c of classes) { el.classList.add(c); } } @@ -46,13 +46,13 @@ bgInit(false); function calculateBg() { if(!mobileConditions()) { bgInit(false); - let backgrounds = document.querySelector('.bg-scroller').querySelectorAll('.bg'); - let bgOps = new Array(backgrounds.length).fill(0); - let textOps = new Array(backgrounds.length).fill(0); + const backgrounds = document.querySelector('.bg-scroller').querySelectorAll('.bg'); + const bgOps = new Array(backgrounds.length).fill(0); + const textOps = new Array(backgrounds.length).fill(0); let scrolledWindows = (window.scrollY - window.innerHeight) / window.innerHeight; if(scrolledWindows < 0) scrolledWindows = 0; - let minBg = Math.floor(scrolledWindows); - let maxBg = minBg + 1; + const minBg = Math.floor(scrolledWindows); + const maxBg = minBg + 1; let delta = scrolledWindows - minBg; if(delta < 0.3) { delta = 0; @@ -91,7 +91,7 @@ function scrollAnimations() { if(!mobileConditions()) { document.querySelectorAll('.main h1, .main h3').forEach(function(el) { - var scrolledFrac = window.scrollY / window.innerHeight; + const scrolledFrac = window.scrollY / window.innerHeight; el.style.opacity = Math.min(1, 1.2 - 1.5*scrolledFrac).toString(); el.style.position = 'relative'; el.style.top = (scrolledFrac * window.innerHeight / 2).toString() + 'px'; @@ -106,52 +106,50 @@ function scrollLoop() { } scrollLoop(); -var canvas = document.querySelector('canvas#bg'); +const canvas = document.querySelector('canvas#bg'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; -var ctx = canvas.getContext('2d'); +const ctx = canvas.getContext('2d'); -window.addEventListener('resize', () => { +addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; -}) +}); function Point() { - var p = this; - - var r = 8; + const r = 8; // progress below 0 is neglected, negative initial // progress serves to introduce random delays - // at 0.05 progress points per second, for example // a dot with initial progress -0.15 will run 2 frames // after a dot with initial progress -0.05 - var initialProgress = -4 * Math.random(); + const initialProgress = -4 * Math.random(); // moves point to a random location and // resets its progress this.init = function() { - p.x = Math.random() * canvas.width; - p.y = Math.random() * canvas.height; - p.progress = initialProgress; + this.x = Math.random() * canvas.width; + this.y = Math.random() * canvas.height; + this.progress = initialProgress; } this.draw = function() { - if(p.progress >= 0) { + if(this.progress >= 0) { // opacity of of dot changes with progress const isDarkMode = document.body.classList.contains('dark-mode'); - let color = isDarkMode ? 255 : 0; - let multiplier = isDarkMode ? 0.05 : 0.005; - ctx.fillStyle = `rgba(${color}, ${color}, ${color}, ${Math.sqrt(p.progress*multiplier)})`; + const color = isDarkMode ? 255 : 0; + const multiplier = isDarkMode ? 0.05 : 0.005; + ctx.fillStyle = `rgba(${color}, ${color}, ${color}, ${Math.sqrt(this.progress*multiplier)})`; ctx.beginPath(); // radius calculation: maps progress from [0, 1] to [0, pi], // then takes sine of that to get an increase, then decrease // in radius. absolute value to prevent floating point errors // accidentally causing negative sine values which cause ctx.arc // to throw errors - ctx.arc(p.x, p.y, Math.abs(Math.sin(Math.PI*p.progress)*r), 0, 2*Math.PI); + ctx.arc(this.x, this.y, Math.abs(Math.sin(Math.PI*this.progress)*r), 0, 2*Math.PI); ctx.fill(); } }; @@ -159,19 +157,20 @@ function Point() { // stars come faster than they go // so user can look at them longer // i guess? idk this just looked pretty - if(p.progress > 0.5) - p.progress += 0.005; + if(this.progress > 0.5) + this.progress += 0.005; else - p.progress += 0.05; - p.draw(); - if(p.progress >= 1) p.init(); + this.progress += 0.05; + this.draw(); + if(this.progress >= 1) this.init(); } } -var dots = []; -var n = 20; +const dots = []; -for(var i = 0; i < n; i++) { +const n = 20; + +for(let i = 0; i < n; i++) { dots[i] = new Point(); dots[i].init(); } @@ -180,7 +179,7 @@ function loop() { if(window.scrollY <= window.innerHeight) { ctx.clearRect(0, 0, canvas.width, canvas.height); - for(var i = 0; i < n; i++) { + for(let i = 0; i < n; i++) { dots[i].render(); } } @@ -190,7 +189,7 @@ function loop() { loop(); -var sentences = [ +const sentences = [ 'Semicolons optional.', 'Best viewed in Visual Studio Code.', 'sh -c "$(curl -sL https://nsood.in/randomscript.sh)"', @@ -199,23 +198,23 @@ var sentences = [ 'Boolean logic jokes are funny, whether you laugh xor not.', ]; -var counter = 1; +let counter = 1; -var ticker = document.querySelector("footer .ticker"); +const ticker = document.querySelector("footer .ticker"); function changeText() { - var el = ticker, - text = sentences[counter], + const el = ticker; + const text = sentences[counter]; oldText = el.textContent; - var x = setInterval(function() { + const x = setInterval(function() { if(oldText.length != 0) { oldText = oldText.slice(0, -1); el.textContent = oldText; } else { setTimeout(function() { - var y = setInterval(function() { + const y = setInterval(function() { if(el.textContent.length != text.length) { el.textContent = text.slice(0, el.textContent.length+1); } @@ -248,7 +247,7 @@ const birthday = { month: 1, year: 2001, } -let today = new Date(); +const today = new Date(); let age = today.getFullYear() - birthday.year; if(today.getMonth() <= birthday.month && today.getDate() < birthday.date) { --age; @@ -259,18 +258,18 @@ document.querySelector('.age').textContent = `${tens[Math.floor(age / 10)]} ${on // easter egg -var sequences = [ +const sequences = [ [ 99, 108, 97, 112, 111, 102, 102 ], [ 99, 108, 97, 112, 111, 110 ], ]; -var mode = 0; +let mode = 0; -var eei = 0; +let eei = 0; -window.addEventListener('keypress', e => { +addEventListener('keypress', e => { const clapper = document.querySelector('.clapper'); - var sequence = sequences[mode]; + const sequence = sequences[mode]; if(e.keyCode == sequence[eei]) { eei++; } @@ -293,4 +292,4 @@ window.addEventListener('keypress', e => { setTimeout(() => clapper.classList.toggle('clapping'), 500); }, 500); } -}) +});