<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>artur sapek</title>
	<meta name="author" content="Artur Sapek">
	<link rel="stylesheet" type="text/css" href="cube.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="script.js" type="text/javascript"></script>
</head>
<body>
   	
</body>
</html>

function c(x){
  console.log(x || "!");
}

function create(a, b, c, d){
  var x = document.createElement(a);
  for (i in b){
      x[i] = b[i];
  }
  if (c !== undefined){
    x.innerHTML = c;
  }
  d = d || [ ];
  for (e in d){
    x.appendChild(d[e]);
  }
  return x;
}

function appendobj(a){
  for (var i = 0; i < a.length; i++){
    a[i][0].appendChild(a[i][1]);
  }
}

// DatCube.js written by Artur Sapek
// copyright nobody, play with this if you like

$(document).ready(function(){
  var g = window.global = {
        cached_x: 0, cached_y: 0,
        moving: false,    
        mouse_cache: [ ], 
        armed: null,
        cube: new cube([200, 100])
      };
  recursive_preload(0);
  $(document).mousemove(function(e){
    if (global.moving) return
    var g = global,              
      x = e.pageX,             
        y = window.innerHeight - e.pageY,  
      origins = {              
        'left': [ global.cube.x - 72, global.cube.y + 41 ],
        'right': [ global.cube.x + 72, global.cube.y + 41 ],
        'top': [ global.cube.x, global.cube.y + 166 ]
    };        
    var momentum_x_pos = (g.cached_x - x) * -1, momentum_y_pos = (g.cached_y - y) * -1;
  
    g.cached_x = x; g.cached_y = y; 
    global.mouse_cache.push([x, y]); 
    if (global.mouse_cache.length > 20) global.mouse_cache.splice(0,1); 
    if (momentum_x_pos || momentum_y_pos){ 
      var direction_cached = g.direction || null,
        ratio = Math.abs(momentum_x_pos) / Math.abs(momentum_y_pos);
      if (ratio > 1.8){             
        g.direction = momentum_x_pos > 0?'right':'left';
      } else if (0.4 < ratio && ratio < 1.8){ 
        g.direction = (momentum_y_pos > 0?'up':'down') + (momentum_x_pos > 0?'right':'left');       
      } else {                
        g.direction = momentum_y_pos > 0?'up':'down';
      }
      if (g.direction != direction_cached){   
        g.armed = null;
      }
    }

    var BL = x > global.cube.x - 500 && x < global.cube.x && y < origins.left[1] + 83 && y > Math.max(global.cube.y - 345, global.cube.y - (global.cube.x - x) * 0.57); 
    var BR = x > global.cube.x - 72 && x < global.cube.x + 500 && y < origins.left[1] + 83 && y > 40 + Math.max(global.cube.y - 345, global.cube.y - (global.cube.x - x) * -0.57);
    var TR = x > global.cube.x - 72 && x < global.cube.x + 500 && y > global.cube.y + 40 && y < Math.min(global.cube.y + 441, global.cube.y + 124 + (x - (global.cube.x - 72)) * 0.57); 
    var TL = x > global.cube.x - 500 && x < global.cube.x && y > global.cube.y + 40 && y < Math.min(global.cube.y + 441, global.cube.y + 80 + 124 - (x - (global.cube.x - 72)) * 0.57);
    
    if (BL && ['upright', 'right'].indexOf(g.direction) > -1){
            if (!g.moving) g.armed = 'upright';
    }
    if (TR && ['downleft', 'left'].indexOf(g.direction) > -1){
            if (!g.moving) g.armed = 'downleft';
    }
    if (TL && ['downright', 'right'].indexOf(g.direction) > -1){
            if (!g.moving) g.armed = 'downright';
    }
    if (BR && ['upleft', 'left'].indexOf(g.direction) > -1){
            if (!g.moving) g.armed = 'upleft';
    }
    
    if (g.armed == 'upright' && TR && ['upright', 'right'].indexOf(g.direction) > -1 && !g.moving){
      g.armed = null;
      var speed = parseInt((Math.abs(momentum_x_pos) + Math.abs(momentum_y_pos)) / 30);
      if (speed == 0) speed = 1;
      global.cube.animate(0, speed, 'upright');
    }   
    
    if (g.armed == 'downleft' && BL && ['downleft', 'left'].indexOf(g.direction) > -1 && !g.moving){
      g.armed = null;
      var speed = parseInt((Math.abs(momentum_x_pos) + Math.abs(momentum_y_pos)) / 30);
      if (speed == 0) speed = 1;
      global.cube.animate(0, speed, 'downleft');
    }
    
    if (g.armed == 'upleft' && TL && ['upleft', 'left'].indexOf(g.direction) > -1 && !g.moving){
      g.armed = null;
      var speed = parseInt((Math.abs(momentum_x_pos) + Math.abs(momentum_y_pos)) / 30);
      if (speed == 0) speed = 1;
      global.cube.animate(0, speed, 'upleft');
    }   
    
    if (g.armed == 'downright' && BR && ['downright', 'right'].indexOf(g.direction) > -1 && !g.moving){
      g.armed = null;
      var speed = parseInt((Math.abs(momentum_x_pos) + Math.abs(momentum_y_pos)) / 30);
      if (speed == 0) speed = 1;
      global.cube.animate(0, speed, 'downright');
    }
  });
});

cube = function(position){ 
  this.x = position[0]; this.y = position[1];
  this.colors = { 'FL': 'B',
          'FR': 'P',
          'T': 'G',
          'B': 'G',
          'BR': 'B',
          'BL': 'P'
            };
  this.parts = ['right', 'left', 'top', 'bottom', 'dot'];
    this.elements = [this.right, this.left, this.top, this.bottom];

    this.dot = create('div', { id: 'cube_dot'}); 
  this.sprite_mode = 'upright'; 
  this.all = create('div', { id: 'cube_all' }); $(this.all).css({'left':position[0], 'bottom': position[1]});
  this.right = create('div', { id: 'cube_R', className: 'cube_R_P' }); this.left = create('div', { id: 'cube_L', className: 'cube_L_B' }); 
  this.top = create('div', { id: 'cube_T', className: 'cube_T_G' }); this.bottom = create('div', { id: 'cube_B', className: 'cube_B_G' });
  appendobj([ [this.all, this.dot], [this.all, this.right], [this.all, this.left], [this.all, this.top], [this.all, this.bottom] ]);
  $('body').append(this.all);
}

cube.prototype.animate = function(i, times, direction){
  global.moving = true;
  if (times > 8){ 
    global.moving = false;
    return;
  }
  var times = times.toString();
  var sprites = {'right': 165, 'left': 207, 'top': 103, 'bottom': 124};
  var steps = 7;
  var parts = this.parts;
  
  if (!this.flipped){
    if (direction == 'upleft' || direction == 'downright'){
      this.flip();
    }
  } else {
    if (direction == 'upright' || direction == 'downleft'){
      this.flip();
    }
  }
  
  var finish = {'upright': [72, 41], 'upleft': [-72, 42], 'downleft': [-72, -42], 'downright': [72, -42]};

    if (['upleft', 'downright'].indexOf(direction) > -1 && !this.flipped) this.flip();

  if (['downleft', 'downright'].indexOf(direction) > -1 && i == 0){ 
    this.switch_colors(direction);
    this.set_sprites(direction);
  }

  if (i < steps){
    for (var x in parts){
      var sprite_nudge = {'upright': (sprites[parts[x]] * 9 - (sprites[parts[x]] * (i + 1))), 'downleft': (sprites[parts[x]] * 9 + (sprites[parts[x]] * (i + 1))),
                                'upleft': (sprites[parts[x]] * 9 - (sprites[parts[x]] * (i + 1))), 'downright': (sprites[parts[x]] * 9 + (sprites[parts[x]] * (i + 1)))};
      $(global.cube[parts[x]]).css({'background-position': '0px ' + sprite_nudge[direction] + 'px'});
    }
    setTimeout(function(){
      global.cube.animate(i + 1, times, direction);
    }, 90 / (times*1.6));
  } else if(i == 7){
        if (direction == 'downleft'){
            this.set_sprites('upright');
        } else if (direction == 'downright'){
            this.set_sprites('upleft'); 
        } else if (direction == 'upright' || direction == 'upleft'){
      this.switch_colors(direction);
    }
    this.x += finish[direction][0]; this.y += finish[direction][1];
        
    for (var x in parts){
      $(global.cube[parts[x]]).css({'background-position': '0px 0px'});
    }
        
    $(this.all).css({'left': this.x, 'bottom': this.y});
        
    if (times > 1){
      global.cube.animate(0, times - 1, direction);
    } else { 
      global.moving = false;
    }
  }
}

cube.prototype.switch_colors = function(direction){
  var parts = this.parts;
  var colors = this.colors;
  if (['upright', 'downleft'].indexOf(direction) > -1){
    var s = {'B': 'G', 'G': 'B'};
        
        var A = this.flipped ? this.colors.FR : this.colors.FL;
        var B = this.colors.T
    this.colors.T = this.colors.B = A
    if (this.flipped){
      this.colors.FR = this.colors.BL = B;
    } else {
      this.colors.FL = this.colors.BR = B;
    }
  } else if (['upleft', 'downright'].indexOf(direction) > -1){
    var A = this.flipped ? this.colors.FL : this.colors.FR;
    var B = this.colors.T;
    this.colors.T = this.colors.B = A;
    if (this.flipped){
      this.colors.FL = this.colors.BR = B;
    } else {
      this.colors.FR = this.colors.BL = B;
    }
  }
  if (direction == 'flip'){
    var L = this.colors.FL
    var R = this.colors.FR
    this.colors.FR = this.colors.BL = L;
    this.colors.FL = this.colors.BR = R;
  }
  var colors = {  'right': 'cube_R_' + this.colors.FR,
          'left': 'cube_L_' + this.colors.FL,
          'top': 'cube_T_' + this.colors.T,
          'bottom': 'cube_B_' + this.colors.T
           };
    var addon = this.flipped?' flipped':'';
  for (var x in parts){
    $(global.cube[parts[x]]).attr('class', colors[parts[x]] + addon);
  }
}

cube.prototype.set_sprites = function(direction){
    var move = [this.right, this.left, this.top, this.bottom];
    this.sprite_mode = direction;
    if ((direction == 'upleft' || direction == 'downright') && !this.flipped) this.flip()
  var y = {'downleft': ['+=41px', '-=72px'], 'upright': ['-=41px', '+=72px'], 'downright': ['+=41px', '+=72px'], 'upleft': ['-=41px', '-=72px']};
    for (var p in move){
        $(move[p]).animate({'top':y[direction][0], 'left': y[direction][1]}, 0);
    }
}

cube.prototype.flip = function(){
  this.switch_colors('flip');
    var elements = [this.right, this.left, this.top, this.bottom];
    var pos = [-144,-71,-37,-33];
    for (var e in elements){
        if (!this.flipped){
            $(elements[e]).addClass('flipped').animate({'left': '+=' + pos[e] + 'px'},0);
        } else {
            $(elements[e]).removeClass('flipped').animate({'left': '-=' + pos[e] + 'px'},0);
        }
    }
    this.flipped = this.flipped?false:true;
}

recursive_preload = function(i){
  var set = ['http://artur.co/cube/blue/cube_L_sprite.png', 'http://artur.co/cube/blue/cube_T_sprite.png', 'http://artur.co/cube/blue/cube_R_sprite.png', 'http://artur.co/cube/blue/cube_B_sprite.png',
         'http://artur.co/cube/pink/cube_L_sprite.png', 'http://artur.co/cube/pink/cube_T_sprite.png', 'http://artur.co/cube/pink/cube_R_sprite.png', 'http://artur.co/cube/pink/cube_B_sprite.png',
         'http://artur.co/cube/green/cube_L_sprite.png', 'http://artur.co/cube/green/cube_T_sprite.png', 'http://artur.co/cube/green/cube_R_sprite.png', 'http://artur.co/cube/green/cube_B_sprite.png'];
  var img = new Image();
  if (i < set.length - 1){
    img.onload = function(){
      recursive_preload(i + 1);
    }
  }
  img.src = set[i];
}
 
body, html{
  height:100%;
  margin:0px;
  width:1500px;
  overflow:hidden;
}

#cube{
  width:100px;
  height:100px;
  background:#5FC19D;
  position:absolute;
}

#cube_all{
  position:absolute;
}

#cube_all div{
  pointer-events:none;
}

#cube_R{
  position:absolute;
  top:-165px;
  width:144px;
  height:165px;
  background-position:0px 0px;
  z-index:1;
}
.cube_R_B{
  background:url('http://artur.co/cube/blue/cube_R_sprite.png');
}
.cube_R_G{
  background:url('http://artur.co/cube/green/cube_R_sprite.png');
}
.cube_R_P{
  background:url('http://artur.co/cube/pink/cube_R_sprite.png');
}

#cube_L{
  position:absolute;
  left:-72px;
  top:-207px;
  width:215px;
  height:207px;
  background-position:0px 0px;
  z-index:1;
}
.cube_L_B{
  background:url('http://artur.co/cube/blue/cube_L_sprite.png');
}
.cube_L_G{
  background:url('http://artur.co/cube/green/cube_L_sprite.png');
}
.cube_L_P{
  background:url('http://artur.co/cube/pink/cube_L_sprite.png');
}

#cube_T{
  position:absolute;
  left:-72px;
  top:-184px;
  width:181px;
  height:103px;
  background-position:0px 0px;
  z-index:1;
}
.cube_T_B{
  background:url('http://artur.co/cube/blue/cube_T_sprite.png'); 
}
.cube_T_G{
  background:url('http://artur.co/cube/green/cube_T_sprite.png');  
}
.cube_T_P{
  background:url('http://artur.co/cube/pink/cube_T_sprite.png'); 
}

#cube_B{
  position:absolute;
  left:-38px;
  top:-165px;
  width:109px;
  height:124px;
  background-position:0px 0px;
  z-index:1;
}
.cube_B_B{
  background:url('http://artur.co/cube/blue/cube_B_sprite.png');
}
.cube_B_G{
  background:url('http://artur.co/cube/green/cube_B_sprite.png');
}
.cube_B_P{
  background:url('http://artur.co/cube/pink/cube_B_sprite.png');
}

#cube_dot{
    width:3px;
    height:3px;
    position:absolute;
    top:-1px;
    left:-1px;
    z-index:100;
}
.flipped{
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}






Created from scratch
578 forks
42854 views

Browse more Codebits