Transkripte
1. Einführung: hallo und begrüßen Sie einen Meister der fettigen Belikov. Und heute werde ich euch beibringen, wie man generierte Kunst mit einer Technik kreiert, die
aufkommendes Verhalten beinhaltet . Sobald Sie diese Technik gelernt
haben, werden Sie in der Lage sein, eine Vielzahl von Animationen und Standbildern zu erstellen, die sehr
kompliziert und schön aussehen . Vorerst werden
wir zwei animierte Stücke aus der Kunst kreieren. Das ist die 1. 1 Es scheint so voller Leben zu sein, nicht
wahr? Aber das Erstellen dieses wird nur ein paar Minuten und ein sehr einfacher Code dauern. Ok. Und das ist das zweite Stück aufstrebender Kunst, das wir heute erschaffen werden. Es könnte komplexer aussehen als die 1. 1, aber ich versichere Ihnen, das ist nicht wahr. Das werden wir auch schaffen können. In einer sehr, sehr kurzen Zeit. Sie werden keine speziellen Werkzeuge oder Kenntnisse für diese Klasse benötigen. Wir werden nur Javascript-Code schreiben, so dass Sie nur einen Broza benötigen. Wir werden im nächsten Video direkt in den Code eintauchen. Also sehe ich dich dort
2. Animierte Kunst erstellen: Hallo und willkommen zurück. Wir werden Mantelstift benutzen, um unseren ganzen Code zu schreiben. Also gehen Sie zu Gericht ben dot io und erstellen Sie einen neuen Stift. Wir werden jetzt keine HTML r C s schreiben, so dass Sie diese Panels minimieren können. Als nächstes werden
wir eine Bibliothek namens p five dot Js verwenden, um auf unserer Leinwand zu zeichnen. Sie müssen es nicht verwenden,
aber es vereinfacht Ihr Gericht wirklich und hilft Ihnen, sich mehr auf Ihre Algorithmen zu konzentrieren, um es hinzuzufügen. Gehen Sie zu Einstellungen, dann JavaScript und hier, wie für p fünf largesse. Wählen Sie die erste Option und Sie können jetzt schließen, dass fünf DJs. Sie müssen nur Funktionen verwenden, um mit dem Trocknen zu beginnen. Die erste Funktion wird aufgerufen eingerichtet und die zweite Funktion heißt Draw. Der Satz der Funktion wird nur einmal aufgerufen, aber die Zeichenfunktion wird immer wieder etwa 60 Mal pro Sekunde aufgerufen. Das bedeutet, dass alles, was Sie innerhalb dieser Funktion zeichnen, zu einer Animation werden kann. In Ordnung. zunächst Lassen Sie unszunächstein Gammas innerhalb der Setup-Funktion erstellen. Wir wollten ein Quadrat sein, also lassen Sie es Größe 2 400 mal 400 einstellen. Und dann geben wir ihm einen Hintergrund. Sie können beliebige RGB-Werte an Dysfunktion übergeben. Wenn Sie
jedocheinen einzelnen Wert an ihn übergeben, jedoch wird
er zu einem freigegebenen Off-Gray. Also Null ist schwarz und 2 55 ist weiß. Alles, was dazwischen liegt, wird zustimmen. Jetzt ist auch ein guter Zeitpunkt, um die Strich- und Füllwerte für unsere Leinwand festzulegen. Ich werde sagen, dass die Strichfarbe ein halbtransparentes Schwarz ist. Wie Sie vielleicht schon erraten haben, der zweite Parameter hier die Transparenz für Daz für die Füllfarbe an. Lassen Sie es ein etwas weniger transparentes schwarzes Gefühl sein. Frei behielt diese Werte. Wenn Sie jetzt vor Gericht stehen, können
Sie die Leinwand jetzt sehen, um Grafiken basierend auf auftretendem Verhalten zu erstellen Sie benötigen eine Menge von einfachen Elementen, die sich bewegen und miteinander kollidieren können. Du kannst sie Partikel nennen, Kreaturen Boyds oder was auch immer du willst. Ich nenne sie einfach Partikel. Sagen wir, jetzt haben wir AH 100 Partikel. Der Laden, alle Partikel. Lasst uns ein Array benutzen. Jedes Teilchen kann eine Größe haben, also sagen wir, es ist wieder 40. Es steht Ihnen frei, die Werte dieser Variablen zu ändern. In der Tat
, so ändern Sie Ihre Generierung über. In Ordnung jetzt, schreiben
wir eine Funktion, um tatsächlich ein Partikel zu erstellen, um die Dinge ordentlich zu halten. Nehmen wir an, unser Teilchen ist ein Objekt. Es wird ein paar Felder haben. Die 1. 1 wird seine Position sein. Offensichtlich, eine Position auf unseren Leinwänden aus einer X-Koordinate und von I Koordinate zu speichern kaufte die Werte. Zusammen können
wir einen Vektor verwenden. Für jetzt. Lassen Sie uns unserem Partikel eine zufällige Position zuweisen, so dass wir die zufällige Funktion für die X-Koordinate verwenden müssen einen Zufallswert zwischen Null und der Breite der Leinwand benötigen, also nur multipliziert, aber ähnlich für das Y ausgewählt. Koordinate, Multiplizieren Sie
einfach eine Zufallszahl mit der Höhe der Leinwand. Als nächstes müssen
wir die Richtung angeben, in der sich unser Partikel bewegt. Diese Richtung wird aus einem X gemacht werden, zuversichtlich und von mir zuversichtlich, so erstellen Sie einen anderen Sieger und setzen Sie seinen Wert auf einige Zufallszahlen. Mit anderen Worten, geben Sie ihm eine zufällige Richtung. Und nun fügen wir unseren Teilchen sehr einfache Verhaltensweisen hinzu. Wir werden das innerhalb einer Funktion namens update tun. Okay, das erste Verhalten wird gerade Linie Bewegung sein. Mit anderen Worten, das Partikel sollte sich immer in die ihm zugewiesene Richtung bewegen. Um dies zu implementieren, müssen wir
lediglich den Richtungsvektor zum Positionsvektor hinzufügen. nun Wenn sich das Partikelnunin eine Richtung bewegt, wird es
früher oder später außerhalb der Leinwand gehen, um eine solche Situation zu bewältigen. Lassen Sie uns ein weiteres Verhalten hinzufügen. Nehmen wir an, wenn sich das Partikel außerhalb der Leinwand bewegt, springt
es einfach zurück in die Mitte der Leinwand. Um dies zu tun, müssen
wir überprüfen, ob es X-Koordinate ist größer als das Wort der Leinwand, unsere Lesa als Null. Wenn dies der Fall ist, legen
wir die X-Koordinate fest. Schleppen Sie es um zwei. Es ist nichts anderes als die horizontale Mitte unserer Leinwand. In ähnlicher Weise, wenn die durch Koordinate größer ist als die Höhe der Leinwand kleiner als Null ist, werden wir die Zehenhöhe um zwei gesetzt, was die vertikale Mitte unserer Leinwand ist. Die Update-Funktion ist jetzt abgeschlossen, wenn unser Partikel bereit ist, also lassen Sie es einfach von hier zurückgeben. Jetzt ist es an der Zeit, 100 Partikel zu erzeugen. Wir können das innerhalb der Setup-Funktion tun, also lasst uns richtig. Ach, Farlow Pia. Und darin können wir neue Partikel in die Partikel schieben. Harry. Alles klar, jetzt ziehen wir die Partikel. Also, in der Zeichenfunktion, schreiben
wir eine andere for loop toe iterate über alle Partikel hier, lassen Sie uns einen Kreis verwenden, um ein Partikel darzustellen. Um einen Kreis in p fünf Brücken zu zeichnen, müssen
Sie die Funktion Ellipse über die X- und Y-Koordinaten des Partikels an die
Funktion hinaus verwenden und die Partikelgröße an sie übergeben. Beachten Sie, dass dies der Durchmesser außerhalb des Kreises ist, nicht der Radius, und um sein Partikel zu verschieben, das als Update-Funktion bezeichnet wird. An diesem Punkt, wenn Sie vor Gericht stehen, werden
Sie so etwas sehen, nicht genau das, was wir erwartet haben, oder? Dies geschieht, weil die Kreise kontinuierlich gezeichnet werden, jeder Rahmen, und sie überbewerten sich selbst und einander, um dies zu beheben. Wir müssen nur jedes Mal die Leinwand klären, wenn wir zeichnen. Wir können das tun, indem wir die Hintergrundfunktion erneut aufrufen. Diesmal werde
ich es Scholar Zehe weiß setzen. Und jetzt, wie Sie sehen können, sieht die Bewegung der Kreise gut aus. Es ist an der Zeit, unseren Partikeln ein etwas komplexeres Verhalten hinzuzufügen. Dieses Verhalten ermöglicht es ihnen, miteinander zu kollidieren und angemessen zu reagieren. Erstellen Sie also eine neue Funktion namens Check Kollisionen. In ihm müssen
wir durch alle Teilchen schleifen und nehmen, wenn überhaupt, zu kollidieren. Also brauchen wir zwei verschachtelte for-Schleifen. Ein Partikel kann nicht mit sich selbst kollidieren, also fügen wir eine Bedingung hinzu, die wir dafür übernehmen müssen. Okay, jetzt ist es sehr einfach zu nehmen. Wenn zwei identische kreisförmige Partikel miteinander kollidieren, müssen Sie
lediglich überprüfen, ob der Abstand zwischen ihren Zentren kleiner ist als ihr Radius. Um die Entfernung zu berechnen, können
Sie ihre Distanzfunktion verwenden. Sie müssen die Positionen der beiden Teilchen an Dysfunktion übergeben. Wenn dieser Abstand kleiner ist als die Partikelgröße, bedeutet das,
dass wir eine Kollision haben. Wenn dieser Abstand kleiner ist als die Partikelgröße, bedeutet das, Wie gehen wir mit der Kollision um? Nehmen wir an, wir haben einfach die Richtungen von den beiden Teilchen geändert, aber stattdessen aus der Zuweisung ah, ganz neue zufällige Richtung zu ihnen. Lassen Sie uns einfach zufällig die Richtung drehen. Rufen Sie also die Drehfunktion auf den Richtungssieger des ersten Teilchens auf und übergab es einen Zufallswert. auch Tun Sie dasauch. Machen Sie das zweite Teilchen. Okay, das ist gut genug. Moment rufen
wir die Tic-Kollisions-Funktion innerhalb der Draw-Funktion auf und sehen, wie sich die Partikel verhalten. Sehr interessant. Aber es scheint, dass alle Partikel irgendwie gefroren sind und sich nicht bewegen können. Das liegt daran, dass wir den Teilchen nicht genug Zeit geben, sich voneinander zu bewegen. Um dies zu beheben, lassen Sie uns so etwas wie einen Zähler zu jedem Partikel hinzufügen und sagte seinen Wert auf Null standardmäßig . , Nehmen wir an,nach einer Kollision wollen
wir das Teilchen nicht länger stören. Genauer gesagt, wir wollen das Partikel nicht für einige Anzahl von Ziehzyklen stören. Um diese Zahl anzugeben, lassen Sie uns eine Variable namens Max Zähler verwenden. Ich werde seinen Wert auf 1 50 setzen Dies bedeutet nach einer Kollision, das Teilchen wird in der Lage sein, sich frei für 1 50 Drogenaufrufe zu bewegen, um dieses Verhalten
innerhalb der Check-Religionen zu erzwingen Funktion sagte der Wert der Zählereigenschaft sowohl die kollidierende Partikel tun Max Zähler. Jetzt können wir einfach sagen, dass das Kollisionsverhalten von einem Partikel nur ausgeführt werden sollte, wenn es Zähler Null ist, also addieren, wenn
Bedingungen zu beiden Teilchen. Wenn der erste Partikelzähler Null ist, führen Sie diese beiden Linien aus, und wenn der zweite Partikelzähler Null ist, führen Sie diese beiden Linien aus. Schließlich müssen
wir den Zähler entkriminalisieren. Wir können das innerhalb der Update-Funktion des Partikels tun. Wenn der Zähler also größer als Null ist, er jedes Mal durch einen diskriminiert, wenn er aktualisiert wird. An diesem Punkt, wenn er unser Gericht leitete, sind
die Teilchen in der Lage, sich frei zu bewegen. In Ordnung. , Es gibt keinen Grund,warum die Größe der Kreise der Partikelgröße entsprechen muss. Lassen Sie uns den Radius hier in der Ellipsenfunktion auf etwas viel kleineres ändern. Der Moment sieht jetzt viel klarer aus. Als nächstes wollen wir etwas anderes ausprobieren. Immer wenn zwei Teilchen kollidieren, ziehen
wir eine Linie zwischen ihnen. tun ist einfach, aber wir können nicht wirklich eine Linie innerhalb zeichnen. Die Funktion „Kollisionen prüfen“. Also, wenn Kollision passiert, lassen Sie uns die Positionen von den kollidierenden Partikeln innerhalb eines Arrays speichern. Ich rufe die IRA-Leitungen an. Hier. Innerhalb der Tech-Religionen Funktion beginnen Fügen Sie einfach die Positionen von beiden Teilchen in
den Bereich, so dass jedes Element, ein Tagebuch selbst, wird ein Array sein, das zwei Elemente enthält, die nichts anderes als die Positionen aus Partikel. Jetzt müssen Sie sicherstellen, dass dieser Zeilenbereich jedes Mal leer ist, wenn eine Kollisions-Funktion aufgerufen
wird. Sonst wird es sehr groß werden. So setzen Sie es ist der Anfang der Funktion. Okay, zurück in die Draw-Funktion. Alles, was wir jetzt tun müssen, ist eine Schleife durch die Linien sind ein und zeichnen Sie die Linien, also erstellen Sie eine for-Schleife im Inneren. Es benutzte die Zeilenfunktion, um zu fallen. Die ersten 2 Argumente für die Funktion sind die X- und Y-Koordinaten des ersten Partikels. Und die nächsten beiden Argumente sind die X- und Y-Koordinaten des zweiten Teilchens. Und da gehst du. Wir haben bereits eine interessante Animation. Jetzt können Sie das Verhalten der Partikel ändern. jedoch ändern, Sie können diese Animationjedoch ändern,indem Sie diese globalen Variablen in
zum Beispiel ändern, zum Beispiel ändern, wenn ich die Partikelgröße auf etwas viel größeres geändert habe, sagen wir, 80 bekomme ich eine ganz andere Animation. Sie können auch die Größe der Kreise weiter reduzieren, um der
Animation ein anderes Gefühl zu geben . Sie könnten auch die Anzahl der Partikel selbst erhöhen, aber nicht, dass dies einen drastischen Einfluss auf die Leistung haben kann. So wie Sie sehen können, aber nur eine Reihe von einfachen Verhaltensweisen, die einer großen Anzahl von Teilchen zugeordnet sind, haben
wir es geschafft, eine Animation zu erstellen, die sowohl interessant als auch schön aussieht Do .
3. Trails hinzufügen: Willkommen zurück zur letzten Lektion dieser Klasse. Jetzt werden wir unseren Partikeln keine zusätzlichen Verhaltensweisen hinzufügen. Stattdessen werden sie einfach ändern, wie wir sie verwenden, um unsere Linien zu zeichnen. zunächst an, Nehmen wirzunächst an,dass die Farbe der Linie, die zwischen gezeichnet wird, kollidierende Partikel
auf dem Abstand zwischen den Partikeln abhängt . Also, hier, zusammen mit Positionen, lassen Sie uns die Entfernung zu in das Array einschließen. In diesem Moment müssen wir den Abstand in einen Wert konvertieren, der zwischen Null und 2 55 liegt
Dies liegt daran, dass die RGB-Werte aus Farben zwischen Null und 2 55 nur liegen müssen. Um dies zu tun, können
wir die Map-Funktion verwenden. Das erste Argument für diese Funktion ist der Wert, den Sie so über die Entfernung abbilden möchten , d. h. das dritte Element des Bereichs. Die nächsten beiden Argumente für Dysfunktion definierten ihren Bereich von der Distanz. Nun kann dies
natürlich natürlich nur zwischen Null und der Partikelgröße selbst liegen. Die nächsten beiden Argumente definierten den Bereich der Farben also null und 2 55 hier. Nein, wenn wir diese Farbe auf den Strich der Linie angewendet haben und vz ausführen. Das ist nicht schlecht. Lassen Sie uns nun die Ellipse vollständig verbergen. In der Tat, lasst uns sie überhaupt nicht zeichnen. Also werde ich diese Zeile löschen, noch dass unsere Linien sehr leicht sind, um sie prominenter erscheinen zu lassen. Lassen Sie uns die Hintergrundfarbe hier ändern. Tu Schwarz. Okay, jetzt mal sehen, was passiert. Wenn wir diesen Aufruf auf die Hintergrundfunktion verschieben, machen Sie stattdessen das Setup-Metall. Das bedeutet, dass wir immer wieder über unsere Leinwand zeichnen, ohne sie zu löschen. Das ist jetzt viel besser. Dies selbst ist eine schöne Animation, um es noch besser zu machen. Lassen Sie uns etwas Alfa Wert zu unserer Strichfarbe hinzufügen. Lassen Sie es ein sehr kleiner Wert sein, sagen wir, fünf. Wie Sie sehen können, hat
dies einen sehr tiefen Einfluss auf das Aussehen aus der Animation gehabt. Ich mag es viel mehr, weil die Linien Tenor sind. In der Tat sieht
das irgendwie Harry aus, nicht
wahr? Sie können erneut mit diesen globalen Variablen abspielen, um die Animation weiter zu ändern. Mal sehen, was passiert, wenn wir sehr wenige Teilchen sagen, dann wieder, eine sehr andere, aber sehr interessante Animation. Es ist erwähnenswert, dass all diese Animationen für immer weitergehen und immer noch
interessant erscheinen können . Wenn Sie die Kunst speichern möchten, können
Sie einfach mit der rechten Maustaste klicken und wahrgenommenes Bild, da dies Ihre Kunst als
Standbild in Form einer PNG-Datei speichert . Alles klar, das ist alles für den Moment. Meine Damen und Herren, ich bin der Meister der heißen Verfügung, und ich danke Ihnen, dass Sie diese Videos gesehen haben.
Ashraff Hathibelagal, App Developer
