Poissons koi procédural
Par Alexandre Piché
Projet personnel
p5.js
Contexte
Le but fut de créer un environnement, un étang dans lequel des poissons nagent. Le tout généré entièrement procéduralement à partir de code. Ainsi, aucun asset ou textures extérieur ne furent utilisé et rafraîchir la page donne un nouvel étang.
Ce projet fut inspiré fortement par ce vidéo par argonaut. J’ai utilisé p5.js parce que je voulais que ce soit présent sur le web.
Processus
J’ai commencé par suivre les étapes démontré dans la vidéo. Cependant, j’avais des idées par rapport à la manière dont les poissons se déplacent. J’ai donc implémenté un peu de physiques simples (verlet integration) dans le but de rendre le mouvement plus fluide. Les poissons possède aussi un AI bien simple qui utilise des barbillons (raycasts) pour éviter les obstacles.
Par la suite, j’ai ajouté l’environnement pour donner plus de vie. Ce sont tous des images générées à partir de shader GLSL. Finalement, j’ai ajouté quelques interactions simples pour rendre cela un peu plus interactif.
Défi technique
Plusieurs difficultés furent survenues dans la structure du code. Il ma fallut réécrire le code plus d’une fois au fur et à mesure que j’en apprenais plus sur la programmation. Ce projet commençât en 2024 j’ai finit cette version en 2026. J’ai appris beaucoup entre temps et sui déjà conscient de multiples façons d’améliorer le code du projet. Il me reste encore à améliorer la performance, que je sais pitoyable.
Voir les poissons en action
