Aujourd'hui, le BlogDuWebdesign vous propose de plonger dans la balise HTML5 Canvas avec cette liste de ressources pour créer et manipuler des effets de particules !

Parmi toutes les choses que nous sommes capables de faire avec Canvas, les effets de particules font clairement partie de celles qui m'intéressent le plus (avec les effets jouant sur les ombres). Si vous êtes comme moi et que l'idée de remplir votre écran de particules jusqu'à ce que votre carte graphique prenne feu vos intéresse, je vous propose de découvrir cette liste de ressources Javascript centrées sur les particules !

Sketch.js

Nous sommes d'accord, Sketch n'est pas réellement dédié aux particules, mais plus un outil permettant de simplifier les créations avec canvas. Je vous le propose tout de même, car c'est personnellement le choix que j'ai faits pour mes expérimentations.

Simple à utiliser (Sketch n'est finalement qu'un simple canvas avec ds fonctionnalités supplémentaires), très simple à utiliser en même temps qu'un moteur physique par exemple, je trouve cette ressource excellente.

Trouvez un webdesigner disponible

Trouvez gratuitement le prochain talent qui réalisera votre projet ou rejoindra votre équipe.

Particles.js

Particles.js est l'outil derrière un effet que vous connaissez forcément, et qui a eu sa période de gloire il y a quelques mois. Ressource intéressante, elle est malheureusement limite à cet effet, ce qui est très dommage.

Spp.js

Spp est un moteur de particules intéressant, mais au support malheureusement éteint. Je ne me suis pas vraiment penché dessus pour cette raison, mais les réalisations en exemples restent intéressantes.

Fireworks

Fireworks est une ressource qui me peine beaucoup, car le dépôt est mort depuis 3 ans, et il y a donc peu de chances que le projet reprenne vie.

Canvas Particle Network

Dans le même genre que Particles.js, cette ressource vous propose un canvas de particules liées entre elles. Bien plus simple à comprendre et modifier, mais aussi moins fournis en option, cette alternative est à réserver aux bidouilleurs.

Canvas Firework

Cette dernière n'est pas "réellement" une ressource, dans le sens où vous ne trouverez pas de dépôt vous proposant de télécharger le Javascript, ni de documentation.

En revanche, le code source est vraiment très clair, assez simple à comprendre, et peut tout à fait s'adapter à vos besoins. De plus, le résultat est juste magnifique et je ne peux m'empêcher de vous le partager.