Après une première démo avec la balise canvas, j’étais un peu frustré par les performances. Voici donc une version plus aboutie.

Les performances sont bien meilleures grâce à l’utilisation de requestAnimationFrame à la place de setTimeout pour la boucle principale et putImageData à la place de fillRect pour remplir un canvas pixel par pixel.

Perf calculate:

Perf draw:

Correction du bogue - mise à jour du 12 mars 2021

Il y a de nombreuses années, j’étais candidat chez Criteo. Mon intervieweur avait pris le temps de regarder mon blog et était tombé sur cette page. Il avait immédiatement remarqué un truc bizarre; des triangles asymétriques se formaient. J’avais rapidement regardé le code après l’entretien, sans trouver le bogue. Et cette discussion est restée dans un coin de ma tête.

J’ai décidé d’y repasser un peu de temps et il y avait en fait 2 bogues.

  • d73c479 : le calcul balayait d’abord les colonnes puis les lignes (au lieu de l’inverse)
  • 264eda5 : le calcul se faisait du bas vers le haut (au lieu de l’inverse)

Ces deux bogues ont la même conséquence : le calcul des pixels précédents impactent le calcul des pixels suivants.

C’est enfin corrigé !