Animer avec le Canvas 2D
Le code suivant illustre comment les technologies frontales peuvent être utilisées de manière créative pour créer des expériences web interactives et visuellement intéressantes.
JavaScript avec p5.js
Le Canvas HTML est un élément HTML (<canvas>) qui permet de dessiner des graphiques via le scriptage, habituellement avec JavaScript. Le canvas peut être utilisé pour tout, de la création d’images simples à la réalisation de graphiques complexes en 2D, en 3D ou même de petits jeux. Il supporte le rendu 2D et, avec l’aide de bibliothèques supplémentaires comme WebGL, peut aussi supporter le rendu 3D.
Le canvas Html5 peut être utilisé pour tout, de la création d’images simples à la réalisation de graphiques complexes en 2D, en 3D ou même de petits jeux.
Il permet de créer des contenus interactifs, comme des jeux ou des animations.
Les graphiques sur le canvas sont générés via JavaScript, offrant une grande flexibilité dans la création d’images dynamiques.
Génération de Particules
Le JavaScript, avec l’utilisation de p5.js, génère un ensemble de particules qui se déplacent de manière dynamique sur le canevas.
p5.js est une bibliothèque JavaScript qui simplifie la création de graphiques et d’interactivité dans un environnement web. Conçue pour rendre la programmation accessible et amusante, p5.js est idéale pour les débutants en programmation graphique. Elle offre une gamme complète de fonctionnalités pour créer des graphiques en 2D et 3D. p5.js permet de facilement intégrer l’interactivité et les animations dans les projets.
p5.js est une bibliothèque JavaScript qui simplifie la création de graphiques et d’interactivité dans un environnement web.
Le mouvement des particules et leur interaction offrent une expérience utilisateur immersive et engageante, démontrant comment les technologies web peuvent être utilisées pour des présentations créatives au-delà des sites web traditionnels.
Dans cet exemple, les particules ne sont pas interactives et sont animées par un algorithme génératif appelé « bruit de Perlin ».
Les particules sous le contenu html
Le z-index en css aide à contrôler quel élément du DOM apparaît au-dessus des autres.
See the Pen Untitled by Jerome Mercier (@jmercier) on CodePen.0
Le code commenté
HTML
Structure: Le HTML crée une structure de base avec un conteneur (div#container) qui inclut un canevas (div#canvas), un titre (<h1>), et des icônes de matériel.
Ressources Externes: Il intègre des polices Google, spécifiquement pour les icônes de matériel.
CSS
- Style des Icônes: Le CSS définit le style des icônes de matériel (
.material-symbols-outlined), en ajustant leur taille, couleur, et autres propriétés de police. - Mise en Page et Apparence: Il met en place la mise en page globale et les styles de couleur de fond, utilisant des couleurs sombres pour un effet visuel distinct.
JavaScript avec p5.js
- Génération de Particules: Le JavaScript, avec l’utilisation de p5.js, génère un ensemble de particules qui se déplacent de manière dynamique sur le canevas.
- Interactivité: Chaque particule a des propriétés uniques et se déplace indépendamment, créant un effet visuel interactif et attrayant.
- Logique de Rendu: La fonction
draw()met à jour et dessine continuellement les particules à l’écran, créant des lignes entre les particules proches pour un effet de réseau.