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.
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.
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!")
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.
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()
noClipping()
Verwende noClipping() um ein zuvor verwendetes clipRectangle() aufzuheben.
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()
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
clear()
Löschte alle Pixel auf dem Bildschirm.
Damit die Funktion sichtbar wird, muss danach noch ein “update()” ausgeführt werden:
clear()
update()
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.
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)
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()
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()
drawPixel(x:int,y:int)
Zeichnet einen Pixel an der Position x/y.
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(x0:int,y0:int,r0:byte,r1:byte)
Zeichnet einen Kreis an de Position x0/y0 mit den Radien r0 und r1.
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()
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 blau
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
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()
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
FONT_ROBOTO_BOLD_64
FONT_ROBOTO_BOLD_80
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()
pop()
Setzt den zuvor mit push() gespeicherten Zustand wieder zurück.
Beispiel: siehe push()
addVertex(x:int,y:int)
Diese Funktion ergänzt einen Punkt an der Stelle x/y in einer Polygon-Definition.
Beispiel: siehe beginShape()
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()
textLeading(leading:int)
Abstand zwischen den Buchstaben eines Textes.
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()
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()
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)
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.
drawText(x:int,y:int,text:byte[])
Zeichnet einen Text.
drawText(10,10,"Hello World!")
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()
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()
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()
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()
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()
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()
drawLine(x0:int,y0:int,x1:int,y1:int)
Zeichnet eine Linie von x0/y0 bis x1/y1.
drawLine(0,0,240,240)
update()
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()
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()
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()
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.
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)