Einführung

Dies ist der dritte Artikel für den Othello Adventskalender. Ich denke, es ist schwer, schlampig zu lesen, weil es nur lange Artikel sind, aber diesmal ist es ein leichter Artikel. Bitte zögern Sie nicht, ihn zu lesen (ich dachte, aber er wird länger sein als ich dachte Ich tat ...). Der vierte Artikel, der am 22. Dezember veröffentlicht werden soll, ist jedoch sehr lang. Ich hoffe, dass Sie bis dahin Ihren Geist entwickeln werden.

Dies ist das Thema dieser Zeit, aber die Einführung besteht darin, ein animiertes Bild zu erstellen, das den Stein von Othello zurückgibt. Ich gehe davon aus, dass eine Animation verwendet wird, wenn ein Stein mit der Othello-App zurückgegeben wird.

Da es sich um den Othello-Adventskalender handelt, denken viele Leute, dass es sich nur um einen POV-Ray-Artikel handelt, der nichts mit Othello zu tun hat, nur indem Othellos Stein als Thema verwendet wird. Dieser Artikel bezieht sich jedoch im Wesentlichen auf Othello. Der Grund wird später im Text geschrieben.

Alte Geschichte

Vor ungefähr 30 Jahren lernte ich die Technik des Raytracing kennen. Ich war begeistert, ein gerendertes Bild einer glänzenden Kugel in einer Zeitschrift zu sehen (das Internet war zu dieser Zeit nicht weit verbreitet). Raytracing ist eine Technologie, die Strahlen buchstäblich verfolgt und simuliert, um ein Bild eines Objekts zu rendern. Zu dieser Zeit dauerte es jedoch Stunden und Tage, nur eine Kugel zu zeichnen, und sie wird als spätes Rennen bezeichnet. Es scheint, dass es auch einen Fall gab. Wenn Sie heute ein Oseller sind, können Sie den Rechenaufwand realisieren, indem Sie das Rätsel umwandeln, um wie viel Sie die Anzahl der Bücher mit solchen Berechnungsressourcen erhöhen können. Natürlich hatte ich zu diesem Zeitpunkt nicht die Umgebung, um dies zu tun, aber diese Technologie blieb in meinem Kopfwinkel.

Ungefähr 30 Jahre sind vergangen, und der Autor, der gezwungen war, eine Animation zu erstellen, um den Othello-Stein zufällig zurückzugeben, erinnerte sich an diese Technologie. Ist diese Technologie heute noch vorhanden? Als ich mit einer Zivilisation namens Google suchte, die zu diesem Zeitpunkt nicht verfügbar war, stellte ich fest, dass es eine Raytracing-Software namens POV-Ray gab, und entschied mich, sie zu verwenden.

Das ist der Hintergrund dieses Artikels. Wie Sie vor diesem Hintergrund sehen können, ist der Autor mit POV-Ray nicht vertraut. Ich hoffe, Sie können sich das als "erprobten" Artikel vorstellen.

Hauptthema

Zeichne Othello Stein mit POV-Ray

Beginnen wir mit dem Zeichnen von Othello-Steinen mit POV-Ray. Zunächst möchte ich ein Bild von einem Quadrat eines Othello-Quadrats machen. Ändern wir nach und nach den Winkel von dem Zustand, in dem der Stein auf diesem einen Quadrat platziert ist, und drehen wir ihn um. Ich werde den Winkel um 30 Grad ändern. Wenn das Startbild das 0. Bild ist, wird es beim 6. Bild umgedreht. Ich möchte insgesamt 13 Bilderbilder erstellen, bis zu dem Punkt, an dem es im 12. Bild zum Original zurückkehrt.

Grob gesagt können Sie einen Stein zeichnen, indem Sie die Kamera (Ansichtspunkt) einstellen, die Lichtquelle einstellen, die Hintergrundoberfläche definieren, den Stein definieren und das Rendern ausführen.

#declare discRadius = 1.75;   //Steinradius
#declare discThickness = 0.7; //Steindicke
#declare boxSize = 4.25;      //Die Größe einer Seite der Masse
#declare cameraDistance = 25; //Entfernung von Kamera zu Ursprung
#declare deg = 60;            //Steindrehwinkel

//Kameraeinstellungen
camera{ 
	location <0, 0, cameraDistance>  //Kameraposition
	look_at <0, 0, 0>                //Die Kamera zeigt zum Ursprung
	angle degrees(atan2(boxSize / 2, cameraDistance)) * 2  //Blickwinkel
	right <1, 0, 0>  //Das Koordinatensystem ist das linke System, das Seitenverhältnis ist 1:1
	up <0, 1, 0>
}

//Lichtquelleneinstellung
light_source { 
	<-5, 5, 50>    //Position der Lichtquelle
	color rgb <1.4, 1.4, 1.4>  //Lichtquellenfarbe
}

//Definition der Hintergrundebene
object { 
	plane {<0, 0, 1>, -discThickness / 2}  //Abstand vom Normalenvektor und Ursprung der Ebene
	texture { pigment { rgb <0, 1, 0> } }  //Flugzeugfarbe
}

//Definition von Stein(Weiße Seite)
object { 
	cylinder {<0, 0, 0>, <0, 0, discThickness / 2>, discRadius} //Mitte der zylindrischen Ober- und Unterseite
	texture { pigment { rgb <1, 1, 1> } }  //Farbe
	rotate y*deg  //Drehen Sie Grad um die y-Achse
	rotate z*15   //Drehen Sie 15 Grad um die Z-Achse(Fest)
	translate <0, 0, discRadius * abs(sin(radians(deg)))>  //Parallele Bewegung in Richtung der Z-Achse
}
//Definition von Stein(Schwarze Seite)Die Erklärung ist die gleiche wie die weiße Seite, daher wird sie weggelassen
object { 
	cylinder {<0, 0, 0>, <0, 0, -discThickness / 2>, discRadius} 
	texture { pigment { rgb <0, 0, 0> } }    
	rotate y*deg
	rotate z*15 
	translate <0, 0, discRadius * abs(sin(radians(deg)))> 
}

Da ich einen Kommentar hinzugefügt habe, denke ich, dass Sie die allgemeine Bedeutung verstehen können, aber ich werde den Teil ergänzen, in dem die Bedeutung schwer zu verstehen ist.

Die erste "Deklaration" ist die Definition einer Konstante. Es sind verschiedene Längen definiert, aber diesmal entspricht eine Einheit im Raum von POV-Ray 1 cm. Othello-Steine mit einem Durchmesser von 3,5 cm und einem Radius von 1,75 cm haben die Größe des Deckels einer Milchflasche.

Die Kameradefinition "Winkel" ist der Winkel des Sichtfelds. Wenn Sie versuchen, das Bild zu einem Quadrat zu machen, sollte es $ \ tan \ theta / 2 = (4.25 / 2) / 25 $ sein. Berechnen Sie es also zurück. Es war. Außerdem scheinen "rechts" und "oben" das Seitenverhältnis und das Koordinatensystem des Bildes zu definieren. Dieses Mal beträgt das Seitenverhältnis 1: 1 (Quadrat) und die Koordinaten sind Linkshänder (wahrscheinlich).

Ursprünglich scheint die Farbe der Lichtquelle, rgb, mit 0,0 bis 1,0 angegeben zu sein, aber das fertige Bild war dunkel. Als ich versuchte, einen Wert von 1 oder mehr anzugeben, wurde es heller (Details sind wie folgt). Es ist nicht gut verstanden ···)

Die Hintergrundoberfläche verwendet aus verschiedenen später beschriebenen Gründen die Primärfarbe Grün. Da ich die Mitte des Steins auf der XY-Ebene platzieren wollte, verwendete ich als Hintergrundfläche die Oberfläche, die in negativer Richtung in Z-Richtung um die halbe Dicke des Steins bewegt wurde.

Zunächst wird der Stein um 60 Grad gedreht gezeichnet. Ich hatte das Gefühl, dass die Rotationsachse zu gerade war, wenn es die y-Achse selbst war, also kippte ich die Rotationsachse 15 Grad später. Wenn Sie es einfach so drehen, wie es ist, sinkt es in die Hintergrundfläche, sodass es um das $ \ sin 60 ^ \ circ $ -fache des Radius in die positive Richtung der z-Achse bewegt wird. (Es wird leicht vom Brett schweben)

Für detaillierte Grammatik usw. hat die Oita University eine [japanische Referenz] erstellt (http://www.arch.oita-u.ac.jp/povjp/povjp/pov35ref.html). Siehe.

Jetzt ist die Definition abgeschlossen. Danach setzen wir die POV-Ray-Option auf "288x288, AA 0,3" (Bildgröße und Antialiasing-Einstellungen) und rendern die Befehlszeile als "+ FN" (PNG-Dateiausgabe).

Ich konnte es so zeichnen.

Erstellen Sie Bilder für alle Frames

Alles, was Sie tun müssen, ist, den Teil "#declare deg = 60;" zu ändern und auszuführen (tatsächlich, als Sie ihn zum ersten Mal erstellt haben), aber es gab tatsächlich einen besseren Weg.

Wenn Sie ein fortlaufendes Bild erstellen möchten, das für die Animation verwendet werden soll, fügen Sie an der zuvor angegebenen Stelle "+ FFF" "+ KFF13" hinzu. 13 Bilder werden fortlaufend gerendert. Dann wird eine Variable namens "Uhr" auf einen Wert gesetzt, der durch Teilen des Bereichs von 0,0 bis 1,0 in 13 gleiche Teile erhalten wird (das erste Blatt ist 0,0 und das 13. Blatt ist 1,0). Mit anderen Worten, wo die Winkelvariable definiert wurde

#declare deg = clock * 360;

In diesem Fall werden 13 Bilddateien gleichzeitig von 0 Grad bis 360 Grad in Schritten von 30 Grad erstellt (natürlich sind 0-Grad- und 360-Grad-Bilder gleich).

Es ist bequem!

Machen Sie die Hintergrundfarbe transparent

Dieses Mal ging es übrigens darum, ein animiertes Bild eines Steins zur Verwendung in der Othello-App zu erstellen. Wenn Sie es mit der Othello-App verwenden, kann das Board selbst aus verschiedenen Gründen farbig sein. Daher möchte ich den Hintergrund des Steinbilds transparent halten. Sie können PNG-Dateien Alphakanäle (Transparenz) hinzufügen. Der Teil, in dem Grün im vorherigen Bild sichtbar ist, sollte transparent sein, daher möchte ich diesen verwenden, um den Alpha-Wert zu finden und festzulegen. Um diese Berechnung zu vereinfachen, habe ich den Hintergrund grün gemacht. Es ist eine Methode wie die Chroma-Key-Komposition. Dieses Mal gibt es einen Schattenteil, daher möchte ich die Transparenz auf eine gute Weise einstellen.

Da das zu vervollständigende Bild ein Bild des Othello-Steins und seines Schattens ist, ist es vollständig grau skaliert, das RGB jedes Pixels hat alle den gleichen Wert (nennen wir diesen Wert V) und es wird ein Alpha-Wert $ \ alpha $ festgelegt. Wird sein. Wenn sich im Hintergrund dieses Bildes eine Primärfarbe Grün befindet, sollte es das vorherige Bild sein. Wenn also die RGB-Werte des Originalbilds R, G bzw. B sind

B = V * \alpha / 255\\\\ G = V * \alpha / 255 + 255 * (255 - \alpha) / 255

Sollte halten. Löse dies, um die Werte von $ \ alpha $ und V zu finden. Ich habe es in Python geschrieben.

import cv2
import matplotlib.pyplot as plt
import numpy as np

for i in range(1, 14):
    #Lesen Sie die Originaldatei
    file = 'disc{0}.png'.format(format(i, '02'))
    img = cv2.imread(file)
    #Für konvertierte Bilder
    convert_img = np.zeros((img.shape[0], img.shape[1], 4), dtype='uint8') 
    #B- und G-Werte im Originalbild(Da es von OpenCV gelesen wurde, liegt es in der Reihenfolge der BGR.)
    blue = img[:, :, 0]
    green = img[:, :, 1]
    alpha = 255 - (green - blue)
    alpha[green <= blue] = 255
    #Der Teil, in dem Grün im Originalbild vollständig sichtbar ist, ist nicht unbedingt G.=Da es nicht 255 ist, ist der Teil, der fast grün war, G.=Betrachten Sie 255.
    alpha[alpha < 20] = 0
    #Stellen Sie die BGRA des konvertierten Bildes ein
    #Der lange Teil der zweiten Hälfte von B verhindert die Nullteilung(Referenz https://www.it-swarm.net/ja/python/So geben Sie 0 durch Teilen durch Null zurück/1049445598/)
    convert_img[:, :, 0] = blue * np.divide(255 * np.ones(alpha.shape, dtype='float'), 
          alpha.astype(np.float), 
          out=np.zeros_like(alpha, dtype='float'), 
          where=alpha!=0)
    convert_img[:, :, 1] = convert_img[:, :, 0]
    convert_img[:, :, 2] = convert_img[:, :, 0]
    convert_img[:, :, 3] = alpha
    #Dateiausgabe
    cv2.imwrite('cvt' + file, convert_img)

Diese Methode konnte leicht angewendet werden, da das Objekt ein Othello-Stein war und nur ein Bild von R = G = B in zwei Schwarz-Weiß-Farben erstellt werden musste. Wenn es sich um ein Bild handelt, das ein Stück Shogi zurückgibt, sollte es in vielerlei Hinsicht nicht so einfach sein. Sie sehen, es ist ein Artikel für den Othello-Adventskalender, bei dem es im Wesentlichen darum geht, Othello zu sein! (Gewaltsam)

Ich habe das konvertierte Bild auf meinem Mac in Keynote eingefügt und ein rotes Quadrat auf den Hintergrund gezeichnet. Es ist etwas schwer zu sehen, aber Sie können sehen, dass die Schatten auch transparent sind.

Dies wurde auch mit einer Python for-Anweisung gedreht, sodass 13 Bilder erstellt werden.

Erstellen Sie eine Animationsdatei

Wenn Sie dies bisher tun können, können Sie wie ein Para-Para-Cartoon animieren, indem Sie diese Bilder kontinuierlich auf der Anwendungsseite anzeigen.

Ich dachte jedoch, dass es möglich sein würde, es auch im Browser anzuzeigen, und nachdem ich verschiedene Dinge untersucht hatte, stellte ich fest, dass es ein Dateiformat namens animiertes PNG gibt. Es ist eine PNG-Version eines animierten GIF. In IE-, Edge- und älteren Browsern wird es jedoch möglicherweise nicht gut angezeigt.

Wie man es erstellt, ist es auf einem Mac eine App mit einem geraden Namen [Sie konvertieren in ein Anime-Image](https://apps.apple.com/jp/app/Sie konvertieren in ein Anime-Image / id1127676902? Mt = 12) Es scheint, dass Sie es schaffen können. Selbst unter Windows werden beim Erstellen mit "Animation PNG" verschiedene Erstellungs-Apps veröffentlicht.

"Kimi zum Konvertieren in ein Anime-Bild" kann eine Animationsdatei für LINE-Stempel und eine Animationsdatei für Webseiten erstellen, aber dieses Mal werde ich letztere auswählen. Sie können ganz einfach eine animierte PNG-Datei erstellen, indem Sie die 13 zuvor erstellten Dateien einfügen und die Bildrate und die Anzahl der Schleifen angeben.

Also habe ich ein animiertes PNG erstellt, es eingefügt und den Artikel einmal veröffentlicht, aber aus irgendeinem Grund scheint es, dass das animierte PNG im veröffentlichten Artikel von Qiita nicht gut animiert ist (ich konnte es zum Zeitpunkt des Entwurfs sehen ... ). Ich konnte nicht anders, also machte ich es schnell zu einem animierten GIF.

Hier ist das fertige Produkt.

Oh, ich habe einen Fehler in der Datei beim Einfügen gemacht. Das ist eigentlich das. Sehen Sie es richtig animiert?

abschließend

Dies ist das Ende dieses Artikels, aber ich glaube, dass es wahrscheinlich einige Leute gibt, die es satt haben. Wenn Sie interessiert sind, habe ich den Quellcode auf GitHub gestellt. Bitte beziehen Sie sich darauf.

Wir sehen uns in dem Artikel am 22. Dezember!

Referenzartikel

So erstellen Sie Animationen mit POV-Ray

[PYTHON] Ich habe eine Animation gemacht, die Othellos Stein mit POV-Ray zurückgibt