Mandelbrot en WebAssembly

Ainsi donc, grâce à WebAssembly, il serait possible de faire tourner des programmes fulgurants dans une page Web.
Mazette ! Pourquoi ne pas tester la proposition en réalisant un petit programme qui requiert traditionnellement une certaine puissance de calcul, comme une représentation de l’ensemble de Mandelbrot ? Ce serait plus sympa que le jeu de la vie de Conway comme proposé ici, qui est certes fascinant, mais pas des plus sexy à regarder.
Une représentation de l'ensemble de Mandelbrot
Ce serait aussi l’opportunité de discuter un peu des performances des opérations graphiques nécessitant de travailler au pixel pour produire une image dans une page Web. Oh! nous ne sortirons pas l’artillerie lourde, à savoir WebGL, qui a été longuement présenté dans plusieurs articles sur ce blog. Nous nous concentrerons simplement sur le contexte 2D d’un objet <canvas>, en dessinant au pixel.
Tout cela, et plus encore, dans ce qui suit.
Continuer la lecture de « Mandelbrot en WebAssembly »
Mandelbrot en WebAssembly

Tracer un arc avec le canvas 2D et SVG

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 chemain 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

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

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