Data Coding

Data Coding

Canvas++

2025 - 2026

Animations

Request Animation Frame

Pour animer notre canvas nous allons utiliser window.requestAnimationFrame (ou raf). Cette méthode permet de lancer une fonction passé en paramètre à chaque frame. Cela permet d'obtenir des animations fluides jusqu'à 60 fps.

Request Animation Frame 
// Défini une animation
const myAnimation = () => {
    // Notre logique d'animation
    …
    // Appeler la requestAnimationFrame
    window.requestAnimationFrame( myAnimation );
};

window.requestAnimationFrame( myAnimation );

Effacer notre canvas

Dans notre dernier exemple, on croirait voir une barre de chargement. Comme pour une feuille de papier, le canvas n'efface pas les pixels déjà dessinés, ils s'accumulent. Si on veut voir notre carré bouger, il va falloir effacer notre canvas entre chaque frame via ctx.clearRect( ). 

ctx.clearRect( x, y, width, height );
ctx.clearRect()

Animer nos particules

Traits et formes complexes

Trait simple

Pour faire un simple trait, il faut définir un point de départ et au moins un point d'arrivée.

// Indique que nous commençons une nouvelle forme
ctx.beingPath();

// Le point de départ
ctx.moveTo( x, y );

// Le point d'arrivée
ctx.lineTo( x, y );

// Dessine le trait
ctx.stroke();
ctx.moveTo( ) ctx.lineTo( )

Forme complexe

lineTo( ) peut être appelé plusieurs fois de suite pour connecter plusieurs points les uns à la suite des autres.

	// Indique que nous commençons une nouvelle forme
  ctx.beingPath();

  // Le point de départ
  ctx.moveTo( x, y );

  // Le prochain point à connecter
  ctx.lineTo( x, y );

  // On continue de lier des points ensemble
  ctx.lineTo( x, y );
  ctx.lineTo( x, y );
  ctx.lineTo( x, y );
  …

  ctx.stroke();

Trigonométrie

Coordonnées sur un cercle

Placer un point

On a besoin de 2 informations: le radius du cercle et l'angle où le placer. Ensuite on peut récupérer les coordonées x et y via 2 formules: 

	// Retourne la coordonnées
  // horizontal sur notre cercle
  const x = Math.cos( angle * Math.PI ) * radius;

  // Retourne la coordonnées
  // vertical sur notre cercle
  const y = Math.sin( angle * Math.PI ) * radius;

Plus de points

Nous allons calculer l'angle qui sépare nos particules pour savoir où les placer en divisant un tour complet (2 * PI) par le nombre de particules. 

	// Le nombre total de particules à placer
  const nParticles = 5;

  // L'angle entre nos particules (déjà multiplié par PI)
  const angleStep = 2 * PI / nParticules;

Et englobant notre code d'une boucle for et en multipliant l'index avec angleStep, nous aurons nos particules parfaitement espacées autour de notre cercle. 

const nParticles = 5;
const angleStep = 2 * PI / nParticules;

for( let i = 0; i < nParticles; i++ ){
// Mutliplier angleStep par l'index permet
// de s'assurer d'avoir l'espacement voulu.
const angle = angleStep * i;
  const x = cos( angle ) * radius;
  const y = sin( angle ) * radius;
}

Connecter les points

Toolbox

Mélanger un tableau

	const shuffleArray = ( array ) => {
    array.sort( () => {
      return Math.random() - 0.5;
    } );
  };

  const pokedex = [ 'Onyx', 'Magicarpe', 'Pikachu', 'Tortank' ];
  shuffleArray( pokedex );

Remainder (%)

ou opérateur du reste

console.log( 4 % 2 );
// Retourne 0, car 4 est divisible par 2 sans décimal

console.log( 7 % 4 );
// Retourne 1, car 7 ne peut être divisé par 4 sans décimal
// % va donc chercher l'entier le plus proche divisible (4)
// et retourner la différence => 7 - 4 = 3

Remainder peut être utilisé pour boucler de manière infinie les éléments d'un tableau

const pokedex = [ 'Évoli', 'Pikachu', 'Carapuce' ];

// Affiche 'Carapuce'
console.log( pokedex[ 2 ] );

// Affiche 'undefined', il n'y a pas de 4ème élément
console.log( pokedex[ 3 ] );

// Affiche 'Évoli', 3 % pokedex.length (=3) => 0
console.log( pokedex [ 3 % pokedex.length ] );

// Affiche 'Pikachu', 217 % pokedex.length (=3) => 1
console.log( pokedex [ 217 % pokedex.length ] );

Template V2

The time
has come

1/6

1/1