Tracer un arc avec le canvas 2D et SVG

SoC, ,
Comment tracer un arc d'un angle donné, centré sur un point O donné et à partir d'un point A donné, avec le contexte 2d du canvas et avec SVG ?
Tracé d'un arc
La tâche n'a rien d'évident, comme il est possible d'en juger d'après le code permettant de la remplir dans l'un et l'autre cas :
  • Avec le contexte 2d du canvas, il faut demander le tracé d'un chemin en utilisant les fonctions moveTo (x0, y0) et arcTo (x1, y1, x2, y2, r), l'arc étant défini comme la plus petite partie du cercle de rayon r tangent aux droites joignant les points de tangence de ce cercle avec la droite de (x1, y1) à (x0, y0), d'une part, et avec la droite de (x1, y1) à (x2, y2), d'autre part.
  • En SVG, il faut demander le tracé d'un chemin en utilisant un objet path dont l'attribut p prend la valeur M x0 y0 A r r 0 largeArc sweep x1 y1, où (x0, y0) est le point de départ de l'arc et (x1, y1) son point d'arrivée, le cercle dont l'arc est une partie étant de rayon r et de centre déterminé par une combinaison de largeArc et sweep.
Continuer la lecture de "Tracer un arc avec le canvas 2D et SVG" →
Tracer un arc avec le canvas 2D et SVG

Closures pour gérer les événements en JavaScript

SoC, ,
La fonction addEventListener () permet d'associer une fonction (le gestionnaire d'événement) à un événement. Lorsque l'événement survient, le navigateur appelle le gestionnaire d'événement en lui transmettant un unique argument sous la forme d'un objet décrivant l'événement.
Comment transmettre autre chose à ce gestionnaire, comme par exemple une référence sur un objet spécifique ?

Continuer la lecture de "Closures pour gérer les événements en JavaScript" →

Closures pour gérer les événements en JavaScript

Désactivation de l’anti-aliasing du canvas 2D

SoC, ,
L'anti-aliasing est activé par défaut dans le canvas. Il permet de limiter la perception de l'effet d'escalier que la juxtaposition de pixels aux couleurs contrastées peut générer du fait de leur forme rectangulaire.
Ce traitement peut se révéler gênant dans certains cas (dessin au pixel, jeu old school, etc.), car il n'y a plus de certitude sur les pixels qu'une opération graphique vient modifier.
Par exemple, sur un canvas où on aura d'abord dessiné un rectangle jaune : 
context2d.strokeStyle = "rgb (255, 255, 0)";
context2d.fillStyle = "rgb (0,255, 0)";
context2d.fillRect (2, 2, 1, 1);
context2d.strokeRect (1, 1, 2, 2);
Anti-aliasing avec fillRect () et strokeRect ()
Dès lors, comment s'y prendre pour désactiver l'anti-aliasing dans le canvas ?
Mise à jour du 07/09/2018 : la propriété imageSmoothingEnabled, qui n'est pas évoquée ici, ne sert qu'à désactiver l'anti-aliasing pour l'affichage d'images.
Continuer la lecture de "Désactivation de l’anti-aliasing du canvas 2D" →
Désactivation de l’anti-aliasing du canvas 2D

Atténuation selon la loi en carré inverse (1/R²)

SoC
Comment produire un effet de ralentissement du mouvement réaliste ? La solution qui vient spontanément à l'esprit n'est pas réaliste : elle consiste à faire décroître la vitesse du mouvement de manière linéaire. Dans la réalité, le ralentissement est très fort au début et très faible à sa fin, donnant l'impression d'un amortissement :
Atténuation en 1/R²

Continuer la lecture de "Atténuation selon la loi en carré inverse (1/R²)" →

Atténuation selon la loi en carré inverse (1/R²)

Normale en un angle d’un polygone

SoC,
Comment déterminer les coordonnées de la normale en un angle d'un polygone ? En disposer est très utile pour appliquer une déformation homothétique au polygone. En effet, c'est est le long de ces normales qu'il est possible de déplacer les sommets du polygone pour produire des versions de ce dernier parfaitement emboîtées (enveloppes homothétiques) :
Enveloppe homothétique d'un polygone

Continuer la lecture de "Normale en un angle d’un polygone" →

Normale en un angle d’un polygone

Tri aléatoire des éléments d’un tableau

SoC,
Comment tirer aléatoirement, l'un après l'autre jusqu'à épuisement, les éléments d'un tableau ? La solution qui vient spontanément à l'esprit n'est pas efficace : elle consiste à générer un indice aléatoire, vérifier si l'élément figurant à cet indice a déjà été tiré, et si tel est le cas, recommencer.
A ce petit jeu, il est probable que le temps pris pour tirer un élément s'allonge tandis que le nombre d'éléments tirés s'accroit.
Ne peut-on procéder plus efficacement ?

Continuer la lecture de "Tri aléatoire des éléments d’un tableau" →

Tri aléatoire des éléments d’un tableau

Rendu vectoriel avec WebGL

SoC, , ,
Comment utiliser la puissance de WebGL pour effectuer le rendu de figures vectorielles, c'est-à-dire d'objets bidimensionnels, dans une page Web, sachant que WebGL est une API pour le rendu d'objets tridimensionnels ? Par exemple, le rendu d'un triangle dont les couleurs assignées aux sommets sont interpolées sur toute la surface :
Rendu d'un triangle 2D avec interpolation de couleurs
Continuer la lecture de "Rendu vectoriel avec WebGL" →
Rendu vectoriel avec WebGL