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

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

Mathematik scheint für die meisten von Ihnen nutzlos zu sein. Das am häufigsten verwendete in unserem täglichen Leben ist einfach addieren, subtrahieren, multiplizieren und dividieren. Es ist jedoch ganz anders, wenn Sie mit Programm erstellen können. Je mehr Sie wissen, desto mehr wunderbare Ergebnisse werden Sie erhalten.

Schritt 1: Bewegung & Funktion

Lassen Sie mich Ihnen einige unbekannte Bilder zeigen, um Ihren Geschmack anzuregen.

Was ist das? Behalten Sie jetzt diese Frage zuerst und letztere werden Sie kennen und verwenden.

Im letzten Kapitel haben wir Function Setup und Function Draw kennengelernt, die statische Grafiken dynamisch machen können. Dieses Bewegungsformat ist jedoch einfach zu einfach. Wir werden unser zuvor erlerntes Funktionswissen nutzen, um unsere Grafiken mit ihrem eigenen Charakter auszuführen.

Wie viele Funktionen können Sie auf den obigen Bildern erkennen? Welche Beziehung haben sie zur Bewegung? Jetzt nehmen wir eine quadratische Funktion daraus, fügen zufällig einige Parameter hinzu und sehen, was passiert. Zum Beispiel y = x² / 100.

So sieht das Funktionsbild aus. Kopieren Sie den unten stehenden Code.

[cceN_cpp theme="dawn"] float x, y; Void setup () { Größe (300, 300); Hintergrund(0); x = 0; aufrechtzuerhalten. Void Draw () { Stroke (255); Strichgewicht(2); y = pow(x, 2)/100,0; //Funktion pow kehrt zur n-ten Potenz der Bezeichnungsnummer zurück. (x, 2) repräsentiert das Quadrat von x. Der erste Parameter ist die Basisnummer und der zweite der Index. Punkt (x, y); x++; } [/cceN_cpp]

Laufeffekt

Wählen Sie als Nächstes die Funktion sin. Formel: y = 150 + sin(x).

Kopieren Sie den folgenden Code.

[cceN_cpp theme="dawn"] float x, y; Void setup () { Größe (300, 300); Hintergrund(0); x = 0; aufrechtzuerhalten. Void draw () { y = Höhe / 2 + sin (Radiant (x)) * 150; //Funktion Radiant x in Winkel umwandeln. x++; Schlaganfall (255); Strichgewicht(2); Punkt (x, y); } [/cceN_cpp]

Laufeffekt

Dies ist die Grafik, die wir nach dem Ausführen des Codes erhalten. Und das sind ihre Bewegungsspuren. Im Vergleich zu ersterem ist das Ergebnis offensichtlich. Funktionsbild entspricht eigentlich der Bewegungsspur! Es ist ganz einfach genug. Sie müssen nur den Wert von x, y durch die Koordinate ersetzen. Die erstgenannte Spur, die wir gezeichnet haben, entspricht der Grafik der Funktion y = x² / 100. Die letztere Spur entspricht der Grafik der Funktion y = 150 + sin(x). Aber im Programm ist die Richtung der y-Achse entgegengesetzt. Im Vergleich zur Originalgrafik wird der Track also auf dem Kopf stehen. Nun, ich schätze, Sie haben das Gefühl, dass einige schwierige Fragen, die Ihnen schon lange im Kopf herumschwirrten, sofort gelöst werden. Es ist erstaunlich, dass diese fantastischen Funktionen, die wir zuvor gelernt haben, verwendet werden können, um grafische Bewegungen zu steuern!

Schritt 2: Funktion schreiben

Im Folgenden habe ich einige häufig verwendete Funktionen aufgelistet. Ich hoffe, diese können uns helfen, Funktionen in Code zu übersetzen, der vom Computer erkannt werden kann.

Daher sollte die folgende Formel im Programm wie folgt geschrieben werden:

y = x² → y = pow(x, 2) oder y = sq(x)

y = x³ → y = pow(x, 3)

y = xⁿ → y = pow(x, n)

y = 4ⁿ → y = pow(4, n)

y ＝logₑ² → y = log(2)

y = e² → y = exp(2)

y = √5 → y = Quadrat(5)

Sie können auch zufällig eine Funktion in ein Programm schreiben und sehen, wie ihre Bewegungsspur aussehen wird. Denken Sie daran, den Bereich des Wertefelds und die Definitionsdomäne zu berücksichtigen, sonst läuft Ihre Grafik aus Ihrem Bildschirm.

Trigonometrische Funktion

Lassen Sie uns nun einige Schriften über trigonometrische Funktionen kennenlernen.

Wir müssen darauf achten, dass im Programm die Eingabe des Funktionsparameters relativ zum Winkel das Bogenmaß annimmt. Somit soll sin90° in sin(PI／2) geschrieben werden. Wenn Sie mit dieser Methode nicht vertraut sind, können Sie mit der Funktion randians vorher den Winkel in das Radiant umwandeln und dann sin（radians(90) schreiben.

Die Verwendung von Funktionsgraden ist vergleichsweise gegensätzlich. Es kann Bogenmaß in Winkel umwandeln. Geben Sie print(degrees(PI/2)) direkt in den Bearbeitungsbereich ein und sehen Sie, was Sie erhalten.

Schritt 3: Steuern Sie die Grafikbewegung mit der trigonometrischen Funktion

Hier ist ein Fall für Sie, um den tatsächlichen Effekt der grafischen Bewegung zu sehen.

[cceN_cpp theme="dawn"] float x, y; Void setup () { Größe (700, 300); aufrechtzuerhalten. Void Draw () { Hintergrund (234, 113, 107); y = sin(Radiant(x)) * 150 + 150; x++; noStroke(); Ellipse (x, y, 50, 50); } [/cceN_cpp]

Die Funktion sin ist eine periodische Funktion. Der minimale Wert ist －1 und der maximale Wert 1. Die Höhe des Bildschirms beträgt 300. Bezogen auf y = sin(Radiant(x)) * 150 + 150, daher wird der Änderungsbereich des Wertes y innerhalb von 0. gut kontrolliert bis 300.

Spinnender Kreis

Nun, wir sind endlich beim wichtigsten Teil dieses Kapitels angelangt. Wie zeichnet man einen Kreispfad in einem Programm? Wie verwende ich Funktionen, um es anzuzeigen? Lassen Sie mich Ihnen die beiden Bilder, die wir am Anfang dieses Artikels gesehen haben, noch einmal zeigen.

Tatsächlich haben sie die Beziehung zwischen Umfangskoordinate und trigonometrischer Funktion visuell aufgedeckt. Die Bewegungen in den obigen Bildern werden durch die ständig wachsende unabhängige Variable θ angetrieben. Links ist das Bild der Funktion sin und cos, und rechts steht für einen Punkt, der sich nach der Abbildung kreisförmig bewegt. Ist das nicht sehr klug? Es ist nicht mehr mysteriös. Sie können Code verwenden, um es zu realisieren.

Ein einfaches Beispiel:

[cceN_cpp theme="dawn"] float x, y, r, R, Winkel; Void setup () { Größe (300, 300); r = 20; // Kreisdurchmesser R = 100; //Radius der Bewegungsbahn x = 0; Winkel = 0; y = Höhe/2; aufrechtzuerhalten. Void Draw () { Hintergrund (234, 113, 107); übersetzen (Breite/2, Höhe/2); // Den ursprünglichen Punkt in die Bildschirmmitte verschieben. noStroke(); x = R * cos(Winkel); y = R * sin(Winkel); Ellipse (x, y, r, r); Winkel += 0,05; } [/cceN_cpp]

Aussehen! Ein sich drehender Kreis erscheint! Hier ist die unabhängige Variable nicht mehr in einem konstanten Bit-Winkelzuwachs (entspricht θ im Bild). Es steht für Winkel. Darunter haben xy einen relativ multiplizierten Koeffizienten R, was zur Erweiterung des Kreisbewegungsradius führt (R steht für Radius). Wenn es R nicht multiplizieren soll, wird sein Bewegungsweg auf den Bereich von -1 bis 1 begrenzt.

Warum nicht das aufsteigende x verwenden? Gemäß der Eigenschaft der Funktion selbst hat jedes x im Definitionsbereich das einzige y, das ihm entspricht. In einem ebenen rechtwinkligen Koordinatensystem können Sie also keine "einfache Funktion" finden, um Kreise direkt zu zeichnen. Das heißt, wir können dieses Format nicht mehr verwenden.

y = (Der unbekannte Ausdruck von x?);

x＋＋;

Also müssen wir unsere Idee ändern. Wählen Sie einen anderen Winkel als unabhängige Variable und verwenden Sie dann die Funktion sin und cos, um ihn in horizontale und vertikale Koordinaten umzuwandeln.

x = R * cos(Winkel);

y = R * sin(Winkel);

Winkel += 0,05;

Einige von Ihnen werden sich vielleicht fragen, warum es den Weg der Kreisbewegung anzeigen kann. Nach der Definition der trigonometrischen Funktion können wir diese Funktion leicht aus dem Verhältnis der gegenüberliegenden Seite zur Hypotenuse erschließen; Funktion cos ist das Verhältnis von benachbarter zu Hypotenuse. Egal wo der Kreispunkt liegt, r (Radius) bleibt unverändert. Daher können wir den Ausdruck der x-Koordinate und der y-Koordinate schließen.

Da dies keine mathematische Anleitung ist, werde ich hier aufhören, Ihnen mehr Wissen über die trigonometrische Funktion zu zeigen. Wenn Sie es wissen möchten oder es einfach vergessen haben, können Sie es selbst noch einmal überprüfen.

Natürlich ist es in Ordnung, wenn Sie es nicht vollständig verstehen können. Sie müssen nur wissen, wie man damit einen Kreis zeichnet. Auch das ist eine Art „Programmieridee“. Später werden wir oft einige der bestehenden Module aufrufen, die von anderen erstellt wurden, um eine bestimmte Art von Funktion zu realisieren. Zwingen Sie sich nur nicht, es im Detail zu wissen.

Die Funktion sin und cos ist jedoch üblich. Wenn Sie eine höhere Ebene erstellen möchten, sollten Sie besser versuchen, es gründlich zu kennen. Wenn diese Frage selbst uns dazu bringen kann, mehr mathematisches Wissen zu erlernen, warten noch mehr interessante Dinge darauf, von Ihnen ausgegraben zu werden.

Dies sind Bilder, die eng mit der trigonometrischen Funktion verwandt sind.

Schritt 4: Bewegungskoordinatensystem

Bei den vorherigen Effekten dreht sich alles um grafische Koordinatenänderungen. Das Koordinatensystem selbst ist statisch. Tatsächlich können wir die Koordinaten bewegen, um einen Bewegungseffekt zu erzielen. Das ist so, als würden die Leute am Strand die anderen Leute im Boot beobachten. Für Leute auf dem Boot ist das Boot statisch. Aber was ist, wenn sich das Boot selbst bewegt, dann bewegen sich die Leute im Boot mit. In den erstgenannten Fällen geht es um „Leute, die auf dem Boot laufen“. Eigentlich bewegt sich das Boot nicht. Im Folgenden sind einige allgemeine Funktionen zum Ändern des Koordinatensystems aufgeführt.

Funktion übersetzen

Die Funktion translate, über die wir bereits gesprochen haben, wird verwendet, um das Koordinatensystem der Grafik horizontal zu verschieben.

Aufrufformat:

übersetzen (a, b)

Der erste Parameter steht für die Bewegung in die positive Richtung der x-Achse für ein Pixel. Der zweite Parameter steht für Bewegung in die positive Richtung der y-Achse für b Pixel.

Vergleichen Sie die beiden Codes und versuchen Sie, einen Unterschied zu finden. (Um den Code zu vereinfachen, können wir die Funktionsgröße löschen, die Bildschirmbreite und -höhe sind standardmäßig auf 100 eingestellt.)

Bevor wir verwenden:

Ellipse (0, 0, 20, 20);

Nachdem wir verwendet haben:

übersetzen (50, 50);

Ellipse (0, 0, 20, 20);

Funktion drehen

Aufrufformat:

drehen(a)

Es wird verwendet, um das Koordinatensystem zu drehen. Wenn der Parameter positiv ist, wird der ursprüngliche Punkt als Mittelpunkt gewählt und im Uhrzeigersinn gedreht. Die Parametereingabe ist mit der trigonometrischen Funktion identisch, um das Bogenmaß zu verwenden.

Vor Gebrauch:

Ellipse (50, 50, 20, 20);

Nach Gebrauch:

drehen (Radiant (30));

Ellipse (50, 50, 20, 20);

Der Effekt im Programm besteht darin, dass sich der Kreis um 30 Grad im Uhrzeigersinn um den Koordinatenmittelpunkt dreht.

Funktionsskala

Aufrufformat:

Maßstab(a)

Diese Funktion kann das Koordinatensystem verkleinern. Der Wert dient der Skalierung. Wenn der Parameter größer als 1 ist, vergrößern Sie die Ansicht; wenn es kleiner als 1 ist, verkleinern Sie es.

Vor Gebrauch:

Ellipse (0, 0, 20, 20);

Nach Gebrauch:

Skala(4);

Ellipse (0, 0, 20, 20);

Der Kreis im obigen Bild ist auf das Vierfache der Originalgröße vergrößert. Außerdem können Sie zwei Parameter verwenden, um in x-Achsen- und y-Achsen-Richtung separat herauszuzoomen.

Skala (4, 2);

Ellipse (0, 0, 20, 20);

Überlagerung der Transformationsfunktion

Hier dreht sich bei der Überlagerung alles um Änderungen relativ zum aktuellen Koordinatensystem. Mit anderen Worten, Effekte können überlagert werden.

übersetzen (40, 10);

übersetzen (10, 40);

Ellipse (0, 0, 20, 20);

Seine endgültige Wirkung wird gleich

übersetzen (50, 50);

Ellipse (0, 0, 20, 20);

Gleiche Funktion drehen

drehen (Radiant (10));

drehen (Radiant (20));

Ellipse (50, 50, 20, 20);

Ist gleich

drehen (Radiant (30));

Ellipse (50, 50, 20, 20);

Beide Funktionen skalieren und drehen zentrieren auf den ursprünglichen Punkt, um zu skalieren und zu drehen. Wenn wir den Rotationseffekt mit einer zentralen Position bei (50, 50) erhalten wollen, müssen wir umgekehrt denken. Verschieben Sie zuerst den ursprünglichen Punkt an die Position (50, 50) und fügen Sie dann die rotierende Transformationsfunktion hinzu. Machen Sie schließlich Ihre Grafik auf den ursprünglichen Punkt gemalt.

Vor Gebrauch:

Ellipse (50, 50, 50, 20);

Nach Gebrauch:

übersetzen (50, 50);

drehen (Radiant (45));

Ellipse (0, 0, 50, 20); // Um die Änderung des Drehwinkels zu sehen, haben wir ein Oval gemacht.

Es mag verdreht erscheinen. Du musst nur mehr üben, dann wirst du es verstehen. (Sie können auch versuchen, die Reihenfolge der Funktionen Übersetzen und Drehen zu ändern, um den Unterschied zu sehen.)

Horizontale Bewegung und Kreisbewegung

In den folgenden Fällen werden wir Bewegungseffekte durch Ändern des Koordinatensystems realisieren. Gleichzeitig möchte ich Sie bitten, auf das frühere Kapitelbeispiel Bezug zu nehmen. Meistens werden Sie feststellen, dass Sie eine ganz andere Methode anwenden können, um eine bestimmte Art von Effekt zu erzielen.

Schritt 5: Horizontale Bewegung

[cceN_cpp theme="dawn"]

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

Die Kreiskoordinate wird nicht geändert, aber sein Koordinatensystem wird geändert.

Drehbewegung

[cceN_cpp theme="dawn"] float r, R, Winkel; Void setup () { Größe (300, 300); r = 20; // Kreismaß R = 100; // Radius der Bewegungsspur aufrechtzuerhalten. Void draw () { background (234, 113, 107); übersetzen (Breite/2, Höhe/2); // Den ursprünglichen Punkt in die Bildschirmmitte verschieben. drehen (Winkel); keinStroke(); Ellipse (0, R, r, r); Winkel += 0,05; } [/cceN_cpp]

Ist es nicht viel klarer und einfacher als die trigonometrische Funktion? Vielleicht haben Sie hier eine Frage. Nehmen wir als Beispiel rotierenden Code. Offensichtlich ist die oben genannte Transformationsfunktion relativ und ermöglicht eine Überlagerung. Wenn wir translate(width/2, height/2) in die Funktion draw schreiben, bedeutet dies nicht, dass jedes Mal, wenn die Funktion draw einmal ausgeführt wird, sich das Koordinatensystem um eine Strecke bewegt in die rechte untere richtung von der ursprünglichen basis? Es wird vernünftigerweise nicht ewig in der Mitte des Bildschirms bleiben.

Sie können auf diese Weise verstehen. Sobald der Code in der Funktion draw eine Operation von oben nach unten abgeschlossen hat, kehrt das Koordinatensystem bei der zweiten Operation in den Ausgangszustand zurück. Der ursprüngliche Punkt des Koordinatensystems wird standardmäßig zur linken oberen Ecke zurückkehren. Wenn wir also das Koordinatensystem kontinuierlich ändern möchten, müssen die Winkelparameter in der Funktion Rotate ihren Wert ständig erhöhen.

Zugriffskoordinatenstatus

Manchmal möchten wir nicht, dass die Änderung des Koordinatensystemstatus auf dem vorherigen basiert. Zu diesem Zeitpunkt müssen wir die Funktionen pushMatrix und popMatrix verwenden. Die beiden Funktionen erscheinen normalerweise paarweise. Funktion pushMatrix ist vor popMatrix. Sie können nicht allein verwendet werden, sonst geht es schief.

Beispiel:

[cceN_cpp theme="dawn"] pushMatrix(); // Koordinatensystemstatus speichern translate (50, 50); Ellipse (0, 0, 20, 20); popMatrix(); // Koordinatensystemstatus lesen rect (0, 0, 20, 20); [/cceN_cpp]

In diesem Beispiel verwenden wir vor der Verwendung von translate(50, 50) die Funktion pushMatrix., um den aktuellen Status des Koordinatensystems zu speichern. Dies ist gleichzeitig der Ausgangszustand. Nachdem wir einen Kreis gezeichnet und dann popMatrix implementiert haben, kehrt es zu diesem Status zurück. Implementieren Sie jetzt die Funktion rect. Sie werden feststellen, dass sie nicht unter dem Einfluss der Funktion translate leidet, stattdessen ein Quadrat in der linken oberen Ecke des ursprünglichen Punkts zeichnen.

Außerdem ermöglichen die Funktionen pushMatrix und popMatrix das Verschachteln.

Zum Beispiel

pushMatrix();

pushMatrix();

popMatrix();

popMatrix();

Um die Beziehung intuitiv zu zeigen, wählen wir das komprimierte Format.

Kombinierte Bewegung oder Bewegung in Bewegung?

Jetzt beginnt die zweite Welle des wichtigen Teils. Versuchen Sie einfach, nach vorne zu drängen. Zuvor haben wir eine Metapher für Boot und Menschen verwendet. Haben Sie jemals darüber nachgedacht, was die Leute am Strand für ein Gefühl haben werden, wenn wir sowohl die Menschen als auch das Boot in Bewegung setzen?

Kombinieren Sie die horizontale Bewegung mit der rotierenden Bewegung des Koordinatensystems. Hier geht es eigentlich nur darum, sich in eine Richtung zu bewegen.

[cceN_cpp theme="dawn"] int x, y; Schwimmwinkel; Void setup () { Größe (300, 300); Hintergrund (234, 113, 107); keinStroke(); x = 0; //Wenn der Anfangswert von x 0 ist, können wir diesen Codesatz vernachlässigen. Beim Deklarieren von Variablen ist der Standardwert 0. y = 0; //Das gleiche wie oben. Winkel = 0; //Das gleiche wie oben. aufrechtzuerhalten. Void Draw () {Winkel += 0,25; y--; übersetzen (Breite/2, Höhe/2); pushMatrix(); drehen (Winkel); Ellipse (x, y, 5, 5); popMatrix(); } [/cceN_cpp]

Und es gibt Kreisbewegungen und Skalierungen des Koordinatensystems.

[cceN_cpp theme="dawn"] float x, y, Winkel; Void setup () { Größe (300, 300); Hintergrund (234, 113, 107); noStroke(); aufrechtzuerhalten. Void Draw () {Winkel += 0,01; x = sin(Winkel) * 100; y = cos(Winkel) * 100; übersetzen (Breite / 2, Höhe / 2); pushMatrix(); Skala (1 + 0,1 * sin (Winkel * 10); Ellipse (x, y, 5, 5); popMatrix(); } [/cceN_cpp]

Lass dich davon nicht betrügen! Der Kreispunkt macht eigentlich eine Kreisbewegung. Es ist nicht schwer zu verstehen, wenn wir es mit einer Skalierung mit einer Videokamera vergleichen. Eine Videokamera bewegt sich ständig nach vorne oder hinten und nimmt einen Punkt in kreisenden Bewegungen auf.

Überrascht? Dies sind einfache Grundfunktionen. Aber mit unterschiedlicher Kombination können wir so viele verschiedene Effekte erzielen. Bis jetzt stoppt meine Belichtung, um etwas Raum für Ihre Erkundung zu schaffen.

Schritt 6: Umfassende Nutzung

Für dieses Kapitel geht es bald zu Ende. In den letzten beiden Kapiteln habe ich die grundlegende Methode der grafischen Bewegung eingeführt. Ich glaube, Sie haben vielleicht ein tieferes Verständnis dafür, verglichen mit Ihren ursprünglichen Ideen. Zu guter Letzt, hier ist ein abgeschlossenes Beispiel als Referenz.

[cceN_cpp theme="dawn"] float x1, y1, x2, y2, r, R; Schwimmwinkel1, Winkel2; Void setup () { Größe (300, 300); r = 12; R = 120; Winkel1 = 0; Winkel2 = PI/4; aufrechtzuerhalten. Void Draw () { Hintergrund (234, 113, 107); noStroke(); übersetzen (Breite / 2, Höhe / 2); Winkel1 += 0,02; Winkel2 += 0,06; x1 = R *sin(Winkel1); y1 = R* cos(Winkel1); x2 = R/2 *sin(Winkel2); y2 = R/2 *cos(Winkel2); Ellipse (x1, y1, r/2, r/2); Ellipse (x2, y2, r, r); Ellipse (-x1, -y1, r/2, r/2); Ellipse (-x2, -y2, r, r); Ellipse (x1, -y1, r/2, r/2); Ellipse (x2, -y2, r, r); Ellipse (-x1, y1, r/2, r/2); Ellipse (-x2, y2, r, r); Schlaganfall (255); Strichgewicht(3); Linie(x1, y1, x2, y2); Linie(-x1, -y1, -x2, -y2); Linie(x1, -y1, x2, -y2); Linie(-x1, y1, -x2, y2); } [/cceN_cpp]

Dieses Beispiel enthält keine Kenntnisse, die über unser vorheriges Kapitel hinausgehen.

Für welche Punkte passt? Welche Zeilen passen? Ich kann es auch nicht nachvollziehen. Aber ich erinnere mich, dass es aus einem kleinen Codeabschnitt stammt.

Dies ist die Natur seiner Bewegung. Die Restlinien sind nur Spiegeleffekt. Wenn Sie dieser Anleitung weiter folgen, können Sie eine aktualisierte Version erstellen und Ihrer Grafik einen Controller hinzufügen, um Ihren Grafikbewegungsstatus in Echtzeit zu ändern.

Das Interessante an der Programmierung liegt darin, dass man Regelwerke gestalten oder kombinieren kann. Wie das endgültige Programm aussehen wird, hängt jedoch von Ihren Fähigkeiten ab. Normalerweise haben Designer eine starke grafische Vorstellungskraft. Sie können ein Bild in Ihrem Kopf skizzieren und dann versuchen, es in Code zu übersetzen. Außerdem können Sie mit dem Code und den Vorschriften selbst beginnen, Funktionen und Variablen nach Belieben entwerfen. Denken Sie daran, dass Processing Ihre Skizze und Code Ihre Pinsel sind! Sprühen Sie Ihre Ideen einfach frei!

Schritt 7: ENDE

Als letztes in unserem Kapitel kehren wir zu einer Frage zurück, die wir seit langem von Anfang an beschäftigt haben. Was nützt es, so viel Mühe aufzuwenden, um ein Bild mit einem Programm zu machen? Nachdem Sie dieses Kapitel gelernt haben, werden Sie feststellen, dass es so viele Spielmethoden gibt, die darauf warten, von Ihnen entdeckt zu werden.

[cceN_cpp theme="dawn"] float browX, earD, eyeD, faceD; Void setup () { Größe (500, 500); aufrechtzuerhalten. Void Draw () { Hintergrund (200, 0, 0); browX = 150 + sin(frameCount / 30,0) *20; earD = 180 + sin(frameCount / 10,0) *20; eyeD = 60 + sin(frameCount/30.0) *50; faceD = 300; Strichgewicht(8); Ellipse (175, 220, earD, earD); Ellipse (Breite - 175, 220, earD, earD); rect(100, 100, faceD, faceD); Linie (browX, 160, 220, 240); line(width-browX, 160, width-220, 240); füllen (zufällig (255), zufällig (255), zufällig (255)); Ellipse (175, 220, Auge D, Auge D); Ellipse (Breite-175, 220, AugeD, AugeD); füllen(255); Punkt (Breite/2, Höhe/2); Dreieck(170 - cos(frameCount / 10.0)* 20, 300 - sin(frameCount / 10.0) *20, Breite - (170 + cos(frameCount / 10.0) *20), 300 + sin(frameCount / 10.0) * 20, 250, 350); } [/cceN_cpp]

Ist es nicht magisch für dynamische Grafik? Hier zeige ich Ihnen nicht zu viele Fälle. Vielleicht können Sie einen viel besseren Effekt entwerfen als ich. Der Vorteil des Zeichnens mit Programmen besteht darin, dass Sie mit jedem Pixel spielen können. Da Ihre Grafik kein Bitmap ist, ist jeder wichtige Punkt Ihrer Grafik steuerbar. Es kann einige Effekte realisieren, die andere Software nicht realisieren kann.

Wenn Sie ein Herz haben, das alles brechen und wieder kombinieren möchte, wird Ihnen das Studienprogramm sehr helfen, diese Idee zu erfüllen.

Dieser Artikel stammt von Designer Wenzy.

Schritt 8: Relative Messwerte:

Interessante Programmieranleitung für Designer – Erste Schritte zur Verarbeitung

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

Interessante Programmieranleitung für Designer – Bringen Sie Ihr Bild zum Laufen (Teil 1)

Bei Fragen können Sie eine E-Mail an [email protected] senden.

Dieser Artikel ist von: