Self-Assembling Cube

In this example below you will see how to do a Self-Assembling Cube with some HTML / CSS and Javascript

Just playing around with VelocityJS

Thumbnail
This awesome code was written by monners, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright monners ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Self-Assembling Cube</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrapper">
  <div id="stage"></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/velocity/0.0.9/jquery.velocity.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/monners/self-assembling-cube-ABcxp */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapper {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 700px;
  height: 700px;
  padding: 100px;
  margin: auto;
  transform: translateY(150px);
}

#stage {
  display: block;
  position: relative;
  height: 500px;
  width: 500px;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -webkit-transform: rotateX(80deg) rotateY(0deg) rotateZ(250deg);
  background: grey;
}

.cube {
  position: absolute;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
}
.cube div {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  opacity: 0.5;
}
.cube .back {
  transform: translateZ(0) rotateY(180deg);
}
.cube .right {
  transform: rotateY(-270deg) translateX(0);
  transform-origin: top right;
}
.cube .left {
  transform: rotateY(270deg) translateX(0);
  transform-origin: center left;
}
.cube .top {
  transform: rotateX(-90deg) translateY(-100px);
  transform-origin: top center;
}
.cube .bottom {
  transform: rotateX(90deg) translateY(100px);
  transform-origin: bottom center;
}
.cube .front {
  transform: translateZ(100px);
}


/*Downloaded from https://www.codeseek.co/monners/self-assembling-cube-ABcxp */
$(function() {
	var $stage = $('#stage'),
		coords = shuffle(generateCoords());

	function createCube() {
		return $('<div class="cube">' +
					'<div class="front"></div>' +
					'<div class="back"></div>' +
					'<div class="top"></div>' +
					'<div class="bottom"></div>' +
					'<div class="left"></div>' +
					'<div class="right"></div>' +
				'</div>');
	}

	function appendAndAnimate(count) {
		count = count || 0;

		var xyz = coords.pop();

		var cube = createCube().velocity({
			translateZ: xyz[0] * 100 + 'px',
			translateX: xyz[1] * 100 + 'px',
			translateY: xyz[2] * 100 + 'px'
		});

		$stage.append(cube);
	}

	function scheduleCube (count) {
		count -= 1;

		if (count > 0) {
			setTimeout(function() {
				appendAndAnimate(count);
				scheduleCube(count);
			}, 200);
		}
	}

	function shuffle(array) {
		var currentIndex = array.length, temporaryValue, randomIndex ;

		// While there remain elements to shuffle...
		while (0 !== currentIndex) {

			// Pick a remaining element...
			randomIndex = Math.floor(Math.random() * currentIndex);
			currentIndex -= 1;

			// And swap it with the current element.
			temporaryValue = array[currentIndex];
			array[currentIndex] = array[randomIndex];
			array[randomIndex] = temporaryValue;
		}

		return array;
	}

	function generateCoords() {
		var arr = [];
			for (var i = 0; i < 5; i++) {
				for (var j = 0; j < 5; j++) {
					for (var k = 0; k < 5; k++) {
						arr.push([i, j, k]);
					}
				}
			}
		return arr;
	}

	scheduleCube(126);

});

Comments