[JAVA] Einführung in die Programmierung für Studenten: Zeichnen Sie gerade Linien

Hinweis: Qiita druckt nicht gut. Informationen zum Drucken oder Konvertieren in PDF finden Sie unter http://gurakura.sakura.ne.jp/hellomondrian/line/ ( Gleicher Inhalt).

Worauf Sie in diesem und im nächsten Abschnitt abzielen sollten

Das Bild oben stammt aus Piet Mondrians Werk New York City I (1942). https://uploads5.wikiart.org/images/piet-mondrian/new-york-city-i-1942.jpg!Large.jpg Sie können es bei sehen.

Das Ziel dieses und des nächsten Abschnitts ist es, programmgesteuert Bilder zu zeichnen, die wie diese Mondrian-Arbeit aussehen. Nachdem Sie die Leinwand mit vorheriger Satz fertig haben, werde ich erklären, wie man zeichnet.

Grundlagen des Zeichnens von geraden Linien

In der Verarbeitung können Sie mit der Linienfunktion eine gerade Linie zeichnen. Die Linienfunktion hat auch mehrere Verwendungszwecke. Da diese Serie jedoch keine 3D-CG abdeckt, werden wir erklären, wie die Linienfunktion in 2D verwendet wird (dh als Zeichnung in einer Ebene).

Beim Zeichnen einer geraden Linie durch ein Programm zeichnet der Computer (= Computer) eine gerade Linie, aber dazu muss dem Computer mitgeteilt werden, um welche Art von gerader Linie es sich handelt. Es gibt viele Möglichkeiten, eine gerade Linie darzustellen. Die hier verwendete Methode besteht darin, die Position der Start- und Endpunkte einer geraden Linie (genauer gesagt eines Liniensegments) anzugeben.

Der Startpunkt und der Endpunkt werden mit ihren jeweiligen Koordinaten ausgedrückt. Insbesondere wird es mit vier Argumenten verwendet, Zeile (x1, y1, x2, y2). Jedes Argument ist in Paare (x1, y1) und (x2, y2) unterteilt, die die Positionen des Startpunkts (x1, y1) und des Endpunkts (x2, y2) auf der Leinwand darstellen.

Zum Beispiel ist ein Programmteil namens line (20,10,450,400) nichts anderes als die Anweisung an Processing, "eine gerade Linie von Position (20,10) zu Position (450,400) zu zeichnen". Das eigentliche Programm sieht folgendermaßen aus:

//Canvas-Setup ← Kommentar
background(250,250,250);
size(500,500);

//Linie ziehen ← Kommentar
line(20,10,450,400);

In der ersten und fünften Zeile gibt es eine unbekannte Beschreibung. Dies wird als Kommentar bezeichnet und ist ein Memo (Kommentar) für Menschen, nicht für Computer.

Die beiden Schrägstriche // und danach sind Kommentare, daher haben das Einrichten der Zeichenfolgen und das Zeichnen einer Linie keine programmatische Bedeutung (also keine Sorge). Wenn Sie ein Programm in Processing schreiben und etwas notieren möchten, können Sie natürlich // schreiben und dann eine Notiz schreiben (jedoch die aktuelle Version (3.5)). In .4) scheinen die Zeichen bei der Eingabe von Japanisch verstümmelt zu sein.

In ähnlicher Weise ist die leere Zeile in der 4. Zeile auch ein Hilfsmittel, um dem Menschen das Lesen zu erleichtern. Die vierte Zeile ist für die Verarbeitung (oder besser gesagt für die Programmiersprache Java) bedeutungslos, da sowohl Leerzeilen als auch Leerzeichen übersprungen werden. Mit dieser leeren Linie können Sie jedoch den Teil, in dem Sie die Leinwand vorbereiten, und den Teil, in dem Sie eine Linie auf der vorbereiteten Leinwand zeichnen, visuell trennen. Nutzen Sie beim Schreiben eines Programms diese Funktionen und schreiben Sie einfach zu lesenden Code (Programmliste).

Ruhige Gesprächspause. Wenn Sie die obige Programmliste ausführen, erhalten Sie ähnliche Ergebnisse wie in der folgenden Abbildung.

Koordinatensystem

Was für ein Ort sind übrigens die beiden Positionen (20,10) und (450,400), die der Linienfunktion im vorherigen Programm zugewiesen wurden? Wird es zeigen? Um dies zu verstehen, müssen wir das Koordinatensystem verstehen. Das "Koordinatensystem" scheint schwierig zu sein, aber es ist nicht so schwierig.

Was ist eine Koordinatenachse?

In der Beschreibung des Koordinatensystems sprechen wir manchmal über die x-Achse und die y-Achse. Es wird auch in dieser Erklärung erscheinen. Hier reicht es zu verstehen, worum es in horizontaler und vertikaler Richtung geht. Die horizontale Richtung wird im Allgemeinen als x-Achse bezeichnet. Die x-Achse in der Verarbeitung ist auch die horizontale Richtung.

Übrigens können Sie die Ausrichtung der Koordinatenachsen frei bestimmen. Mathematisch spielt es keine Rolle, ob die x-Achse vertikal ist. Tatsächlich gibt es in einigen Bereichen des Fernerkundungsfeldes auch eine Kultur, in der die x-Achse vertikal zeigt.

Ausrichtung der Koordinatenachse

Wenn diese x-Achse ausgerichtet ist und die x-Achse nach rechts ausgerichtet ist, bedeutet das Erhöhen des Werts von x mehr nach rechts. Auch in der Verarbeitung befindet sich die Ausrichtung der x-Achse rechts. Die Position (20,10) hat also die x-Koordinate (= Position auf der x-Achse) von 20, und die x-Koordinate der Position (450,400) ist 450, also ist (450,400) die Position rechts von (20,10). Es wird sein.

Als nächstes wird die y-Achse erklärt. Im Mathematikunterricht in der Mittel- und Oberstufe denke ich beim Zeichnen eines Diagramms, dass die Position umso höher ist, je höher der Wert der y-Koordinate ist. Wenn Sie beispielsweise ein Balkendiagramm mit der y-Achse als Temperatur zeichnen, wächst das Balkendiagramm umso mehr nach oben, je höher die Temperatur ist.

In der Verarbeitung zeigt die y-Achse jedoch nach unten, anders als in der Mathematik, die Sie in der Schule gelernt haben. Je höher der y-Koordinatenwert ist, desto niedriger ist daher die Position auf dem Bildschirm.

Herkunft und Maßstab koordinieren

Lassen Sie uns abschließend über den Ursprung, dh die Koordinaten (0,0), und die Größe der Koordinaten sprechen. Aus der bisherigen Geschichte kennen wir die Ausrichtung und Ausrichtung der x- und y-Achse der Verarbeitung. Die x-Achse zeigt nach rechts und die y-Achse zeigt nach unten.

Die Position kann jedoch nicht nur durch die Ausrichtung der Koordinaten bestimmt werden. Wo befindet sich mindestens ein Punkt in den Koordinaten auf dem Proessing-Bildschirm? Wie stark ändert sich die x- und y-Koordinate um 1? Wenn Sie es nicht wissen, können Sie den Ort nicht genau bestimmen.

Da die Richtungen der x-Achse und der y-Achse bereits bekannt sind, wenn beispielsweise die oberen linken und unteren rechten Koordinaten des Verarbeitungsbildschirms (Fensters) bekannt sind, scheint es möglich zu sein, die Koordinaten mit der Position auf dem Bildschirm zu verknüpfen. Tatsächlich befindet sich der Ursprung in der Verarbeitung - die Position von (x, y) = (0,0) - oben links auf der Leinwand.

Was sind die unteren rechten Koordinaten? Dies ist die Größe der Leinwand minus jeweils einer. Wenn beispielsweise die Größe (400.300) eingestellt ist, ist die untere rechte Position (399.299).

Warum wird die untere rechte Koordinate von 1 von der Breite und Höhe abgezogen, wenn Größe (400.300) verwendet wird? Dies ist leicht zu verstehen, wenn Sie sich vorstellen, dass es 400 Pixel horizontal und 300 Pixel vertikal hat. Koordinaten geben die Position jedes Pixels an, das am weitesten links stehende Pixel ist das 0. Pixel, das nächste ist das 1. Pixel usw. und das 400. Pixel ist das 399. Pixel. (0,1,2, ... 399 ergibt eine Zahl von 400).

Das Programm, das die Diagonale von links oben nach rechts unten zeichnet, sieht also folgendermaßen aus:

// canvas setup
background(250,250,250);
size(400,300);

// draw a line
line(0,0,399,299);

Zeichnen Sie ein Bild mit einem Programm

Mit der bisherigen Erklärung hat die Linienfunktion das minimale Zeichnen aktiviert. Natürlich können Sie die Zeilenfunktion so oft verwenden, wie Sie möchten, oder Sie können sie mit verschiedenen Argumenten aufrufen.

Lassen Sie uns nun tatsächlich ein Bild mit dem Programm zeichnen. Es ist weit entfernt von Mondrians New York City I (das Bild oben auf dieser Seite), aber wenn ich das folgende Programm ausführe,

// canvas setup
background(250,250,250);
size(500,500);

// draw lines
line(  0, 30,500, 30);
line( 20,  0, 20,500);
line(400,  0,400,500);
line(  0,300,500,300);

Sie erhalten folgende Anzeige:

Welche Linienfunktion welche Linie zeichnet, wenn die x-Koordinatenwerte gleich sind, wird eine vertikale Linie gezeichnet, und wenn die y-Koordinatenwerte gleich sind, wird eine horizontale Linie gezeichnet. Ist ein guter Hinweis.

Zeile 6 der obigen Programmliste ruft die Zeilenfunktion als Zeile (0,30,500,30) auf. Dies ist die Verbindungslinie zwischen den Koordinaten (0,30) und (500,30). Die y-Koordinate ist an beiden Positionen 30, es ist also nichts weiter als eine horizontale Linie mit der y-Koordinate von 30 zu zeichnen. Wenn Sie genau hinschauen, können Sie feststellen, dass sich in der 9. Zeile ein ähnlicher Code (ein Teil des Codes im Programm) befindet, der insgesamt 2 horizontale Zeilen zeichnet.

Wenn die x-Koordinaten gleich sind, zeichnen Sie eine vertikale Linie. In der Programmliste haben die 7. und 8. Zeile die gleichen x-Koordinaten für den Start- und Endpunkt. Die 7. Linie ruft die Linienfunktion auf, um eine vertikale Linie mit einer x-Koordinate von 20 zu zeichnen, und die 8. Linie ruft eine Linienfunktion auf, um eine vertikale gerade Linie mit einer x-Koordinate von 400 zu zeichnen.

Das ist alles für diese Zeit. Es ist sehr einfach, aber das Programm hat es möglich gemacht, Bilder zu erstellen. Nächstes Mal lernen wir, wie wir diese Linien attraktiver machen können.

Spalte 1: Sind die Koordinaten in der Linie frei?

In der obigen Programmliste beträgt die Größe der Zeichenfläche 500 in Höhe und Breite, aber der durch die Linienfunktion angegebene Koordinatenwert beträgt 500. Diejenigen, die dieses Dokument gut gelesen haben, haben sich vielleicht gefragt: "Was?"

Für dieses Programm beträgt die untere rechte Koordinate der Cabas (499.499). So scheint beispielsweise der Code in Zeile 7 (20,0,20,500) gegen dieses Prinzip zu verstoßen.

Dies ist jedoch ein völlig normales Verarbeitungsprogramm. Das liegt daran, dass die untere rechte Koordinate sicherlich (499.499) ist, aber es ist keine Regel, dass die x- und y-Koordinaten 500 nicht überschreiten dürfen. Im Gegenteil, es ist zulässig, dass die x- und y-Koordinatenwerte negative Werte annehmen.

In gewisser Weise gibt es eine sehr große Ebene, und ein Teil dieser Ebene wird im Fenster als Quadrat mit (0,0) oben links und (499.499) unten rechts angezeigt. Sie können sich das so vorstellen. Es spielt also keine Rolle, ob der Koordinatenwert größer als 499 oder negativ ist. Nur einige dieser geraden Linien, die in der großen Ebene gezeichnet sind, werden ausgeschnitten und auf der Leinwand angezeigt. Übrigens wird das Anzeigen nur eines Teils dieses Bereichs als Clipping bezeichnet.

Spalte 2: Ist das Leerzeichen im Programm frei?

Ein weiteres Thema der Freiheit. In der obigen Programmliste wird ein Leerzeichen in den Argumentteil der Zeilenfunktion eingefügt, um die Anzeige zu erleichtern. Viele Programmiersprachen, einschließlich der in der Verarbeitung verwendeten Java-Sprache, ignorieren Leerzeichen, wo immer dies angebracht ist. Mit anderen Worten, es kann ein Leerzeichen vorhanden sein oder nicht.

Natürlich kann der Name der Linienfunktion nicht mit Leerzeichen wie l i n e geschrieben werden. In der Verarbeitung, wie viele Programmiersprachen, Sie können kein Leerzeichen in die Mitte des Funktionsnamens setzen. Die Nummer 400 kann auch nicht als 400 geschrieben werden. Sie können jedoch 400,0 als Argument mit einem Leerzeichen wie 400, 0 schreiben.

Sie können ein Programm schreiben, das einfacher zu lesen ist, indem Sie die entsprechenden Leerzeichen einfügen. Ein Programm fühlt sich wie eine von Logik dominierte Welt an, aber es ist nicht wie ein literarisches Werk (das möglicherweise überbewertet ist) mit einer geschmackvollen Programmliste und einer präzisen und scharfen Programmliste. Machen.