Fonctions graphiques 2D
rotateText
rotateText(enable:bool)
rotateText(enable:bool)
Cette fonction permet de déterminer, lors de la sortie du texte, si celui-ci doit être pivoté. Si rien n’est indiqué, il n’y a pas de rotation.
update
update()
Cette fonction transfère la mémoire d’image à l’écran. Sans “update()”, l’écran n’est pas actualisé, c’est pourquoi cette fonction est omniprésente et est appelée au moins une fois dans chaque programme.
Le transfert de la mémoire d’images est relativement lent. Il vaut donc la peine de bien réfléchir au meilleur moment pour exécuter une “update()”.
Exemple 1: update() n’est appelé qu’après 50 rectangles. Le programme fonctionne de manière très fluide.
background(0,0,0)
def onDraw():
for i in 50:
fillHSV(random(0,255),255,255)
x = random(0,240/16)
y = random(0,240/16)
drawRectangle(x*16,y*16,16,16)
update()
Exemple 2: ici, nous avons appelé “update()” après chaque rectangle. Le programme fonctionne nettement plus lentement.
fond(0,0,0)
def onDraw():
for i in 50:
fillHSV(random(0,255),255,255)
x = random(0,240/16)
y = random(0,240/16)
drawRectangle(x*16,y*16,16,16)
update()
clear
clear()
Efface tous les pixels de l’écran.
Pour que la fonction soit visible, il faut ensuite exécuter une “update()”:
clear()
update()
background
background(r:byte,g:byte,b:byte)
Définit la couleur d’arrière-plan.
r = rouge (0 - 255) g = vert (0 - 255) b = bleu (0 - 255)
fond d'écran(255,0,0)
update()
backgroundHSV
backgroundHSV(h:byte,s:byte,v:byte)
Définit la couleur de fond en mode couleur HSV.
h = hue (valeur de couleur entre 0 et 255) s = saturation(saturation, entre 0 et 255) v = value (luminosité, entre 0 et 255)
stroke
stroke(r:byte,g:byte,b:byte)
Définit la couleur du trait ou du compte.
r = rouge (0 - 255) g = vert (0 - 255) b = bleu (0 - 255)
stroke(255,0,0)
drawLine(0,0,240,240)
update()
strokeHSV
strokeHSV(h:byte,s:byte,v:byte)
Définit la couleur du trait ou du contour en mode couleur HSV.
h = hue (valeur de couleur entre 0 et 255) s = saturation(saturation, entre 0 et 255) v = value (luminosité, entre 0 et 255)
strokeWeight
strokeWeight(w:byte)
Définit les tirets de 1 à 10.
stroke(255,255,255)
strokeWeight(1)
drawLine(0,40,240,40)
strokeWeight(5)
drawLine(0,80,240,80)
mettre à jour()
noStroke
noStroke()
Après l’appel de cette fonction, les contours ne sont plus dessinés.
stroke(255,255,255)
fill(255,0,0)
drawRectangle(5,5,50,50)
noStroke()
drawRectangle(100,5,50,50)
mettre à jour()
fill
fill(r:byte,g:byte,b:byte)
Remplit l’objet dessiné ci-dessous avec la couleur indiquée.
r = rouge (0 - 255) g = vert (0 - 255) b = bleu (0 - 255)
remplissage(255,0,0)
drawRectangle(5,5,50,50)
update()
fillHSV
fillHSV(h:byte,s:byte,v:byte)
Définit la couleur de remplissage en mode couleur HSV.
h = hue (valeur de couleur entre 0 et 255) s = saturation(saturation, entre 0 et 255) v = value (luminosité, entre 0 et 255)
noFill
noFill()
Après l’appel de cette fonction, les objets ne sont plus remplis.
stroke(255,255,255)
fill(255,0,0)
drawRectangle(5,5,50,50)
noFill()
drawRectangle(100,5,50,50)
mettre à jour()
drawLine
drawLine(x0:int,y0:int,x1:int,y1:int)
Trace une ligne de x0/y0 à x1/y1.
drawLine(0,0,240,240)
update()
drawRectangle
drawRectangle(x0:int,y0:int,w:int,h:int)
Dessine un rectangle à partir de x0/y0 de largeur w et de hauteur h.
drawRectangle(5,5,230,230)
update()
drawRectangleRounded
drawRectangleRounded(x0:int,y0:int,w:int,h:int,radius:int)
Dessine un rectangle arrondi à partir de x0/y0 de largeur w et de hauteur h et de rayon indiqué.
drawRectangleRounded(5,5,230,230,10)
update()
drawTriangle
drawTriangle(x0:int,y0:int,x1:int,y1:int, x2:int, y2:int)
Dessine un triangle de coordonnées x0/y0, x1/y1 et x2/y2.
drawTriangle(5,5,100,5,50,100)
update()
drawQuadrangle
drawQuadrangle(x0:int,y0:int,x1:int,y1:int,x2:int,y2:int,x3:int,y3:int)
Dessine un quadrilatère de coordonnées x0/y0, x1/y1,x2/y2 et x3/y3.
drawCircle
drawCircle(x0:int,y0:int,r:byte)
Dessine un cercle à la position x0/y0 avec un rayon r.
drawCircle(120,120,50)
update()
drawEllipse
drawEllipse(x0:int,y0:int,r0:byte,r1:byte)
Dessine un cercle à la position x0/y0 avec les rayons r0 et r1.
drawArc
drawArc(x0:int,y0:int,r:byte,start:float,angle:float)
Dessine un arc à la position x0/y0 avec un rayon r. L’arc est indiqué en radians et démarre à start et est long de “angle”.
drawArc(120,120,100,0,PI/2)
update()
drawPixel
drawPixel(x:int,y:int)
Dessine un pixel à la position x/y.
drawSprite
drawSprite(x:int, y:int, w:int, h:int, buf:byte[])
Cette fonction dessine une image codée en 8 bits.
x/y déterminent les coodinates. Les sprites sont toujours centrés, c’est-à-dire que la coordonnée correspond au centre.
w/h correspond à la largeur w et à la hauteur h de l’image.
buf: c’est ici que se trouvent les données de l’image. Le nombre d’octets doit correspondre à la quantité w*h. Chaque octet correspond à un pixel, les octets devant être indiqués ligne par ligne. Si l’on déclare une largeur de 8 pixels et une hauteur de 12 pixels, par exemple, nous trouverons dans la variable buf d’abord les 8 pixels de la première ligne, puis les 8 pixels de la deuxième ligne, etc.
Afin d’utiliser moins de place, seules 256 couleurs sont disponibles, c’est-à-dire que le code couleur est un nombre compris entre 0 et 255, 0 signifiant transparent.
L’exemple suivant dessine une vache volante avec une taille d’image de 24x24 pixels. Comme cela ne correspond qu’à un dixième de la largeur/hauteur de l’écran, l’image est agrandie quatre fois avec scale(4).
# image
flyingCow:byte[24*24] = [
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,191,0,0,0,0,0,0,0,0,0,0,191,0,0,
0,0,0,0,0,0,0,0,1,1,191,1,1,1,1,1,0,0,0,0,191,191,0,0,
0,0,0,0,0,0,1,1,14,14,191,191,191,14,14,14,1,1,1,191,174,191,0,0,
0,0,0,0,0,1,14,14,14,14,191,174,174,191,14,1,1,1,14,1,174,191,0,0,
0,0,0,0,1,14,14,14,14,14,14,191,191,14,14,14,14,14,14,14,1,0,0,0,
0,0,0,1,62,0,14,1,1,14,14,1,14,14,14,14,14,1,14,1,14,1,0,0,
0,0,1,62,62,0,1,1,1,1,1,62,62,14,14,14,14,1,14,1,14,1,1,0,
0,0,0,62,62,0,14,1,1,14,14,14,62,0,14,14,14,14,14,14,14,1,14,0,
0,1,1,62,62,0,14,14,1,1,1,1,62,62,0,14,14,176,176,176,176,176,1,1,
0,1,1,1,62,0,14,14,14,14,14,1,62,62,0,14,176,113,176,113,176,113,176,0,
0,1,1,1,1,0,14,14,14,14,14,14,1,62,62,14,176,113,176,113,176,113,176,0,
0,1,1,1,62,62,14,14,14,14,14,14,1,62,62,62,62,176,176,176,176,176,1,0,
0,0,1,62,62,62,62,14,14,14,1,14,14,1,62,62,62,62,62,62,1,1,0,0,
0,0,1,62,62,62,62,14,14,1,14,14,14,14,1,1,1,1,1,1,14,1,0,0,
0,1,14,1,62,62,62,14,1,14,14,14,14,14,14,14,14,14,14,14,1,14,1,0,
1,1,62,62,1,62,62,1,1,14,14,1,14,14,14,14,14,14,14,1,62,14,1,1,
1,1,1,1,0,1,62,1,1,1,1,62,62,62,62,62,62,62,1,0,1,1,1,1,
0,1,1,0,0,176,1,1,1,1,62,62,62,62,62,62,1,1,0,0,0,1,1,0,
0,0,0,0,176,176,113,113,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,
0,0,0,0,0,176,113,113,113,113,113,176,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,176,176,176,176,176,176,176,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,176,0,0,176,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
]
background(120,120,120)
translate(120,120)
scale(4)
drawSprite(0,0,24,24,flyingCow)
update()
Si on écrit l’instruction “# image” avant la déclaration, l’image peut être modifiée dans l’éditeur de constantes via un éditeur d’images visuelles.
Remarques importantes: La taille de l’image peut être quelconque, mais ne doit pas dépasser 24x24 pixels. L’éditeur ne peut actuellement modifier que les images dont la taille est exactement de 24x24 pixels. Une image de 24x24 pixels nécessite déjà 576 octets ( !).
Autres conseils:
Les images peuvent être agrandies, réduites, tournées et déplacées à volonté en utilisant les commandes translate/rotate/scale.
Pour que les images en pixels soient visibles, il vaut la peine de les agrandir en règle générale 2 à 4 fois.
drawSpriteScaled
drawSpriteScaled(x:int, y:int, w:int, h:int, s:int buf:byte[])
Comme drawSprite, mais un facteur d’échelle s peut être spécifié. Si 1 est spécifié, rien n’est mis à l’échelle. 2 signifie un doublement, etc.
drawImageMono
drawImageMono(x:int,y:int,w:int,h:int,buf:byte[])
Dessine une image monochrome à la position x/y avec une largeur w et une hauteur h. Les données de l’image sont stockées dans la variable buf.
Exemple:
b = [ 0b11100000, 0b00000111,
0b10100000, 0b00000101,
0b11100000, 0b00000111,
0b00000000, 0b00000000,
0b00000000, 0b00000000,
0b00000000, 0b00000000,
0b00100000, 0b00000100,
0b001111, 0b11111100]
drawImageMono(120,120,16,8,b)
update()
L’exemple utilise des nombres binaires. “0b” est ici à chaque fois la signature initiale qui indique à NanoPy que des bits vont maintenant arriver.
Important:
Les données d’image peuvent avoir une largeur quelconque divisible par 8. Dans l’exemple ci-dessus, 16 bits ont été indiqués dans la largeur.
Dans la hauteur, le nombre peut être quelconque. Le nombre de lignes doit cependant correspondre au paramètre h.
drawImageMonoCentered
drawImageMonoCentered(x:int,y:int,w:int,h:int,buf:byte[])
Cette commande est identique à drawImageMono(..), mais l’image est dessinée centrée par rapport aux coordonnées x/y (au lieu d’être en haut à gauche). Ainsi, en combinaison avec les commandes rotate() et scale(), il est maintenant possible de faire pivoter ou d’agrandir/réduire une image en la centrant.
drawQRCode
drawQRCode(x:int,y:int,pixelSize:byte,invert:bool,str:byte[])
Dessine un code QR à la position x/y avec la taille pixelSize. invert indique si le code QR doit être inversé. i Paramètre octet doit être indiqué l’information texte du code QR.
background(0,0,0)
drawQRCode(0,0,8,false, "https://www.oxocard.ch")
update()
drawText
drawText(x:int,y:int,text:byte[])
Dessine un texte.
drawText(10,10, "Hello World !")
textAlignment
textAlignment(alignment:byte)
Cette fonction permet d’adapter l’alignement du texte de la fonction drawText. Il existe trois possibilités: TEXT_ALIGN_LEFT: aligné à gauche TEXT_ALIGN_CENTER:centré TEXT_ALIGN_RIGHT:aligné à droite
Voici un exemple à ce sujet:
def onDraw():
clear()
drawLine(120,0,120,240)
textAlignment(TEXT_ALIGN_LEFT)
drawText(120,80,"Hello")
textAlignment(TEXT_ALIGN_CENTER)
drawText(120,120,"Hello")
textAlignment(TEXT_ALIGN_RIGHT)
drawText(120,160,"Hello")
update()
drawTextCentered
drawTextCentered(x:int,y:int,text:byte[])
Cette commande est identique à drawText(..), mais le texte est dessiné au centre de la coordonnée x/y (au lieu d’être en haut à gauche). Ainsi, en combinaison avec les commandes rotate() et scale(), il est maintenant possible de faire pivoter ou d’agrandir/réduire un texte en le centrant.
drawTextCentered(120,120, "Hello World !")
drawChar
drawChar(x:int,y:int,ch:byte)
Dessine un signe.
drawChar(10,10,'?')
Important:
Les caractères individuels, contrairement aux chaînes de caractères, doivent être indiqués par une apostrophe simple.
drawCharCentered
drawCharCentered(x:int,y:int,ch:byte)
Cette commande est identique à drawChar(..), mais le caractère est dessiné centré par rapport aux coordonnées x/y (au lieu d’être dessiné en haut à gauche). Ainsi, en combinaison avec les commandes rotate() et scale(), il est maintenant possible de faire pivoter un caractère de manière centrée ou de l’agrandir/réduire.
drawCharCentered(120,120,'$')
Important:
Les caractères individuels doivent être indiqués avec une apostrophe simple, contrairement aux chaînes de caractères.
textFont
textFont(fontid:byte)
Définit la police de caractères. Celle-ci peut être indiquée soit sous forme de nombre, soit avec les constantes suivantes:
FONT_ROBOTO_16
FONT_ROBOTO_24
FONT_ROBOTO_32
FONT_ROBOTO_48
FONT_ROBOTO_80
FONT_ROBOTO_BOLD_16
FONT_ROBOTO_BOLD_24
FONT_ROBOTO_BOLD_32
FONT_ROBOTO_BOLD_48
Les types de polices sont une combinaison de la police (Roboto regular et bold) et de la taille des pixels (16 à 80).
textFont(FONT_ROBOTO_32)
drawText(20,20, "Bonjour")
update()
textWidth
textWidth(text:byte[])->int
Calcule, sur la base de la police de caractères actuelle, la largeur en pixels que le texte transmis occupera lors de l’édition. Cela permet de centrer ou d’aligner à droite un bloc de texte.
<br
textFont(FONT_ROBOTO_48)
w = textWidth("Bonjour")
drawText(0,40, "Bonjour")
drawText(240-w, 100, "Bonjour")
drawText(120-w/2,160,"Hallo")
update()
textLeading
textLeading(leading:int)
Espacement entre les lettres d’un texte.
beginShape
beginShape()
Démarre une définition de polygone. Celle-ci se compose d’un beginShape(), de plusieurs appels à addVertex/Bezier et d’une conclusion avec endShape().
Exemple:
translate(120,120)
fill(255,0,0)
beginShape()
a:float
for i in 12:
a = a + PI/6
addVertex(cos(a)*100,sin(a)*100)
endShape(true)
update()
Cet exemple place l’origine au centre de l’écran. Ensuite, une parenthèse polygonale est ouverte avec begin/endShape(). Avec “addVertex”, douze points sont ajoutés sur un cercle. Ce polygone représente donc un cercle de 12 points.
endShape
endShape(closed:bool)
Cette fonction permet de clore une définition de polygone. Si closed vaut true, le dernier point est en outre relié au premier pour former une ligne fermée.
Lors de l’appel de endShape(), le polygone est dessiné dans le tampon de l’écran.
Exemple: voir beginShape()
addVertex
addVertex(x:int,y:int)
Cette fonction ajoute un point à la position x/y dans une définition de polygone.
Exemple: voir beingShape()
addBezierVertex
addBezierVertex(x:int,y:int)
Ajoute une courbe de Bézier à une définition de polygone. Important: Les coordonnées x/y déterminent le point d’arrêt de Bézier. La courbe est ensuite dessinée entre les instructions addVertex incluses, comme le démontre l’exemple suivant:
const BEZIER_X = 50 # 10..100
const BEZIER_Y = 60 # 10..100
clear()
fill(100,100,255)
noStroke()
translate(120,120)
for i in 4:
rotate(PI/2)
beginShape();
addVertex(0, 0)
addBezierVertex(-BEZIER_X, BEZIER_Y)
addVertex(0, 70)
addBezierVertex(BEZIER_X, BEZIER_Y)
addVertex(0, 0)
endShape(true)
noFill()
stroke(255,0,0)
drawCircle(BEZIER_X, BEZIER_Y,5)
update()
Cet exemple dessine le point de Bézier comme un cercle rouge. Celui-ci peut être modifié dans l’éditeur de constantes
push
push()
La fonction “push()” enregistre toutes les configurations de style et les transformations de coordonnées actuelles. Avec “pop()”, on peut ensuite revenir à l’état original (avant push()).
Exemple:
fill(255,0,0) # met la couleur de remplissage en rouge
translate(120,120) # le nouveau point zéro est à 120,120
push() # nous enregistrons l'état
fill(0,255,0) # mettre la couleur de remplissage en vert
drawRectangle(-50,-50,100,100) # rectangle bleu
pop() # nous réinitialisons l'état (avant push())
drawCircle(0,0,30) # cercle rouge
update() # sortir
pop
pop()
Rétablit l’état précédemment enregistré avec push().
Exemple: voir push()
rotate
rotate(rad:float)
Fait pivoter le dessin autour du point d’origine actuel.
rad = rotation en radians (0 à 2*PI)
rotate est souvent utilisé en relation avec push/pop et translate. Cette fonction permet de faire tourner n’importe quel objet autour de n’importe quel axe.
Exemple:
translate(120,120)
for i in 12:
drawRectangle(50,-5,20,10)
rotate(PI/6)
update()
scale
scale(v:float)
Met à l’échelle toutes les commandes de dessin suivantes par la valeur indiquée. Par exemple, la taille double avec la valeur 2 ou diminue de moitié avec la valeur 0.5.
Note: scale() est multiplicatif. Cela signifie que, par exemple, scale(2) et scale(1.5) combinés produisent le même effet qu’un seul scale(3).
Exemple:
translate(120,120)
drawCircle(0,0,10)
update()
delay(1000)
scale(2)
drawCircle(0,0,10)
update()
delay(1000)
scale(1.5)
drawCircle(0,0,10)
update()
translate
translate(x:int,y:int)
Décale le point zéro à la position x/y.
La fonction est additive. Chaque appel supplémentaire déplace le point zéro par rapport à la position précédente. Si on ne le souhaite pas, on peut utiliser push()/pop(), qui rétablit l’état initial.
Exemple:
push()
translate(120,120)
drawCircle(0,0,40)
drawCircle(0,0,80)
pop()
push()
translate(200,200)
drawCircle(0,0,20)
pop()
update()
clipRectangle
clipRectangle(x:int,y:int,w:int,h:int)
Utilise clipRectangle() pour ne dessiner que dans une zone spécifique (rectangle) de l’écran.
Cela permet par exemple de n’afficher que certaines parties d’un dessin:
push()
stroke(255,0,0)
drawRectangle(0,120,240,120)
clipRectangle(0,120,240,120)
fill(255,0,0)
drawCircle(120, 120, 100)
update()
delay(1000)
pop()
push()
stroke(0,255,0)
drawRectangle(0,0,240,120)
clipRectangle(0,0,240,120)
fill(0,255,0)
drawCircle(120, 120, 100)
update()
delay(1000)
pop()
push()
stroke(0,0,255)
drawRectangle(0,0,120,240)
clipRectangle(0,0,120,240)
fill(0,0,255)
drawCircle(120, 120, 100)
update()
delay(1000)
pop()
noClipping
noClipping()
Utilise noClipping() pour annuler un clipRectangle() utilisé précédemment.