Esfera Fibonacci usando transformaciones CSS3

Hace ya un tiempo que no cuelgo ningún post, el proyecto en el que estoy inmerso me consume mucho tiempo, pero esto no evita que experimente un poco con algunas de las cosas que me apasionan.

He querido comprobar el rendimiento de los principales navegadores al usar transformaciones CSS3. En este pequeño experimento, se transforman en cada movimiento del ratón 300 elementos ubicados en el documento. He utilizado un cálculo Fibonacci para crear una esfera formada por puntos equidistantes entre sí (conocida como esfera Fibonacci), intentando simular con la escala y la opacidad de los mismos cierta profundidad. Increíblemente el rendimiento es bastante bueno, pueden comprobarlo por vosotros mismos. A continuación dejo el código utilizado:

Para este experimento se ha usado el método querySelectorAll y transformaciones CSS3, por lo que si usas Internet Explorer, debes usar una versión a partir de la 9 en adelante.

HTML

<div id="canvas">
  
</div>

CSS (usando autoprefixer)

body, html{
  height: 100%;
  position: relative;
}

body{
  background-color: #232B2B;
  margin: 0;
  padding: 0;
}

#canvas{
  height: 250px;
  margin: 0 auto;
  perspective: 2000px;
  perspective-origin: center center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 250px;
}

.point{
  background: #E87A24;
  border-radius: 50%;
  height: 4px;
  position: absolute;
  transform-style: preserve-3d;
  width: 4px;
}

JavaScript

var cant = 300;
var offset = 2 / cant;
var increment = Math.PI * (3 - Math.sqrt(5));
var canvas = document.getElementById("canvas");

var i;
var circle;

//---Build the elements
for(i = 0; i < cant; i++){
  
  circle = document.createElement("div");
  circle.className = "point";
  circle.setAttribute("data-index", i);
  
  canvas.appendChild(circle);
  
};

//---Apply transformations to points
function updatePoints(evt){
  
  var x, y, z, r, a, scale, opacity, point, style;
  
  var angle = (evt) ? (-evt.pageX / 4) * Math.PI / 180 : 0;
  
  for(i = 0; i < cant; i++){

    y = (i * offset - 1) + (offset / 2);
    r = Math.sqrt(1 - Math.pow(y, 2));
    a = ((i + 1) % cant) * increment + angle;
    x = Math.cos(a) * r;
    z = Math.sin(a) * r;

    scale = Math.round(z * 20000) / 100;
    opacity = (1 + z) / 1.5;
    
    style = "translate3d(" + (125 + x * 100) + "px, " + (125 + y * 100) + "px, " + scale + "px)";
    
    point = canvas.querySelectorAll("[data-index='" + i +"']");
    point[0].style.WebkitTransform = style;
    point[0].style.msTransform = style;
    point[0].style.transform = style;
    point[0].style.opacity = opacity;

  }
  
}

//---Update the points at start
updatePoints();

//---Update the points on mouse move
document.addEventListener("mousemove", updatePoints);

A continuación pueden ver una muestra del resultado en CodePen. La esfera Fibonacci se conformará con un ángulo diferente si movemos el ratón por el documento.

Esfera Fibonacci, resultado final

See the Pen by (@elchininet) on CodePen.3

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInShare on StumbleUpon

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes situar fragmentos de código dentro de etiquetas <pre></pre> y código HTML o XML entre etiquetas <xmp></xmp>.

Time limit is exhausted. Please reload CAPTCHA.