2D-Grafik-Funktionen

rotateText

  rotateText(enable:bool)

Mit dieser Funktion kann man bei der Textausgabe bestimmen, ob dieser rotiert werden soll. Wenn nichts angegeben ist, wird nicht rotiert.

update

  update()

Diese Funktion überträgt den Bildspeicher an den Bildschirm. Ohne “update()” wird der Bildschirm nicht aktualisiert, daher ist diese Funktion omnipräsent und wird in jedem Programm mindestens einmal aufgerufen.

Die Übertragung des Bildspeichers ist relativ langsam. Es lohnt sich daher, gut zu überlegen, wann ein “update()” am besten ausgeführt wird.

Beispiel 1: update() wird nur nach 50 Rechtecken aufgerufen. Das Programm arbeitet sehr flüssig.

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

Beispiel 2: hier haben wir “update()” nach jedem Rechteck aufgerufen. Das Programm arbeitet deutlich langsamer.

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

clear

  clear()

Löschte alle Pixel auf dem Bildschirm.

Damit die Funktion sichtbar wird, muss danach noch ein “update()” ausgeführt werden:

clear()
update()

background

  background(r:byte,g:byte,b:byte)

Setzt die Hintergrundfarbe.

r = rot (0-255)
g = grün (0 - 255)
b = blau (0 - 255)

background(255,0,0)
update()

backgroundHSV

  backgroundHSV(h:byte,s:byte,v:byte)

Setzt die Hintergrundfarbe im HSV-Farbmodus.

h = hue (Farbwert zwischen 0 und 255)
s = saturation(Sättigung, zwischen 0 und 255)
v = value (Helligkeit, zwischen 0 und 255)

stroke

  stroke(r:byte,g:byte,b:byte)

Setzt die Strich- oder Kontourfarbe.

r = rot (0-255)
g = grün (0 - 255)
b = blau (0 - 255)

stroke(255,0,0)
drawLine(0,0,240,240)
update()

strokeHSV

  strokeHSV(h:byte,s:byte,v:byte)

Setzt die Strich- oder Konturfarbe im HSV-Farbmodus.

h = hue (Farbwert zwischen 0 und 255)
s = saturation(Sättigung, zwischen 0 und 255)
v = value (Helligkeit, zwischen 0 und 255)

strokeWeight

  strokeWeight(w:byte)

Setzt die Strichticke von 1 bis 10.

stroke(255,255,255)
strokeWeight(1)
drawLine(0,40,240,40)
strokeWeight(5)
drawLine(0,80,240,80)
update()

noStroke

  noStroke()

Nach dem Aufruf dieser Funktion werden keine Konturen mehr gezeichnet.

stroke(255,255,255)
fill(255,0,0)
drawRectangle(5,5,50,50)
noStroke()
drawRectangle(100,5,50,50)
update()

fill

  fill(r:byte,g:byte,b:byte)

Füllt das nachfolgend gezeichnete Objekt mit der angegeben Farbe.

r = rot (0-255)
g = grün (0 - 255)
b = blau (0 - 255)

fill(255,0,0)
drawRectangle(5,5,50,50)
update()

fillHSV

  fillHSV(h:byte,s:byte,v:byte)

Setzt die Füllfarbe im HSV-Farbmodus.

h = hue (Farbwert zwischen 0 und 255)
s = saturation(Sättigung, zwischen 0 und 255)
v = value (Helligkeit, zwischen 0 und 255)

noFill

  noFill()

Nach dem Aufruf dieser Funktion werden Objekte nicht mehr gefüllt.

stroke(255,255,255)
fill(255,0,0)
drawRectangle(5,5,50,50)
noFill()
drawRectangle(100,5,50,50)
update()

drawLine

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

Zeichnet eine Linie von x0/y0 bis x1/y1.

drawLine(0,0,240,240)
update()

drawRectangle

  drawRectangle(x0:int,y0:int,w:int,h:int)

Zeichnet ein Rechteck ab x0/y0 mit der Breite w und der Höhe h.

drawRectangle(5,5,230,230)
update()

drawRectangleRounded

  drawRectangleRounded(x0:int,y0:int,w:int,h:int,radius:int)

Zeichnet ein abgerundetes Rechteck ab x0/y0 mit der Breite w und der Höhe h und dem angegebenen Radius.

drawRectangleRounded(5,5,230,230,10)
update()

drawTriangle

  drawTriangle(x0:int,y0:int,x1:int,y1:int, x2:int, y2:int)

Zeichnet ein Dreieck mit den Koordinaten x0/y0, x1/y1 und 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)

Zeichnet ein Viereck mit den Koordinaten x0/y0, x1/y1,x2/y2 und x3/y3.

drawCircle

  drawCircle(x0:int,y0:int,r:byte)

Zeichnet einen Kreis an der Position x0/y0 mit einem Radius r.

drawCircle(120,120,50)
update()

drawEllipse

  drawEllipse(x0:int,y0:int,r0:byte,r1:byte)

Zeichnet einen Kreis an de Position x0/y0 mit den Radien r0 und r1.

drawArc

  drawArc(x0:int,y0:int,r:byte,start:float,angle:float)

Zeichen einen Bogen an der Position x0/y0 mit einem Radius r. Der Bogen wird in Radiant angegben und bei start gestartet und ist “angle” lang.

drawArc(120,120,100,0,PI/2)
update()

drawPixel

  drawPixel(x:int,y:int)

Zeichnet einen Pixel an der Position x/y.

drawSprite

  drawSprite(x:int, y:int, w:int, h:int, buf:byte[])

Diese Funktion zeichnet ein 8bit kodiertes Bild.

x/y bestimmen die Koodinate. Sprites werden immer zentriert gezeichnet, d.h. die Koordinate enspricht dem Mittelpunkt.

w/h entsprechend der Breite w und der Höhe h des Bildes.

buf: hier stehen die Bilddaten. Die Anzahl Bytes muss der Menge w*h entsprechen. Jedes Byte entspricht einem Pixel, wobei die Bytes zeilenweise angegeben werden müssen. Wenn einer Breite von 8 Pixel und einer Höhe z.B. 12 Pixeln deklariert wird, dann finden wir in der buf-Variablen zuerst die 8 Pixel der ersten Zeile, dann die 8 Pixel der zweiten Reihe usw.

Damit weniger Platz verwendet wird, stehen nur 256 Farben zur Verfügung, d.h. der Farbcode ist eine Zahl zwischen 0 und 255, wobei 0 Transparent bedeutet.

Das folgende Beispiel zeichnet eine fliegende Kuh mit einer Bildgrösse von 24x24 Pixel. Da dies nur einem Zehntel der Breite/Höhe des Screens entspricht, wird das Bild mit scale(4) vierfach vergrössert.

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

Wenn man vor der Deklaration die Anweisung “# image” schreibt, kann das Bild im Konstanteneditor über einen visuellen Bildeditor geändert werden.

Wichtige Hinweise:
Die Bildgrösse kann beliebig sein, sollte jedoch 24x24 Pixel nicht überschreiten. Der Editor kann aktuell nur Bilder verändern, die exakt 24x24 Pixel gross sind. Ein Bild von 24x24 Pixel benötigt bereits 576 Bytes (!).

Weitere Tipps:
Bilder lassen sich vergrössen, verkleinern, rotieren und beliebig verschieben, indem man die Befehle translate/rotate/scale verwendet.
Damit die Pixelbilder sichtbar sind, lohnt es sich, diese in der Regel 2 bis 4fach zu vergrössern.

drawSpriteScaled

  drawSpriteScaled(x:int, y:int, w:int, h:int, s:int buf:byte[])

Wie drawSprite, jedoch kann noch ein Skalierungsfaktor s angegeben werden. Wenn 1 angegeben wird, wird nichts skaliert. 2 bedeutet Verdoppelung etc.

drawImageMono

  drawImageMono(x:int,y:int,w:int,h:int,buf:byte[])

Zeichnet ein monochromes Bild an der Position x/y mit der Breite w und der Höhe h. In der Variablen buf sind die Daten des Bildes gespeichert.

Beispiel:

b = [ 0b11100000, 0b00000111,
      0b10100000, 0b00000101,
      0b11100000, 0b00000111,
      0b00000000, 0b00000000,
      0b00000000, 0b00000000,
      0b00000000, 0b00000000,
      0b00100000, 0b00000100,
      0b00111111, 0b11111100]        
drawImageMono(120,120,16,8,b)
update()

In dem Beispiel werden binäre Zahlen verwendet. “0b” ist hier jeweils die Anfangssignatur, die NanoPy mitteilt, dass jetzt Bits kommen.

Wichtig:

Die Bilddaten können eine beliebiges, durch 8 teilbares Breite haben. Im obigen Beispiel sind 16 Bits in der Breite angegeben worden.

In der Höhe kann die Anzahl beliebig sein. Die Zeilenzahl muss aber mit dem Parameter h übereinstimmen.

drawImageMonoCentered

  drawImageMonoCentered(x:int,y:int,w:int,h:int,buf:byte[])

Dieser Befehl ist identisch zu drawImageMono(..), jedoch wird das Bild mittig zur x/y-Koordinate gezeichnet (anstatt oben links). So ist es in Kombination mit den Befehlen rotate() und scale() nun möglich, ein Bild zentriert zu rotieren oder zu vergrössern/verkleinern.

drawQRCode

  drawQRCode(x:int,y:int,pixelSize:byte,invert:bool,str:byte[])

Zeichnet einen QR-Code an der Position x/y mit der Grösse pixelSize.
Der invert-Parameter gibt an, ob der QR-Code invertiert werden soll.
Im Byte-Parameter muss die Textinformation des QR-Codes angegeben werden.

background(0,0,0)
drawQRCode(0,0,8,false,"https://www.oxocard.ch")
update()

drawText

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

Zeichnet einen Text.

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

textAlignment

  textAlignment(alignment:byte)

Mit dieser Funktion kann die Textausrichtung der drawText-Funktion angepasst werden. Es gibt drei Möglichkeiten: TEXT_ALIGN_LEFT: linksbündig TEXT_ALIGN_CENTER:zentriert TEXT_ALIGN_RIGHT:rechtsbündig

Hierzu ein Beispiel:

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[])

Dieser Befehl ist identisch zu drawText(..), jedoch wird der Text mittig zur x/y-Koordinate gezeichnet (anstatt oben links). So ist es in Kombination mit den Befehlen rotate() und scale() nun möglich, ein Text zentriert zu rotieren oder zu vergrössern/verkleinern.

drawTextCentered(120,120,"Hello World!")

drawChar

  drawChar(x:int,y:int,ch:byte)

Zeichnet ein Zeichen.

drawChar(10,10,'?')

Wichtig:

Einzelne Zeichen müssen, im Gegensatz zu Strings, mit einfachem Hochkomma angegeben werden.

drawCharCentered

  drawCharCentered(x:int,y:int,ch:byte)

Dieser Befehl ist identisch zu drawChar(..), jedoch wird das Zeichen mittig zur x/y-Koordinate gezeichnet (anstatt oben links). So ist es in Kombination mit den Befehlen rotate() und scale() nun möglich, ein Zeichen zentriert zu rotieren oder zu vergrössern/verkleinern.

drawCharCentered(120,120,'$')

Wichtig:

Einzelne Zeichen müssen, im Gegensatz zu Strings, mit einfachem Hochkomma angegeben werden.

textFont

  textFont(fontid:byte)

Bestimmt die Schriftart. Diese kann entweder als Zahl oder mit folgenden Konstanten angegeben werden:

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

Die Fontarten sind eine Kombination aus Schrifttyp (Roboto regular und bold) und Pixelgrösse (16 bis 80).

textFont(FONT_ROBOTO_32)
drawText(20,20,"Hallo")
update()

textWidth

  textWidth(text:byte[])->int

Berechnet aufgrund der aktuellen Schriftart die Breite in Pixel, die der übergebene Texte beim Ausgeben beanspruchen wird. Damit lässt sich ein Textblock mittig oder rechtsbündig anordnen.
<br

textFont(FONT_ROBOTO_48)
w = textWidth("Hallo")
drawText(0,40,"Hallo")
drawText(240-w, 100,"Hallo")
drawText(120-w/2,160,"Hallo")
update()

textLeading

  textLeading(leading:int)

Abstand zwischen den Buchstaben eines Textes.

beginShape

  beginShape()

Startet eine Polygon-Definition. Diese besteht aus einem beginShape(), mehreren Aufrufen von addVertex/Bezier und einem Abschluss mit endShape().

Beispiel:

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

Dieses Beispiel setzt den Ursprung auf den Mittelpunkt des Screens. Dann wird mit begin/endShape() eine Polygon-Klammer eröffnet. Mit “addVertex” werden zwölf Punkte auf einem Kreis hinzugefügt. Diese Polygon stellt also einen Kreis aus 12 Punkten dar.

Beispiel mit Bezier-Kurven:

clear()
fill(100,100,255)
noStroke()
translate(120,120)
for i in 4:
    rotate(PI/2)
    beginShape();
    addVertex(0, 0)
    addBezierVertex(-45, 60)
    addVertex(0, 70)
    addBezierVertex(45, 60)
    addVertex(0, 0)
    endShape(true)
update()

endShape

  endShape(closed:bool)

Mit dieser Funktion wird eine Polygon-Definition abgeschlossen. Wenn closed auf true ist, wird zusätzlich der letzte mit dem ersten Punkt zu einer geschlossenen Linie verbunden.

Beim Aufruf von endShape() wird das Polygon in den Bildschirmbuffer gezeichnet.

Beispiel: siehe beginShape()

addVertex

  addVertex(x:int,y:int)

Diese Funktion ergänzt einen Punkt an der Stelle x/y in einer Polygon-Definition.

Beispiel: siehe beginShape()

addBezierVertex

  addBezierVertex(x:int,y:int)

Ergänzt eine Polygondefinition um eine Bezier-Kurve. Wichtig: Die Koordinaten x/y bestimmen den Bezier-Haltepunkt. Die Kurve wird danach zwischen den eingeschlossenen addVertex-Anweisungen gezeichnet, wie im folgenden Beispiel demonstriert wird:

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

Dieses Beispiel zeichnen den Bezier-Punkt als roten Kreis. Dieser kann im Konstanten-Editor geändert werden.

push

  push()

Die Funktion “push()” speichert sich alle aktuellen Stil- Konfigurationen und Koordinatentransformationen. Mit “pop()” kann man dann wieder zum Originalzustand (vor push()) zurückkehren.

Beispiel:

fill(255,0,0) # setze die Füllfarbe auf rot
translate(120,120) # neuer Nullpunkt ist bei 120,120
push() # wir speichern uns den Zustand
fill(0,255,0) # setze Füllfarbe auf grün
drawRectangle(-50,-50,100,100) # blaues Rechteck
pop() # wir setzen den Zustand wieder zurück (vor push())
drawCircle(0,0,30) # roter Kreis
update() # ausgeben

pop

  pop()

Setzt den zuvor mit push() gespeicherten Zustand wieder zurück.

Beispiel: siehe push()

rotate

  rotate(rad:float)

Rotiert die Zeichnung um den aktuellen Nullpunkt.
rad = Rotation in Radiant (0 bis 2*PI)
rotate wird häufig im Zusammenhang mit push/pop und translate verwendet. Man kann mit dieser Funktion beliebige Objekt um eine beliebige Achse rotieren lassen.
rotate() ist additiv.

Beispiel:

translate(120,120)
for i in 12:
    drawRectangle(50,-5,20,10)
    rotate(PI/6)
update()

scale

  scale(v:float)

Skalliert alle nachfolgenden Zeichnungsbefehle um den angegebenen Wert. Zum Beispiel verdoppelt sich die Grösse mit dem Wert 2 oder halbiert sich die Grösse bei 0.5.

Beachte: scale() ist multiplikativ. Das bedeutet, dass z.B. scale(2) und scale(1.5) zusammen den gleichen Effekt erzielen wie ein einzelnes scale(3).

Beispiel:

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)

Verschiebt den Nullpunkt an die Position x/y.
Die Funktion ist additiv. Jeder zusätzliche Aufruf verschiebt den Nullpunkt relativ zur vorangehenden Position. Wenn man das nicht möchte, kann man push()/pop() verwenden, die den Ursprungszustand wieder herstellen.

Beispiel:

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)

Verwende clipRectangle() um nur in einem bestimmten Bereich (Rechteck) auf dem Bildschirm zu zeichnen.

Damit können beispielsweise nur bestimmte Teile einer Zeichnung ausgegeben werden:

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

Verwende noClipping() um ein zuvor verwendetes clipRectangle() aufzuheben.