From 345fa47f5964aa091e63d5837575b77d04b9592b Mon Sep 17 00:00:00 2001 From: Finnder Date: Mon, 21 Mar 2022 23:25:06 -0400 Subject: [PATCH] added cool landing animation --- "\\" | 252 +++++++++++++++++++++++++++++++++++++++++++++++++++++ bg.js | 51 ++++++++++- index.html | 4 +- 3 files changed, 304 insertions(+), 3 deletions(-) create mode 100644 "\\" diff --git "a/\\" "b/\\" new file mode 100644 index 0000000..c3bbd31 --- /dev/null +++ "b/\\" @@ -0,0 +1,252 @@ +const STAR_COLOR = 'white'; +const STAR_SIZE = 4; +const STAR_MIN_SCALE = 0.2; +const OVERFLOW_THRESHOLD = 50; +const STAR_COUNT = ( window.innerWidth + window.innerHeight ) / 8; + +const canvas = document.querySelector( 'canvas' ), + context = canvas.getContext( '2d' ); + +let scale = 1, // device pixel ratio + width, + height; + +let stars = []; + +let pointerX, + pointerY; + +let velocity = { x: 0, y: 0, tx: 0, ty: 0, z: 0.2 }; +let entryTime = 4000 + +function arrival(){ + + console.log("🚀 - Next Destination: Linux Club") + + setTimeout(() => { + + console.log("🚀 - Initiating Cruise Mode...") + + let landing = setInterval(() => + { + if(velocity.z >= 0.01) + { + velocity.z -= 0.01 + + } else { + clearInterval(landing) + console.log("%c🚀 - Cruise Mode Activated ", "background: rgb(35, 35, 35); color: yellow; font-weight: bold") + } + }, 125) + + + }, entryTime) + +} + + + + +let touchInput = false; + + +arrival(); +generate(); +resize(); +step(); + +window.onresize = resize; + +/* Mouse moving functionality +canvas.onmousemove = onMouseMove; +canvas.ontouchmove = onTouchMove; +canvas.ontouchend = onMouseLeave; +document.onmouseleave = onMouseLeave; +*/ + +function generate() { + for( let i = 0; i < STAR_COUNT; i++ ) { + stars.push({ + x: 0, + y: 0, + z: STAR_MIN_SCALE + Math.random() * ( 1 - STAR_MIN_SCALE ) + }); + } +} + +function placeStar( star ) { + star.x = Math.random() * width; + star.y = Math.random() * height; +} + +function recycleStar( star ) { + + let direction = 'z'; + let vx = Math.abs( velocity.x ), + vy = Math.abs( velocity.y ); + + if( vx > 1 || vy > 1 ) { + let axis; + + if( vx > vy ) { + axis = Math.random() < vx / ( vx + vy ) ? 'h' : 'v'; + } + else { + axis = Math.random() < vy / ( vx + vy ) ? 'v' : 'h'; + } + + if( axis === 'h' ) { + direction = velocity.x > 0 ? 'l' : 'r'; + } + else { + direction = velocity.y > 0 ? 't' : 'b'; + } + } + + star.z = STAR_MIN_SCALE + Math.random() * ( 1 - STAR_MIN_SCALE ); + + if( direction === 'z' ) { + star.z = 0.1; + star.x = Math.random() * width; + star.y = Math.random() * height; + } + else if( direction === 'l' ) { + star.x = -OVERFLOW_THRESHOLD; + star.y = height * Math.random(); + } + else if( direction === 'r' ) { + star.x = width + OVERFLOW_THRESHOLD; + star.y = height * Math.random(); + } + else if( direction === 't' ) { + star.x = width * Math.random(); + star.y = -OVERFLOW_THRESHOLD; + } + else if( direction === 'b' ) { + star.x = width * Math.random(); + star.y = height + OVERFLOW_THRESHOLD; + } + +} + +function resize() { + + scale = window.devicePixelRatio || 1; + + width = window.innerWidth * scale; + height = window.innerHeight * scale; + + canvas.width = width; + canvas.height = height; + + stars.forEach( placeStar ); + +} + +function step() { + + context.clearRect( 0, 0, width, height ); + + update(); + render(); + + requestAnimationFrame( step ); + +} + +function update() { + + velocity.tx *= 0.96; + velocity.ty *= 0.96; + + velocity.x += ( velocity.tx - velocity.x ) * 0.8; + velocity.y += ( velocity.ty - velocity.y ) * 0.8; + + stars.forEach( ( star ) => { + + star.x += velocity.x * star.z; + star.y += velocity.y * star.z; + + star.x += ( star.x - width/2 ) * velocity.z * star.z; + star.y += ( star.y - height/2 ) * velocity.z * star.z; + star.z += velocity.z; + + // recycle when out of bounds + if( star.x < -OVERFLOW_THRESHOLD || star.x > width + OVERFLOW_THRESHOLD || star.y < -OVERFLOW_THRESHOLD || star.y > height + OVERFLOW_THRESHOLD ) { + recycleStar( star ); + } + + } ); + +} + +function render() { + + stars.forEach( ( star ) => { + + context.beginPath(); + context.lineCap = 'round'; + context.lineWidth = STAR_SIZE * star.z * scale; + context.globalAlpha = 0.5 + 0.5*Math.random(); + context.strokeStyle = STAR_COLOR; + + context.beginPath(); + context.moveTo( star.x, star.y ); + + var tailX = velocity.x * 2, + tailY = velocity.y * 2; + + // stroke() wont work on an invisible line + if( Math.abs( tailX ) < 0.1 ) tailX = 0.5; + if( Math.abs( tailY ) < 0.1 ) tailY = 0.5; + + context.lineTo( star.x + tailX, star.y + tailY ); + + context.stroke(); + + } ); + +} + +function movePointer( x, y ) { + + if( typeof pointerX === 'number' && typeof pointerY === 'number' ) { + + let ox = x - pointerX, + oy = y - pointerY; + + velocity.tx = velocity.tx + ( ox / 8*scale ) * ( touchInput ? 1 : -1); + velocity.ty = velocity.ty + ( oy / 8*scale ) * ( touchInput ? 1 : -1 ); + + } + + pointerX = x; + pointerY = y; + +} + +function onMouseMove( event ) { + + touchInput = false; + + movePointer( event.clientX, event.clientY ); + +} + +function onTouchMove( event ) { + + touchInput = true; + + movePointer( event.touches[0].clientX, event.touches[0].clientY, true ); + + event.preventDefault(); + +} + +function onMouseLeave() { + + pointerX = null; + pointerY = null; + +} + diff --git a/bg.js b/bg.js index c070eb1..7e415d3 100644 --- a/bg.js +++ b/bg.js @@ -16,10 +16,59 @@ let stars = []; let pointerX, pointerY; -let velocity = { x: 0, y: 0, tx: 0, ty: 0, z: 0.0015 }; +let velocity = { x: 0, y: 0, tx: 0, ty: 0, z: 0.2 }; + +let entryTime = 2000 +let cruiseSpeed = 0.01 +let showContentSpeed = 0.02 + +let maincontent = document.getElementsByClassName("content")[0] + +function arrival(){ + + maincontent.style.opacity = 0.0 + + console.log("🚀 - Next Destination: Linux Club ") + + setTimeout(() => { + + console.log("🚀 - Initiating Cruise Mode...") + + let landing = setInterval(() => + { + if(velocity.z >= cruiseSpeed) + { + velocity.z -= 0.01 + + } else { + clearInterval(landing) + console.log("%c🚀 - Cruise Mode Activated! ", "background: rgb(40, 40, 40); color: yellow; font-weight: bold") + + x = showContentSpeed + let showContent = setInterval(() => { + + if(maincontent.style.opacity < 1){ + x += showContentSpeed + maincontent.style.opacity = x.toString() + } else { + clearInterval(showContent) + } + }, 100) + } + }, 125) + + + }, entryTime) + + } + + + let touchInput = false; + +arrival(); generate(); resize(); step(); diff --git a/index.html b/index.html index 7ad012b..672c9f0 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,14 @@ BG NOT SUPPORTED -
+

Linux Club 😎

The superior OS, if you disagree you're wrong 😈




- +