BLOCK CLOCK

Developer
KyleDavidE
Size
4,215 Kb
Views
24,288
  1. BLOCK CLOCK Previews
  2. BLOCK CLOCK HTML Codes
  3. BLOCK CLOCK CSS Codes
  4. BLOCK CLOCK JS Codes

How do I make an block clock?

What is a block clock? How do you make a block clock? This script and codes were developed by KyleDavidE on 11 August 2022, Thursday.

BLOCK CLOCK Previews
IQ Test

BLOCK CLOCK - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>BLOCK CLOCK</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body{ overflow:hidden; margin:0; padding:0;
}
.topt{ position:absolute; top:0; width:100%; left:0; text-align:center; text-shadow:white 0 0 1px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="container"></div>
<div class="topt"> <h2>three.js wave block clock</h2> <b>Drag:</b> orbit <b>Dubble click:</b> toggle numbers <b>Shift + Dubble click:</b> toggle display mode (time or random)
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script> <script src="js/index.js"></script>
</body>
</html>

BLOCK CLOCK - Script Codes CSS Codes

body{ overflow:hidden; margin:0; padding:0;
}
.topt{ position:absolute; top:0; width:100%; left:0; text-align:center; text-shadow:white 0 0 1px;
}

BLOCK CLOCK - Script Codes JS Codes

data = {"0":[[true,true,true,true,true],[true,false,false,false,true],[true,true,true,true,true]],"1":[[true,false,false,false,true],[true,true,true,true,true],[false,false,false,false,true]],"2":[[true,false,true,true,true],[true,false,true,false,true],[true,true,true,false,true]],"3":[[true,false,true,false,true],[true,false,true,false,true],[true,true,true,true,true]],"4":[[true,true,true,false,false],[false,false,true,false,false],[true,true,true,true,true]],"5":[[true,true,true,false,true],[true,false,true,false,true],[true,false,true,true,true]],"6":[[true,true,true,true,true],[true,false,true,false,true],[true,false,true,true,true]],"7":[[true,false,false,false,false],[true,false,false,false,false],[true,true,true,true,true]],"8":[[true,true,true,true,true],[true,false,true,false,true],[true,true,true,true,true]],"9":[[true,true,true,false,true],[true,false,true,false,true],[true,true,true,true,true]],":":[[false,false,false,false,false],[false,true,false,true,false],[false,false,false,false,false]]," ":[[false,false,false,false,false],[false,false,false,false,false],[false,false,false,false,false]]}
giber = false;
function genStr(){ if(!dsp){ return ' '; } if(giber){ return genDiget(8); } var date = new Date(); var out = date.toLocaleTimeString() if(out.length == 10){ out = '0'+out; } var out = out.replace(/ PM/,"").replace(/ AM/,""); if(dsp) return out;
}
function genDiget(num){ var out = ''; for(var i = 0; i<num; i++){ out+=randInt(0,9); } return out;
}
// set the scene size
var WIDTH = innerWidth, HEIGHT = innerHeight;
// set some camera attributes
var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = Infinity;
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer({ antialias:true
});
var camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
var scene = new THREE.Scene();
// add the camera to the scene
scene.add(camera);
// the camera starts at 0,0,0
// so pull it back camera.lookAt( scene.position );
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
// set up the sphere vars
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );	camera.position.z = 500;	controls = new THREE.TrackballControls( camera );	controls.rotateSpeed = 1.0;	controls.zoomSpeed = 1.2;	controls.panSpeed = 0.8;	controls.noZoom = false;	controls.noPan = false;	controls.staticMoving = true;	controls.dynamicDampingFactor = 0.3;	controls.keys = [ 65, 83, 68 ];	controls.addEventListener( 'change', render );
// create a new mesh with
// sphere geometry - we will cover
// the sphereMaterial next!
var ground = new THREE.Mesh( new THREE.PlaneGeometry( 33*50, 8*50, 5, 5 ), new THREE.MeshLambertMaterial( { color :0x00FFFF, wireframe :true }) )
ground.rotation.x = -Math.PI/2; scene.add(ground);
// add the sphere to the scene
bars = [];
flatbars = [];
for(var x = -16; x < 17; x++){ bars[x] = []; for(var z = -4; z < 5; z++){ bars[x][z] = new el(x,z); flatbars = flatbars.concat(bars[x][z]); }
}
function setDisp(c,ox){ if(ox == null) ox = 0; var map = data[c]; for(var x = 0; x<3; x++){ for(var z = 0; z<5; z++){ bars[x+ox][z-2].on = map[x][z]; } }
}
var pointLight = new THREE.PointLight(0xFFFFFF);
// set its position
pointLight.position.x = 1000;
pointLight.position.y = 1000;
pointLight.position.z = 500;
// add to the scene
scene.add(pointLight);
renderer.render(scene, camera);
now = 0;
dsp = true;
function dspR(){ dspStr(genStr())
}
setInterval(dspR,1000);
function rand(a,b){ if(!b){ b = a; a = 0; } return (Math.random() * (b-a))+a;
}
function randInt(a,b){ return Math.round(rand(a,b));
}
function tick(){ controls.update(); for(var i = 0; i < flatbars.length; i++){ flatbars[i].tick(); } renderer.render(scene, camera); requestAnimationFrame(tick);
}
tick();
function bar(x,z){ this.val = 1; this.met = new THREE.MeshLambertMaterial( { color: 0xCC0000 }); this.obj = new THREE.Mesh( new THREE.CubeGeometry( 50, 50, 50), this.met); scene.add(this.obj); this.obj.position.set( x*50, 25, z*50 ); this.set = function(e){ this.val = e; this.obj.scale.y = e; this.obj.position.y = 25*e; }
}
function el(x,z){ this.val = 0; this.x = x; this.z = z; this.mom = 0; this.bar = new bar(x,z); this.tick = function(){ this.val+=this.mom; this.bar.set((this.val+1)*2); this.targs = getAdj(this.x,this.z).map(function(e){ return {val:e.bar.val,str:e.bar.on?e.str*0.5:e.str}; }).concat({val:0,str:5}); if(this.on){ this.targs = this.targs.concat({val:1.5,str:10}); } for(var i = 0; i<this.targs.length; i++){ this.mom+=(this.targs[i].val-this.val)*this.targs[i].str/10000; } this.mom = slow(this.mom,this.mom/50); if(this.on && this.val > 0.75 && this.val < 1.5){ this.mom = slow(this.mom,1); this.val = 0.9 } if(this.val<=-0.9 && this.mom<=0){ this.mom = Math.abs(this.mom); this.mom = 0; } } this.on = false;
}
function slow(a, b) {	var nv = Math.abs(a) - b	if (nv < 0) {	return 0;	}	if (a > 0) {	return nv;	} else {	return -nv;	}
}
function getAdj(x,z){ var out = []; function add(ox,oz,s){ if(bars[x+ox]){ if(bars[x+ox][z+oz]!=null){ out = out.concat({bar:bars[x+ox][z+oz],str:s}); } } } var sr2 = 1/Math.sqrt(2); add(1,0,1); add(-1,0,1); add(0,1,1); add(0,-1,1); add(1,1,sr2); add(-1,1,sr2); add(-1,-1,sr2); add(1,-1,sr2); return out;
}
function render() {	renderer.render( scene, camera );	}
function onWindowResize() {	camera.aspect = window.innerWidth / window.innerHeight;	camera.updateProjectionMatrix();	renderer.setSize( window.innerWidth, window.innerHeight );	controls.handleResize();	render();	}
window.addEventListener( 'resize', onWindowResize, false );
function dspStr(str){ for(var i = 0; i<8; i++){ setDisp(str[i],i*4-15) }
}
$("body").dblclick(function(e){ if(e.shiftKey) giber =!giber; else dsp = !dsp;
})
camera.position.z = 500;
camera.position.x = 0;
camera.position.y = 750;
BLOCK CLOCK - Script Codes
BLOCK CLOCK - Script Codes
Home Page Home
Developer KyleDavidE
Username KyleDavidE
Uploaded August 11, 2022
Rating 3.5
Size 4,215 Kb
Views 24,288
Do you need developer help for BLOCK CLOCK?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

KyleDavidE (KyleDavidE) Script Codes
Name
Stars
Android 4.4 kitkat time picker
A Pen by KyleDavidE
SCSS function graphing
A cube
Abstract shape 3d
A lonely pixel rag
XKCD 1608 Hoverboard zoomable
A Pen by Kyle Ehrlich
Web animations material ripple
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!