merry-christmas.html

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

<link href="https://fonts.googleapis.com/css?family=Mountains+of+Christmas" rel="stylesheet">

<style>
        body {  margin:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;
                background:#161616;color:#c5a880;font-family:"Mountains of christmas";font-size:32px;}
        #title {position:absolute;left:3px;right:3px;text-align:center;display:none;}
        #overlay {text-align:center;display:none;}
        #credit {position:absolute;top:3px;left:3px;right:3px;text-align:center;z-index:9;font-family:sans-serif;font-size:16px;}
        a {display:block}
        a:link {color:#c5a880} a:visited {color:#c5a880}
        #controls {position:absolute;bottom:3px;left:3px;right:3px;text-align:center;font-size:16px;font-size:20px}
        .spc {margin:0 10px}
        .desktop, .desktop-inline, .desktop-flex {display:none}
        .mobile, .mobile-inline, .mobile-flex {display:none}
</style>

<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/CopyShader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
<script src="https://hammerjs.github.io/dist/hammer.js"></script>

<div id=user style=text-align:center>

      <div style='margin-bottom:20px;'>
            <span class=desktop-inline>Click</span>
            <span class=mobile-inline>Tap</span>
            To Start
      </div>
      <div class=desktop style=margin-bottom:40px;'>
            <div>Enter - Play Song Again</div>
            <div>Arrows - Next Song</div>
            <div>Space - Load Song</div>
            <div>Escape - Stop</div>
      </div>
      <div style=font-size:20px>
            <div>music</div>
            <div style=margin-bottom:20px>
                  <a style='font-family:arial;margin-bottom:10px' href='https://trgbanks.bandcamp.com/album/trg-banks-christmas-album'>
                        TRG Banks' Christmas Album : No Room At The Inn
                  </a>
                  <a style='font-family:arial' href='https://dottmusic.bandcamp.com/track/this-christmas'>Dott : This Christmas</a>
            </div>
            
            
            <div>original code</div>
            <div style=margin-bottom:20px>
                  <a style='font-family:arial' href='https://codepen.io/dilums/pen/MWjEqaa'>https://codepen.io/dilums/pen/MWjEqaa</a>
            </div>
            
            <div>reworked</div>
            <div>
                  <a style='font-family:arial' href='https://javascript-2020.github.io/'>javascript-2020.github.io</a>
            </div>
      </div>
      
</div>

<div id=overlay>
      <div style='font-size:22px'>Loading</div>
      <div style=margin-bottom:20px>Please Wait ...</div>
</div>

<div id=title>Merry Christmas</div>

<div id=credit>
  <a href='https://javascript-2020.github.io/'>javascript-2020.github.io</a>
</div>

<div id=controls>
      <div class=desktop-flex style='justify-content:center;'>
            <span>Enter - Play Again / Stop</span>
            <span class=spc></span>
            <span>Arrows - Next Song</span>
            <span class=spc></span>
            <span>Space - Load Song</span>
            <span class=spc></span>
            <span>Escape - Stop</span>
      </div>
      <div class=mobile style='width:100%'>
            <div style='display:flex;justify-content:space-between;'>
                  <div>Tap - Start / Stop</div>
                  <div>Swipe - Next Song</div>
            </div>
            <div>Press - Load Song</div>
      </div>
</div>


<script>


        var hammer;
        
        
        var {PI,sin,cos}    = Math;
        var TAU             = 2*PI;
        
        var scene
        var camera;
        var renderer;
        var analyser;
        var composer;
        var fftSize           = 2048;
        
        
        var step              = 0;
        var timer;
        
        
        var mode              = 'desktop';
        var tree              = {};
        tree.scale            = 1.0;
        
        if(window.matchMedia('(max-width: 800px)').matches){
              mode            = 'mobile';
              document.querySelectorAll('.mobile').forEach(node=>node.style.display           = 'block');
              document.querySelectorAll('.mobile-inline').forEach(node=>node.style.display    = 'inline');
              document.querySelectorAll('.mobile-flex').forEach(node=>node.style.display      = 'flex');
        }else{
              document.querySelectorAll('.desktop').forEach(node=>node.style.display          = 'block');
              document.querySelectorAll('.desktop-inline').forEach(node=>node.style.display   = 'inline');
              document.querySelectorAll('.desktop-flex').forEach(node=>node.style.display     = 'flex');
        }
        
        
        
        var uniforms          = {
                                      time          : {type:'f',value:0.0},
                                      step          : {type:'f',value:0.0},
                                      tAudioData    : {value:null},
                                      
                                      test          : {type:'f',value:tree.scale},
                                };
        var params            = {
                                      exposure          : 1,
                                      bloomStrength     : 0.9,
                                      bloomThreshold    : 0,
                                      bloomRadius       : 0.5,
                                };
                                
        var listener          = new THREE.AudioListener();
        var audio             = new THREE.Audio(listener);
        var index             = 0;
        var loading;
        
        
        var files   = [
              'https://javascript-2020.github.io/storage/audio/TRG_Banks_-_12_-_No_room_at_the_inn.mp3',
              'https://javascript-2020.github.io/storage/audio/Dott_-_01_-_This_Christmas.mp3',
              //"https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/TRG_Banks/TRG_Banks_Christmas_Album/TRG_Banks_-_12_-_No_room_at_the_inn.mp3",
              //"https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Dott/This_Christmas/Dott_-_01_-_This_Christmas.mp3",
        ];
        
        var sprites   = [
              'https://javascript-2020.github.io/storage/images/snowflake1.png',
              'https://javascript-2020.github.io/storage/images/snowflake2.png',
              'https://javascript-2020.github.io/storage/images/snowflake3.png',
              'https://javascript-2020.github.io/storage/images/snowflake4.png',
              'https://javascript-2020.github.io/storage/images/snowflake5.png',
        ];
        
        var spark   = 'https://javascript-2020.github.io/storage/images/spark1.png';
        
        
        window.onresize         = resize;
        var overlay           = document.getElementById("overlay");
        
        document.querySelectorAll('a').forEach(a=>{
        
              a.onclick                 = e=>e.stopPropagation();
              
        });
        
        
        
        var fn                  = {};
        
        
  //:
  
        user_start();
        
        function user_start(){
        
              document.onclick          = ready;
              document.onkeydown        = ready;
              
        }//user_start
        
        function ready(){
        
              document.onpointerdown    = null;
              document.onkeydown        = keydown;
              
              if(mode=='mobile'){
                    hammer              = new Hammer(document.body);
                    hammer.on('panleft panright tap press',touch);
              }
              
              user.remove();
              overlay.style.display   = 'block';
              loadAudio();
              
        }//ready
        
        function next(){
        
              if(index===null)return;
              index++;
              if(index==files.length){
                    index   = 0;
              }
              loadAudio();
              
        }//next
        
        function loadAudio(){
        
              loading       = true;
              var file      = files[index];
              var loader    = new THREE.AudioLoader();
              loader.load(file,audioReady);
              
        }//loadAudio
        
        
        function uploadAudio(){
        
              var input         = document.createElement('input');
              input.type        = 'file';
              input.onchange    = onchange;
              input.click();
              
              async function onchange(){
              
                    index         = null;
                    var buffer    = await input.files[0].arrayBuffer();
                    loading       = true;
                    listener.context.decodeAudioData(buffer,audioReady);
                    
              }//click
              
        }//uploadAudio
        
        
        function audioReady(buffer){
        
              hide();
              loading   = false;
              if(audio.isPlaying){
                    audio.stop();
              }
              
              audio.setBuffer(buffer);
              audio.play();
              
              if(!analyser){
                    analyser    = new THREE.AudioAnalyser(audio,fftSize);
              }
              
              if(!timer){
                    start();
              }
              
        }//audioReady
        
  //:
  
        function start() {
        
              var winw                    = window.innerWidth;
              var winh                    = window.innerHeight;
              var pr                      = window.devicePixelRatio;
              
              scene                       = new THREE.Scene();
              
              renderer                    = new THREE.WebGLRenderer({antialias:true});
              renderer.setPixelRatio(pr);
              renderer.setSize(winw,winh);
              
              document.body.appendChild(renderer.domElement);
              
              var ar                      = winw/winh;
              camera                      = new THREE.PerspectiveCamera(60,ar,1,1000);
              camera.position.set(-0.09397456774197047,-2.5597086635726947,24.420789670889008)
              camera.rotation.set(0.10443543723052419,-0.003827152981119352,0.0004011488708739715)
              
              const format                = renderer.capabilities.isWebGL2 ? THREE.RedFormat : THREE.LuminanceFormat;
              var value                   = new THREE.DataTexture(analyser.data,fftSize/2,1,format);
              uniforms.tAudioData         = {value}
              
              var vec                     = new THREE.Vector2(winw,winh);
              const bloomPass             = new THREE.UnrealBloomPass(vec,1.5,0.4,0.85);
              bloomPass.threshold         = params.bloomThreshold;
              bloomPass.strength          = params.bloomStrength;
              bloomPass.radius            = params.bloomRadius;
              
              const renderScene           = new THREE.RenderPass(scene,camera);
              composer                    = new THREE.EffectComposer(renderer);
              composer.addPass(renderScene);
              composer.addPass(bloomPass);
              
              
              addPlane();
              addSnow();
              addTrees();
              
              if(!timer){
                    animate();
              }
              
        }//start
        
  //:
  
        function animate(time){
        
              if(!audio.isPlaying){
                    uniforms.test.value   = 0.06;
              }else{
                    uniforms.test.value   = 0.0;
              }
              
              analyser.getFrequencyData();
              uniforms.tAudioData.value.needsUpdate   = true;
              
              step                                    = (step+1)%1000;
              uniforms.time.value                     = time;
              uniforms.step.value                     = step;
              
              composer.render();
              
              timer   = requestAnimationFrame(animate);
              
        }//animate
        
        
        function resize(){
        
              if(!camera)return;
              
              var width       = window.innerWidth;
              var height      = window.innerHeight;
              
              camera.aspect   = width/height;
              camera.updateProjectionMatrix();
              
              renderer.setSize(width,height);
              composer.setSize(width,height);
              
        }//resize
        
  //:
  
        function addTrees(){
        
              //vertex:-
              const vertexShader    = `
              
                    attribute float mIndex;
                    
                    varying vec3 vColor;
                    varying float opacity;
                    
                    uniform sampler2D tAudioData;
                    uniform float test;
                    
                    float norm(float value,float min,float max){
                    
                          return (value-min)/(max-min);
                          
                    }//norm
                    
                    float lerp(float norm,float min,float max){
                    
                          return (max-min)*norm+min;
                          
                    }//lerp
                    
                    float map(float value,float sourceMin,float sourceMax,float destMin,float destMax){
                    
                          return lerp(norm(value,sourceMin,sourceMax),destMin,destMax);
                          
                    }//map
                    
                    
                    void main(){
                    
                            vColor                    = color;
                            vec3 p                    = position;
                            
                            vec4 mvPosition           = modelViewMatrix*vec4(p,1.0);
                            opacity                   = map(mvPosition.z,-200.0,15.0,0.0,1.0);
                            
                            float amplitude           = texture2D(tAudioData,vec2(mIndex,0.1)).r;
                            float amplitudeClamped    = clamp(amplitude-0.4,test,0.6);
                            float sizeMapped          = map(amplitudeClamped,0.0,0.6,1.0,20.0);
                            
                            gl_PointSize              = sizeMapped*(100.0/-mvPosition.z);
                            gl_Position               = projectionMatrix*mvPosition;
                            
                    }//main
                    
              `;
              
              //frag:-
              const fragmentShader = `
              
                    varying vec3 vColor;
                    varying float opacity;
                    
                    uniform sampler2D pointTexture;
                    
                    
                    void main() {
                    
                          gl_FragColor    = vec4(vColor,opacity);
                          gl_FragColor    = gl_FragColor*texture2D(pointTexture,gl_PointCoord);
                          
                    }//main
                    
              `;
              
              range(10).map(i=>{
              
                    create({x:20,y:0,z:-20*i});
                    create({x:-20,y:0,z:-20*i});
                    
              });
              
              function create(pos){
              
                    var value               = new THREE.TextureLoader().load(spark);
                    var pointTexture        = {value};
                    const shaderMaterial    = new THREE.ShaderMaterial({
                          vertexShader,
                          fragmentShader,
                          uniforms        : {...uniforms,pointTexture},
                          blending        : THREE.AdditiveBlending,
                          depthTest       : false,
                          transparent     : true,
                          vertexColors    : true,
                    });
                    
                    
                    var totalPoints   = 4000;
                    var positions     = [];
                    var colors        = [];
                    var sizes         = [];
                    var phases        = [];
                    var mIndexs       = [];
                    var color         = new THREE.Color();
                    
                    for(let i=0;i<totalPoints;i++){
                    
                          const t       = Math.random();
                          const y       = map(t,0,1,-8,10);
                          const ang     = map(t,0,1,0,6*TAU)+(TAU/2)*(i%2);
                          const [z,x]   = polar(ang,map(t,0,1,5,0));
                          
                          const modifier    = map(t,0,1,1,0);
                          positions.push(x+rand(-0.3*modifier,0.3*modifier));
                          positions.push(y+rand(-0.3*modifier,0.3*modifier));
                          positions.push(z+rand(-0.3*modifier,0.3*modifier));
                          
                          color.setHSL(map(i,0,totalPoints,1.0,0.0),1.0,0.5);
                          
                          colors.push(color.r,color.g,color.b);
                          phases.push(rand(1000));
                          sizes.push(1);
                          const mIndex    = map(i,0,totalPoints,1.0,0.0);
                          mIndexs.push(mIndex);
                          
                    }//for
                    
                    
                    const geometry    = new THREE.BufferGeometry();
                    var attr;
                    
                    attr    = new THREE.Float32BufferAttribute(positions,3).setUsage(THREE.DynamicDrawUsage);
                    geometry.setAttribute('position',attr);
                    
                    attr    = new THREE.Float32BufferAttribute(colors,3);
                    geometry.setAttribute('color',attr);
                    
                    attr    = new THREE.Float32BufferAttribute(sizes,1);
                    geometry.setAttribute('size',attr);
                    
                    attr    = new THREE.Float32BufferAttribute(phases,1);
                    geometry.setAttribute('phase',attr);
                    
                    attr    = new THREE.Float32BufferAttribute(mIndexs,1);
                    geometry.setAttribute('mIndex',attr);
                    
                    const tree            = new THREE.Points(geometry,shaderMaterial);
                    tree.position.x       = pos.x;
                    tree.position.y       = pos.y;
                    tree.position.z       = pos.z;
                    
                    scene.add(tree);
                    
              }//create
              
        }//addTree
        
        
        function addSnow(){
        
              //vertex:-
              const vertexShader    = `
              
                    attribute float size;
                    attribute float phase;
                    attribute float phaseSecondary;
                    
                    varying vec3 vColor;
                    varying float opacity;
                    
                    uniform float time;
                    uniform float step;
                    
                    
                    float norm(float value,float min,float max){
                    
                          return (value-min)/(max-min);
                          
                    }//norm
                    
                    float lerp(float norm,float min,float max){
                    
                            return (max-min)*norm+min;
                            
                    }//lerp
                    
                    float map(float value,float sourceMin,float sourceMax,float destMin,float destMax){
                    
                          return lerp(norm(value,sourceMin,sourceMax),destMin,destMax);
                          
                    }//map
                    
                    
                    void main() {
                    
                        float t           = time*0.0006;
                        
                        vColor            = color;
                        
                        vec3 p            = position;
                        p.y               = map(mod(phase+step,1000.0),0.0,1000.0,25.0,-8.0);
                        p.x              += sin(t+phase);
                        p.z              += sin(t+phaseSecondary);
                        
                        opacity           = map(p.z,-150.0,15.0,0.0,1.0);
                        vec4 mvPosition   = modelViewMatrix*vec4(p,1.0);
                        gl_PointSize      = size*(100.0/-mvPosition.z);
                        gl_Position       = projectionMatrix*mvPosition;
                        
                    }//main
                    
              `;
              
              //frag:-
              const fragmentShader    = `
              
                    uniform sampler2D pointTexture;
                    
                    varying vec3 vColor;
                    varying float opacity;
                    
                    
                    void main() {
                    
                          gl_FragColor    = vec4(vColor,opacity);
                          gl_FragColor    = gl_FragColor*texture2D(pointTexture,gl_PointCoord);
                          
                    }//main
                    
              `;
              
              
              sprites.forEach(create);
              
              function create(sprite){
              
                    var totalPoints       = 300;
                    
                    var value               = new THREE.TextureLoader().load(sprite);
                    var pointTexture        = {value};
                    const shaderMaterial    = new THREE.ShaderMaterial({
                          vertexShader,
                          fragmentShader,
                          uniforms        : {...uniforms,pointTexture},
                          blending        : THREE.AdditiveBlending,
                          depthTest       : false,
                          transparent     : true,
                          vertexColors    : true,
                    });
                    
                    
                    var positions           = [];
                    var colors              = [];
                    var sizes               = [];
                    var phases              = [];
                    var phaseSecondaries    = [];
                    var color               = new THREE.Color();
                    
                    for(let i=0;i<totalPoints;i++){
                    
                          var x   = rand(25,-25);
                          var y   = 0;
                          var z   = rand(15,-150);
                          positions.push(x,y,z);
                          
                          color.set(randChoise(["#f1d4d4","#f1f6f9","#eeeeee","#f1f1e8"]));
                          colors.push(color.r,color.g,color.b);
                          
                          phases.push(rand(1000));
                          phaseSecondaries.push(rand(1000));
                          
                          sizes.push(rand(4,2));
                          
                    }//for
                    
                    
                    var geometry    = new THREE.BufferGeometry();
                    var attr;
                    
                    attr    = new THREE.Float32BufferAttribute(positions,3);
                    geometry.setAttribute('position',attr);
                    
                    attr    = new THREE.Float32BufferAttribute(colors,3);
                    geometry.setAttribute('color',attr);
                    
                    attr    = new THREE.Float32BufferAttribute(sizes,1);
                    geometry.setAttribute('size',attr);
                    
                    attr    = new THREE.Float32BufferAttribute(phases,1);
                    geometry.setAttribute('phase',attr);
                    
                    attr    = new THREE.Float32BufferAttribute(phaseSecondaries,1);
                    geometry.setAttribute('phaseSecondary',attr);
                    
                    
                    const mesh    = new THREE.Points(geometry,shaderMaterial);
                    scene.add(mesh);
                    
              }//createSnowSet
              
        }//addSnow
        
        
        function addPlane(){
        
              //vertex:-
              const vertexShader = `
              
                    attribute float size;
                    attribute vec3 customColor;
                    
                    varying vec3 vColor;
                    
                    
                    void main() {
                    
                        vColor            = customColor;
                        
                        vec4 mvPosition   = modelViewMatrix*vec4(position,1.0);
                        
                        gl_PointSize      = size*(300.0/-mvPosition.z);
                        gl_Position       = projectionMatrix*mvPosition;
                        
                    }//main
                    
              `;
              
              //frag:-
              const fragmentShader = `
              
                    uniform vec3 color;
                    uniform sampler2D pointTexture;
                    
                    varying vec3 vColor;
                    
                    
                    void main() {
                    
                        gl_FragColor    = vec4(vColor,1.0);
                        gl_FragColor    = gl_FragColor*texture2D(pointTexture,gl_PointCoord);
                        
                    }//main
                    
              `;
              
              var value               = new THREE.TextureLoader().load(spark);
              var pointTexture        = {value};
              const shaderMaterial    = new THREE.ShaderMaterial({
                    vertexShader,
                    fragmentShader,
                    uniforms        : {...uniforms,pointTexture},
                    blending        : THREE.AdditiveBlending,
                    depthTest       : false,
                    transparent     : true,
                    vertexColors    : true,
              });
              
              
              var totalPoints   = 5000;
              const positions   = [];
              const colors      = [];
              const sizes       = [];
              const color       = new THREE.Color();
              
              for(let i=0;i<totalPoints;i++){
              
                    const [x,y,z]   = [rand(-25,25),0,rand(-150,15)];
                    positions.push(x);
                    positions.push(y);
                    positions.push(z);
                    
                    color.set(randChoise(["#93abd3","#f2f4c0","#9ddfd3"]));
                    colors.push(color.r,color.g,color.b);
                    
                    sizes.push(1);
                    
              }//for
              
              
              const geometry    = new THREE.BufferGeometry();
              var attr;
              
              attr    = new THREE.Float32BufferAttribute(positions,3).setUsage(THREE.DynamicDrawUsage)
              geometry.setAttribute("position",attr);
              
              attr    = new THREE.Float32BufferAttribute(colors,3);
              geometry.setAttribute("customColor",attr);
              
              attr    = new THREE.Float32BufferAttribute(sizes, 1);
              geometry.setAttribute("size",attr);
              
              
              const plane         = new THREE.Points(geometry,shaderMaterial);
              plane.position.y    = -8;
              
              scene.add(plane);
              
        }//addPlane
        
  //:
  
        function map(value,sMin,sMax,dMin,dMax){return dMin+((value-sMin)/(sMax-sMin))*(dMax-dMin)}
        
        function range(n,m=0){return Array(n).fill(m).map((i,j)=>i+j)}
        
        function rand(max,min=0){return min+Math.random()*(max-min)}
        
        function randInt(max,min=0){return Math.floor(min+Math.random()*(max-min))}
        
        function randChoise(arr){return arr[randInt(arr.length)]}
        
        function polar(ang,r=1){return [r*cos(ang),r*sin(ang)]}
        
        function show(msg){overlay.innerHTML    = '<div>Please Wait...</div>'}
        function hide(){overlay.replaceChildren();title.style.display='block';}
        
  //:
  
        touch.time    = 0;
        function touch(e){
        
              var now   = Date.now();
              if(now-touch.time<500){
                    return;
              }
              touch.time    = now;
              
              switch(e.type){
              
                case 'tap'        : fn.toggle();      break;
                case 'press'      : fn.upload();      break;
                case 'panleft'    : fn.next();        break;
                case 'panright'   : fn.next();        break;
                
              }//switch
              
        }//touch
        
        function keydown(e){
        
              if(e.key=='Enter'){
                    fn.toggle();
              }
              if(e.key=='ArrowLeft' || e.key=='ArrowRight'){
                    fn.next();
              }
              if(e.key==' '){
                    fn.upload();
              }
              if(e.key=='Escape'){
                    fn.stop();
              }
              
        }//keydown
        
        fn.toggle=function(){
        
              if(!audio)return;
              if(audio.isPlaying){
                    fn.stop();
              }else{
                    fn.play();
              }
              
        }//toggle
        
        fn.play=function(){
        
              if(!audio.isPlaying && !loading){
                    loadAudio();
              }
              
        }//enter
        
        fn.next=function(){
        
              if(audio.isPlaying){
                    audio.stop();
              }
              next();
              
        }//next
        
        fn.stop=function(){
        
              audio.stop();
              
        }//stop
        
        fn.upload=function(){
        
              if(!loading){
                    uploadAudio();
              }
              
        }//upload
        
</script>