Thread et asynchronicité

Technologie web 2

Johan Girod

Synchrone ou asynchrone

Synchrone ou asynchrone

Execution synchrone

• Chaque tache est exécutées l'une après l'autre
• Le déroulé est bloqué tant qu'une tache n'est pas terminée

Synchrone ou asynchrone

Execution asynchrone

• Plusieurs tâches peuvent être lancées en même temps
• Elles ne bloquent pas le déroulé, et d'autres événements peuvent être traités

Synchrone ou asynchrone

Quelques exemples

• Une conversation téléphonique ? synchrone
• Une conversation par messagerie ? asynchrone
• Un paiement à la caisse ? synchrone
• Une préparation de repas ? asynchrone

Quelques exemples

Code synchrone ou asynchrone ?

Quelques exemples

Code synchrone ou asynchrone ?

Quelques exemples

Code synchrone ou asynchrone ?

Quelques exemples

Code synchrone ou asynchrone ?

Thread en JavaScript

Qu'est-ce qu'un thread ?

• Un thread est un fil d'exécution
• Un programme peut avoir plusieurs threads
• Chaque thread ne peut exécuter qu'une instruction à la fois

Thread et JavaScript

• Un programme JavaScript est executé dans un unique thread principal (« main thread »)
  Les instructions sont exécutées l'une après l'autre
• Ce thread est non bloquant (asynchrone)
  Les instructions asynchrones ne bloquent pas le déroulé et sont exécutées en parallèle
• Les fonctions fonction de callback sont placées dans la file d'attente (« event loop ») Elles sont exécutées dès que le thread principal est disponible, dans l'ordre d'arrivée

`setTimeout`

Le code est exécuté dans l'ordre A, D, C, B

`setTimeout`

Le code est exécuté dans l'ordre A, D, B, C

Perfomance

Si on effectue une tâche longue dans le thread principal, cela peut bloquer l'interface utilisateur, car les événements ne sont plus traités

Dans ce cas, il vaut mieux effectuer la tâche dans un autre thread : c'est le rôle des Web Workers

Callback hell

Lorsqu'on imbrique trop de fonctions de rappel, le code devient illisible

Pour cela, il existe une fonctionnalité du langage : les promesse et les fonctions async/await

...que vous verrez l'année prochaine

TP-6 : Un système de particules

Nous allons implémenter un système de particules en JavaScript, grâce à la balise canvas.

Voici une capture d’écran de ce que nous allons réaliser :

Bien sûr dans notre cas, les particules se déplaceront.

1. Création du canvas

Le canvas est une balise HTML qui permet de dessiner des graphiques en 2D ou en 3D. Il est très utilisé pour les jeux vidéo ou les animations.

Dans un fichier index.js, créez deux constantes WIDTH et HEIGHT qui définiront la taille du canvas. Vous pouvez les initialiser à 800 et 600 par exemple. Créez un élément canvas avec ces dimensions et ajoutez-le au body de la page.

Pour mieux voir les particules, vous pouvez ajouter un fond noir au canvas, dans un fichier style.css :

canvas {
	background-color: black;
}

2. Création de la classe Particle

Créer une classe Particle qui contiendra les méthodes suivantes :

• constructor(x, y, dx, dy, color) : initialise une nouvelle particule avec les paramètres suivants :

  • x : la position en x de la particule
  • y : la position en y de la particule
  • dx : la vitesse en x de la particule
  • dy : la vitesse en y de la particule

  Cette méthode initialisera également la couleur de la particule. Pour générer une couleur aléatoire, vous pouvez utiliser la fonction suivante :

  function randomColor() {
  	return `hsl(${Math.random() * 360}, ${50 + Math.random() * 50}%, ${50 + Math.random() * 50}%)`;
  }

• update() : met à jour la position de la particule en fonction de sa vitesse Lorsque la particule atteint le bord du canvas, elle doit rebondir.

• draw(ctx) : dessine la particule sur le canvas Pour la couleur, vous pouvez utiliser la méthode fillStyle du contexte 2D. Vous pouvez utiliser la méthode fillRect du contexte 2D du canvas (ctx) pour dessiner un rectangle de 2 pixels de côté.

3. Création du système de particules

Initialisez un tableau de particules dans le fichier index.js. Ce tableau sera initialisé avec un nombre de particules spécifié dans une constante PARTICLE_COUNT.

Pour cela, on crée une fonction renderParticles qui dessinera toutes les particules du tableau. Elle appellera la méthode update de chaque particule pour les faire bouger, puis la méthode draw pour les dessiner.

Cette fonction devra être appellée à intervalles réguliers pour animer les particules. Vous pouvez utiliser la fonction requestAnimationFrame pour cela. Elle est plus adaptée que setInterval pour les animations, car elle est synchronisée avec le taux de rafraîchissement du navigateur.

4. Explosion au clic

Ajoutez un écouteur d’événement sur le canvas pour détecter les clics de souris. Lorsque l’utilisateur clique, une explosion de particules doit se produire à l’endroit du clic.

Pour cela, vous pouvez ajouter une méthode explode(x, y) qui ajoutera des particules autour du point (x, y).

5. Champs de force gravitationnel

Ajoutez un champ de force gravitationnel autour de la souris. Lorsque l’utilisateur bouge la souris, les particules doivent être repoussées par la souris.

Pour cela, vous devrez modifier la vitesse par rapport à la position de souris.

Vous pouvez utiliser la formule suivante :

const angle = Math.atan2(mouseY - this.y, mouseX - this.x);
this.dx += Math.cos(angle);
this.dy += Math.sin(angle);

• Faire en sorte que le champs de force ne s’applique qu’à une certaine distance de la souris.
• Faire en sorte que les particules hors de cette distance rallentissent progressivement.
• Faire en sorte de pouvoir paramétrer la force du champs de force.
• Faire en sorte que le champs de force dépende de la distance à la souris.
• Modifier les différents paramètres jusq’à obtenir un résultat qui vous plait.

Corrigé