Interessante Programmieranleitung für Designer - Bringen Sie Ihr Bild zum Laufen (Teil eins): 16 Schritte

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:23

Lauf! Lauf! Lauf!

Die Programmierung ist nicht so schwer. Der Schlüsselpunkt ist, Ihren Rhythmus zu finden und ihn nacheinander zu tun.

Bevor Sie dieses Kapitel lesen, hoffe ich, dass Sie bereits mit der grundlegenden Methode des Zeichnens von Funktionen vertraut sind, oder Sie werden sich bei zwei großen Kopffunktionen schwindelig und verwirrt fühlen: Setup und Zeichnen.

Da wir Motional Graphics machen wollen, müssen wir wissen, wie Animationen produziert werden.

Das obige Bild wirkt recht ansprechend und zeigt visuell das Umsetzungsprinzip der Animation.

Animation ist magisch. Es ist eine Magie über visuellen Betrug. Doch in diesem mit Informationen explodierten, Videoflutzeitalter haben wir uns schon daran gewöhnt. Nur wenige Leute werden überrascht sein, dass es eine erstaunliche Sache ist, die Animation sehen zu können.

Das gleiche Prinzip kann beim Zeichnen von Animationen mit Programmen angewendet werden. Wir müssen uns überlegen, wie wir in jedem Frame unterschiedliche Grafiken zeichnen, und das Programm blättert automatisch um, während wir eine fertige Animation in unserem Kopf ergänzen. Im folgenden Kapitel werden wir darüber sprechen, wie man grundlegende grafische Bewegungen realisiert. Zuvor müssen wir einige grundlegende Kenntnisse über Variablen kennen.

Schritt 1: Variable

Variable ist der Container für Daten. Es kann innerhalb eines Programms wiederholt verwendet werden.

Zum Beispiel:

[cceN_cpp theme="dawn"] Größe(500, 500); Ellipse (100, 250, 50, 50); Ellipse (200, 250, 50, 50); Ellipse (300, 250, 50, 50); Ellipse (400, 250, 50, 50);

[/cceN_cpp]

In diesem Codeabschnitt wurden keine Variablen verwendet. Es zeichnet vier Kreise auf dem Bildschirm. Wir können feststellen, dass sie die gleiche Breite und Höhe haben. Nun, da es dasselbe ist, können wir ein Zeichen definieren, um es darzustellen, um wiederholte Dateneingaben zu minimieren. Dieses Zeichen ist variabel.

Hier ist der Code, nachdem eine Variable hinzugefügt wurde:

[cceN_cpp theme="dawn"] Größe(500, 500); int a = 50; Ellipse (100, 250, a, a); Ellipse (200, 250, a, a); Ellipse (300, 250, a, a); Ellipse (400, 250, a, a);

[/cceN_cpp]

Wir erhalten ein völlig gleiches Ergebnis!

Da wir die Variable a definiert haben, können wir bequem Parameter ändern. Wenn wir a=50 in a=100 ändern, werden die Breite und Höhe aller Kreise einheitlich 100. Wir müssen die Parameter also nicht einzeln ändern. Variable ist wirklich eine gute Erfindung.

Schritt 2: Die Erstellung von Variablen

Bevor wir eine Variable verwenden, müssen wir eine Aussage treffen und ihren Datentyp angeben.

int ich;

ich 50;

Der erste Codesatz hat eine Aussage für eine Variable i gemacht. int ist ein Symbol, das hauptsächlich zum Deklarieren von Variablen verwendet wird. Bei der Deklaration wird ein Raum im Computerspeicher gespart, was einer "Box" entspricht, die speziell zum Wiederherstellen von Integer-Daten verwendet wird. Der zweite Satz steht dafür, dass die Zuweisung 50 durch die Variable i implementiert wird. Nach der Umsetzung dieses Satzes werden die Daten in der Variablen i stabil gespeichert. Oder Sie können fauler sein, die beiden obigen Sätze zu einem zu kombinieren und die Aufgabe zu vervollständigen, während Sie eine Aussage machen.

int i 50;

Es ist vergleichsweise frei, eine Variable zu benennen. Aber manchmal müssen wir auf etwas achten.

Schritt 3: Namensregelung der Variablen

• Es muss sich um eine Kombination aus Alphabet und Unterstrich handeln. Es kann ein Symbol oder ein Wort sein.

• Groß-/Kleinschreibung beachten. Name und Name können für verschiedene Variablen stehen.

• Versuchen Sie, es so einfach wie möglich zu benennen, damit Sie es auf einen Blick verstehen. Das Anfangszeichen muss ein Alphabet anstelle einer Zahl oder eines Sonderzeichens sein.

• Keine Schlüsselwörter wie int, float

Die folgenden sind einige falsche Aussagen.

int $a;

int 89b;

Hier die richtigen Aussagen:

int r;

int super_24;

int openTheDoor;

Schritt 4: Variablentyp

Mit Ausnahme der Deklaration von Ganzzahldaten können wir Dezimaldaten (auch Gleitkommadaten genannt) mit dem Schlüsselwort float deklarieren.

Schwimmer b = 0,5

Wir müssen berücksichtigen, welche Art von Datentyp wir für unsere Erklärung verwendet haben. Wenn wir das Schlüsselwort int verwendet haben, kann die letztere Zuweisung nicht i＝0.5 oder so schreiben, oder das Programm wird fehlerhaft. Aber wenn wir umgekehrt schreiben, ist es in Ordnung. Float i=5 ist zum Beispiel die richtige Grammatik, aber das Programm erkennt sie als Dezimalzahl.

Einige Variablen wurden bereits vom System definiert. Wir müssen sie nicht selbst deklarieren. Genau wie die zuvor erwähnte "Breite, Höhe" wird automatisch die Breite und Höhe des Computerbildschirms erfasst. Eine so hohe Nutzungshäufigkeit, dass der Designer sie direkt als Standardvariable definiert, um die Verwendung für uns bequemer zu machen.

Schritt 5: Betreiber

Betreiber der Verarbeitung sind:

+ plus

- minus

* multiplizieren

Teilen

％ Restmodul

Sie müssen mit allen diesen Operatoren mit Ausnahme von % vertraut sein. Es scheint ziemlich seltsam, weil das Ergebnis Rest ist. 9%3 ist 0. Während 9%5 4 ist.

Operatoren können zwischen Zuweisungen und Variablen verwendet werden.

[cceN_cpp theme="dawn"] int a = 1; // ganzzahlige Variable a deklarieren, Zuweisung ist 1. int b = 2; //Integer-Variable b deklarieren, Zuweisung ist 2. int c; //Integer-Variable deklarieren c. c = a + b; //Plus zwei Zuweisungen und weise ihr Ergebnis c zu. drucken (c); //Ausgabevariable c.

[/cceN_cpp]

Schritt 6: Operationsergebnis:

Das Ausgabeergebnis wird nicht im Fenster, sondern unten in der Konsole angezeigt.

Die Schreibweise der vierten Zeile sieht ziemlich seltsam aus. Es ist jedoch ein gängiges Format, das häufig bei der Computerzuweisung verwendet wird. Die linke Seite des Gleichheitszeichens sollte die letzte zugewiesene Variable sein, während die rechte Seite der Operationsprozess sein sollte.

Die Druckfunktion in der fünften Zeile kann Variablen in der Konsole ausgeben, was oft verwendet wird, um den Zustand der Datenausgabe zu testen.

Schritt 7: Betriebsregelung

Ein problematischer Punkt bei der Verarbeitung ist, dass wir den Typ der Variablen klären müssen. Besonderes Augenmerk müssen wir auf den Prozess der Gleitkommazahl und des Integer-Typs legen.

drucken（6 / 5）; // Ergebnis 1

Operationen zwischen Ganzzahlen haben eine neue Ganzzahl. 6 geteilt durch 5 ergibt 1,2. Aber das Ergebnis der Programmausgabe ist 1. Dies widerspricht unserer Intuition. Das Programm behandelt nicht die Rundung, sondern löscht die Zahl hinter dem Komma.

drucken (6.0 / 5.0); // Ergebnis 1.2

Eine Operation zwischen Gleitkommazahlen führt zu einer neuen Gleitkommazahl. Wenn das tatsächliche Ergebnis 1,2 beträgt, ist das Ergebnis der Programmausgabe dasselbe.

drucken (6 / 5.0); // Ergebnis 1.2

drucken (6.0 / 5); // Ergebnis 1.2

Schließlich ist es die Mischung aus Integer- und Gleitkommazahl. Das endgültige Ausgabeergebnis ist 1.2.

• Eigentlich muss man bedenken, dass das Ziel dieses Regelungsdesigns darin besteht, die Genauigkeit der Daten nicht zu verlieren. Wenn also ein Element eine Gleitkommazahl ist, ist das Ergebnis auch eine Gleitkommazahl.

Schritt 8: Setup-Funktion & Zeichenfunktion

Zuvor haben wir über einen Stapel Grundwissen gesprochen. Jetzt kommen wir endlich, um etwas Interessantes zu spielen. Die Funktionen Setup und Draw entsprechen den Hauptfunktionen der Verarbeitung. Diese beiden Funktionen sind etwas ganz Besonderes. Es kann den Ablauf des Programms steuern. Vergleichsweise komplizierte Programme enthalten diese beiden Funktionen, da sie den Grundrahmen für das Programm bilden. Format:

Void-Setup () {

}

Leere zeichnen (){

}

Die spezielle Verwendung unterscheidet ihr Aufrufformat von den anderen Funktionen. Wir müssen "void" vor dem Funktionsnamen hinzufügen, was für keinen "zurückgegebenen Wert" steht. Hinter dem Funktionsnamen müssen wir Klammern und geschweifte Klammern hinzufügen.

[cceN_cpp theme="dawn"] void setup(){ print(1); aufrechtzuerhalten. Void zeichnen () { drucken (2); } [/cceN_cpp]

Schauen wir uns ein Beispiel an:

Beim Drücken der Bedientaste gibt die Konsole zuerst „1“und dann konstant „2“aus, bis Sie die Stopptaste gedrückt oder das Fenster geschlossen haben.

Code in Klammern in der Setup-Funktion wird nur einmal implementiert. Während der Code in der Funktion Draw ständig im Umlauf läuft (Standardimplementierung 60 Mal/Sekunde).

Aufgrund dieses Charakters wird setup normalerweise verwendet, um Umgebungseigenschaften wie Breite und Höhe des Bildschirms, Hintergrundfarbe und alle Arten von Variablenzuweisungen zu initialisieren. Während wir häufig Zeichenfunktionen in die Funktion draw einfügen, um kontinuierlich veränderte Grafiken zu generieren.

Schritt 9: Kreis in horizontaler Bewegung

Mit Function Draw können wir mit der Erstellung unserer Animationen beginnen. Die Methode zum Schreiben von Animationseffekten durch Processing ist ziemlich „umständlich“. Es hat keinen existierenden Befehl. Legen Sie beispielsweise eine bestimmte Form fest, die krummlinig ist.

Diese Details müssen wir selbst definieren. Sie müssen dem Programm mitteilen, welche Art von Grafiken jeder Frame auf jeden Fall benötigt.

Schreiben Sie den folgenden Code hinein (Jetzt fangen wir an, es mit den Händen zu machen):

[cceN_cpp theme="dawn"] int x; int y; Void setup () { Größe (300, 300); x = 0; y = Höhe/2; aufrechtzuerhalten. Void Draw () { Hintergrund (234, 113, 107); keinStroke(); Ellipse (x, y, 50, 50); x = x+1; }

[/cceN_cpp]

Dieser Codeabschnitt zeigt einen Bewegungskreis an. Die früher deklarierten Variablen x, y werden verwendet, um die Position der Koordinaten zu speichern. Seine Zuweisungen laufen im Funktionssetup. Der Tastencode ist der folgende in Function Draw:

x = x + 1

Betrachten Sie es nicht als mathematische Gleichung, sonst wird es sehr seltsam. "＝" ist hier ein Symbol für die Zuordnung. Es stellt dar, die rechten Zahlen in die linke Variable zu setzen. Angenommen, x ist 50, sobald der Code ausgeführt wird, entspricht die rechte Seite von "＝" 50+1, d. h. 51. Das Endergebnis wird der Variablen x zugewiesen. Der Wert von x wird also 51.

Folgen Sie der Prozedur des Programms, jedes Mal, wenn die Funktion Zeichnen einmal ausgeführt wird, wird der Wert von x erhöht. Jedes Mal, wenn wir zeichnen, bewegt sich der Kreis im Vergleich zum vorherigen Bild horizontal in Pixelrichtung nach rechts. Dadurch wird die Grafik bewegt.

• Um die Lesbarkeit des Codes zu verbessern, müssen wir vor jeder Codezeile in geschweiften Klammern einen bestimmten Raum freigeben. Und es soll so ausgerichtet wie möglich sein. Drücken Sie TAB oder mehrere Leerzeichen, es kann zurückgezogen werden.

• Das Leerzeichen- und Zeilenumbruchsymbol im Programm hat keinen Einfluss auf das Programm. Es ist also in Ordnung, wenn wir mehr oder weniger eingeben.

Hier ist eine andere einfachere Möglichkeit, es auszudrücken. Damit der variable Kreis automatisch um 1 erhöht wird, müssen wir ihn im folgenden Format schreiben.

Kreis ＝ Kreis ＋1

Ziemlich unpraktisch! Wenn der Name der Variablen länger ist, müssen wir mehr Wörter eingeben. Also denken sich unsere faulen Vorgänger so eine Idee aus.

Kreis＋＋

Ist es nicht ganz einfach? Es bedeutet, dass 1 automatisch erhöht wird. Ähnlich dazu gibt es - -, was bedeutet, dass 1 automatisch verringert wird.

Aber wenn wir hoffen, dass die Menge der automatischen Erhöhung eine andere Zahl wie 2 ist, müssen wir einen anderen Ausdruck versuchen.

Kreis += 2

Dies entspricht

Kreis = Kreis + 2

Ebenso gibt es －＝, /=, *=.

Schritt 10: Bewegungsrichtung

In welche Richtung sich die Grafik bewegt, hängt davon ab, wie Sie Ihre Koordinaten ändern. Wenn es in y＝y＋1 geändert wird, bewegt sich der Kreis nach unten. Wenn sowohl x als auch y um 1 steigen, bewegt sich der Kreis rechts unten nach unten. Wenn wir es als Minuszeichen schreiben, bewegt es sich in die entgegengesetzte Richtung.

[cceN_cpp theme="dawn"] int x, y; //Kann mehrere Variablen gleichzeitig deklarieren, Komma zum Trennen verwenden. Void setup () { Größe (300, 300); x = 0; y = 0; aufrechtzuerhalten. Void Draw () { Hintergrund (234, 113, 107); keinStroke(); Ellipse (x, y, 50, 50); x++; y++; }

[/cceN_cpp]

Bewegungsrate

Erinnern Sie sich an die standardmäßigen 60 Bilder pro Sekunde in der Funktion Zeichnen? Entsprechend dieser Geschwindigkeit bewegt sich der obige Kreis 60 Pixel pro Sekunde nach rechts.

Wenn wir die Grafikbewegungsrate ändern möchten, gibt es zwei Methoden: Eine besteht darin, den x-Wert jedes Mal zu erhöhen, da er geändert wird.

x＝x＋10

Es hat die Geschwindigkeit im Vergleich zum Original um das 10-fache verbessert!

Die andere Methode besteht darin, die Häufigkeit der Aktualisierung der Leinwand zu ändern. frameRate()

Diese Funktion kann die Sendefrequenz der Leinwand ändern. Schreiben Sie frameRate (10) in das Funktions-Setup, es ändert die ursprünglichen 60 Bilder pro Sekunde in 10 Bilder pro Sekunde. Die Geschwindigkeit wird 6-mal langsamer als zuvor.

Schritt 11: Übersehener Hintergrund

Alle vorherigen Beispiele schreiben den Hintergrund in die Funktion draw. Haben Sie jemals daran gedacht, es in das Funktions-Setup zu schreiben? Wird es Unterschiede geben? Lassen Sie uns nun das Beispiel der horizontalen Bewegung aktualisieren.

[cceN_cpp theme="dawn"] int x, y; Void setup () { Größe (300, 300); Hintergrund (234, 113, 107); x = 0; y = Höhe/2; aufrechtzuerhalten. Void draw () { noStroke (); Ellipse (x, y, 50, 50); x += 1; } [/cceN_cpp]

Was ist passiert? Vielleicht kann es den Grund für die Produktion des Problems nicht richtig verstehen. Löschen Sie die Funktion noStroke, fügen Sie erneut einen Strich hinzu und sehen Sie sich den Bewegungspfad des Kreises an.

Oh, es liegt daran, dass der zuvor erstellte Kreis nicht gelöscht wurde! Da das Funktions-Setup nur einmal ausgeführt wird, füllt es den Hintergrund nur einmal aus, wenn wir darüber schreiben, und hat beim zweiten Mal keine Wirkung mehr. Funktionshintergrund ist wie Farbeimerwerkzeug. Sobald es verwendet wird, deckt es den gesamten Inhalt der Leinwand ab, anstatt nur eine Hintergrundfarbe festzulegen. Wir schreiben es vor der Funktion draw, damit der vorherige Frame jedes Mal abgedeckt wird, wenn wir ein neues Muster erstellen. Daher kann der Kreis wie erwartet verlaufen. Abgesehen davon, dass wir uns an die Verwendungen jeder Funktion erinnern, müssen wir über die Position des Codes nachdenken. Viel Zeit, den Codea nach oben oder unten zu schreiben und ihn in oder aus einer geschweiften Klammer zu schreiben, erzeugt ganz andere Effekte. Die Richtung des Codes ist zweidimensional. Wenn ein Fehler auftaucht, müssen wir in dieser zwei Dimension kalibrieren.

• Diese nicht wiederholte Zeichenmethode kann bei richtiger Anwendung einen ganz besonderen Effekt erzielen. Sie können den folgenden Code kopieren und versuchen.

[cceN_cpp theme="dawn"] void setup(){ size(400, 400); aufrechtzuerhalten. Void draw () { Ellipse (Breite/2-MausX, Höhe/2-MausX, MausY, MausY); Ellipse (Breite/2-MausX, Höhe/2+MausX, MausY, MausY); Ellipse (Breite/2+MausX, Höhe/2-MausX, MausY, MausY); Ellipse (Breite/2+MausX, Höhe/2+MausX, MausY, MausY); } [/cceN_cpp]

Hier haben wir die magischen Variablen mouseX und mouseY verwendet. Später werden wir ausführlich darüber sprechen.

Schritt 12: Schüttelkreis

Was ist, wenn ich möchte, dass die Bewegungsrichtung des Kreises unregelmäßig wird? Mit der Funktion random clever können Sie auch diesen Effekt realisieren. Random ist eine häufig verwendete Funktion. Es kann verwendet werden, um eine Zufallsfunktion zu erzeugen. Es ist wie ein spurloser Geist. Wenn Sie einmal mit Variablen in Verbindung stehen, können Sie sich nicht vorstellen, was als nächstes passieren wird.

Aufrufformat:

zufällig (hoch)

High stellt die zufällige Obergrenze dar, und die Standarduntergrenze ist 0. Beispiel: random(10). Es wird eine zufällige Zahl von 0 bis 10 erzeugt (0 ist enthalten, aber 10 ist nicht enthalten).

zufällig (niedrig, hoch)

Wenn wir zwei Parameter festlegen, wird auf den zufälligen Wert zwischen ihnen zurückgekehrt. Zum Beispiel random(5, 10). Es wird eine zufällige Zahl von 5 bis 10 erzeugt (5 ist enthalten, aber 10 ist nicht enthalten).

Beispiel:

[cceN_cpp theme="dawn"] float x;

x = zufällig (50, 100);

drucken (x); [/cceN_cpp]

Jedes Mal, wenn wir das Programm ausführen, gibt die Konsole verschiedene Werte aus.

• Hinweis: Von der Funktion random erzeugte Werte gehören zum Gleitkommatyp (Dezimalzahltyp). Wenn wir einer Integer-Variablen einen Wert zuweisen möchten, müssen wir ihn durch die Funktion int() transformieren. Die Transformation hält sich nicht an die Rundung, sondern löscht den Dezimalteil direkt. Somit hat die Ausgabe von int (random (5)) nur 5 Möglichkeiten: 0, 1, 2, 3, 4.

Nachdem wir uns mit der Verwendung der Funktion random vertraut gemacht haben, können wir direkt auf den folgenden Fall eingehen.

[cceN_cpp theme="dawn"] int x, y; Void setup () { Größe (300, 300); x = Breite/2; y = Höhe/2; aufrechtzuerhalten. Void Draw () { Hintergrund (234, 113, 107); keinStroke(); x += int(zufällig(-5, 5)); y += int(zufällig(-5, 5)); Ellipse (x, y, 50, 50); }

[/cceN_cpp]

Die zuvor hinzugefügten Koordinatenwerte sind fest. Nur wenn wir einen zufälligen Wert erhöhen, bewegt sich der Kreis in eine unbestimmte Richtung. Mit dem größeren zufälligen Bereich zittert es häufiger. Da die Wertänderung zwischen den Frames gebounct wird, ist die Bewegung nicht mehr glatt. Während sich der erstere Frame bei (150, 150) befindet, bewegt sich der letztere Frame auf einen Blick auf die Position (170, 170).

Schritt 13: Kreis migrieren

Migrierender Kreis

Wird es eine reibungslose Bewegung schaffen? Funktionsrauschen kann uns helfen. Es hat einen besseren Rhythmus als Standard-Random. Und die zufällig generierten Zufallszahlen sind kontinuierlich.

Aufrufformat:

lärm（t）

Funktionsrauschen kann seinen Ausgabebereich nicht definieren. Das Programm definiert es kann nur Gleitkommazahlen von 0 bis 1 generieren und feste Eingabe kann nur feste Ausgabe haben.

[cceN_cpp theme="dawn"] float x = Rauschen(5); float y = Rauschen(5); drucken (x, y); [/cceN_cpp]

Da die obigen Eingabeparameter 5 sind, sind die Ausgabeergebnisse gleich. Wie kann dann das Ergebnis geändert werden? Die Antwort besteht darin, die Eingabeparameter dynamisch zu ändern. Eigentlich können wir Rauschen als grenzenlose Sprachspur betrachten, die Eingabeparameter sind wie "die gegenwärtige Zeit". Wenn die Parametereingabe kontinuierlich ist, erfolgt auch die Ausgabe kontinuierlich.

[cceN_cpp theme="dawn"] float x, y; Void setup () { Größe (700, 100); x = 0; Hintergrund(0); aufrechtzuerhalten. Void zeichnen () { x + = 1; y = Rauschen (frameCount/100,0)*100; keinStroke(); Ellipse (x, y, 2, 2); }

[/cceN_cpp]

In diesem Fall zeichnen wir den Änderungspfad von Y, um das Funktionsrauschen besser verstehen zu können.

• Darunter wird die Variable frameCount den aktuellen Frame erhalten. Anders als die Breite, Höhe in der vorherigen, ist es ohne jede Änderung stabil. Außerdem beginnt es von 0 an zu steigen. Wenn wir es unter unserer anfänglichen animierten Grafik verstehen, zeigt es die Seite an, die wir aufgerufen haben (eher die Zeitvorstellung im Programm).

• frameCount ist eine Integer-Variable. Dividiert durch eine andere Integer-Variable verarbeitet das Programm das Ergebnis standardmäßig als Integer. Um die Genauigkeit des Ergebnisses zu verbessern, müssen wir 100 auf 100.0 ändern. Dividiert durch eine Gleitkommazahl erhalten wir auch eine Gleitkommazahl.

• Um die Y-Achse von 0 auf 100 zu ändern, müssen wir das Ergebnis des Rauschens mit 100 multiplizieren. Damit können wir den zufälligen Wertebereich steuern.

Einige von Ihnen, die gut denken können, werden sich vielleicht fragen: "Warum müssen wir frameCount durch 100 teilen? Ist es nicht in Ordnung, frameCount direkt zu schreiben?" Natürlich kannst du! Aber hier, um die Eigenschaften des Funktionsrauschens besser darzustellen, verlangsamen wir die "Rundfunkrate". Das folgende Beispiel zeigt die Ausgabewertänderungen bei unterschiedlichen Änderungsraten.

[cceN_cpp theme="dawn"] float x, y1, y2, y3, y4, y5; Void setup () { Größe (700, 500); x = 0; Hintergrund(0); aufrechtzuerhalten. Void zeichnen () { x + = 1; y1 = Rauschen (FrameCount)*100; y2 = Rauschen (frameCount/10,0)*100; y3 = Rauschen (frameCount/100,0)*100; y4 = Rauschen (frameCount/1000.0)*100; y5 = Rauschen (frameCount/10000.0)*100; keinStroke(); Ellipse (x, y1, 2, 2); Ellipse (x, y2+100, 2, 2); Ellipse (x, y3+200, 2, 2); Ellipse (x, y4+300, 2, 2); Ellipse (x, y5+400, 2, 2); Schlaganfall (80); Linie (0, 100, Breite, 100); Linie (0, 200, Breite, 200); Linie (0, 300, Breite, 300); Linie (0, 400, Breite, 400); }

[/cceN_cpp]

Sie können die sich ändernden Parameter innerhalb des Funktionsrauschens als Fortschrittsbalken betrachten. Ändern Sie den Parameter, als würden wir den Fortschrittsbalken verschieben. Wenn also der sich ändernde Umfang dieser "Sprachspur" größer ist, werden die kontinuierlichen Eigenschaften des Ausgangswerts vorne und hinten schwächer. (Wir können uns vorstellen, was passiert, wenn wir ein Musikstück oder ein Video mit 2-facher Geschwindigkeit, 5. übertragen mal Geschwindigkeit, 20 mal Geschwindigkeit). Wenn der Bereich größer als ein bestimmter Wert ist, macht es keinen großen Unterschied, bei der Wertgenerierung zufällig zu funktionieren.

Wenn Sie alle oben genannten Beispiele verstehen, werden Sie das Gefühl haben, dass nichts einfacher ist, einen Migrationskreis zu zeichnen. Sie können auch die internen Prinzipien verstehen.

[cceN_cpp theme="dawn"] float x, y; Void setup () { Größe (300, 300); x = 0; aufrechtzuerhalten. Void Draw () { Hintergrund (234, 113, 107); x = Rauschen (FrameCount/100.0 + 100)*300; y = Rauschen (frameCount/100,0)*300; keinStroke(); Ellipse (x, y, 50, 50); }

[/cceN_cpp]

Jetzt ist die Bewegung interessanter, genau wie ein rotierender Kreisel.

• Der Grund, warum die Variable x innerhalb des Funktionsrauschens plus 100 sein muss, liegt darin, sie für eine Distanz zu trennen. Wenn die Parameter von xy innerhalb des Funktionsrauschens gleich oder ziemlich nahe sind, wird die Änderung der x-, y-Koordinate nahezu gleich sein. Dies soll die Bewegung viel zufälliger machen.

Schritt 14: Kreis mit der Maus bewegt

Als nächstes kommen wir schließlich zu zwei Variablen, die mir am besten gefallen: mouseX und mouseY. Beim ersten Anblick der beiden Vorstellungen glänzen meine Augen vor Licht. Weil es der direkteste Weg ist, mit Grafik zu interagieren. Wir können damit viele interessante Programme erstellen.

Der Fall ist ganz einfach:

[cceN_cpp theme="dawn"] int x, y; Void setup () { Größe (300, 300); x = 0; y = 0; aufrechtzuerhalten. Void Draw () { Hintergrund (234, 113, 107); keinStroke(); x = MausX; y = MausY; Ellipse (x, y, 50, 50); }

[/cceN_cpp]

mouseX kann die x-Koordinate der Maus erfassen, während mouseY die y-Koordinate erhalten kann.

• Versuchen wir, positive und negative Symbole zu ändern, oder tauschen Sie mouseX und mouseY aus.

Schritt 15: Ende

Mit diesen vertrauten Befehlen können Sie möglicherweise die Bewegung von Grafiken ausführen. Verwenden Sie mit dem Inhalt des letzten Kapitels Ihre Vorstellungskraft richtig, Sie können viele interessante animierte Effekte erstellen.

In unserem nächsten Kapitel können wir zahlreichere Beispiele sehen. Gleichzeitig werden wir mathematische Funktionen verwenden und mit grafischen Bewegungen kombinieren.

Dieser Artikel stammt von Designer Wenzy.

Schritt 16: Relative Messwerte:

Interessante Programmieranleitung für Designer – Erste Berührungen verarbeiten

Interessante Programmieranleitung für Designer – Erstellen Sie Ihr erstes Verarbeitungsprogramm

Dieser Artikel ist von:

Wenn Sie Hilfe benötigen, können Sie sich an [email protected] wenden.