Text- und Pixeldarstellung

Oft besteht der Wunsch, etwas auf den Bildschirm zu malen. Für ein Spiel sollen es Auto's, Figuren oder Ufo's sein. Für die Arbeit Kurven, Pläne oder Charts.

An sich sind wir dazu schon in der Lage. Wir können schon Spiele mit einer Spielfigur erstellen. Und haben schon Balkendiagramme gezeichnet (im Statistikrechner). Aber es entsteht die typische "Klötzchengrafik" der frühen PC-Zeit: Wir müssen das Bild aus lauter viereckigen Klötzchen zusammensetzen, nämlich unseren Zeichen. Das Bild ist also aus einem 40 mal 25 - Raster zusammengesetzt. Kann man dieses Raster nicht feiner machen?

Man muss es irgendwie können. Denn die Zeichen auf dem Bildschirm sind in sich ja auch feiner gerastert. Wenn Sie genau hinsehen, erkennen Sie, dass jedes Zeichen aus 7 mal 7 Punkten zusammengesetzt ist. So ein Zeichen nennt man ein "Pixel". Wobei jeweils noch ein Punkt Abstand bleibt. Insgesamt sind es also 8 mal 8 Pixel pro Zeichen. Und 40 x 8 = 320 Pixel in der Horizontalen und 25 x 8 = 200 Pixel in der Vertikalen insgesamt. Können wir diese 320 mal 200 Pixel nicht separat ansteuern?

Bei einem leistungsfähigen Computer kann man das. Bei PC's heute sowieso kein Thema mehr. Dennoch sollte man die Unterscheidung im Kopf behalten: Es gibt bei der Bildschirmdarstellung zwei unterschiedliche Modi: Textdarstellung und Pixeldarstellung. Beim ersteren wird der Bildschirm aus Zeichen zusammengesetzt, beim letzteren aus einzelnen Pixeln.

Unsere erste Pixelgrafik

Den C16 stellt man mittels des Befehls GRAPHIC auf Pixeldarstellung um. Dabei sollten Sie allerdings vorsichtig sein. Wenn der C16 im HiRes (High Resolution Graphic- Modus) ist, dann kann er keinen Text mehr darstellen. Jedenfalls nicht mehr so einfach. Und damit auch keine Fehlermeldung, kein "READY" und keine Zeichen, die Sie mit der Tastatur eingeben: Im HiRes-Modus sind Sie "blind". Wenn Sie ein Programm schreiben, sollten Sie also

1. am Ende immer wieder nach GRAPHIC 0 zurückschalten lassen (Textmodus).
2. eine Programmunterbrechung möglichst vermeiden.
3. sich darauf einstellen, im Notfall GRAPHIC 0 + ENTER blind einzutippen.

Koordinatensysteme

Wie steuere ich ein Pixel mit dem C16 an? Es muss ja quasi einen "Namen" tragen. Der "Name" ist seine Position im Raster, also quasi "Zeile" und "Spalte", wie beim CHAR-Befehl. Man nennt Zeile und Spalte in diesem Zusammenhang Koordinaten und benennt sie meistens mit X (Spalte) und Y (Zeile). Aber Vorsicht! In der Mathematik zeigt die Y-Achse meist von unten nach oben, d.h. 0 ist unten und 199 oben. Beim Programmieren behält Y die Zeilenlogik bei: 0 ist oben und 199 unten. Es gibt also nun 320 "Spalten" und 200 "Zeilen". Der Befehl DRAW 1,X,Y zeichnet einen Punkt an die Koordinate X,Y. Die Eins steht für die Farbe: Vordergrundfarbe. Die Null wäre die Hintergrundsfarbe. DRAW funktioniert allerdings nur, falls der HiRes-Modus eingeschaltet ist. Das macht man mit GRAPHIC 1,1. Im folgenden ein kleines Beispielprogramm:

10 REM DER C16 BEKOMMT MASERN
20 GRAPHIC 1,1
30 FOR I=1 TO 100
40 LET X=INT(RND(1)*320)
50 LET Y=INT(RND(1)*200)
60 DRAW 1,X,Y
70 NEXT I
80 CHAR ,0,20,"DRUECKEN SIE EINE TASTE"
90 GETKEY A
100 GRAPHIC 0

Das ist natürlich noch nicht so beeindruckend. Aber es zeigt das Prinzip. Und es zeigt, dass das mit dem Zeichen-Ausgeben auf dem HiRes-Schirm doch funktioniert: Aber eben nur mit dem CHAR-Befehl. PRINT und INPUT gehen nicht. Hier kommt ein SYNTAX ERROR.

Eine Kurve zeichnen

In der Mathematik ist eine Kurve ein Bild in einem XY-Diagramm, in dem zu jedem X ein Y zugeordnet und der entsprechende Punkt eingezeichnet wird. Wir wollen einmal den PC die Kurve zeichen, die sich ergibt, wenn y=0.2*x^3+x^2 (^ steht für den Pfeil nach oben) sein soll. Der interessante Wertebereich für x liegt zwischen -5 und +5.

Das Problem ist bei allen Computergrafiken, von den Computerkoordinaten (0 bis 319) auf die Weltkoordinaten (-5 bis +5) zu kommen und in Y wieder zurück auf Computerkoordinaten (0 bis 199). Dazu braucht es etwas Rechnerei, die im folgenden Programm in den Zeilen ??? und ??? vorgenommen wird. Dazwischen steht die eigentliche Formel, wobei für die Parameter 0.2 vor x^3 und 1 vor x^2 A und B eingesetzt wurde.

10 REM PUENKTCHENPARABEL
20 LET A=0.2
30 LET B=1
40 LET DX=10
50 LET XMIN=-5
60 LET DY=10
70 LET YMIN=-2
80 GRAPHIC 1,1
90 FOR I=0 TO 319
100 REM I=X-COMPUTER
110 LET X=XMIN+DX*I/319
120 LET y=A*X^3+B*X^2
130 LET YC=INT(Y/DY*200+YMIN)
140 DRAW 1,I,YC
150 NEXT I

Hier noch eine Erklärung zu den Variablen:

• I: Computer-X-Koordinate
• X: Welt-X-Koordinate
• Y: Welt-Y-Koordinate
• YC: Computer-Y-Koordinate
• XMIN: Linker Rand der X-Achse (Weltsystem)
• DX: Breite X-Achse (weltsystem)
• YMIN: Unterer Rand der Y-Achse (Weltsystem)
• DY: Höhe Y-Achse (Weltsystem)

Linien zeichnen

Die Pünktchenkurve oben ist schon ganz hübsch. Noch hübscher wäre es, wenn wir die einzelnen Punkte mit Linien verbinden könnten. Natürlich können wir das mit lauter weiteren Pünktchen machen. Aber der C16 bietet uns mehr Komfort: Er hat einen Befehl zum Zeichnen von Linien. Und zwar ist das der gleiche Befehl DRAW, den wir schon können. Aber nun mit erweiterter Syntax:

DRAW 1,X1,Y1 TO X2,Y2.

Dieser Befehl zeichnet im Computer-Koordinatensystem eine Linie vom Punkt (X1/Y1) zum Punkt (x2/y2).

Übungsaufgabe: Erweitern Sie das obere Kurvenzeichen-Programm so, dass es die Punkte mit Linien verbindet. Denken Sie daran, dass sich der Computer immer an den vorhergehenden Y-Wert erinnern muss, wenn er die Linie zeichnen soll. Und dass am Anfang beim ersten Punkt es nichts zurückzuerinnern gibt. Elegant lösen Sie das so, dass Sie am Anfang den "Erinnerungspunkt" auf den ersten zu zeichnenden Punkt legen. Viel Spass!

Weitere Grafikbefehle

Der C16 kennt noch eine ganze Reihe weiterer Grafibefehle:

CIRCLE

Einfache Syntax: CIRCLE COL,X,Y,R zeichnet einen Kreis um (X/Y) mit Radius R. COL=0 oder 1

Vollständige Syntax: CIRCLE COL,X,Y,XR,YR,W1,W2,ROT,DEG zeichnet ein Polygon entlang eines Ellipsenumfangs. XR=Radius der Halbachse in X-Richtung der Umfangsellipse, YR=Radius der Y-Halbachse, W1 und W2 Start- und Endwinkel, falls das Polygon nur unvollständig gezeichnet werden soll (Segment der Umfangellipse), ROT=Rotationswinkel der X-Halbachse gegen die Horizontale, DEG=Winkel zwischen zwei Eckpunkten des Polygons. DEG=1 zeichnet faktisch eine Ellipse, DEG=45 ein Oktogon, DEG=90 ein Viereck und DEG=120 ein Dreieck.

BOX

Einfache Syntax: BOX COL,XLINKS,YOBEN,XRECHTS,YUNTEN zeichnet ein Viereck zwischen Punkt (XLINKS,YOBEN) und (XRECHTS/YUNTEN).

Vollständige Syntax: BOX COL,XLINKS,YOBEN,XRECHTS,YUNTEN,ROT,FILL. Rotiert das Viereck um ROT Grad gegen die Horizontale. FILL=1: Viereck wird gefüllt. FILL=0: Es wird nur der Umriss gezeichnet.

PAINT

PAINT COL,X,Y,MODE füllt eine Fläche, die durch einen Umriss definiert ist, mit der Farbe COL. (Also COL=1 im HiRes-Modus). MODE ist im HiRes-Modus ohne Belang, kann auf Null gesetzt sein.

SSHAPE

Mit SSHAPE kann man einen kleinen Bildschirmausschnitt abspeichern, um ihn dann mit GSHAPE an einer beliebigen anderen Stelle des Bildschirm wieder auszugeben. Auf diese Art und Weise kann man bewegte kleine Figuren programmieren.
Syntax: SSHAPE String,XLINKS,YOBEN,XRECHTS,YUNTEN. Die Koordinaten geben dabei den Bildschirmausschnitt an, der gespeichert werden soll. STRING kann ein String sein, z.B. "UFO" oder eine Stringvariable wie A$. Weiter unten ist ein kleines Beispielprogramm zu SSHAPE und GSHAPE angegeben, das ein kleines Ufo über den Bildschirm hoppeln lässt. Man nennt eine solche bewegte kleine Grafik auch eine "Sprite" oder "Bob".

GSHAPE

Syntax: GSHAPE STRING,X,Y,MODE. STRING enthält die Grafikdaten des Sprites, (X/Y) ist der Punkt der linken oberen Ecke des Sprites und MODE ist ein s.g. Flag, eine Zählvariable, die verschiedene Zustände beschreibt. MODE=0, also Modus null, bedeutet, dass das Sprite einfach auf den Bildschirm gezeichnet und alles Darunterliegende überdeckt wird.

• Mode 0: Überdeckend zeichnen.
• Mode 1: Invertiert zeichnen.
• Mode 2: Schwarze Pixel der Shape füllen weisse Pixel des Hintergrunds. (OR-Verknüpfung der Shape- und Hintergrundspixel.)
• Mode 3: Weisse Pixel des Hintergrunds "bohren" sich in die Shape. (AND-Verknüpfung). Das heisst, die "Löcher" der Shape sind durchsichtig.
• Mode 4: Shape bildet "Negativ" des Hintergrunds. (Exclusiv-OR (XOR-) Verknüpfung.)

Beispielprogramm zu SSHAPE/GSHAPE

Das folgende Programm zeichnet mit DRAW-Befehlen ein kleines Ufo, speichert es mit SSHAPE ab und lässt es dann mittels Anwendung der Befehle BOX (Löschen des Ufos an alter Position) und GSHAPE (Zeichnen an neuer Position) über den Bildschirm "fliegen". Da der C16 nun mal nicht der schnellste Computer war und er auf Ihrem PC in Originalgeschwindigkeit läuft, ist das "Fliegen" allerdings etwas holprig. Man sieht deutlich, wie die einzelnen Bilder gemalt und wieder gelöscht werden.

Farbgrafik

Im hochauflösenden Grafikmodus gibt es nur zwei Farben: Hintergrunds- und Vordergrundsfarbe. Warum das beim C16 so ist und beim PC nicht, das erfahren Sie im nächsten Abschnitt. Aber auch der C16 hat noch Farbe im Köcher: Mit dem Farbgrafik-Modus (Multicolor Graphic Mode). Hier erhöht sich die Zahl der Farben auf 4, allerdings auf Kosten der AUflösung: Nun sind nur noch 160 statt 320 Pixel in der Horizontalen möglich.

Grafik und Speicher

Sie müssen sich mit dem C16 und seinen Grafikmöglichkeiten nicht besonders ausführlich auseinandersetzen. Sie sind, verglichen mit einem heutigen PC, sehr beschränkt und dieses Kapitel soll nur ein paar Grundbegriffe und ein gewisses Gefühl für Pixelgrafik vermitteln.

In diesem Abschnitt werden wir die Grafik-Beschränkungen des C16 kurz anschauen, um zu verstehen, was Speicher und Grafik miteinander zu tun haben. Das ist nicht nur für Sie als Programmierer sehr nützlich zu wissen, sondern auch als Benutzer einer Digitalkamera, eines DV-Camcorders, von Pogrammen für Videoschnitt und -kompression, für den Download von Filmen aus dem Internet usw.

Der Bildschirmspeicher

Jeder Computer muss das, was er auf dem Bildschirm anzeigt, irgendwie zwischenspeichern. Die Bildschirmelektronik muss 50 bis 100 Mal in der Sekunde für jeden Fleck des Bildschirms wissen, was dort stehen soll und das kann sie nicht direkt vom Programm erfahren, sonst müssten sich die Programme mit nichts anderem beschäftigen als dem Bildschirmaufbau.

Um das zu verhindern, gibt es den Bildschirmspeicher, in dem das gesamte Bild in irgendeiner Form abgelegt ist und den die Videoelektronik auslesen kann. Bei einfachen Computern wie dem C16 handelt es sich dabei um einen Teil des Hauptspeichers.

Wie ist der Bildschirminhalt gespeichert? Im Textmodus in Form der einzelnen Zeichen. Das heisst, der ganze Bildschirmspeicher ist 40x25 Bytes = 1000 Bytes gross. Bei 16K Speicher kein Problem. Allerdings kommen nochmals 1000 Bytes für die Farbe dazu, macht also zusammen 2K. Unter anderem wegen dieser 2K zeigt der C16 am Anfang nur verfügbare 12K und nicht 16K an.

Im Grafikmodus wird jedes Pixel getrennt abgespeichert. Ein Bild, das Pixel für Pixel gespeichert ist, nennt man eine Bitmap. Das sind dann 320x200=64000 Pixel. Wenn jedes Pixel ein Byte bräuchte, bräuchte man dazu 64K Bildschirmspeicher. Viel zu viel für den kleinen C16. Allerdings könnte dann jedes Pixel 256 verschiedene Zustände einnehmen, d.h. es wären 256 Farben pro Pixel möglich. Wir sehen also: Wir können deshalb nicht wie beim Text "beliebige" Farben auswählen, weil dann der Bildschirmspeicher nicht ausreichen würde. Und selbst wenn er ausreichen würde: Der C16 ist als Uralt-Computer nicht in der Lage, 64K 50 mal in der Sekunde an den Monitor zu übertragen. Daher musste man die Zahl der Bits pro Pixel von 8 auf eins senken. Dann haben wir 2 mögliche Farben (Bit=0 oder 1) und nur 8K Bildschirmspeicher. Das ist die s.g. 8K-Grafik, die damals bei Homecomputern üblich waren.

Jetzt wird aber auch klar, dass, wenn wir die HiRes-Grafik einschalten, nicht mehr so wahnsinnig viel Speicher für Programm und Daten haben: 12K-8K=4K Speicher bleiben übrig. Vielleicht haben Sie schon bemerkt, dass im HiRes-Modus die "Out of Memory"-Meldung ziemlich bald erscheint.

Im Farbgrafikmodus werden die 8K anders aufgeteilt: 160x200 Pixel x 2 Farbbits. Denn mit 2 hoch 2 = 4 Zuständen kann man 4 Farben darstellen. Nach dem gleichen Prinzip funktioniert das auch mit Ihrer Digitalkamera und Ihrem Camcorder: Wollen Sie die zahl der Pixel erhöhen, brauchen Sie mehr Speicher, d.h. es geht nicht mehr soviel Foto oder Film auf Ihr Speichermedium. Die Farbauflösung können Sie nicht reduzieren, da in diesem Fall noch Kompressionsverfahren benutzt werden, weil ansonsten auf Ihre ganze Festplatte nur 10 Minuten Film gehen würden. Bei diesen Kompressionsverfahren (MPEG, DivX) würde es nichts bringen, die Farbauflösung zu reduzieren, im Gegenteil: Man bräuchte sogar mehr Speicher. Aber Sie begegnen der Farbauflösung bei den Einstellungen Ihrer Bildschirmanzeige, bei der reduzierten Farbauflösung von kleinen Internetgrafiken (GIFs: Beschränkt auf 256 Farben), usw.

Einige gängige Grafikmodi und ihr Speicherbedarf

Beim Lesen dieser Tabelle dürfte die Logik klar werden. Heute gängige Grafikkarten haben mindestens 32 MB Speicher und sind damit locker in der Lage, höhere Auflösungen in 4 Byte Farbtiefe ("Truecolor") zu liefern, als ein irgendwie bezahlbarer Monitor darstellen kann. In der Praxis sind die XGA-Auflösungen noch sehr beliebt, vor allem in Verbindung mit LCD-Displays.