Bibliothèques JavaScript

Alpine.js version 3.17.5 · licence MIT

Rend une page interactive en ajoutant quelques attributs (x-data, x-show, @click…) directement dans le HTML, sans écrire de JavaScript.

1. Ajouter dans <head> :

<script src="/libs/alpine.min.js" defer></script>

2. Exemple :

<div x-data="{ ouvert: false }">
  <button @click="ouvert = !ouvert">Afficher / cacher</button>
  <p x-show="ouvert">Coucou !</p>
</div>

Documentation en français (incluse, hors-ligne) : Alpine.js – documentation

Documentation officielle (en anglais, en ligne) : https://alpinejs.dev

p5.js version 1.11.13 · licence LGPL 2.1

Dessin, animation et jeux sur un canevas. Écrivez setup() (exécutée une fois) et draw() (exécutée en boucle).

1. Ajouter dans <head> :

<script src="/libs/p5.min.js"></script>

2. Exemple :

<script>
  function setup() { createCanvas(400, 300); }
  function draw() {
    background(240);
    circle(mouseX, mouseY, 40);
  }
</script>

Documentation officielle (en anglais, en ligne) : https://p5js.org/reference/

Zdog version 1.1.3 · licence MIT

Moteur 3D simple et pseudo-3D pour dessiner des formes (cubes, cercles, cylindres…) sur un canevas.

1. Ajouter dans <head> :

<script src="/libs/zdog.min.js"></script>

2. Exemple :

<canvas class="zdog-canvas" width="240" height="240"></canvas>
<script>
  const illo = new Zdog.Illustration({ element: ".zdog-canvas", rotate: { y: 0.5 } });
  new Zdog.Box({ addTo: illo, width: 80, height: 80, depth: 80, stroke: false,
    color: "#6d28d9", leftFace: "#8b5cf6", rightFace: "#a78bfa", topFace: "#c4b5fd" });
  function animate() { illo.rotate.y += 0.03; illo.updateRenderGraph(); requestAnimationFrame(animate); }
  animate();
</script>

Documentation en français (incluse, hors-ligne) : Zdog – documentation

Documentation officielle (en anglais, en ligne) : https://zzz.dog