Oxoscript se transforme en NanoPy - plus d'infos

Fonctions graphiques 2D

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()

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()

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.

image

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.

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.

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 !")

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.

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()

noClipping

  noClipping()

Utilise noClipping() pour annuler un clipRectangle() utilisé précédemment.

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()

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

clear

  clear()

Efface tous les pixels de l’écran.

Pour que la fonction soit visible, il faut ensuite exécuter une “update()”:

clear()
update()

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.

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)

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()

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()

drawPixel

  drawPixel(x:int,y:int)

Dessine un pixel à la position x/y.

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.

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()

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 bleu
drawRectangle(-50,-50,100,100) # rectangle bleu
pop() # nous réinitialisons l'état (avant push())
drawCircle(0,0,30) # cercle rouge
update() # sortir

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()

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()

pop

  pop()

Rétablit l’état précédemment enregistré avec push().

Exemple: voir push()

addVertex

  addVertex(x:int,y:int)

Cette fonction ajoute un point à la position x/y dans une définition de polygone.

Exemple: voir beingShape()

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()

textLeading

  textLeading(leading:int)

Espacement entre les lettres d’un texte.

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()

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.

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)

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.

drawText

  drawText(x:int,y:int,text:byte[])

Dessine un texte.

drawText(10,10, "Hello World !")

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()

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()

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()

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()

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()

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()

drawLine

  drawLine(x0:int,y0:int,x1:int,y1:int)

Trace une ligne de x0/y0 à x1/y1.

drawLine(0,0,240,240)
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()

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()

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()

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.

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)