diff --git a/dist/index.html b/dist/index.html new file mode 100755 index 0000000..c1da5b1 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,348 @@ + + + + + DiffrentVerse - A Diffrent Metaverse is coming.. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ Welcome to the DiffrentVerse... +

+ + + + + diff --git a/dist/script.js b/dist/script.js new file mode 100755 index 0000000..fc59766 --- /dev/null +++ b/dist/script.js @@ -0,0 +1,155 @@ +var CameraRig = document.getElementById( 'CameraRig' ), CameraLag = 16; +var BaseRotation = [ 16.75, 0, 0 ], CurrentRotation = [ 16.75, 0, 0 ]; +var OffsetX = 0, OffsetY = 0; + +var SunCanvasEl = document.getElementById( 'SunCanvas' ); +var SunCanvas2D = SunCanvasEl.getContext( '2d' ); +var SunCanvasPhase = 0; + +var SkyCanvasEl = document.getElementById( 'SkyCanvas' ); +var SkyCanvas2D = SkyCanvasEl.getContext( '2d' ); + +function PickBetween( min, max ) { + + var min = Math.ceil( min ); + var max = Math.floor( max ); + return Math.floor( Math.random() * ( max - min + 1 ) + min ); + +} + +function InitHillsCanvas() { + + let HillsCanvasEl = document.getElementById( 'HillsCanvas' ); + let HillsCanvas2D = HillsCanvasEl.getContext( '2d' ); + + // Empty... + HillsCanvas2D.fillStyle = 'rgb(0,0,0)'; + HillsCanvas2D.fillRect( 0, 0, 32, 32 ); + + // Mountain Peaks... + for( let _y = 0; _y < 31; _y ++ ) { + for( let _x = 0; _x < 31; _x ++ ) { + + let _z = PickBetween( 0, 255 ); + HillsCanvas2D.fillStyle = 'rgb(' + [ _z, _z, _z ].join(',') + ')'; + HillsCanvas2D.fillRect( _x , _y, 1, 1 ); + + if( !_y ) HillsCanvas2D.fillRect( _x, 31, 1, 1 ); + if( !_x ) HillsCanvas2D.fillRect( 31, _y, 1, 1 ); + if( !_x && !_y ) HillsCanvas2D.fillRect( 31, 31, 1, 1 ); + + } + } + + // Valley... + let HillsGradient = HillsCanvas2D.createLinearGradient( 0, 0, 32, 0 ); + HillsGradient.addColorStop( 0, 'rgba(0,0,0,0.0)' ); + HillsGradient.addColorStop( (1 / 3) * 1, 'rgba(0,0,0,1.0)' ); + HillsGradient.addColorStop( (1 / 3) * 2, 'rgba(0,0,0,1.0)' ); + HillsGradient.addColorStop( 1, 'rgba(0,0,0,0.0)' ); + HillsCanvas2D.fillStyle = HillsGradient; + HillsCanvas2D.fillRect( 0, 0, 32, 32 ); + +} +InitHillsCanvas(); + +function InitGridCanvas() { + + var GridCanvasEl = document.getElementById( 'GridCanvas' ); + var GridCanvas2D = GridCanvasEl.getContext( '2d' ); + + // Draw Base... + var GridGradient = GridCanvas2D.createLinearGradient( 0, 0, 2048, 0 ); + GridGradient.addColorStop( 0.000, 'rgb(0,170,255)' ); + GridGradient.addColorStop( 0.100, 'rgb(0,170,255)' ); + GridGradient.addColorStop( 0.500, 'rgb(255,0,170)' ); + GridGradient.addColorStop( 0.900, 'rgb(0,170,255)' ); + GridGradient.addColorStop( 1.000, 'rgb(0,170,255)' ); + GridCanvas2D.fillStyle = GridGradient; + GridCanvas2D.fillRect( 0, 0, 2048, 2048 ); + + // Draw Squares... + GridCanvas2D.fillStyle = '#000000'; + for( let _y = 0; _y < 32; _y ++ ) { + for( let _x = 0; _x < 32; _x ++ ) { + GridCanvas2D.fillRect( ( _x * 64 ) + 1, ( _y * 64) + 1, 62, 62 ); + } + } + +} +InitGridCanvas(); + +function InitSkyCanvas() { + + // Draw Space... + SkyCanvas2D.fillStyle = '#000000'; + SkyCanvas2D.fillRect( 0, 0, 6400, 3200 ); + + // Draw Stars... + for( let i = 0; i < 1024; i ++ ) { + SkyCanvas2D.beginPath(); + SkyCanvas2D.arc( PickBetween( 0, 6400 ), PickBetween( 0, 1600 ), ( PickBetween( 1, 3 ) / 2 ), 0, 2 * Math.PI ); + SkyCanvas2D.fillStyle = '#FFFFFF'; + SkyCanvas2D.fill(); + } + + // Draw Atmos... + var SkyGradient = SkyCanvas2D.createLinearGradient( 0, 0, 0, 3200 ); + SkyGradient.addColorStop( 0.00, 'rgba(68,0,68,0.0)' ); + SkyGradient.addColorStop( 0.375, 'rgba(68,0,68,0.0)' ); + SkyGradient.addColorStop( 0.5, 'rgba(68,0,68,1.0)' ); + SkyGradient.addColorStop( 1.00, 'rgba(68,0,68,1.0)' ); + SkyCanvas2D.fillStyle = SkyGradient; + SkyCanvas2D.fillRect( 0, 0, 6400, 3200 ); + +} +InitSkyCanvas(); + +function UpdateSunCanvas() { + + // Clear color... + SunCanvas2D.fillStyle = '#440044'; + SunCanvas2D.fillRect( 0, 0, 512, 512 ); + + // Draw lines... + for( let i = 0; i < 32; i ++ ) { + var vSize = 1 * ( i + 1 ); + var vOffset = ( SunCanvasPhase + ( 16 * i ) ) + vSize; + SunCanvas2D.fillStyle = '#FFAA00'; + SunCanvas2D.fillRect( 0, 512 - vOffset, 512, vSize ); + } + SunCanvasPhase += 0.5; + if( SunCanvasPhase > 16 ) SunCanvasPhase -= 16; + +} +UpdateSunCanvas(); + +function UpdateCameraRig() { + + CurrentRotation = [ + CurrentRotation[ 0 ] + ( ( ( BaseRotation[ 0 ] + OffsetY ) - CurrentRotation[ 0 ] ) / CameraLag ), + CurrentRotation[ 1 ] + ( ( ( BaseRotation[ 1 ] + OffsetX ) - CurrentRotation[ 1 ] ) / CameraLag ), + 0, + ]; + CameraRig.setAttribute( 'rotation', CurrentRotation.join( ' ' ) ); + +} +UpdateCameraRig(); + +function AnimationFrame() { + + requestAnimationFrame( AnimationFrame ); + UpdateSunCanvas(); + UpdateCameraRig(); + +} +AnimationFrame(); + +/* INTERACTIVITY */ + +document.addEventListener( 'mousemove', event => { + + OffsetX = ( -0.5 + ( event.clientX / window.innerWidth ) ) * 2; + OffsetY = ( -0.5 + ( event.clientY / window.innerHeight ) ) * 1; + +} ); \ No newline at end of file diff --git a/src/index.html b/src/index.html new file mode 100755 index 0000000..b2f8835 --- /dev/null +++ b/src/index.html @@ -0,0 +1,329 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/script.js b/src/script.js new file mode 100755 index 0000000..497a316 --- /dev/null +++ b/src/script.js @@ -0,0 +1,155 @@ +var CameraRig = document.getElementById( 'CameraRig' ), CameraLag = 16; +var BaseRotation = [ 16.75, 0, 0 ], CurrentRotation = [ 16.75, 0, 0 ]; +var OffsetX = 0, OffsetY = 0; + +var SunCanvasEl = document.getElementById( 'SunCanvas' ); +var SunCanvas2D = SunCanvasEl.getContext( '2d' ); +var SunCanvasPhase = 0; + +var SkyCanvasEl = document.getElementById( 'SkyCanvas' ); +var SkyCanvas2D = SkyCanvasEl.getContext( '2d' ); + +function PickBetween( min, max ) { + + var min = Math.ceil( min ); + var max = Math.floor( max ); + return Math.floor( Math.random() * ( max - min + 1 ) + min ); + +} + +function InitHillsCanvas() { + + let HillsCanvasEl = document.getElementById( 'HillsCanvas' ); + let HillsCanvas2D = HillsCanvasEl.getContext( '2d' ); + + // Empty... + HillsCanvas2D.fillStyle = 'rgb(0,0,0)'; + HillsCanvas2D.fillRect( 0, 0, 32, 32 ); + + // Mountain Peaks... + for( let _y = 0; _y < 31; _y ++ ) { + for( let _x = 0; _x < 31; _x ++ ) { + + let _z = PickBetween( 0, 255 ); + HillsCanvas2D.fillStyle = 'rgb(' + [ _z, _z, _z ].join(',') + ')'; + HillsCanvas2D.fillRect( _x , _y, 1, 1 ); + + if( !_y ) HillsCanvas2D.fillRect( _x, 31, 1, 1 ); + if( !_x ) HillsCanvas2D.fillRect( 31, _y, 1, 1 ); + if( !_x && !_y ) HillsCanvas2D.fillRect( 31, 31, 1, 1 ); + + } + } + + // Valley... + let HillsGradient = HillsCanvas2D.createLinearGradient( 0, 0, 32, 0 ); + HillsGradient.addColorStop( 0, 'rgba(0,0,0,0.0)' ); + HillsGradient.addColorStop( (1 / 3) * 1, 'rgba(0,0,0,1.0)' ); + HillsGradient.addColorStop( (1 / 3) * 2, 'rgba(0,0,0,1.0)' ); + HillsGradient.addColorStop( 1, 'rgba(0,0,0,0.0)' ); + HillsCanvas2D.fillStyle = HillsGradient; + HillsCanvas2D.fillRect( 0, 0, 32, 32 ); + +} +InitHillsCanvas(); + +function InitGridCanvas() { + + var GridCanvasEl = document.getElementById( 'GridCanvas' ); + var GridCanvas2D = GridCanvasEl.getContext( '2d' ); + + // Draw Base... + var GridGradient = GridCanvas2D.createLinearGradient( 0, 0, 2048, 0 ); + GridGradient.addColorStop( 0.000, 'rgb(0,170,255)' ); + GridGradient.addColorStop( 0.100, 'rgb(0,170,255)' ); + GridGradient.addColorStop( 0.500, 'rgb(255,0,170)' ); + GridGradient.addColorStop( 0.900, 'rgb(0,170,255)' ); + GridGradient.addColorStop( 1.000, 'rgb(0,170,255)' ); + GridCanvas2D.fillStyle = GridGradient; + GridCanvas2D.fillRect( 0, 0, 2048, 2048 ); + + // Draw Squares... + GridCanvas2D.fillStyle = '#000000'; + for( let _y = 0; _y < 32; _y ++ ) { + for( let _x = 0; _x < 32; _x ++ ) { + GridCanvas2D.fillRect( ( _x * 64 ) + 1, ( _y * 64) + 1, 62, 62 ); + } + } + +} +InitGridCanvas(); + +function InitSkyCanvas() { + + // Draw Space... + SkyCanvas2D.fillStyle = '#000000'; + SkyCanvas2D.fillRect( 0, 0, 6400, 3200 ); + + // Draw Stars... + for( let i = 0; i < 1024; i ++ ) { + SkyCanvas2D.beginPath(); + SkyCanvas2D.arc( PickBetween( 0, 6400 ), PickBetween( 0, 1600 ), ( PickBetween( 1, 3 ) / 2 ), 0, 2 * Math.PI ); + SkyCanvas2D.fillStyle = '#FFFFFF'; + SkyCanvas2D.fill(); + } + + // Draw Atmos... + var SkyGradient = SkyCanvas2D.createLinearGradient( 0, 0, 0, 3200 ); + SkyGradient.addColorStop( 0.00, 'rgba(68,0,68,0.0)' ); + SkyGradient.addColorStop( 0.375, 'rgba(68,0,68,0.0)' ); + SkyGradient.addColorStop( 0.5, 'rgba(68,0,68,1.0)' ); + SkyGradient.addColorStop( 1.00, 'rgba(68,0,68,1.0)' ); + SkyCanvas2D.fillStyle = SkyGradient; + SkyCanvas2D.fillRect( 0, 0, 6400, 3200 ); + +} +InitSkyCanvas(); + +function UpdateSunCanvas() { + + // Clear color... + SunCanvas2D.fillStyle = '#440044'; + SunCanvas2D.fillRect( 0, 0, 512, 512 ); + + // Draw lines... + for( let i = 0; i < 32; i ++ ) { + var vSize = 1 * ( i + 1 ); + var vOffset = ( SunCanvasPhase + ( 16 * i ) ) + vSize; + SunCanvas2D.fillStyle = '#FFAA00'; + SunCanvas2D.fillRect( 0, 512 - vOffset, 512, vSize ); + } + SunCanvasPhase += 0.5; + if( SunCanvasPhase > 16 ) SunCanvasPhase -= 16; + +} +UpdateSunCanvas(); + +function UpdateCameraRig() { + + CurrentRotation = [ + CurrentRotation[ 0 ] + ( ( ( BaseRotation[ 0 ] + OffsetY ) - CurrentRotation[ 0 ] ) / CameraLag ), + CurrentRotation[ 1 ] + ( ( ( BaseRotation[ 1 ] + OffsetX ) - CurrentRotation[ 1 ] ) / CameraLag ), + 0, + ]; + CameraRig.setAttribute( 'rotation', CurrentRotation.join( ' ' ) ); + +} +UpdateCameraRig(); + +function AnimationFrame() { + + requestAnimationFrame( AnimationFrame ); + UpdateSunCanvas(); + UpdateCameraRig(); + +} +AnimationFrame(); + +/* INTERACTIVITY */ + +document.addEventListener( 'mousemove', event => { + + OffsetX = ( -0.5 + ( event.clientX / window.innerWidth ) ) * 2; + OffsetY = ( -0.5 + ( event.clientY / window.innerHeight ) ) * 1; + +} );