<script id="vertexShader" type="x-shader/x-vertex">
            varying vec2 vUv;

			void main()	{
			    vUv = uv;

				gl_Position = vec4( position, 1.0 );

			}

		</script>

    <script id="fragmentShader" type="x-shader/x-fragment">
            varying vec2 vUv;
			uniform vec2 resolution;
			uniform float time;
			uniform sampler2D canvasSource;

			void main()	{

                vec2 sp = gl_FragCoord.xy / resolution.xy - vec2(0.5, 0.5);

                float col = texture2D(canvasSource, vUv).r;
                //vec2 sp = vec2(texture2D(canvasSource, gl_FragCoord).r, texture2D(canvasSource, gl_FragCoord).g);
                vec2 p = (0.8 * 0.8 *sp) * 12.0 - vec2(0.0);
                vec2 i = p;
                float c = 1.0;

                float inten = 1.1;

                for(int n = 0; n < 18; n++){
                    float t = time * (1.0 - (3.0 / float(n + 7)));
                    i = p + vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x));
		            c += 11.0/length(vec2(p.x / (sin(i.x+t)/inten),p.y / (cos(i.y+t)/inten)));
                }

                c /= float(20);
                c = 1.8 - sqrt(c);
                //c *= .18;


                gl_FragColor = vec4(vec3(c*c*col) , 1.0) * vec4(0.0, 0.5, 0.9, 1.0);
			}

		</script>
      
      <canvas id="c"></canvas>

@import "compass/css3";

@import "compass/reset";
@import "compass/css3";

body{
  overflow: hidden;
}

canvas{
  width: 100%;
  height: 100%;
}

// --------------------------

var width, height, prevTime;
var velArr;
var xPosArr;

                                                                                                                                                                                                                                                                                                                                                                                                                                     var isText = false;

var totalWidth = 0;
var canvas = document.getElementById('c');

var canvasTexture;
var textureCanvas = document.createElement("canvas");
textureCanvas.width = window.innerWidth;
textureCanvas.height = window.innerHeight;
var textureCtx    = textureCanvas.getContext("2d");

var camera, scene, renderer;
var uniforms;

width = window.innerWidth;
height = window.innerHeight;

canvas.width  = width;
canvas.height = height;

var col = {bl: 100};
var tl = new TimelineLite();
tl.to( col, 2, {bl: 200, onComplete: onComplete1});

function onComplete1(){
    tl.to( col, 2, {bl: 100, onComplete: onComplete2, delay:.5});
}

function onComplete2(){
    tl.to( col, 2, {bl: 200, onComplete: onComplete1, delay:.5});
}


// ================

// ================

init();
loop();

function init(){

    setCanvasTexture();
    setText();

    camera = new THREE.Camera();
    camera.position.z = 1;

    scene = new THREE.Scene();

    var geometry = new THREE.PlaneGeometry( 2, 2 );

    uniforms = {
        canvasSource : {type: 't', value: canvasTexture},
        time : {type: "f", value: 1.0},
        resolution : { type: "v2", value: new THREE.Vector2() }
    };

    var material = new THREE.ShaderMaterial({
        uniforms : uniforms,
        vertexShader: document.getElementById( 'vertexShader' ).textContent,
        fragmentShader: document.getElementById( 'fragmentShader' ).textContent
    });

    var mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer({canvas: canvas});
    uniforms.resolution.value.x = window.innerWidth;
    uniforms.resolution.value.y = window.innerHeight;

    renderer.setSize( window.innerWidth, window.innerHeight );



}

function loop(){
    uniforms.time.value += 0.05;
    setText();

    renderer.render( scene, camera );

    requestAnimationFrame(loop);
}

function setText(){

    textureCtx.fillStyle = "#fff";
    textureCtx.fillRect( 0, 0, width, height );

    /*
     yoCtx.fillStyle = "#000000";
     yoCtx.fillRect(width/4, height/4, width/2, height/4);
     */
    var date = new Date();
    var curHour = date.getHours();
    var curHourStr = curHour < 10 ? "0" + curHour : curHour;
    var curMin = date.getMinutes();
    var curMinStr = curMin <10 ? "0" + curMin : curMin;
    var curSec = date.getSeconds();
    var curSecStr = curSec < 10 ? "0" + curSec : curSec;
    var curTime = curHourStr + ":" + curMinStr + ":" + curSecStr;

    var textLeft;
    var textTop;
    var xPos, yPos;
    textureCtx.font = "Bold 80px Helvetica";

    var textWidth = textureCtx.measureText(curTime);
    var textExtraWidth = textWidth.width * 1.2;

    var extraHeight = 80 ;

    if(!velArr){
        velArr = [];
        for(var yy = 0; yy < height/extraHeight + 1; yy++){
            velArr[yy] = -Math.random()  - .5;
        }

        xPosArr = [];


        for(var yy = 0; yy < height/extraHeight + 1; yy++){
            xPosArr[yy] = [];
            for(var xx = 0; xx < width / textExtraWidth + 2; xx++){
                xPos = textExtraWidth * xx + Math.random()*10 - 5 + velArr[yy];
                xPosArr[yy][xx] = xPos;

            }
        }

        totalWidth += parseInt(width / textExtraWidth + 3) * textExtraWidth;
    }

    var colNum = parseInt(col.bl)
    var colRgb = "rgb(" + colNum + ", " + colNum + ", " + colNum + ")";
    textureCtx.fillStyle = colRgb;

    for(var yy = 0; yy < height/extraHeight + 1; yy++){

        for(var xx = 0; xx < width / textExtraWidth + 2; xx++){


            textureCtx.font = "Bold 80px Helvetica";

            xPosArr[yy][xx] += velArr[yy];
            if(xPosArr[yy][xx] < -textExtraWidth) xPosArr[yy][xx] += totalWidth;

            yPos = extraHeight * yy ;

            //var fontNum = parseInt(75 + 10 *Math.random());

            //yoCtx.font = "Bold 80px Arial";
            textureCtx.save();
            textureCtx.translate(xPosArr[yy][xx], yPos);


            textureCtx.fillText(curTime,0,0);
            textureCtx.restore();
        }

    }


    if(canvasTexture) canvasTexture.needsUpdate = true;
}

function setCanvasTexture(){
    canvasTexture = new THREE.Texture(textureCanvas);

    canvasTexture.magFilter = THREE.NearestFilter;
    canvasTexture.needsUpdate = true;
}

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;