<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<div id="container"></div>
<div id="info"><a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank">HARUN PEHLİVAN</a> IDENTIFICATION <a href="https://youtu.be/GTT5cH-mEZA" target="_blank">info</a>.</div>
<div id="menu">
<button id="table">TABLE</button>
<button id="sphere">SPHERE</button>
<button id="helix">HELIX</button>
<button id="grid">GRID</button>
</div>
html,
body {
height: 100%;
}
body {
background: #93cede;
background: #93cede;
background: -moz-linear-gradient(top, #93cede 0%, #014659 20%, #014659 80%, #014659 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #93cede), color-stop(20%, #014659), color-stop(80%, #014659), color-stop(100%, #014659));
background: -webkit-linear-gradient(top, #93cede 0%, #014659 20%, #014659 80%, #014659 100%);
background: -o-linear-gradient(top, #93cede 0%, #014659 20%, #014659 80%, #014659 100%);
background: -ms-linear-gradient(top, #93cede 0%, #014659 20%, #014659 80%, #014659 100%);
background: linear-gradient(to bottom, #93cede 0%, #014659 20%, #014659 80%, #014659 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#014659', GradientType=0 );
margin: 0;
font-family: Helvetica, sans-serif;
;
overflow: hidden;
}
a {
color: #ffffff;
}
.details img {
max-width:100px;
}
.details img:hover {
max-width:110px;
}
#info {
position: absolute;
width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
font-weight: bold;
text-align: center;
z-index: 1;
}
#menu {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
.element {
width: 120px;
height: 160px;
box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.5);
border: 1px solid rgba(127, 255, 255, 0.25);
text-align: center;
cursor: default;
}
.element:hover {
box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.75);
border: 1px solid rgba(127, 255, 255, 0.75);
}
.element .number {
position: absolute;
top: 20px;
right: 20px;
font-size: 12px;
color: rgba(127, 255, 255, 0.75);
}
.element .symbol {
position: absolute;
top: 40px;
left: 0px;
right: 0px;
font-size: 60px;
font-weight: bold;
color: rgba(255, 255, 255, 0.75);
text-shadow: 0 0 10px rgba(0, 255, 255, 0.95);
}
.element .details {
position: absolute;
bottom: 15px;
left: 0px;
right: 0px;
font-size: 12px;
color: rgba(127, 255, 255, 0.75);
}
button {
color: rgba(127, 255, 255, 0.75);
background: transparent;
outline: 1px solid rgba(127, 255, 255, 0.75);
border: 0px;
padding: 5px 10px;
cursor: pointer;
}
button:hover {
background-color: rgba(0, 255, 255, 0.5);
}
button:active {
color: #000000;
background-color: rgba(0, 255, 255, 0.75);
}
var table = [
"<div class='miniatura'><img src='https://tebm.files.wordpress.com/2017/07/cropped-arge-proje-egitim-esnasc4b1nda-hallerim-1.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/arge-proje-egitim-esnasc4b1nda-hallerim-3.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/arge-proje-egitim-esnasc4b1nda-hallerim-2.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/arge-proje-egitim-esnasc4b1nda-hallerim-5.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/31-01-2016-122.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/20289945_1791855147727760_308806406_n.png'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/20273515_1791292961117312_1965864001_o.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/valiziyaretb.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/image-aspx.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/image-aspx1.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/image-aspx11.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/image-aspx123.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/image-aspx141.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/image-aspx11234.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/23192653_1828305584082716_1234080497_n.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/evim.png?w=1000'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/cimg6136.jpg?w=663&h=497'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/cimg6149.jpg?w=329&h=247'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/cimg6216.jpg?w=329&h=246'></div>","<div <img src='https://aboutme.imgix.net/background/users/h/a/r/harun.pehlivan_1511592423_808.jpg?q=40&dpr=2&auto=format&fit=max&w=620&h=413.3333333333333&rect=255,0,2754,1836'></div>","<div class='miniatura'><img src='http://images.ticiz.com/1992285_w640_h640_original23574925460.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/1992300_w640_h640_mcode1.png'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2079304_w640_h640_150720151.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2294889_w640_h640_7_01_2016_1.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2294890_w640_h640_10.04.2016_1.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2294891_w640_h640_14_01_2016_1.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2294893_w640_h640_16_12_2015_1.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2294896_w640_h640_17_01_2016_1.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2294897_w640_h640_21_12_2015_1.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2294899_w640_h640_24_06_2015_1.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2568568_w640_h640_26.06.2016_111.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2568569_w640_h640_180420131739.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2568572_w640_h640_7206288415170581290232932o.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2568574_w640_h640_111020142352112.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2568575_w640_h640_090620131818.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2568571_w640_h640_6384667897295418557963421n.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2612545_w640_h640_calisiyoruz.png'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2754831_w640_h640_kiminno.png'></div>","<div class='miniatura'><img src='https://i.ytimg.com/vi/J6xV9Wy3tug/hqdefault.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2754832_w640_h640_res.php.png'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2603272_w640_h640_index.png'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2528084_w640_h640_blrokrkdpuijo1rclkxno51280.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2528083_w640_h640_blrokrkdpuijo1rclkxno81280.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2528081_w640_h640_blrokrkdpuijo1rclkxno61280.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2528080_w640_h640_blrokrkdpuijo1rclkxno41280.jpg'></div>","<div class='miniatura'><img src='http://images.ticiz.com/2528078_w640_h640_blrokrkdpuijo1rclkxno21280.jpg'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/cimg6113.jpg?w=496&h=661'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2010/02/cimg6109.jpg?w=496&h=661'></div>","<div class='miniatura'><img src='http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1518990802'></div>","<div class='miniatura'><img src='https://tebm.files.wordpress.com/2017/07/cropped-gravatartebm-qr.png'>class='miniatura'></div>", ];
table=table.concat(table);
table=table.concat(table);
table=table.concat(table);
table=table.concat(table);
var camera, scene, renderer;
var controls;
var objects = [];
var targets = {
table: [],
sphere: [],
helix: [],
grid: []
};
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 3000;
scene = new THREE.Scene();
// table
for (var i = 0; i < table.length; i += 5) {
var element = document.createElement('div');
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';
var number = document.createElement('div');
number.className = 'number';
number.textContent = (i / 5) + 1;
element.appendChild(number);
var symbol = document.createElement('div');
symbol.className = 'symbol';
symbol.textContent = " ";
element.appendChild(symbol);
var details = document.createElement('div');
details.className = 'details';
details.innerHTML = table[i];
//details.innerHTML = table[i + 1] + '<br>' + table[i + 2];
//details.innerHTML = '<img id="mini-personal-avatar" src="//gravatar.com/avatar/40fef7485ed67ab05fbc756242a64e09?s=80&d=https://codepen.io/assets/avatars/user-avatar-80x80-94696e1c3870f64217a8040eedd4a1ed.png" width="44" height="44" class="user-avatar" alt="User Gravatar" data-dropdown="#user-dropdown">';
element.appendChild(details);
var object = new THREE.CSS3DObject(element);
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
scene.add(object);
objects.push(object);
//
var object = new THREE.Object3D();
// object.position.x = ((i%5) * 14) - 1330;
// object.position.y = -((i%5) * 1) + 990;
// object.position.x = (table[i + 3] * 140) - 1330;
// object.position.y = -(table[i + 4] * 180) + 990;
targets.table.push(object);
}
// sphere
var vector = new THREE.Vector3();
for (var i = 0, l = objects.length; i < l; i++) {
var phi = Math.acos(-1 + (2 * i) / l);
var theta = Math.sqrt(l * Math.PI) * phi;
var object = new THREE.Object3D();
object.position.x = 800 * Math.cos(theta) * Math.sin(phi);
object.position.y = 800 * Math.sin(theta) * Math.sin(phi);
object.position.z = 800 * Math.cos(phi);
vector.copy(object.position).multiplyScalar(2);
object.lookAt(vector);
targets.sphere.push(object);
}
// helix
var vector = new THREE.Vector3();
for (var i = 0, l = objects.length; i < l; i++) {
var phi = i * 0.175 + Math.PI;
var object = new THREE.Object3D();
object.position.x = 900 * Math.sin(phi);
object.position.y = -(i * 8) + 450;
object.position.z = 900 * Math.cos(phi);
vector.x = object.position.x * 2;
vector.y = object.position.y;
vector.z = object.position.z * 2;
object.lookAt(vector);
targets.helix.push(object);
}
// grid
for (var i = 0; i < objects.length; i++) {
var object = new THREE.Object3D();
object.position.x = ((i % 5) * 400) - 800;
object.position.y = (-(Math.floor(i / 5) % 5) * 400) + 800;
object.position.z = (Math.floor(i / 25)) * 1000 - 2000;
targets.grid.push(object);
}
//
renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.domElement.style.position = 'absolute';
document.getElementById('container').appendChild(renderer.domElement);
//
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 0.5;
controls.minDistance = 500;
controls.maxDistance = 6000;
controls.addEventListener('change', render);
var button = document.getElementById('table');
button.addEventListener('click', function(event) {
transform(targets.table, 2000);
}, false);
var button = document.getElementById('sphere');
button.addEventListener('click', function(event) {
transform(targets.sphere, 2000);
}, false);
var button = document.getElementById('helix');
button.addEventListener('click', function(event) {
transform(targets.helix, 2000);
}, false);
var button = document.getElementById('grid');
button.addEventListener('click', function(event) {
transform(targets.grid, 2000);
}, false);
transform(targets.sphere, 2000);
//
window.addEventListener('resize', onWindowResize, false);
}
function transform(targets, duration) {
TWEEN.removeAll();
for (var i = 0; i < objects.length; i++) {
var object = objects[i];
var target = targets[i];
new TWEEN.Tween(object.position)
.to({
x: target.position.x,
y: target.position.y,
z: target.position.z
}, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
new TWEEN.Tween(object.rotation)
.to({
x: target.rotation.x,
y: target.rotation.y,
z: target.rotation.z
}, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
}
new TWEEN.Tween(this)
.to({}, duration * 2)
.onUpdate(render)
.start();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
controls.update();
}
function render() {
renderer.render(scene, camera);
}
