Mit Qiita ist es schwierig, nur den Textteil zu drucken. Daher wird derselbe Inhalt auf der folgenden Seite veröffentlicht. Wenn Sie ausdrucken oder in PDF konvertieren möchten, verwenden Sie bitte diese Seite:

http://gurakura.sakura.ne.jp/hellomondrian/strokeweight/

Einführung

Die Verwendung der Linienfunktion hat es ermöglicht, Bilder programmgesteuert zu zeichnen, wenn auch mit minimalem Ausdruck. Dies allein reicht jedoch nicht aus, um sich auszudrücken. In diesem Abschnitt wird beschrieben, wie Sie die Linienstärke und -farbe ändern.

Ändern Sie die Dicke der Linie

Zunächst zeige ich Ihnen, wie Sie die Linienstärke ändern können. Die Linienstärke wird mit der StrokeWeight-Funktion eingestellt.

Verwenden Sie zur Verwendung der Strichfunktion StrokeWeight (20) usw. und geben Sie die Dicke der Linie an, die Sie als Argument für die Anzahl der Pixel verwenden möchten. Im folgenden Beispiel beträgt die Linienbreite 20 Pixel.

background(250,250,250);
size(500,500);

strokeWeight(20);
line(70,100,450,300);

Das Ergebnis der Ausführung dieses Programms ist wie folgt: First Line

Wenn Sie die Breite der Linie vergrößern, sehen Sie nebenbei, dass beide Enden der geraden Linie abgerundet sind.

Die durch StrokeWeight festgelegte Linienbreite bleibt wirksam, bis sie durch StrokeWeight erneut geändert wird.

background(250,250,250);
size(500,500);

strokeWeight(10);
line(  0, 30,500, 30);
line( 20,  0, 20,500);
line(400,  0,400,500);
line(  0,300,500,300);

Wenn ich dieses Programm ausführe, erhalte ich die folgende Abbildung:

multi bold lines

Ändern Sie die Farbe der Linie

Die Linienfarbe kann mit der Strichfunktion geändert werden. Wie beim Hintergrund gibt es verschiedene Möglichkeiten, die Farbe anzugeben. Hier wird jedoch erläutert, wie Sie einen RGB-Wert festlegen, wie im Abschnitt Hintergrundfarbe erläutert.

Setzen Sie wie beim Hintergrund als Strich (r, g, b) die durch (R, G, B) = (r, g, b) bestimmte Farbe auf die Linienfarbe. Wenn beispielsweise ein Strich (255,0,0) angegeben ist, sind die danach gezeichneten Linien rot. Die Werte für R, G und B liegen wie bei backgrund zwischen 0 und 255.

background(250,250,250);
size(500,500);

strokeWeight(10);
stroke(255,0,0);	// <--- red
line(400,30,50,350);

Das Ausführungsergebnis des obigen Programms ist

red line

Es wird sein.

Wie bei StrokeWeight bleibt die durch Stroke angegebene Linienfarbe erhalten, bis sie mithilfe der Storke-Funktion erneut geändert wird. Mit anderen Worten, sobald es auf Rot gesetzt ist, sind alle Zeichnungen der danach ausgeführten Linienfunktion rote Linien.

Im folgenden Programm wird nach dem Zeichnen der roten Linie die Strichfunktion erneut mit einem Argument aufgerufen, das blau bedeutet. Wenn Sie die Farbe auf diese Weise nach Bedarf ändern, können Sie frei Bilder erstellen (obwohl es sich immer noch nur um Strichzeichnungen handelt).

background(250,250,250);
size(500,500);

strokeWeight(10);	// <--- weight

stroke(255,0,0);	// <--- red
line(  0, 30,500, 30);
line( 20,  0, 20,500);

stroke(0,64,255);	// <--- light blue
line(400,  0,400,500);
line(  0,300,500,300);

Ausführungsergebnis des obigen Programms:

multi color lines

Wie Sie aus dieser Abbildung sehen können, ist die später gezeichnete Linie oben gezeichnet. Dies ist das gleiche wie bei der Verwendung von undurchsichtiger Farbe wie Ölfarbe, daher denke ich, dass dies allen College-Studenten bekannt sein wird.

Die Verarbeitung kann auch Informationen verarbeiten, die als "Alpha-Wert" bezeichnet werden und die Deckkraft anzeigen. Mit anderen Worten, Sie können eine halbtransparente Farbe angeben, und um es klar auszudrücken, Sie können sie wie eine transparente Aquarellfarbe malen.

Bitte beachten Sie übrigens, dass Alpha nicht transparent ist. Da es sich eher um "Nichttransparenz" als um Transparenz handelt, bedeutet 1,0 = 100% vollständige Deckkraft und 0 = 0% vollständige Transparenz.

Spalte 1: Wird es nicht überschrieben, auch wenn ich es später zeichne?

Da in dieser Serie nur sogenannte 2D-Bilder behandelt werden, werden diese auch beim Zeichnen durch ein Programm nacheinander überschrieben. Die Verarbeitung kann jedoch auch 3D-CG verarbeiten. In diesem Fall wird sie nicht immer von dem überschrieben, was Sie später gezeichnet haben.

Im Fall von 3D-CG werden Informationen hinzugefügt, die die Tiefe angeben, sodass später gezeichnete Objekte möglicherweise tiefer platziert werden.

Deine Stadt I --- Lass uns mit den bisherigen Funktionen zeichnen

Versuchen Sie am Ende dieses Abschnitts, ein Programm zu Ihrem Stadtthema zu zeichnen. Hier werde ich programmgesteuert ein Bild mit dem Thema des Bereichs erzeugen, in dem ich fertig bin:

my Town I

Hier repräsentiert die blaue Farbe den Fluss und das Gelb auf beiden Seiten repräsentiert die Straße, die am Fluss verläuft. Es gibt eine Brücke, die die Straße rechtwinklig schneidet.

Hier ist das Programm, das dieses Bild generiert

// my Town I  by Koji Iigura
background(250,250,250);
size(500,500);
strokeWeight(10);

stroke(0,64,255);   // <--- light blue
line(0,100,500,100);

stroke(250,240,0);   // <--- yellow
line(  0, 80,500, 80);
line(  0,120,500,120);
line(180,  0,180,500);
line(  0,350,500,350);
line(470,  0,470,500);

stroke(255,0,0);    // <--- red
line(400,  0,400,500);

Weil das Programm keinen besonders technischen Teil enthält Wenn Sie es in der Reihenfolge von oben lesen, können Sie es verstehen.

Spalte 2: Arialing und Anti-Arialing

Die auf dem Computer gezeichneten Linien sind jetzt vollständig sauber. Die geraden Linien, die in den frühen 1980er Jahren auf Personalcomputern gezogen wurden, als Personalcomputer noch als Mikrocomputer bezeichnet wurden, waren sehr gezackt.

Im Allgemeinen ähnelt ein computergeneriertes Bild (= Bild) einem sehr feinen Mosaikbild, das aus Quadraten besteht, die als Pixel bezeichnet werden.

Warum ist es trotz einer solchen Struktur möglich, glatte gerade Linien anzuzeigen? Das Geheimnis liegt in der Technologie namens Anti-Aliasing.

Wenn Sie beispielsweise in Photoshop eine diagonale schwarze gerade Linie auf einem weißen Hintergrund zeichnen und mit der Zoomfunktion zoomen, sehen Sie, dass die Pixel in der Nähe des Umrisses der geraden Linie schön grau sind. Anti-Aliasing ist eine Technologie, die diese Art von Ausdruck ausdrückt.

Eine von einem Computer gezeichnete gerade Linie ist mathematisch gesehen ein sehr längliches Rechteck. Mit anderen Worten, im Gegensatz zu geraden Linien in der Mathematik ist eine Fläche eines der Merkmale von geraden Linien in der Computergrafik (CG).

Daher werden gerade Linien in CG basierend auf einer etwas anderen Idee als gerade Linien in der Mathematik gezeichnet. Anti-Aliasing, über das wir jetzt sprechen, ist einer von ihnen.

Anti-Aliasing berechnet, wie stark die Fläche einer geraden Linie mit dem Zielpixel zusammenhängt. Wenn ein Pixel in einer 100% geraden Linie enthalten ist, wird die Farbe dieses Pixels mit der Farbe der geraden Linie gefüllt, aber wenn beispielsweise nur 30% der Fläche des Pixels die gerade Linie überlappen, wird das Pixel gefüllt. Nur 30% sind von der Farbe der geraden Linie betroffen.

Der Anti-Aliasing-Prozess beim Zeichnen von geraden Linien bestimmt die Farbe um die gerade Linie basierend auf solchen Berechnungen.

Standardmäßig ist für die Verarbeitung Anti-Aliasing aktiviert (dh ohne etwas zu tun). Natürlich kann diese Funktion auch deaktiviert werden. Wenn Sie eine gezackte, alte computerähnliche Zeichnung erzielen möchten, können Sie die Anti-Aliasing-Funktion deaktivieren.

Sie können das Anti-Aliasing auch in der Verarbeitung deaktivieren. Rufen Sie in diesem Fall die Funktion noSmooth auf. Um es zu aktivieren (einzuschalten), rufen Sie umgekehrt die Glättungsfunktion auf. Interessenten sollten anhand dieser Stichwörter suchen.

Spalte 3: Speichern des generierten Bildes in einer Datei

Vom Programm erzeugte Bilder können nicht wie sie sind auf SNS usw. veröffentlicht werden. So konvertieren Sie das generierte Bild in eine Bilddatei.

Ausgabe in Bilddatei

 save(Pfad der Ausgabedatei)

Sie können es leicht tun.

Pfad (= Pfad) ist ein Wort, das einen Weg bedeutet. Der Dateipfad, dh der Pfad einer Datei, bedeutet Informationen einschließlich des Speicherorts der Datei.

Wenn Sie für Mac die Datei auf dem Desktop des aktuell angemeldeten Benutzers ausgeben möchten, können Sie dies problemlos mit dem folgenden Code tun:

String filePath=System.getProperty("user.home") 
                +"/Desktop/Dateiname, den Sie ausgeben möchten.png "; 
save(filePath);

Wenn Sie dieses Programm am Ende des Programms hinzufügen, wird das Bild als PNG-Datei gespeichert.

Wenn Sie beispielsweise mit dem Dateinamen test.png auf dem Desktop ausgeben möchten, lautet der Variablenteil filePath

String filePath=System.getProperty("user.home") 
                +"/Desktop/test.png ";