Share
Die Verarbeitung ist eine der leistungsfähigsten Bibliotheken, die derzeit zur Erstellung visueller algorithmischer Kunstwerke (2D und 3D) verfügbar sind. Es ist Open Source, basiert auf Java und bietet eine Vielzahl von Funktionen, die das Zeichnen und Malen mit Code sowohl unterhaltsam als auch einfach machen.
Durch die Verwendung der Kernbibliothek von Processing in Ihren Android-Apps können Sie leistungsstarke Grafiken und Animationen erstellen, ohne sich mit den OpenGL- oder Canvas-APIs von Android beschäftigen zu müssen. Normalerweise müssen Sie sich nicht mit einfachen Aufgaben wie dem Verwalten von Threads, dem Erstellen von Render-Schleifen oder dem Verwalten von Frameraten beschäftigen.
In diesem Tutorial zeige ich Ihnen, wie Sie Processing zu einer Android-App hinzufügen und einige der nützlichsten Funktionen vorstellen.
Die Verarbeitung umfasst eine eigene integrierte Entwicklungsumgebung, in der Android-Apps erstellt werden können. Wenn Sie jedoch bereits Android-App-Entwickler sind, würden Sie sicher lieber Android Studio verwenden. Laden Sie also die neueste Version des Android-Modus von Processing herunter.
In der heruntergeladenen ZIP-Datei finden Sie eine Datei mit dem Namen processing-core.zip. Extrahieren Sie es und benennen Sie es in um verarbeitungskern.jar Verwenden Sie die Befehlszeile oder den Dateiexplorer Ihres Betriebssystems.
Fügen Sie schließlich die JAR-Datei als eine der Abhängigkeiten Ihres Android Studio-Projekts hinzu, indem Sie sie in das App Modul Libs Mappe.
Sie haben jetzt alles, was Sie benötigen, um mit der Verarbeitung zu beginnen.
Fast alle Kernfunktionen von Processing sind über die PApplet Klasse, die im Wesentlichen als Leinwand dient, auf die Sie zeichnen können. Durch die Erweiterung erhalten Sie einfachen Zugriff auf alle Methoden, die es bietet.
val myCanvas = object: PApplet () // Mehr Code hier
Um die Leinwand zu konfigurieren, müssen Sie ihre überschreiben die Einstellungen() Methode. Innerhalb der Methode können Sie zwei wichtige Konfigurationsdetails angeben: die gewünschten Abmessungen der Leinwand und ob 2D- oder 3D-Rendering-Engine verwendet werden soll. Lassen Sie uns zunächst die Leinwand so groß wie der Bildschirm des Geräts machen und die standardmäßige 2D-Rendering-Engine verwenden. Dazu können Sie die anrufen Vollbildschirm() Verknüpfungsmethode.
Spaßeinstellungen überschreiben () fullScreen ()
Das die Einstellungen() method ist eine spezielle Methode, die nur benötigt wird, wenn Sie nicht die eigene IDE von Processing verwenden. Ich schlage vor, dass Sie keinen weiteren Code hinzufügen.
Wenn Sie Variablen initialisieren oder zeichnungsbezogene Parameter ändern möchten, z. B. die Hintergrundfarbe der Leinwand oder die Anzahl der Frames, die pro Sekunde angezeigt werden sollen, verwenden Sie die Konfiguration() stattdessen Methode. Der folgende Code zeigt beispielsweise, wie Sie das verwenden Hintergrund() Methode zum Ändern der Hintergrundfarbe der Leinwand in Rot:
Accentsconagua
Spaß beim Setup überschreiben () background (Color.parseColor ("# FF8A80")) // Material Red A100Da die Leinwand immer noch nicht Teil einer Aktivität ist, können Sie sie beim Ausführen Ihrer App nicht sehen. Um die Zeichenfläche anzuzeigen, müssen Sie zunächst einen Container in der Layout-XML-Datei Ihrer Aktivität erstellen. EIN LinearLayout Widget oder ein FrameLayout Widget kann der Container sein.
EIN PApplet Instanz kann nicht direkt zu dem von Ihnen erstellten Container hinzugefügt werden. Sie müssen es in einem platzieren PFragment Instanz zuerst und rufen dann die setView () Methode der PFragment Instanz, um es mit dem Container zu verknüpfen. Der folgende Code zeigt, wie das geht:
// Platziere die Leinwand innerhalb des Fragments val myFragment = PFragment (myCanvas) // Fragment anzeigen myFragment.setView (canvas_container, this)
Wenn Sie die App ausführen, sollten Sie zu diesem Zeitpunkt eine leere Leinwand sehen, die den gesamten Bildschirm Ihres Geräts abdeckt.
Nun, da Sie die Leinwand sehen können, beginnen wir mit dem Zeichnen. Um innerhalb der Leinwand zu zeichnen, müssen Sie die Option überschreiben zeichnen() Methode der PApplet Unterklasse, die Sie zuvor erstellt haben.
override fun draw () // hier mehr Code
Es scheint nicht sofort offensichtlich zu sein, aber Processing versucht standardmäßig, den Aufruf von zeichnen() 60 Mal pro Sekunde, solange die Leinwand angezeigt wird. Das bedeutet, dass Sie problemlos Standbilder und Animationen erstellen können.
Für die Verarbeitung gibt es eine Reihe intuitiv benannter Methoden, mit denen Sie geometrische Grundelemente wie Punkte, Linien, Ellipsen und Rechtecke zeichnen können. Zum Beispiel die rect () Methode zeichnet ein Rechteck und die Ellipse() Methode zeichnet eine Ellipse. Beide rect () und Ellipse() Methoden erwarten ähnliche Argumente: die X- und Y-Koordinaten der Form, ihre Breite und Höhe.
Der folgende Code zeigt, wie Sie ein Rechteck und eine Ellipse zeichnen:
rect (100f, 100f, 500f, 300f) // Die obere linke Ecke befindet sich bei (100,100) Ellipse (350f, 650f, 500f, 400f) // Die Mitte ist bei (350,650)
Viele der Methoden sind ebenfalls überlastet, sodass Sie die Grundformen leicht ändern können. Zum Beispiel, indem Sie einen fünften Parameter an den übergeben rect () Methode, einen Eckenradius, können Sie ein abgerundetes Rechteck zeichnen.
rect (100f, 900f, 500f, 300f, 100f) // Eckenradius von 100 Pixel
Wenn Sie Ihre App jetzt ausführen, sollte Folgendes angezeigt werden:
Wenn Sie die Randfarbe der Formen ändern möchten, können Sie das aufrufen Schlaganfall() Methode und übergeben Sie die gewünschte Farbe als Argument. Wenn Sie die Formen mit einer bestimmten Farbe füllen möchten, können Sie das auch aufrufen füllen() Methode. Beide Methoden sollten aufgerufen werden, bevor Sie die Form tatsächlich zeichnen.
Der folgende Code zeichnet ein blaues Dreieck mit grüner Umrandung:
Strich (Color.GREEN) Füllen (Color.BLUE) Dreieck (100f, 1600f, 300f, 1300f, 500f, 1600f)
Wenn Sie Ihre App jetzt ausführen, können Sie das blaue Dreieck sehen, aber Sie werden auch feststellen, dass auch jede andere Form blau ist.
Wenn Ihnen der Grund nicht bereits klar ist, denken Sie daran, dass zeichnen() Methode wird wiederholt aufgerufen. Das bedeutet, dass alle Konfigurationsparameter, die Sie während eines Ziehzyklus ändern, sich auf nachfolgende Ziehzyklen auswirken. Um sicherzustellen, dass alle Ihre Formen mit den richtigen Farben gezeichnet werden, empfiehlt es sich, die Farbe jeder Form, die Sie zeichnen, explizit anzugeben, bevor Sie sie zeichnen.
Zum Beispiel, indem Sie den folgenden Code am Anfang des hinzufügen zeichnen() Methode können Sie die anderen Formen wieder weiß machen.
// Setzen Sie die Füllung und den Strich auf Weiß und Schwarz //, bevor Sie die Rechtecke und Ellipsen zeichnen (Color.BLACK) Füllung (Color.WHITE)
An dieser Stelle sieht die Leinwand so aus:
Mit Processing ist die Handhabung von Touch-Events extrem einfach. Sie benötigen keinerlei Event-Handler. Sie müssen nur überprüfen, ob eine boolesche Variable benannt ist Mit der Maus gedrückt ist wahr zu wissen, wenn der Benutzer den Bildschirm berührt. Sobald Sie bestätigt haben, dass der Benutzer den Bildschirm berührt, können Sie das verwenden mouseX und mouseY Variablen, um die X- und Y-Koordinaten der Berührung zu bestimmen.
Mit dem folgenden Code wird beispielsweise ein neues Rechteck gezeichnet, wenn der Benutzer die Leinwand berührt.
// Prüfen Sie, ob der Benutzer die Leinwand berührt, wenn (mousePressed) // Festlegen der Füll- und Strichfarbenstrich (Color.RED) Füllung (Color.YELLOW) // Rechteck zeichnen (mouseX.toFloat (), mouseY.toFloat () , 100f, 100f)
Wenn Sie Ihre App jetzt ausführen und Ihren Finger über den Bildschirm ziehen, sollten viele gelbe Rechtecke gezeichnet werden.
Bevor wir fortfahren, hier ein kurzer Tipp: Wenn Sie zu einem beliebigen Zeitpunkt die Leinwand löschen möchten, rufen Sie einfach die Hintergrund() wieder Methode.
Hintergrund (Color.parseColor ("# FF8A80")) // Material Rot A100Es gibt nur so weit, dass Sie mit einfachen Grundelementen kommen können. Wenn Sie sich für die Erstellung komplexer und komplexer Grafiken interessieren, benötigen Sie wahrscheinlich Zugriff auf die einzelnen Pixel der Leinwand.
Indem Sie die loadPixels () Sie können die Farben aller Pixel der Leinwand in ein Array mit dem Namen laden Pixel. Indem Sie den Inhalt des Arrays ändern, können Sie den Inhalt der Leinwand sehr effizient ändern. Wenn Sie mit dem Ändern des Arrays fertig sind, sollten Sie daran denken, das Array anzurufen updatePixels () Methode zum Rendern des neuen Satzes von Pixeln.
Notiere dass der Pixel array ist ein eindimensionales ganzzahliges Array, dessen Größe dem Produkt aus Breite und Höhe der Leinwand entspricht. Da die Zeichenfläche zweidimensional ist, erfordert die Konvertierung der X- und Y-Koordinaten eines Pixels in einen gültigen Index des Arrays die folgende Formel:
// index = xCoordinate + yCoordinate * widthOfCanvas
Der folgende Beispielcode, der die Farbe jedes Pixels der Zeichenfläche basierend auf den X- und Y-Koordinaten festlegt, soll Ihnen helfen, die Verwendung des Pixel zu verstehen Pixel Array:
override fun draw () loadPixels () // Array laden // Durchlaufen aller gültigen Koordinaten für (y in 0… height - 1) für (x in 0… width - 1) // Berechne den Indexwert index = x + y * width // Pixel am Index mit neuen Farbpixeln aktualisieren [index] = Color.rgb (x% 255, y% 255, (x * y)% 255) // Pixel mit neuen Farben aktualisieren updatePixels ( )
Das Color.rgb () Die oben abgebildete Methode wandelt einzelne rote, grüne und blaue Werte in eine Ganzzahl um, die einen einzelnen Farbwert darstellt, den das Processing-Framework versteht. Sie können die von Ihnen übergebenen Argumente jederzeit ändern, stellen Sie jedoch sicher, dass sie immer im Bereich von 0 bis 255 liegen.
Wenn Sie den Code ohne Änderungen ausführen, sollten Sie ein Muster sehen, das folgendermaßen aussieht:
Sie wissen jetzt, wie Sie 2D-Grafiken mit der Verarbeitungssprache erstellen. Mit den Fähigkeiten, die Sie heute gelernt haben, können Sie nicht nur Ihre Android-Apps attraktiver machen, sondern auch vollwertige Spiele von Grund auf erstellen. Sie sind nur durch Ihre Kreativität begrenzt!
Um mehr über die Verarbeitung zu erfahren, schlage ich vor, die offiziellen Referenzseiten zu durchsuchen.
Und während Sie hier sind, lesen Sie einige unserer anderen Beiträge zur Android-App-Entwicklung!
