labs

Interstellar tesseract

En fond, l’univers est constitué d’étoiles dessinée sur un canvas, et animée par une vitesse aléatoire. Chaque étoile possède une position aléatoire fixée en fonction de la taille et de la hauteur du canvas, de manière à ce qu’elles soient toutes dans ce canvas. Chaque étoile est actualiée en fonction de sa propre position et de sa vitesse, en veillant à ce qu’elle se maintienne dans le canvas.

Quand plusieurs étoiles sont très proches, c’est-à-dire à une distance fixée (avant l’initialisation de l’animation) les unes des autres, des traits sont tracés pour les relier, comme une constellation.

Devant, un hypercube est dessiné et animé en CSS3, notamment avec la propriété clip-path et les proprétés d’animation (keyframe, animation, transform, …).

See the Pen Interstellar space tesseract by tibomahe (@tibomahe) on CodePen.