L’automne est bien là

Dehors, les arbres délaissent graduellement leur manteau feuillu pour tapisser le sol d’une couverture hachurée. C’est cet enchevêtrement de branches et brindilles qui dicte la thématique de ce mois-ci : les lignes et hachures.

La ligne seule, c’est l’extension d’un point dans l’espace. Elle divise l’espace, induit le mouvement et fait voyager le regard. Lorsque combinées, les lignes forment des hachures; tissages plus ou moins denses qui combinent les caractéristiques de la ligne à celles de la masse.

Tantôt droite et sévère, tantôt sinueuse et souple, la ligne s’offre aux designers comme un signe de structure et de légèreté. Longue vie à la ligne !

Prenez note que plusieurs de ces Codepens utilisent des techniques émergentes, et ne sont pas toujours supportées sur l’ensemble des navigateurs.

Distance et direction

Ce Codepen utilise deux fonctions mathématiques de base souvent utilisées pour créer des environnements interactifs

Le théorem de Pythagore est utilisé pour calculer la distance entre deux points. Dans le cas présent, il s’agit du centre de chaque trait par rapport au curseur. Cette distance est ensuite utilisée pour déterminer la longueur et l’épaisseur de chaque trait.

L’arc tangent (Atan2), quant à lui, entre en jeu lors du calcul de l’angle que chaque trait doit avoir pour pointer vers le curseur. La fonction Math.atan2() prend les coordonnées X et Y d’un point, et retourne l’angle par rapport au point d’origine (0,0);

Squash & Stretch

Cette animation démontre ce qui est probablement le principe d’animation le plus important : le Squash and Stretch. Cette règle veut que les objets en mouvement changent de forme en fonction de leur élasticité et de leur inertie. Il est intéressant de constater que cette technique fonctionne également avec une ligne qui se déplace dans une direction unique.

Notez que cette animation a été réalisée à l’aide du plugin TweenMax. Cependant, il aurait été tout à fait possible de la reproduire à partir d’aminations CSS seulement.

Structures

Cette animation utilise le même calcul de distance que dans le premier Codepen, et l’applique pour relier une série de points en mouvement. Il en résulte une grille aléatoire qui se transforme sans cesse, dans un mouvement presque organique.

Tissus

Cette simulation transforme une simple grille en un tissu que l’on peut déplacer et déchirer. Il est impressionnant de voir que ce Codepen n’utilise pas les plugins classiques de simulation de physiques, mais qu’il a été monté de toute pièce pour ce cas bien précis.

Spaceship

Pour terminer sur une note ludique, je vous propose une dérive dans un univers composé uniquement de lignes. Utilisez votre clavier pour vous déplacer et lancer de courtes lignes un peu partout.