BRUSH: Bee Hive

by Michael Prosser

HTML

<div class="circles">
  
  </div>

CSS

html,body{
  height:100%;
  margin:0px;
  perspective:500px;
  background-color:#000;
}

.circles{
  transform-style:preserve-3d;
  width:0px;
  height:0px;
  left:50%;
  top:50%;
  position:absolute;
}
.circle{
  position:absolute;
  border-radius:50%;
  width:100px;
  height:100px;
  border:4px #ff0000 solid;
}

JavaScript

var distances = Array(
	0.2,0.4,0.6,0.8,1,
  1.2,1.4,1.6,1.8,2,
  2.2,2.4,2.6,2.8,3
);

var radius = 20;

var direction = 1;

// hive 

var radiusFunction = function(i, distance) {
    return radius * Math.sin(i / (distances.length/Math.PI));
}

for(var i=0;i<distances.length;i++){

	var r = radiusFunction(i, distances[i]);
  
  console.log(r);

  r = r * 10;
  
  var d = distances[i] * 50;
  
  var m = r / 2 * -1;
  
  
	$('body .circles').append('<div class="circle" style="width:' + r + 'px;height:' + r + 'px; margin-top: ' + m + 'px; margin-left: ' + m + 'px;transform:translateZ(' + d + 'px);"></div>');
  
}

var circles = $('body .circles');

var rotationY = 0;

setInterval(function(){

	circles.css('transform','rotateY(' + rotationY + 'deg)');
  
  rotationY++;

},10);