<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%;
}
View Compiled
// --------------------------
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;
This Pen doesn't use any external CSS resources.