Intro to Shaders – JavaScript & p5.js Course for Beginners

Le cours est une excellente introduction aux shaders, avec une approche pédagogique bien pensée. L’auteure commence par des concepts fondamentaux (CPU vs GPU, parallélisme) et les illustre avec des métaphores intuitives, ce qui facilite la compréhension pour les débutants. La progression est logique : après les bases, elle aborde des techniques plus avancées comme la répétition de domaine et les fonctions de mise en forme, qui sont essentielles pour créer des motifs complexes. Les explications sur la syntaxe GLSL sont claires, et l’accent mis sur les vecteurs et le swizzling est pertinent. La partie pratique est bien intégrée, avec des exemples de code commentés et des liens vers des sketches p5.js. La rigueur scientifique est bonne : les concepts sont corrects et les simplifications sont acceptables pour un public débutant. Cependant, certains points pourraient être approfondis, comme la gestion des précisions ou les différences entre WebGL1 et WebGL2. Les sources citées sont principalement les sketches de l’auteure et le site de freeCodeCamp, ce qui est cohérent. L’adéquation entre le titre et le contenu est parfaite. En résumé, c’est un tutoriel de qualité, bien structuré et accessible, qui atteint son objectif pédagogique.

Le titre est parfaitement adapté au contenu : il s'agit bien d'une introduction aux shaders pour débutants, utilisant JavaScript et p5.js.

8/10

Le contenu est pédagogique, structuré et basé sur des concepts éprouvés de la programmation GPU. Les explications sont claires et les exemples de code sont fournis. La fiabilité est bonne, mais le niveau de détail technique est intermédiaire et certaines simplifications (comme la métaphore de l'usine) peuvent occulter des nuances.

Repères établis par PSI à partir de la transcription : le créateur n'a pas défini de chapitres.

• 00:00Introduction au cours et présentation des objectifs.
• 00:51Partie 1 : Introduction de base aux shaders.
• 01:17Définition d'un shader et explication de son rôle.
• 03:24Explication du pont entre CPU et GPU.
• 04:20Présentation des vertex et fragment shaders.
• 06:06Début de la programmation dans p5.js.
• 09:44Règles de syntaxe GLSL.
• 12:50Configuration de l'espace canvas dans un vertex shader.
• 16:16Coloration des pixels dans un fragment shader.
• 17:44Mapping de l'espace clip aux coordonnées écran.
• 20:03Création d'un dégradé statique.
• 22:04Création d'un dégradé dynamique.
• 27:03Partie 2 : Répétition de domaine.
• 28:33Dessin d'un cercle.
• 32:35Utilisation de gl_FragCoord pour obtenir les coordonnées des pixels.
• 38:45Création de tuiles avec fract().
• 42:00Correction du ratio d'aspect.
• 43:56Introduction de la correction standard de résolution.
• 45:01Partie 3 : Fonctions de mise en forme.
• 45:38Définition d'une fonction de mise en forme.

• Sketch p5.js Part 1 — Code source de la première partie du cours.
• Sketch p5.js Part 2 — Code source de la deuxième partie du cours.
• Sketch p5.js Part 3 — Code source de la troisième partie du cours.
• Sketch p5.js Part 4 — Code source de la quatrième partie du cours.
• Site de Patt Vira — Site personnel de l'auteure, présenté comme ressource complémentaire.
• freeCodeCamp News — Plateforme d'articles et de tutoriels de freeCodeCamp.
• Scrimba — Plateforme d'apprentissage interactif, partenaire de la chaîne.

• The Book of Shaders — Ressource en ligne reconnue pour apprendre les shaders, en accord avec les concepts présentés.
• WebGL Fundamentals — Tutoriels détaillés sur WebGL, cohérents avec les explications du cours.

• www.freecodecamp.org