Images
1. Introduction
Les fonctions décrites dans cette page permettent de faire générer des images par le "fragment shader" du processeur graphique. Du fait de l'architecture parallèle de ces processeurs, la génération est beaucoup plus rapide que si elle était effectuée en javascript.
2. Image définie par une fonction
La fonction pixmap trace une image monochrome définie par une fonction f(x,y). Les valeurs de la fonction représentent la luminance, et doivent être comprises entre 0 et 1.
pixmap(args,style)
- args.fsrc : expression de la fonction sous forme d'une chaine de caractères
- args.xmin, args.xmax, args.ymin, args.ymax : domaine à tracer
- args.width (integer) : largeur de l'image en pixels
- args.origin (array) : position de l'origine (coin inférieur gauche) sur le canvas
Exemple :
3. Image animée définie par une fonction
La fonction pixmap_animate trace une image monochrome animée, définie par une fonction f(x,y,t).
pixmap_animate(args,style)
- args.fsrc : expression de la fonction sous forme d'une chaine de caractères
- args.xmin, args.xmax, args.ymin, args.ymax : domaine à tracer
- args.width (integer) : largeur de l'image en pixels
- args.origin (array) : position de l'origine (coin inférieur gauche) sur le canvas
- args.tmin, args.tmax : intervalle de variation de la variable t
- duration : durée réelle en secondes correspondant à l'intervalle [tmin,tmax]
Exemple :
4. Antialiasing
Lorsque la fonction échantillonnée possède dans son spectre des fréquences supérieures à la moitié de la fréquence d'échantillonnage, un aliasing (moiré dû au repliement de bande) peut se manifester.
Pour limiter l'aliasing, un décalage aléatoire peut être ajouté aux points de l'échantillonnage. Ce décalage est fourni par deux textures aléatoires. Voici par exemple deux textures carrées de 512x512 pixels :
Pour activer l'échantillonnage avec décalage aléatoire, il faut attribuer la valeur true à style.antialias et préciser les identifiants des textures avec les propriétés style.Xtexsrc et style.Ytexsrc :
Pour un effet optimal, la texture doit être au moins aussi grande que l'image à générer. Dans l'exemple ci-dessous, on utilise une texture de 512x512.
Tout d'abord un exemple avec le phénomène de moiré :
Les 8 figures concentriques qui entourent la figure centrale sont dûes à l'aliasing. Voici l'effet de l'antialiasing :
Le moiré à quasiment disparu. En revanche, l'introduction d'un décalage aléatoire dans l'échantillonnage se manifeste par du bruit dans l'image.
