Ultimativer Leitfaden zur Verarbeitungssprache Teil I: Die Grundlagen

Veröffentlicht: 2022-03-11

Du kämpfst mit Langeweile und juckt es, deine Kreativität einzusetzen. Sie wollen etwas bauen, etwas visuell Beeindruckendes, etwas Künstlerisches. Oder vielleicht möchten Sie Programmieren lernen und so schnell wie möglich etwas Beeindruckendes schaffen. Wenn ja, dann ist die Verarbeitungssprache der richtige Weg.

Unter allen Programmiersprachen, mit denen ich bisher gearbeitet habe, war Processing zweifelsohne eine der unterhaltsamsten. Es ist eine unkomplizierte Sprache – leicht zu lernen, zu verstehen und zu verwenden, aber dennoch sehr mächtig. Es ist fast so, als würden Sie auf einer leeren Leinwand mit Codezeilen malen. Es gibt keinerlei starre Regeln oder Richtlinien, die Ihrer Kreativität Grenzen setzen, die einzige Grenze ist Ihre Vorstellungskraft.

Ultimativer Leitfaden zur Verarbeitungssprache Teil I: Die Grundlagen

Im College war ich Lehrassistent eines Programms, das Highschool-Schüler zusammenbrachte und ihnen Verarbeitung beibrachte. Die meisten von ihnen hatten keinen ausgeprägten Programmierhintergrund, einige hatten zuvor noch nicht einmal eine einzige Codezeile geschrieben. In nur fünf Tagen sollten sie die Sprache lernen und selbst einfache Spiele entwickeln. Die Erfolgsquote lag bei fast hundert Prozent, Misserfolge gab es selten. In diesem Artikel werden wir genau das tun. Ich habe das gesamte Programm in zwei Teile geschrumpft. Im ersten Teil werde ich über die Sprache sprechen. Ich werde einen grundlegenden Überblick geben, eine exemplarische Vorgehensweise für die Verarbeitung geben und einige Tipps und Tricks geben. Dann werden wir im nächsten Teil Schritt für Schritt ein einfaches Spiel bauen, jeder Schritt wird im Detail erklärt. Ich werde auch den Code des Spiels mit p5js in JavaScript konvertieren, damit unser Spiel in einem Webbrowser ausgeführt werden kann.

Was du bereits wissen solltest

Um diese Artikel zu verstehen und ihnen leicht zu folgen, sollten Sie über Grundkenntnisse in der Programmierung verfügen, da ich nicht über Programmiergrundlagen sprechen werde. Ich werde jedoch größtenteils keine fortgeschrittenen Programmierkonzepte anfassen, daher reicht ein oberflächliches Verständnis aus. Es gibt einige Teile, in denen ich über einige Ideen und Konzepte auf niedriger Ebene wie objektorientierte Programmierung (OOP) spreche, aber sie sind nicht entscheidend. Diese sind für neugierige Leser, die sich für die Struktur der Sprache interessieren. Wenn Sie es nicht wissen wollen, können Sie diese Teile einfach überspringen. Abgesehen davon sollten Sie nur den Ehrgeiz haben, diese großartige Sprache zu lernen, und den Enthusiasmus, Ihr eigenes Spiel zu entwickeln!

Wie zu folgen

Ich bin immer dafür, Programmieren durch Ausprobieren und Experimentieren zu lernen. Je früher Sie in Ihr eigenes Spiel eintauchen, desto schneller werden Sie sich mit Processing vertraut machen. Das ist also mein erster Vorschlag: Probieren Sie jeden einzelnen Schritt in Ihrer eigenen Umgebung aus. Processing hat eine einfache und benutzerfreundliche IDE (dh einen Code-Editor), es ist das einzige, was Sie herunterladen und installieren müssen, um zu folgen. Sie können es hier herunterladen.

Also lasst uns anfangen!

Was ist die Verarbeitungssprache?

Dieser Abschnitt enthält einen kurzen technischen Überblick über die Sprache, ihre Struktur und einige Hinweise zum Kompilierungs- und Ausführungsprozess. Die Details umfassen einige fortgeschrittene Kenntnisse über die Programmierung und die Java-Umgebung. Wenn Ihnen die Details im Moment nichts ausmachen und Sie es kaum erwarten können, Ihr eigenes Spiel zu lernen und zu programmieren, können Sie zum Abschnitt „Grundlagen der Verarbeitung“ springen.

Processing ist eine visuelle Programmiersprache, mit der man sozusagen mit Codes skizzieren kann. Es ist jedoch nicht gerade eine eigenständige Programmiersprache, es ist eine sogenannte „Java-ähnliche“ Programmiersprache, was bedeutet, dass die Sprache auf der Java-Plattform aufbaut, aber nicht wirklich Java an sich ist. Es basiert auf Java und Ihr gesamter Code wird vorverarbeitet und direkt in Java-Code konvertiert, wenn Sie auf die Schaltfläche „Ausführen“ klicken. Die PApplet-Klasse von Java ist die Basisklasse für alle Processing-Skizzen. Um ein Beispiel zu geben, nehmen wir ein paar grundlegende Verarbeitungscodeblöcke:

 public void setup() { // setup codes goes here } public void draw() { // draw codes goes here }

Diese Codeblöcke werden in etwa so umgewandelt:

 public class ExampleFrame extends Frame { public ExampleFrame() { super("Embedded PApplet"); setLayout(new BorderLayout()); PApplet embed = new Embedded(); add(embed, BorderLayout.CENTER); embed.init(); } } public class Embedded extends PApplet { public void setup() { // setup codes goes here } public void draw() { // draw codes goes here } }

Sie können sehen, dass der Verarbeitungscodeblock mit einer Klasse umschlossen wurde, die sich aus Javas PApplet erstreckt. Daher werden alle Klassen, die Sie in Ihrem Verarbeitungscode definieren, falls vorhanden, als innere Klassen behandelt.

Die Tatsache, dass Processing auf Java basiert, bietet uns viele Vorteile, insbesondere wenn Sie ein Java-Entwickler sind. Die Syntax ist nicht nur vertraut, sondern gibt Ihnen auch die Möglichkeit, Dinge wie das Einbetten von Java-Code, Bibliotheken und JAR-Dateien in Ihre Skizzen zu tun, Ihre Processing-Applets direkt in Ihren Java-Anwendungen zu verwenden, Klassen zu definieren und Standarddatentypen wie int zu verwenden , float, char und so weiter. Sie können Ihren Verarbeitungscode sogar direkt aus Eclipse heraus schreiben, wenn Sie etwas Zeit für die Einrichtung aufwenden möchten. Eine Sache, die Sie nicht tun können, ist die Verwendung von AWT- oder Swing-Komponenten in Ihren Processing-Skizzen, da sie mit der Schleifennatur von Processing in Konflikt geraten. Aber keine Sorge, wir werden in diesem Artikel keine dieser ausgefallenen Sachen machen.

Grundlagen der Verarbeitung

Der Verarbeitungscode besteht aus zwei Hauptteilen, Einrichtungs- und Zeichnungsblöcken . Der Setup-Block wird einmal ausgeführt, wenn der Code ausgeführt wird, und die Draw-Blöcke werden kontinuierlich ausgeführt. Die Hauptidee hinter Processing ist, dass das, was Sie in den Zeichenblock schreiben, 60 Mal pro Sekunde von oben nach unten ausgeführt wird, bis Ihr Programm beendet wird . Wir werden alles bauen, indem wir uns diese Idee zunutze machen. Wir werden unsere Objekte bewegen, unsere Punktzahlen speichern, Kollisionen erkennen, Schwerkraft implementieren und so ziemlich alles andere mit dieser Funktion tun. Diese Aktualisierungsschleife ist der Herzschlag unseres Projekts . Ich werde in späteren Abschnitten erklären, wie Sie diesen Herzschlag verwenden, um Ihren Code zum Leben zu erwecken. Lassen Sie mich Ihnen zunächst die Processing IDE vorstellen.

IDE verarbeiten

Wenn Sie bis zu diesem Punkt gelesen und die Verarbeitungs-IDE immer noch nicht heruntergeladen haben, tun Sie dies bitte. Im gesamten Artikel werde ich einige einfache Aufgaben skizzieren, die Sie selbst ausprobieren können. Sie können nur üben, wenn Sie die IDE eingerichtet und ausgeführt haben. Hier ist eine kurze Einführung in die Verarbeitungs-IDE. Es ist sehr einfach und selbsterklärend, deshalb werde ich es kurz halten.

Wie zu erwarten, tun die Run- und Stop-Tasten das, was sie vorschlagen. Wenn Sie auf die Schaltfläche „ Ausführen “ klicken, wird Ihr Code kompiliert und ausgeführt. Von Natur aus werden Verarbeitungsprogramme nie beendet, sie laufen immer und ewig, bis sie gestört werden. Sie können es programmgesteuert beenden, aber wenn Sie dies nicht tun, können Sie die Stopp -Schaltfläche verwenden.

Die Schaltfläche, die wie ein Schmetterling rechts neben Run & Stop aussieht, ist der Debugger . Die Verwendung des Debuggers erfordert einen ganz anderen Artikel, der ihm gewidmet ist. Es ist außerhalb des Rahmens dieses Artikels, daher können Sie es vorerst ignorieren. In der Dropdown-Liste neben der Debugger-Schaltfläche können Sie Mods hinzufügen / einstellen. Mods stellen Ihnen einige bestimmte Funktionen zur Verfügung, ermöglichen Ihnen, Code für Android zu schreiben, erlauben Ihnen, Code in Python zu schreiben, und so weiter und so weiter. Mods liegen ebenfalls außerhalb des Geltungsbereichs, sodass Sie den Standard-Java-Modus beibehalten und ihn ebenfalls ignorieren können.

Im Fenster des Code-Editors werden normalerweise Ihre Skizzen ausgeführt. Im Bild ist es leer, weil wir keine Eigenschaft wie Größe oder Hintergrundfarbe eingestellt oder nichts gezeichnet haben.

Über den Code-Editor gibt es nicht viel zu sagen, hier schreiben Sie einfach Ihren Code. Es gibt Zeilennummern (!) Ältere Versionen von Processing hatten das nicht und Sie können sich nicht vorstellen, wie glücklich ich war, als ich sie zum ersten Mal sah.

Die schwarze Box darunter ist die Konsole . Wir werden es verwenden, um Dinge für schnelle Debugging-Zwecke auszudrucken. Auf der Registerkarte „ Fehler “ neben der Konsole werden Ihre Fehler angezeigt. Dies ist auch eine neue nützliche Funktion, die mit Processing 3.0 kam. In den älteren Versionen wurden die Fehler auf die Konsole gedruckt und es war schwierig, sie zu verfolgen.

Setup-Block

Wie bereits erwähnt, werden Setup-Blöcke beim Programmstart einmal ausgeführt. Sie können es für Konfigurationen und Dinge verwenden, die Sie nur einmal ausführen möchten, z. B. Bilder oder Sounds laden. Hier ist ein Beispiel-Setup-Block. Führen Sie diesen Code in Ihrer eigenen Umgebung aus und überzeugen Sie sich selbst von den Ergebnissen.

 public void setup() { // Size of our sketch will be 800x600, // and use the P2D rendering engine. size(800, 600, P2D); // We could have used this function instead of size() // fullScreen(P2D); // The background color of our sketch will be black // by default, unless specified otherwise background(0); // We could have used this to set a background image. // Note that size of our sketch should be the same as the image. // background(loadImage("test.jpg")); // Shapes and objects will be filled with red by default, // unless specified otherwise. fill(255,0,0); // Shaped and objects will have a white border by default, // unless specified otherwise. stroke(255); }

Die Styling-Methoden (Hintergrund, Füllung, Kontur) werden in den Abschnitten „Eigenschaften & Einstellungen“ erklärt. Im Moment müssen Sie wissen, wie sich die Einstellungen und Konfigurationen, die wir hier festlegen, auf unsere gesamte Skizze auswirken. Hier geschriebene Codes werden verwendet, um einige grundlegende Regelsätze festzulegen, die in der gesamten Skizze gelten. Was Sie in diesem Abschnitt auch verstehen sollten, sind die unten aufgeführten Methoden:

size() - Wie der Name schon sagt, wird diese Funktion verwendet, um die Größe unserer Skizze zu konfigurieren. Es muss in der ersten Zeile des Setup-Codeblocks stehen. Es könnte in folgenden Formen verwendet werden:

  • Größe (Breite, Höhe);
  • Größe (Breite, Höhe, Renderer);

Die Breiten- und Höhenwerte könnten in Pixeln angegeben werden. Die Größenfunktion akzeptiert einen dritten Parameter, den Renderer, der verwendet wird, um festzulegen, welche Rendering-Engine unsere Skizze verwenden wird. Standardmäßig ist der Renderer auf P2D eingestellt. Die verfügbaren Renderer sind P2D (Processing 2D), P3D (Processing 3D, sollte verwendet werden, wenn Ihre Skizzen 3D-Grafiken enthalten) und PDF (2D-Grafiken werden direkt in eine Acrobat-PDF-Datei gezeichnet. Weitere Informationen finden Sie hier). P2D- und P3D-Renderer verwenden OpenGL-kompatible Grafikhardware.

fullScreen() - Ab Processing 3.0 kann jetzt die fullScreen-Funktion anstelle der size()-Funktion verwendet werden. Genau wie die Funktion size() sollte sie auch in der ersten Zeile des Setup-Blocks stehen. Die Verwendung ist wie folgt:

  • Vollbild();
  • Vollbild (Anzeige);
  • Vollbild (Renderer);
  • fullScreen(Anzeige, Renderer);

Wenn Sie es ohne Parameter verwenden, wird Ihre Verarbeitungsskizze einfach im Vollbildmodus und auf Ihrem Hauptbildschirm ausgeführt. Der 'Display'-Parameter wird verwendet, um einzustellen, auf welchem ​​Display Ihre Skizze ausgeführt wird. Wenn Sie beispielsweise externe Monitore an Ihren Computer anschließen, können Sie die Anzeigevariable auf 2 (oder 3, 4 usw.) setzen, und Ihre Skizze wird dort ausgeführt. Der 'Renderer'-Parameter ist wie oben im size()-Teil erklärt.

Einstellungsblock

Dies ist eine weitere Funktion, die mit der neuen Version von Processing eingeführt wird. Es ist ein Codeblock, genau wie Setup und Draw. Es ist nützlich, wenn Sie size()- oder fullScreen()-Methoden mit variablen Parametern definieren möchten. Es ist auch notwendig, size() und andere Styling-Eigenschaften wie smooth() in diesem Codeblock zu definieren, wenn Sie eine andere Umgebung als Processings eigene IDE verwenden, wie etwa Eclipse. Aber Sie werden es in den meisten Fällen nicht brauchen, definitiv nicht in diesem Artikel.

Block zeichnen

Es gibt nichts Besonderes über den Ziehblock zu sprechen, aber alles ist besonders daran. Im Draw-Block passiert die ganze Magie. Es ist das Herzstück Ihres Programms und schlägt 60 Mal pro Sekunde. Dieser Codeblock enthält Ihre gesamte Codelogik. Alle Ihre Formen, Objekte usw. werden hier eingetragen.

Der größte Teil des Codes, über den wir in diesem Artikel sprechen werden, stammt aus dem Zeichenblock, daher ist es wichtig, dass Sie genau verstehen, wie dieser Codeblock funktioniert. Um Ihnen eine Demonstration zu geben, hier ist etwas, das Sie ausprobieren können. Beachten Sie zunächst, dass wir alles auf der Konsole ausgeben können, indem wir die Methoden print() oder println() verwenden. Print-Methoden drucken nur auf der Konsole, println druckt jedoch und fügt am Ende eine neue Zeile an, sodass jedes println() in separaten Zeilen gedruckt wird.

Schauen Sie sich also den folgenden Codeblock an. Versuchen Sie zunächst zu erraten, was in der Konsole gedruckt wird. Dann probieren Sie es aus:

 void setup(){ } void draw(){ int x = 0; x += 1; print(x+" "); }

Wenn Sie „1 2 3 4…“ erraten haben, habe ich Sie! Dies ist eine der Verwirrungen in Processing. Denken Sie daran, dass dieser Block wiederholt ausgeführt wird? Wenn Sie hier eine Variable definieren, wird sie bei jeder Schleife immer wieder neu definiert. Bei jeder Iteration wird x auf 0 gesetzt, um 1 erhöht und auf der Konsole ausgegeben. Daher erhalten wir das Ergebnis „1 1 1 1…“. Dieses Beispiel war etwas offensichtlich, aber es kann verwirrend sein, wenn die Dinge etwas kompliziert werden.

Wir wollen nicht, dass x überschrieben wird, also wie können wir das erreichen und das Ergebnis „1 2 3 4…“ erhalten? Durch die Verwendung globaler Variablen . Das ist nichts Besonderes, wir definieren die Variable nur außerhalb des Zeichenblocks, damit sie nicht bei jeder Iteration neu definiert wird. Außerdem ist der Gültigkeitsbereich der Variablen in der gesamten Skizze erreichbar. Siehe den folgenden Code:

 int x = 0; void setup(){ } void draw(){ x += 1; print(x+" "); }

Sie fragen sich vielleicht, wie eine außerhalb unserer Blöcke definierte Variable funktionieren kann? Und warum haben wir den setup()-Block nicht verwendet, da er zu Beginn einmal ausgeführt wird? Die Antwort bezieht sich auf objektorientierte Programmierung und Scopes, wenn Sie nicht vertraut sind, können Sie diesen Absatz überspringen. Siehe den Teil, in dem ich erklärt habe, wie Verarbeitungscode in Java konvertiert wird. Erinnern Sie sich, wie sie mit einer Java-Klasse verpackt werden? Die Variablen, die wir außerhalb des setup()- und draw()-Blocks schreiben, werden ebenfalls umschlossen, daher werden sie als Felder der äußeren Klasse behandelt, die unseren Code umschließt. Die Verwendung von x+=1 entspricht der Verwendung von this.x+=1. Es funktioniert auch in unserem Fall genauso, es wird keine Variable namens x im Gültigkeitsbereich von draw() definiert und es wird ein äußerer Gültigkeitsbereich gesucht, der der Gültigkeitsbereich von this ist. Und warum haben wir unsere Variable x nicht im Abschnitt setup() definiert? Wenn wir das täten, wäre der Geltungsbereich, für den x definiert ist, der Geltungsbereich der setup-Funktion, und es wäre nicht über den draw()-Block zugänglich.

Zeichnen von Formen und Texten

Jetzt wissen wir, wie wir unsere Skizze mit dem Setup-Block konfigurieren, und wir wissen, was der Draw-Block tut. Es ist also an der Zeit, ein wenig visuell zu werden und etwas über die lustigen Teile der Verarbeitung zu lernen: wie man Formen zeichnet.

Bevor wir beginnen, sollten Sie das Koordinatensystem verstehen. In Processing bestimmen Sie die Koordinaten jedes Objekts, das Sie auf dem Bildschirm zeichnen. Das Koordinatensystem ist in Pixeln angegeben. Der Ursprung (dh Startpunkt) ist die obere linke Ecke, Sie sollten Ihre Koordinaten relativ zu diesem Punkt angeben. Eine andere Sache, die Sie wissen sollten, ist, dass jede Form einen anderen Bezugspunkt hat. Zum Beispiel hat rect() seine linke obere Ecke als Bezugspunkt. Bei ellipse() ist es das Zentrum. Diese Referenzpunkte können mit Methoden wie rectMode() und ellipseMode() geändert werden, die ich im Abschnitt Eigenschaften & Einstellungen erläutern werde. Zum besseren Verständnis dient eine Beispielabbildung.

Dieser Artikel ist ein grundlegender Überblick über die Verarbeitung, daher werden wir keine komplexen Formen wie Scheitelpunkte oder 3D-Formen berühren. Grundlegende 2D-Formen werden für uns eigentlich mehr als genug sein, um unser eigenes Spiel zu erstellen. In der Abbildung sehen Sie Beispiele dafür, wie Formen gezeichnet werden. Jede Form hat ihre eigene Syntax, die erstellt werden muss, aber die Grundidee besteht darin, entweder ihre Koordinaten oder ihre Größe oder beides anzugeben. Hier sind einige Formen, mit denen Sie vertraut sein sollten (für alle unten angegebenen Werte bedeuten 'x' und 'y' x- und y-Koordinaten in Pixeln, 'w' und 'h' bedeuten Breiten- und Höhenwerte ebenfalls in Pixeln):

point() - Einfacher Punkt, benötigt nur eine einzige Koordinate. Verwendungszweck:

  • Punkt (x, y)
  • point(x, y, z) - Falls Sie 3 Dimensionen verwenden.

line() - Zum Erstellen einer Linie. Sie können eine Linie nur mit einem Start- und Endpunkt erstellen. Verwendungszweck:

  • Linie (x1, y1, x2, y2)
  • line(x1, y1, z1, x2, y2, z2) - Falls Sie 3 Dimensionen verwenden.

Triangle() - Zum Erstellen eines Dreiecks. Verwendung: Dreieck (x1, y1, x2, y2, x3, y3)

quad() - Zum Erstellen eines Vierecks. Verwendung: Quad(x1, y1, x2, y2, x3, y3, x4, y4)

rect() - Zum Erstellen eines Rechtecks. Der Referenzpunkt ist standardmäßig die obere linke Ecke (siehe Abbildung). Hier ist die Verwendung:

  • Rechteck(x, y, w, h)
  • rect(x, y, w, h, r) - 'r' bedeutet den Radius in Pixel, um die Ecken abzurunden.
  • rect(x, y, w, h, tl, tr, br, bl) – Radius für die obere linke, obere rechte, untere rechte bzw. untere linke Ecke. Dies ist auch in Pixeln.

ellipse() - Zum Erstellen einer Ellipsenform. Dies wird auch verwendet, um einen Kreis zu erstellen, es sollten dieselben Breiten- und Höhenwerte angegeben werden. Der Bezugspunkt für diese Form ist standardmäßig der Mittelpunkt (siehe Abbildung). Hier ist die Verwendung:

  • Ellipse(x, y, w, h)

arc() - Zeichnet einen Bogen. Verwendungszweck:

  • arc(x, y, w, h, start, stop) - 'start' und 'stop' wird verwendet, um den Winkel zum Starten und Stoppen des Zeichnens des Bogens zu bestimmen. Die Werte sind in Radianten angegeben. Konstanten wie „PI, HALF_PI, QUARTER_PI und TWO_PI“ können verwendet werden.
  • arc(x, y, w, h, start, stop, mode) - Die 'mode'-Variable bestimmt den Rendering-Stil des Bogens (String). Verfügbare Optionen sind „OPEN, CHORD, PIE“. OPEN lässt die nicht gezeichneten Teile randlos. CHORD schließt die nicht gezeichneten Teile mit einem Rahmen ab. PIE lässt Ihren Bogen wie ein Tortendiagramm aussehen.

Das Anzeigen von Texten auf dem Bildschirm ähnelt dem Anzeigen von Formen, die Grundidee ist, dass Sie eine Koordinate festlegen, an der Ihr Text angezeigt werden soll. Es gehört jedoch mehr zum Umgang mit Texten. Nach dem Abschnitt „Eigenschaften & Einstellungen“, in dem Sie lernen, wie Sie Einstellungen und Eigenschaften auf Objekte anwenden, haben Sie mehr Kontrolle über Ihre Texte. Im Moment werde ich die Grundlagen der Anzeige von Texten zeigen. Es gibt viele Möglichkeiten, dies zu tun, ich werde nur das Wesentliche zeigen.

text() - Texte anzeigen. Verwendungszweck:

  • text(c, x, y) - 'c' bedeutet Zeichen, jedes alphanumerische Zeichen wird angezeigt.
  • text(c, x, y, z) - Falls Sie mit 3 Dimensionen arbeiten.
  • text(str, x, y) - 'str' ist die anzuzeigende Zeichenkette.
  • text(str, x, y, z) - Falls Sie mit 3 Dimensionen arbeiten.
  • text(num, x, y) - 'num' ist der anzuzeigende numerische Wert.
  • text(num, x, y, z) - Falls Sie mit 3 Dimensionen arbeiten.

Eigenschaften & Einstellungen

Das erste, was in diesem Abschnitt erklärt werden sollte, ist die Logik hinter dem Festlegen von Eigenschaften von Objekten. Füllfarbe, Hintergrundfarbe, Rahmen, Rahmenbreite, Rahmenfarbe, Ausrichtung der Formen, Rahmenstile usw. könnten einige Beispiele für diese Eigenschaften sein.

Wenn Sie eine Eigenschaft festlegen, müssen Sie daran denken, dass der Code von oben nach unten ausgeführt wird. Angenommen, Sie setzen die Eigenschaft „Füllung“ auf Rot, alle Objekte, die unterhalb dieser Linie gezeichnet werden, werden mit Rot gefüllt, bis sie von einer anderen Fülleigenschaft überschrieben werden. Das Gleiche gilt auch für andere Eigenschaften, beachten Sie jedoch, dass sich nicht alle Eigenschaften gegenseitig überschreiben. Beispielsweise überschreibt die Eigenschaft „Strich“ nicht die Eigenschaft „Füllung“, sondern sie arbeiten zusammen. Hier ist eine visuelle Darstellung, damit Sie die Logik verstehen:

Wie Sie im Bild sehen können, setzt die erste Zeile die Füllfarbe auf Rot und die zweite Zeile die Strichfarbe auf Blau. Wir haben jetzt zwei aktive Einstellungen: rote und blaue Striche füllen. Wie Sie erwartet haben, wird unser Objekt in der nächsten Zeile mit Rot gefüllt und mit blauen Strichen (falls zutreffend) versehen. Sie können das Bild auf diese Weise weiter untersuchen, und Sie werden die Logik begreifen.

Hier sind einige wesentliche Eigenschaften und Einstellungen, die häufig verwendet werden:

Styling-Einstellungen

fill() - Legt die Füllfarbe für Objekte fest. Diese Einstellung wird auch zum Einfärben von Texten verwendet. Im Moment müssen wir nur die folgende Verwendung kennen:

  • fill(r, g, b) - Rote, grüne und blaue Werte als Ganzzahl
  • fill(r, g, b, a) – Zusätzlicher Alpha-Wert, max ist 255

noFill() - Setzt die Füllfarbe auf transparent.

Stroke () - Legt die Strichfarbe für Objekte fest. Die Stroke-Eigenschaft gilt für Linien und Rahmen um Objekte herum. Im Moment müssen wir nur die folgende Verwendung kennen:

  • stroke(r, g, b) – Rot-, Grün- und Blauwerte als Ganzzahl.
  • Stroke(r, g, b, a) – Zusätzlicher Alpha-Wert, max. 255

noStroke() - Entfernt den Strich.

strokeWeight() – Legt die Breite des Strichs fest. Verwendungszweck:

  • strokeWeight(x) - x ist eine Ganzzahl und repräsentiert die Strichbreite in Pixeln.

background() - Legt die Hintergrundfarbe fest. Im Moment müssen wir nur die folgende Verwendung kennen:

  • background(r, g, b) - Rote, grüne und blaue Werte als ganze Zahl.
  • background(r, g, b, a) – Zusätzlicher Alpha-Wert, max. 255

Ausrichtungseinstellungen

ellipseMode() - Legt fest, wo als Referenzpunkt Ellipsen ausgerichtet werden sollen. Verwendungszweck:

  • ellipseMode(mode) - 'mode' ist der Parameter, hier sind die verfügbaren Parameter:
    • CENTER (Standard): Nehmen Sie die Mitte als Bezugspunkt.
    • RADIUS: Dies nimmt auch die Mitte als Bezugspunkt, aber in diesem Modus werden die von Ihnen angegebenen w- und h-Werte als Hälfte behandelt (dh Radius statt Durchmesser).
    • ECKE: Nimmt die obere linke Ecke als Bezugspunkt.
    • ECKEN: Legt die ersten beiden Parameter (x und y) als Position der oberen linken Ecke und die letzten beiden Parameter (w und h) als Position der unteren linken Ecke der Ellipse fest. Dieser Modus, „Breite“ und „Höhe“, ist also irrelevant. In diesem Fall ist es sinnvoller, es als Ellipse (x_tl, y_tl, x_br, y_br) zu denken.

rectMode () - Legt fest, wo als Bezugspunkt zum Ausrichten von Rechtecken genommen werden soll. Verwendungszweck:

  • rectMode(mode) - 'mode' ist der Parameter, hier sind die verfügbaren Parameter:
    • MITTE: Nehmen Sie die Mitte als Bezugspunkt.
    • RADIUS: Auch hier wird der Mittelpunkt als Bezugspunkt genommen, aber in diesem Modus werden die von Ihnen angegebenen w- und h-Werte halbiert
    • ECKE (Standard): Nimmt die obere linke Ecke als Bezugspunkt.
    • ECKEN: Legt die ersten beiden Parameter (x und y) als Position der oberen linken Ecke und die letzten beiden Parameter (w und h) als Position der unteren linken Ecke der Ellipse fest. Dieser Modus, „Breite“ und „Höhe“, ist also irrelevant. Es ist in diesem Fall sinnvoller, es sich als rect(x_tl,y_tl,x_br,y_br) vorzustellen.

Textbezogene Einstellungen

textSize() - Legt die Schriftgröße des Textes fest. Verwendungszweck:

  • textSize(size) – Ganzzahliger Wert der gewünschten Größe.

textLeading() - Legt die Zeilenhöhe Ihrer Texte fest. Verwendungszweck:

  • textLeading(lineheight) – Pixelwert des Abstands zwischen Zeilen.

textAlign () - Legt fest, wo als Bezugspunkt zum Ausrichten von Texten genommen werden soll. Verwendungszweck.

  • textAlign(alignX) - 'alignX' dient der horizontalen Ausrichtung. Verfügbar: LINKS, MITTE, RECHTS
  • textAlign(alignX, alignY) - 'alignY' dient der vertikalen Ausrichtung. Verfügbar: OBEN, UNTEN, MITTE, GRUNDLINIE.

Animationen

Bisher haben wir gelernt, wie man Objekte und Texte zeichnet. Aber das Problem mit ihnen ist, dass sie statisch sind. Wie bringen wir sie nun dazu, sich zu bewegen? Einfach, anstatt Koordinaten als ganze Zahlen anzugeben, verwenden wir Variablen, damit wir sie erhöhen / verringern können . Sinn ergeben? Sehen Sie sich den folgenden Code an:

 // initialize x and y as 0 int x=0; int y=0; void setup(){ size(800,600); background(255); // set background color to white } void draw(){ fill(255,0,0); // fill color red stroke(0,0,255); // stroke color blue ellipseMode(CENTER); // ref. point to ellipse is its center ellipse(x, y, 20, 20); // draw the ellipse // increment x and y x+=5; y+=5; }

Sehen Sie, wie wir die Animation hinbekommen haben? Wir setzen x und y als globale Variablen und ihren Anfangswert auf 0. In unserer Zeichenschleife haben wir unsere Ellipse erstellt, die Füllfarbe auf Rot, die Strichfarbe auf Blau und die Koordinaten auf x und y gesetzt. Wenn wir x und y erhöhen, ändert der Ball einfach seine Position. Aber es gibt ein Problem mit diesem Code, können Sie es bemerken? Versuchen Sie als einfache Herausforderung für sich selbst herauszufinden, was das Problem ist, und testen Sie es. Hier ist das Ergebnis:

Meine Absicht, dies geschehen zu lassen, war, Ihnen klar zu machen, wie die Schleifennatur der Verarbeitung funktioniert. Sehen Sie sich das Beispiel im Abschnitt „Draw Block“ an. Erinnern Sie sich, warum wir „1 1 1…“ anstelle von „1 2 3…“ bekommen haben? Derselbe Grund, warum der Ball Spuren hinterlässt. Jedes Mal, wenn der Zeichenblock iteriert, werden x und y um 5 erhöht, und daher wird der Ball auf 5 Pixel nach unten und rechts neu gezeichnet. Der aus den vorherigen Iterationen gezogene Ball bleibt jedoch in der Ansicht. Wie bringen wir sie zum Verschwinden? Irgendwelche Ideen?

Um die Spuren zu beseitigen, die der Ball hinterlässt, entfernen wir einfach den Hintergrund (255) aus dem Setup-Block und fügen ihn als allererste Linie des Draw-Blocks ein. Als sich unser Hintergrundcode im Setup-Block befand, lief er am Anfang einmal und machte unseren Hintergrund weiß. Aber das ist nicht genug, wir brauchen es, um unseren Hintergrund auf jeder Schleife auf Weiß zu setzen, um die Bälle abzudecken, die aus den vorherigen Schleifen gezogen wurden. Da der Hintergrund die erste Zeile ist, wird er zuerst ausgeführt und wird zur Basisebene. Auf jeder Schleife wird unsere Leinwand weiß gestrichen und neue Elemente werden auf den weißen Hintergrund gezeichnet. Wir haben also keine Noten.

Das ist die Idee hinter der Animation von Dingen in Processing, der programmgesteuerten Manipulation der Objektkoordinaten, um ihre Position zu ändern. Aber wie werden wir ausgefallene Sachen machen, wie zum Beispiel den Ball auf dem Bildschirm halten? Oder vielleicht die Schwerkraft implementieren? Ich werde im nächsten Teil dieses Artikels lehren, wie man dieses Zeug macht. Wir werden lernen, indem wir versuchen und bauen. Wir werden lernen, wie es geht, und sie sofort auf unser Spiel anwenden. Am Ende werden wir ein vollständiges, spielbares und hoffentlich unterhaltsames Spiel haben.

Tastatur- und Mausinteraktionen

Tastatur- und Mausinteraktionen in Processing sind sehr einfach und unkompliziert. Es gibt Methoden, die Sie für jedes Ereignis aufrufen können, und was Sie darin schreiben, wird einmal ausgeführt, wenn das Ereignis eintritt. Außerdem gibt es globale Variablen wie mousePressed und keyPressed, die Sie in Ihrem Zeichenblock verwenden können, um die Schleife zu nutzen. Hier sind einige der Methoden mit Erklärungen:

 void setup() { size(500, 500); } void draw() { if (mousePressed) { // Codes here will be executed as long as the mouse // button is pressed if (mouseButton == LEFT){ // This lines will be executed as long as // the clicked mouse button is the left mouse // button. } } if (keyPressed) { // Codes here will be executed as long as a key // on the keyboard is pressed if (key == CODED) { // This if statement checks if the pressed key // is recognised by Processing. if (keyCode == ENTER) { // This lines will be executed if the pressed key // is the enter key. } } else{ // This lines will be executed if the pressed key // is not recognised by processing. } } } void mousePressed() { // These codes will be executed once, when mouse // is clicked. Note that mouseButton variable is // also be used here. } void keyPressed() { // These codes will be executed once, when a key // is pressed. Note that key and keyCode variables // are also usable here. }

Wie Sie sehen können, ist es ziemlich einfach zu überprüfen, ob mit der Maus geklickt oder welche Taste gedrückt wird. Es stehen jedoch mehr Optionen für mousePressed- und keyCode-Variablen zur Verfügung. Verfügbare Optionen für mousePressed sind LEFT, RIGHT und CENTER. Es gibt viele weitere für keyCode ; OBEN, UNTEN, LINKS, RECHTS, ALT, STRG, UMSCHALT, RÜCKTASTE, TAB, EINGABE, ZURÜCK, ESC und ENTFERNEN.

Eine Sache, die Sie über die Mausvariablen wissen sollten, und wir werden dies häufig verwenden, ist, wie Sie die Koordinaten der Maus erhalten. Um die genauen Koordinaten des Cursors zu erhalten, können wir die Variablen mouseX und mouseY direkt im draw()-Block verwenden. Zu guter Letzt gibt es noch viele andere nützliche Methoden, die Sie sich ansehen sollten. Sie sind alle in der Verarbeitungsreferenz dokumentiert.

Fazit

Sie sollten sich inzwischen mit der Verarbeitung vertraut gemacht haben. Wenn Sie jedoch hier aufhören, wird all dieses Wissen davonfliegen . Ich empfehle Ihnen dringend, weiter zu üben und mit dem herumzuspielen, was Sie gelernt haben. Um Ihnen beim Üben zu helfen, werde ich Ihnen zwei Übungen zur Verfügung stellen. Sie sollten Ihr Bestes geben, um es selbst zu tun. Wenn Sie nicht weiterkommen, sollten Google und Processing Reference Ihre besten Freunde sein. Ich werde den Code für den ersten bereitstellen, aber das Ansehen sollte das Letzte sein, was Sie tun.

Empfohlene Übung 1

Sie sollten 4 Bälle mit unterschiedlichen Farben bilden, beginnend an 4 Ecken des Bildschirms, die sich mit unterschiedlichen Geschwindigkeiten durch die Mitte bewegen. Wenn Sie die Maustaste gedrückt halten, sollten die Kugeln einfrieren . Und wenn Sie die Maus loslassen, könnten die Kugeln in ihre Ausgangsposition zurückkehren und sich weiter bewegen. Also ich suche sowas.

Nachdem Sie die Übung selbst ausprobiert haben, können Sie sich den Code hier ansehen.

Empfohlene Übung 2

Erinnern Sie sich an den berühmten DVD-Bildschirmschoner, bei dem das DVD-Logo über den Bildschirm springt und wir alle verzweifelt darauf gewartet haben, dass er in die Ecke kommt? Ich möchte, dass Sie diesen Bildschirmschoner replizieren, aber nur ein Rechteck anstelle des DVD-Logos verwenden. Wenn Sie die App starten, sollte der Bildschirm schwarz sein und das Rechteck sollte an einer zufälligen Stelle beginnen. Jedes Mal, wenn das Rechteck auf die Ecke trifft, sollte es seine Farbe (und natürlich seine Richtung) ändern. Wenn Sie die Maus bewegen, sollte das Rechteck verschwinden und die Hintergrundfarbe sollte weiß werden (es ist ein Bildschirmschoner, nicht wahr?). Ich werde den Code für diese Übung in diesem Artikel nicht angeben. Sie sollten Ihr Bestes geben, um es zu implementieren, und der Code wird im zweiten Teil dieses Artikels bereitgestellt.

Der zweite Teil des ultimativen Processing-Leitfadens, einer Schritt-für-Schritt-Anleitung zum Erstellen eines einfachen Spiels, wurde veröffentlicht.

Weiterführende Literatur im Toptal Engineering Blog:

  • Wie man einen Dolmetscher von Grund auf neu schreibt