So erstellen Sie einen Audiovisualisierer durch das Programmieren mit Javascript

1. Einführung: Willkommen zurück in diesem Bereich. Wir werden einen fantastischen Audiovisualisierer , der auf jeden Audioeingang reagiert. Wie Sie sehen können, springen die Bälle, wenn ich spreche, wenn ich clippe oder wenn ich Musik spiele. Und dann bist du immer noch gut. Wenn du dazu bereit bist. Gehe zum nächsten Video, um zu beginnen. 2. Einrichtung: Wie immer starten wir von der Kommandozeile aus. Also lass mich meins mitbringen. Ich bin gerade auf dem Desktop. Gehen wir in den Projekte-Ordner, in dem ich meine Projekte speichern und speichern werde. Wenn ich also hier ls tippe, kannst du dir unsere alten Projekte ansehen. Erstellen wir also hier einen neuen Ordner. Und nennen wir es Audiovisualisierer. Geh in den Ordner. Lass uns einfach großartige Akten machen. Also brauchen wir wie immer eine HTML-Datei. Dieses Mal. Da wir die Mikrofondaten erhalten, möchte ich eine neue Datei namens microphone JS erstellen. Und schließlich brauchen wir eine neue Datei für die Visualisierung. Nennen wir es Visualizer dot js. Okay, wir sind startklar. Wenn Sie sich an den Befehl erinnern oder diesen Ordner in Breitencode öffnen. Wenn Sie in dieser Version wie ich verwenden, können Sie einen Befehl wie diesen eingeben. Oder wenn Sie eine normale Version des Risikocodes verwenden, können Sie einfach einen Befehl namens Raumzeit verwenden. Wenn wir diesen Befehl eingeben, wird der Ordner im West-Code geöffnet , sodass wir loslegen können. 3. Html-Vorlage: Beginnen wir das Projekt mit dem Import HTML5-Vorlage. Wie immer. Also hier werden wir dieses Mal JavaScript-Dateien verwenden. Lassen Sie uns zunächst den Titel ändern. Deshalb wollen wir diese beiden JavaScript-Dateien importieren , HTML Boilerplate. Also werde ich ein neues Skript erstellen und ein Taumelmikrofon-JS und auch Visualizer-JS machen . Denken Sie also daran, wir werden die Mikrofonklasse im Visualizer verwenden. Die Reihenfolge ist also wichtig hier. Das Mikrofonskript sollte ein Bogen aus Visualizer-Skript sein Okay, also fangen Sie bitte an. Gehen wir in die Mikrofon-JS-Datei und wir speichern sie. 4. Vervollständigen des HTML: Diese Skript-Tags sollten nicht auf dem Hut sein, aber sie sollten sich im Hauptteil befinden. Kurz nachdem wir unzählige hatten, oder? Ich nenne den Ausweis von Michael war unzählig. Eine weitere Sache, die wir hier hinzufügen sollten, ist die CSS-Datei. Wir hätten es fast vergessen, aber es gibt eine andere Möglichkeit, Dateien hinzuzufügen. Also kannst du es drinnen mit Gott machen. Wir können also auf dieses neue Dateisymbol klicken und Sie können einfach den Namen eingeben. Okay, und lass uns diese CSS-Datei auch so verlinken . Okay, wir müssen also keine neuen Dateien über die Befehlszeile erstellen. Vielleicht ist das ein einfacherer Weg. Jetzt haben wir CSS - oder JavaScript-Dateien und unser Code wurde in HTML erstellt. Also können wir anfangen, Code zu schreiben. Mikrofon, Jess. 5. Microphone.js: Anstatt die gesamte JS-Datei des Mikrofons zu schreiben, kopiere ich einfach den Code und füge ihn hier ein. Also habe ich das im Internet gefunden , um Mikrofondaten zu erhalten. Dies ist eine Standardvorlage , mit der Sie alle Ihre Audiovisualisierer verwenden können . Wir müssen die Details hier also nicht genau kennen . Es werden nur die Mikrofondaten abgerufen, der Audioeingang. Sie müssen hier eigentlich nichts ändern. Oder vielleicht willst du dich ändern. Möglicherweise möchten Sie die FFT-Größe ändern, wenn Sie eine gewisse Abwechslung in der Ausgabe wünschen. Lassen Sie mich einfach schnell erklären, was wir hier haben. Dies ist nur eine Gelegenheitsklasse namens Mikrofon. Hier haben wir den Konstruktor. Die erste Eigenschaft identifiziert also , ob das Mikrofon initialisiert ist oder nicht, weil wir darauf warten wollen , wenn es noch nicht initialisiert ist, okay? Und am Ende von allem wird es wahr werden. Und dann bekommen wir einfach die Benutzermedienfunktion. Und denken Sie daran, dass es immer noch da ist, wenn es religiös ist. Wir haben hier also keine Drittanbieter-Bibliotheken. Und anscheinend gibt diese Methode ein Versprechen zurück, weil sie dann nach get user media Funktion verwendet, die im Grunde auf diese Zeile wartet. Und wir werden rennen, nachdem es etwas zurückgegeben hat. Wenn es also erfolgreich zurückkehrt, werden diese Zeilen aufgerufen. Oder wenn es einen Fehler gibt, wird der Fehler einfach im Browser gemeldet. Okay? Und wenn es fertig ist, werden diese Zeilen aufgerufen. Wir haben also Analysator hier. Und diese Zeilen entscheiden über FFT-Größe, Pufferlänge usw. Ändern Sie abschließend die Eigenschaft initialized auf true, nachdem Sie eine Verbindung zum Mikrofon hergestellt haben. Andernfalls wird nur der Fehler im Browser gemeldet. In Ordnung, also haben wir hier auch zwei Methoden. Der Erste holt die Samples. Es ist also das Ergebnis , das wir nutzen werden. Das zurückkehrende Objekt ist ein Array und seine Länge beträgt die Hälfte der FFT-Größe. Also haben wir eine 50er Größe 512 deklariert. Hier sind Beispiele. Die Array-Länge wird 256 sein, okay? Es ist also immer die Hälfte der FFT-Größe. Und wir werden diese Beispielumfrage bei der Visualisierung des Audios verwenden . Okay, also denk darüber nach. Wir können 256 Bälle haben, bei denen jeder Ball auf ein Element in diesem Array reagiert. Okay? Sie werden besser verstehen, wenn wir es tatsächlich tun, es tun und in die Praxis umsetzen. Und schließlich haben wir die Volume-Funktion, die Womb-Methoden erhält. Und ich glaube, es ist ziemlich selbsterklärend. Diese Methode gibt die Lautstärke der Audioeingänge zurück. 6. Holen Sie sich Mikrofon Daten: Jetzt, wo unser Mikrofon bereit ist, können wir mit dem Schreiben des Codes in der Visualisierung beginnen. Öffne diese Datei. Das erste, was ich hier tun möchte, ist Ihnen die Daten zu zeigen, die wir vom Mikrofon erhalten. Um das zu tun, erstelle ich eine neue Variable, das Mikrofon. Aus der Mikrofonklasse. Wir hatten keine Parameter im Konstruktor. Wir können ein neues Mikrofon oder ein Objekt wie dieses erstellen. Lassen Sie uns auch diese Animationsfunktion erstellen. Weil wir die Mikrofondaten kontinuierlich in Echtzeit abrufen wollen. Und wie Sie wissen, müssen wir einen Animationsframe anfordern , um diese Funktion zu animieren. Und wir müssen es auch irgendwo im Code aufrufen. Also zwischen diesen beiden Zeilen wird alles, was wir schreiben, in jedem Frame kontinuierlich aufgerufen . Also möchte ich nur die Mikrofondaten in die Konsole einloggen , damit wir sehen können, was es genau ist. Aber zuerst möchte ich überprüfen, ob Mikrofon bereits initialisiert ist. Denken Sie also daran, wir haben eine Eigenschaft und es ist wahr, als Eris Dinge im Mikrofon erledigt hat. Wenn das Mikrofon initialisiert ist, holen wir uns einfach Samples mit der Samples-Funktion. Und das hier. Im Moment haben wir uns einfach bei der Konsole angemeldet. Also speichere ich das und gehe einfach in index.HTML. Rechtsklick auf Mit Live-Server öffnen. Wenn Sie diese Option nicht haben, können Sie die Live Server-Erweiterung jederzeit von Erweiterungen in VSCode herunterladen . Das haben wir schon einmal in diesem Kurs gemacht. Deshalb werde ich die Schritte jetzt nicht erklären. Aber wenn Sie die Live Server-Erweiterung installiert haben, können Sie sie einfach so öffnen. Und lass es mich einfach auf diesen Bildschirm bringen. Und ich werde auch den weißen Bildschirm so sehen. In Ordnung, unser Code läuft also auf diesem Port. Schauen wir uns einfach die Konsole an. Wir erhalten kontinuierlich Mikrofondaten. Und es gibt viele, viele Proben. Und es läuft einfach ununterbrochen, weil ich spreche, oder? Und das benutzt auch meinen Mikrofonbrowser. Im ersten Schritt. Wenn Sie Live Server öffnen, Sie möglicherweise aufgefordert, die Verwendung des Mikrofons zuzulassen, okay? Und sobald Sie es akzeptiert haben, können Sie den Audioeingang verwenden. Okay, schauen wir uns das eine Protokoll hier an. Es ist also ein Array. Wie wir besprochen haben. Die Länge beträgt 256 und die Werte sind nur ein paar kleine Werte. Diese Werte sind, jeder von ihnen repräsentiert etwas. Ich bin nicht wirklich ein Sound-Experte. Und ich weiß nicht, ich weiß eigentlich nicht, was diese Werte sind. Aber Sie können sich vorstellen, dass es sich um Frequenzen oder Signale handelt , die den Klang genau an diesem Punkt erklären. Wir können diese Werte verwenden , um den Sound zu visualisieren. Und diese Werte sind wirklich kleine Werte. Es gibt etwa zwischen minus vier und plus vier. Und sie sind normalerweise weniger als eins. Es können also auch negative Werte oder auch positive Werte sein. Und ich glaube, während die Werte steigen. Jetzt bekommen wir ein paar interessante Sounds. In Ordnung? Wenn ich also nicht spreche, die Werte 0. Zum Beispiel gibt es zu diesem Zeitpunkt keinen Audioeingang. In Ordnung? Jetzt, da wir wissen, wie unsere Beispieldaten aussehen, werden wir diese Daten verwenden. Wir können es natürlich vorverarbeiten. Aber irgendwann werden wir diese Daten verwenden , um einige visuelle Elemente zu erstellen. Okay, also lasst uns anfangen, unseren Handel zu nutzen , um ein paar Bilder zu erstellen. 7. Erstelle den Ball: Beginnen wir mit dem Zeichnen unserer Bilder mit der Erstellung von Karl Marx. Wie üblich erhalten wir Element nach ID aus der HTML-Vorlage. Lass mich die ID meiner Farben überprüfen. Kopieren wir es und fügen es hier nur um sicherzugehen, dass die Namen übereinstimmen. Lassen Sie uns auch CTX erstellen, diese Kontextmethoden. Und wir wollen 2D. Und schließlich können wir das Gewicht an die Fensterbreite und Fensterhöhe anpassen . In Ordnung. Warum sind Anpassungen jetzt bereit? Wir können anfangen, die erste Klasse zu erstellen. Also am Ende, was wollen wir von unzähligen Schrauben, richtig? Oder Abkürzungen. Ich nenne sie einfach Bälle , weil sie springen werden. In diesem Projekt. Deshalb erstelle ich eine Klasse namens Ball. Und wie immer werden wir einen Konstruktor dieser Klasse haben. Er erhält zwei Parameter, x und y. Diese Werte sind die anfänglichen x- und y-Positionen des Balls , den es spawnen wird. Also lass uns einfach diesen Punkt x Punkt y zuweisen. Also warum wollen wir hier ist, also werden wir eine Schale erstellen , die ein vollständiger Kreis ist. Und wenn Sie sich erinnern, verwenden wir CTX augmented. Was wir hier tun müssen, ist der Radiuswert. Deshalb brauchen wir auch einen Radius. Aber ich möchte es nicht von Parametern bekommen weil wir nur alle Radien der Bälle machen wollten. Also verwende ich einfach einen Standardwert von acht. Dann entscheiden wir uns auch für die Farbe. Du kannst ändern, was du willst. Sie können Blau, Rot, Grau verwenden. Und ich denke, ich werde das auch später erklären, aber ich möchte nur, lass uns diesen Teil einfach überspringen. Fügen wir diese Eigenschaft hinzu. Und was ich hier brauche ist Jump für SSH und auch falsch. Okay, denn Bälle werden fallen und sie werden laut dem Audio in Detroit springen. Aber in der Anfangsphase, zu Beginn des Projekts, werden die Bälle fallen. Sie werden also von oben beginnen und vor allem fallen. Deshalb möchte ich die Fallkraft nicht auf 0 setzen , sondern einfach auf 0,1 setzen. In Ordnung? Wo ich mit dem Konstruktor fertig bin, fügen wir nur eine weitere Eigenschaft hinzu, aber ich werde sie hinzufügen, wenn die Zeit stimmt. Also müssen wir wie immer auch Methoden zeichnen. Es beinhaltet, dass sie FillStyle nimmt. Ich werde dies dieser Farbe zuweisen denn wenn wir die Farbe ändern wollen, der Ball auch diese Farbe. Also sollten wir sagen begin Pat sollte auch CTX-Balken sagen, um einen Kreis zu zeichnen. Also dieser Punkt x Balken, x-Wert, tut mir leid, dieser Punkt y für y-Wert. Das versuchen sie für den Radius zu verwenden. Der Startwinkel ist 0 und der Winkel wird Pi mal zwei sein , da wir immer einen kompletten Kreis zeichnen , der wie eine Schüssel aussieht. Schließlich können wir CTX-Pille sagen. Okay, du solltest also schon mit diesen Zeilen vertraut sein. Wir haben diesbezüglich schon viele Übungen gemacht. Was wir also brauchen, was wir sonst noch brauchen, sind zwei weitere Methoden. Also wollen wir nur eine Formatierung und einen Sprung. Das war's für die Ballklasse. Und den Kontext der Fall- und Sprungmethoden werden wir später schreiben . 8. Bälle generieren: Okay, wir haben die Ballklasse. Generieren wir den Ball so, dass wir sie auf Säulen sehen können. Um das zu tun, brauchen wir ein Array. Am Anfang wird es leer sein. Und wir brauchen eine Funktion , die die Bälle erzeugt. Ich werde hier die Pfeilfunktion verwenden. Okay? in dieser Funktion zunächst dieses Protokoll löschen, Lassen Sie mich in dieser Funktion zunächst dieses Protokoll löschen, damit wir es nicht sehen. Also lass uns putzen. Schließe die Konsole. Okay. Also im Januar falsch, diesmal werden wir etwas anderes machen. Ich möchte die Länge des balls Arrays nicht statisch definieren. Ich möchte also nicht einfach einen 100-Boss erstellen. Sagen wir mal. Stattdessen möchte ich die Bälle kreieren, die auf Carlos Fuß reagieren . Also was ich meine ist, wenn Kohle war, warum weißt du , dass ich zum Beispiel weniger Bälle zum Ante haben sollte, oder? Wenn wir jetzt ein größeres Commonwealth haben, können wir 100 Anleihen haben. Okay? Irgendwann wird das Land der Kugeln also dynamisch sein. Um das zu tun, weisen wir einfach zu. Erstellen wir einfach eine neue Variable, Entfernung. Dadurch wird der Abstand zwischen den einzelnen Kugelrastern verdeutlicht. Also möchte ich einfach nur eine Party machen oder den Anfang machen. Und wir werden einfach berechnen, wie viele Bälle ich verwenden sollte. Carlos Breite geteilt durch Entfernung. Okay? Was macht Sinn, oder? Da B eine Breite von eintausend hat, wollen wir , dass ich müde bin. Also sollten wir etwas um uns haben. Ich bin müde Teeschalen, oder? Weil es Fälle geben wird und auch das Gewicht des Balls. Aber ich sage hier nur minus zwei weil wir Abstand vom Anfang und auch am Ende haben wollen . Die Anzahl der Bälle wird so berechnet. Okay, jetzt reagiert es auf die Kawasaki. Wenn wir die Breite des Browsers ändern, ändert sich die Anzahl der Bälle. Und was wir brauchen, ist eine for-Schleife. Und sagen wir einfach ich für Iterator. Und wir wollen das wiederholen. Wir wollen die Menge der Bosch-Säge identifizieren, dass dies die Anzahl der Maulwürfe mal laufen wird. Und in der Herbstschleife werde ich einfach sagen, dass Bälle r1 drücken, um einen neuen Ball zu kreieren und ihn in die Schalen zu schieben, oder? Also rufen wir einfach einen neuen Ball an. Und wir müssen hier nur x- und y-Werte angeben. Für X- und Y-Werte. Für y ist es selten wirklich einfach. Wir können einfach einen statischen Wert angeben. Zum Beispiel 500. Okay? Aber welcher x-Wert? Wir müssen die Entfernung wieder nutzen. Also sollte der erste Ball Distanz sein, oder? Wenn ich also verspätet sage, sollte x verspätet sein. Der zweite Ball sollte plus eine weitere Distanz sein, oder? Also 2R2 plus Türkei, die Ausstellung des zweiten Balls sollte 60 sein. Wenn ich also Distanz plus I mal Entfernung sage, glaube ich, dass es im Kosmos einen Boss direkt nebeneinander geben wird. Während des Kalten Krieges wird es also sowohl Lücken geben auch zwischen den einzelnen Bällen. Das wollen wir. Und wenn ich das speichere, passiert nichts, weil wir noch keine generische Ballfunktion aufgerufen haben. Wenn ich es so nenne, werden die Bälle generiert, aber wir können sie noch nicht sehen , weil unsere Farbe was ist? Eigentlich möchte ich nur den Hintergrund in Schwarz ändern, aber lass es uns zuerst überprüfen. Durch Ändern der Farbe der Bälle. Haben wir den Ballsong, Carlos? Bin ich nicht ganz. Das liegt daran, dass wir die Eier noch nicht gezogen haben. Also generieren wir einfach den Boss, aber wir haben die Draw-Funktion nicht aufgerufen. Was wir also tun müssen, ist Ball für jeden Ball zu sagen, ich iteriere im Grunde genommen jeden Ball in diesem Array. Und ich nenne bold eine Draw-Funktion. Jetzt haben wir die Eier auf der Leinwand. In Ordnung? Unsere Funktion funktioniert also. Wir müssen die Wände hier nicht zeichnen. Ich lösche es einfach. Und ich werde auch wieder die Farbe Weiß machen. Und lass uns in style.css gehen, sehr realer Lead, nur Hintergrundfarbe. Also hier möchte ich alles mit Asterix auswählen. Passen wir einfach Rand und Abstand 0 an, Box-Größe, Rahmen-Box. Das sind also nur Standardwerte. Wir machen dieses Array fast in jedem Projekt. Und auch. Also jetzt, wenn Sie es bemerken, haben wir Balken auf der rechten Seite. Also das ist einfach, das macht diese Zeilen Kumpel scrollbar. Das wollen wir nicht. Deshalb sage ich einfach overflow. Mal sehen. Also gehen die Bars. Zum Schluss wollen wir uns einfach ändern. Die Säule war blanker Boden, geschliffen, schwarz oder draußen. 9. Fallende Kugeln: Okay Leute, lasst uns die Eier ziehen und sie fallen lassen. Also zunächst einmal, animieren Sie die Funktion. Wenn das Mikrofon initialisiert ist, möchte ich die Bälle ziehen. zu tun, heißt das Balls Array. Und benutze für jede Methode. Hier, lass uns einfach einen Ball passieren , der die Bälle wiederholt. Und ich wollte nur sagen , dass der Ball gezogen wurde. Wenn wir das tun, sieht man die Bälle im Koma. Und beachten Sie, wenn wir die Säulengröße ändern, die Anzahl der Kugeln, Ketten, so dass wir beide versuchen, Kühe zu bekommen. Und da wir hier eine Animation machen werden, möchte ich nur die Kegel in einem Reframe löschen. Ich werde das tun, indem ich die Clear-Rect-Funktion verwende. Übergibt x und y von 0 bis hin zu Carl Woese, Breite und Höhe. Sie sehen also, dass wir nette Bindungen haben. Wenn wir sie auch fallen lassen. Kurz vor der Ziehung. Wir können sehen, wie die Eier fallen. Aber zuerst sollten wir auch nach Funktion suchen. das zu tun, verliere ich Herbstformen und wechsle die Bälle. Warum? Eigentlich werde ich sagen, dass dieser Punkt y plus dieser Punkt-Vollkraft entspricht, wodurch der y-Wert des Balls in jedem Frame aktualisiert und die volle Kraft hinzugefügt wird . Wenn ich das speichere, sieht man, dass die Bälle nur langsam ziehen. Lassen Sie uns das natürlicher aussehen. Im wirklichen Leben, wenn etwas fällt, nimmt seine volle Kraft zu, oder? Wegen der Schwerkraft. Deshalb werde ich auch die gesamte Kraft in jedem Frame um 0,05 erhöhen . Jetzt können Sie also einen natürlicheren Effekt sehen. Aber irgendwann sollte der Ball aufhören. Also hier füge ich einfach die Einschränkung hinzu. Wir wollen nur, dass die Wände fallen, wenn sie es nur sind. Y ist kleiner als Colemans Größe geteilt durch zwei. Also, wenn nur der Chef oder eine Schüssel, Hälfte der Farben, werden sie fallen. Andernfalls werden sie aufhören. Einfach so. Lass es mich einfach noch einmal auffrischen. Also begannen sie von Position Bifans es. Und sie fingen an zu fallen, weil wir in jedem Frame die fall-Funktion aufrufen. Und wir haben nur eine Einschränkung, nämlich beide y-Position sollte höher sein als Carlos Höhe geteilt durch zwei. Deshalb gibt es, es gibt Top. Wenn sie diesen Punkt erreichen. 10. Jumping: Wenn die Bälle für jeden an dieser Stelle, so dass dort zuschlagen, schlagen sie auf den Boden. Wir wollen sie zum Springen bringen, oder? Um das zu tun, brauchen wir hier eine weitere if-Anweisung. Wir müssen überprüfen, ob der Ball fällt. Denn wenn sie nicht fallen, wollen wir sie zum Springen bringen. Und um diesen Wert zu überprüfen, benötigen Sie nur eine andere Eigenschaft. Fügen wir hinzu. Eine Immobilie fällt. Und es wird am Anfang wahr sein, denn der Chef wird im Ausgangszustand fallen. Also, wenn die Bälle nicht fallen, was bedeutet, dass die Bälle fallen, ist die Eigenschaft falsch. In diesem Fall wollen wir, dass es springt. In Ordnung, gehen wir hoch und haben hier eine Sprungmethode deklariert. Also werde ich zuallererst volle Kraft auf 0 setzen wollen, weil wir zuvor eine volle Kraft hatten. Und es wird unsere y-Position in jedem Frame beeinflussen. Wenn also der Fall und das Halten von Eigentum falsch sind, wollen wir als Erstes alle Viere auf 0 setzen. Dann können wir jetzt unsere y beeinflussen. Wir springen Kraft. Also werde ich dieses Mal Minus Equals verwenden , weil ReLu im Koordinatensystem des Handels, wenn der Ball steigt, der Grund dafür ist , dass ReLu abnimmt. In Commonwealths ist 0 hier oben und es nimmt zu, wenn die Bälle fallen. Wenn du also willst, dass ein Ball springt, sollten wir seinen y-Wert verringern. Deshalb möchte ich verringern, warum ReLu die Kraft springen würde. Und um es natürlicher zu machen, werde ich wieder dieselbe Logik anwenden. Ich werde auch die Sprungkraft verringern. Okay? Also haben wir jetzt auch Methoden übersprungen. Aber eines sollten wir nicht vergessen, wenn das Springen endet. Wenn es wieder in den fallenden Zustand geht. Wir sollten auch zurücksetzen. Springen Sie die Kraft auf 0, genau wie wir hier mit Gewalt gefallen sind. Okay, jetzt sehen sie identisch aus. Sie sind einfach symmetrisch zu den anderen. Okay, versuchen wir's mal. Hat nicht funktioniert. Und das liegt daran, dass unsere Sprungkraft 0 ist. Lass uns das ändern. Wir haben also eine Sprungkraft. Kugel. Okay, vielleicht sollten wir auch Ball fällt“ ändern Eigenschaft „Ball fällt“ ändern, weil wir es nie falsch machen, oder? Es stimmt immer. Also werde ich hier eine else Aussage hinzufügen. Und make ball fällt auf falsch. Und lass es uns versuchen. Es. Springt einfach für eine Weile. Siehst du das? Lass es mich nochmal ausführen. Und dann weiter fallen. Okay? Das liegt daran, dass diese if-Anweisung eine ausführt, obwohl ihre fallende Eigenschaft falsch ist. Also sollten wir hier auch eine Einschränkung geben. Die Überprüfung, ob es fällt und fällt, richtig? Also wenn der Ball, also wir forderten Funktion, wenn nur der Ball im fallenden Zustand ist und seine y-Position kleiner als die Komastelle ist. Also lass uns das speichern. Und vielleicht sollten wir das auch. Vielleicht sollten wir unsere einfach auf „Andere-wenn“ umstellen. Und fügen wir einfach eine Einschränkung hinzu. Wenn die y-Position der Bälle größer ist als die Höhe der Ursache geteilt durch zwei. Das sieht besser aus, oder? Weil wir nur springen wollen, wenn nur sein y-Wert größer ist als die Höhe von Carlos geteilt durch zwei. Also mit anderen Worten, in der Mitte der Säulen. In Ordnung, also werden wir beide Sprungkraft hier später ändern und hier beim Ball. Also verringern wir im Grunde nur die Sprungkraft, oder? Wenn der Ball, kommentieren wir diese Zeile. Dann gehe ich nicht runter. Wenn ich unkommentiert bin, geht es unter. Wir verringern also auch die Sprungkraft und sie beginnt bei 0,1, was ein negativer Wert sein wird. Anstatt also einen Sprung zu machen , lassen wir sie einfach wieder fallen. Also setzen wir diesen Wert einfach auf zehn, sagen wir 400. Nichts ändert sich. Lass uns einfach diese Zeile kommentieren. Das hat gerade, habe ich hier einen Tippfehler gemacht? Also sollten wir seine y-Position in jedem Frame ändern. Also lass uns in die Konsole gehen. Mir fehlt etwas. Also, wenn der Ball fällt, sollten wir es tun, dieser Baumstamm sollte jetzt in unserem Rahmen ertrinken. Und es ist tatsächlich so, dass wir es in der Konsole sehen können, oder? Die Sprungmethode wird jetzt reframe genannt und warum sie aufgerufen wird. Loggen wir uns auch hier ein. Die Sprungkraft. Löschen wir das. Die Sprungkraft ist also 0. Warum passiert das? Das liegt daran, dass wir, wenn wir fallen, einfach Sprungkraft 0 erzeugen, oder? Also haben wir es am Anfang zehn geschafft. Aber jedes Mal, wenn es einfach herunterfiel, wird die Kraft zu 0, sodass sie nicht springen. Also sollten wir es hier eigentlich nicht zuweisen. Wir sollten es zuweisen, dass der Wahlstaat endet, was ist hier, oder? Wenn der Ball zieht, blieb falsch. Wir sollten auch eine Sprungkraft deklarieren. Ich werde einfach Tanh hier machen. Jetzt können Sie sehen, dass unsere Eier gerade springen. Aber vielleicht ist zehn zu viel. Machen wir's auch. Okay, großartig. Aber wir haben gerade ein anderes Problem. Dann kommen sie nie zurück. In Ordnung? Um das zu verhindern, füge ich hier einfach eine weitere Einschränkung hinzu und eine if-Anweisung. Also, wenn der Ball springt, sollten wir irgendwann den entsetzlichen Zustand einschalten , damit sie zurückkommen. Und ich will es einfach machen. Wenn die Sprungkraft 0 wird. Okay, also ist es im echten Leben. Obwohl. Wenn wir springen. Im wirklichen Leben hören wir in der Anfangsphase eine Sprungkraft. Und die Schwerkraft verringert die Sprungkraft in jeder zweiten Eigenschaft. Und irgendwann wird die Sprungkraft zu 0 und wir fangen an zu fallen. Richtig? Machen wir also dieselbe Logik. Logik hier. Wenn die Sprungkraft 0 oder weniger als 0 beträgt, lassen Sie die Bälle wieder fallen. Aber um dies zu tun, sollten wir das Auskommentieren aktivieren, diese Linie, die abnehmen wird, die Sprungkraft, den Rahmen umrahmen. Und wenn es kleiner als 0 oder gleich 0 ist, sollten wir den fallenden Zustand wieder auf true setzen. Also lass uns das versuchen. Okay. Jetzt können wir sehen, dass unsere Bälle bei jedem Sprung springen, bei jedem Sprung, oder die Sprungkraft und Fallkraft nehmen wie natürlich zu und ab. Und irgendwann, am Spitzenpunkt, wird die Sprungkraft zu 0. Wenn das passiert, fallen sie wieder. Okay? Auf diese Weise können Sie eine Gravitationslogik erstellen ohne eine Spiel-Engine oder irgendetwas anderes zu verwenden. Mit reinem Vanilla JS. Ein weiteres Team, das wir hier hinzufügen möchten, die eigentliche Verbindung zwischen Audio und unseren Bällen, um die Sprungkraft mit den Audioeingängen zu ändern. Und das werden wir im nächsten Video machen. 11. Audioeingabe erhalten: In Ordnung Leute, die Bolzen springen. Und es ist Zeit für den aufregendsten Teil, nämlich Jim, sie dazu zu bringen, auf den Audioeingang zu reagieren. Also sollten wir diese Zeile natürlich ändern, weil wir mit dem Mikrofon einfach die Kraft erhöhen wollen. Okay, wir haben also bereits Mikrofondaten. Und denken Sie daran, dass der Probenbereich des Probenarrays 256 Elemente umfasst. Und wir haben auch einige Bälle, aber unsere Anzahl an Bällen ist nicht spezifisch. Das hängt von Canvas ab. Wir könnten also mehr als 256 haben oder wir könnten weniger haben. Ich werde sie also nicht genau abgleichen. Aber wir könnten, wenn wir irgendwie indexiert werden könnten , ein Array beinhalten, oder? Wir könnten jede Probe einem Ball zuordnen. Also wie die erste Probe. Das erste Element bei der Stichprobenerhebung kann also die Sprungkraft für den ersten Ball sein. Und das zweite Element bei der Stichprobenerhebung kann die Sprungkraft für den zweiten Ball sein und so weiter. Ich glaube, es wird großartig. Und um das zu tun, sollten wir den Index der darin enthaltenen Bälle für jeden einzelnen verfolgen . Und wenn Sie nur nach einem ETL-Skript googeln, können Sie die Parameter dieser Funktion sehen. Und der zweite Parameter ist Index. Der erste, den wir gerade verwendet haben, ist also der Wert des aktuellen Elements. Wir nennen es einfach Ball. Wenn Sie den zweiten Platz bestehen, ist dies optional. Aber du kannst bestehen. Und es ist, es gibt den Index des aktuellen Elements zurück, aber wir suchen nur. Also lass uns weitermachen und es benutzen. Um das zu verwenden, füge ich einfach eine Klammer neben dem Ball hinzu. Ich sage indexiert. Dieses Futter kann ich jetzt einsperren. Als Nächstes. Lassen Sie mich einfach die anderen Protokollzeilen löschen. Also haben wir nur diesen einen. Speichern wir das und überprüfen wir die Konsole. Sie sehen also, dass es bei Null beginnt und mit jeder Iteration zunimmt . In Ordnung, also können wir diesen Indexwert verwenden. Und hier möchte ich Sample anrufen, tut mir leid. Versuchen wir es einfach mit dem Samples Index. Versuchen wir einfach, Samples für die Sprungkraft zu verwenden. Aber denken Sie auch hier daran, dass es sich bei den Stichproben nur um sehr, sehr kleine Werte handelt. Lassen Sie uns also auch die Konsole protokollieren und die Konsolenbeispiele aufrufen, um zu sehen. Sie sehen also aus, als würden sie nicht springen. Aber wenn Sie genau hinschauen, können Sie einige kleine Bewegungen erkennen. Und das liegt daran, dass es sich bei unseren Proben um sehr kleine Zahlen handelt. Das sollten wir auch, und es gibt auch negative Werte. Wir wollen also keine negative Sprungkraft. Wir können also die Funktion mat abs verwenden , um die Zusammenfassung des Werts zu erhalten. Okay? Wenn wir das tun, haben wir keine negativen Werte mehr. Und wir wollen diesen Wert auch mit zehn multiplizieren, vielleicht weil sie zu klein sind. Machen wir sie positiv und multiplizieren es mit zehn und sehen, was passiert. Wenn ich die Konsole schließe. Wir brauchen keine Schlösser mehr. Sagen wir das. Moment kannst du dich und ich sprechen sehen, die Bälle springen einfach und es sieht so aus, als ob es genug ist, mit zehn zu multiplizieren. Sie könnten diesen Wert natürlich erhöhen, wenn Sie mehr gesprungene Fox haben möchten. Oder wenn du verrückt werden willst, kannst du auch verrückt werden. Aber denk daran, wenn sie zu viel gesprungen sind, werden sie die Leinwand verlassen. Also behalte ich es zehn. Und ich glaube, es ist erledigt. Versuchen wir es mit einer anderen Lösung. Sie bewegen sich gerade wieder. Und an diesem Punkt könntest du eigentlich, es liegt ab jetzt wirklich an dir. Sie könnten also die Farben ändern, oder Sie könnten hier auch eine Methode hinzufügen, um die Farben zu ändern. Und Sie können hier vielleicht einen Parameter angeben, z. B. einen Wert. Und Sie könnten die Farben entsprechend dem Stichprobenindex ändern . So können die Bälle mit Audio ihre Farbe ändern. Und hier können Sie RGB-, RGBA-Werte und Übergabeparameter verwenden . Du kannst alles machen. Du kannst die Sprungkraft ändern, wenn du schnellere Bälle willst. Oder was du tun kannst. Sonst. Wenn du höhere oder größere Bälle möchtest, kannst du einfach den Radius so ändern. Denken Sie aber daran, auch die Entfernung zu ändern. Nur um sicherzugehen, dass sie nicht kollidieren. Dadurch werden sie wieder kleiner. Oder du könntest sie so wirklich kleiner machen. Es liegt an dir. Spielen Sie mit den Werten und fügen Sie einige neue Funktionen für alle hinzu. 12. Audio 2: In diesem Abschnitt werden wir einen weiteren Audiovisualizer erstellen , den Sie auf dem Bildschirm sehen können. Lass mich Musik spielen, damit du den Effekt besser sehen kannst. Beruf. Wenn dir der Effekt gefällt. Ich arbeite nicht bis zum nächsten Video, in dem wir mit diesem Projekt beginnen werden. 13. SET-UP: Ich habe das Projekt erstellt und mit dem vorherigen Audiovisualizer ist alles wie gehabt. Dieses Mal ändere einfach den Titel mit dem Audio Visualizer auf. Also haben wir auch Style-CSS verlinkt. Auch hier haben wir ein Geschäft mit dem Ausweis Mike obdachlos. Wir haben Mikrofon JS und Visualizer und sind großzügig. Und Apo. Diese HTML-Datei mit Live-Show wird angezeigt, indem einfach mit der rechten Maustaste klicken und diese Option auswählen. Und dann können Sie einfach dieselbe Vorlage für Mikrofon-JS verwenden . Denn auch hier brauchen wir keine Unterschiede und genau das brauchen wir in diesem Projekt. Auch der Stil von CSS ist derselbe wie beim vorherigen. Verwenden Sie einfach Asterix, um alles auszuwählen , um den Rand und den Abstand anzupassen. Machen Sie einfach die Eigenschaft „Hidden Overflow der Karosserie und machen Sie den Hintergrund schwarz. Wir haben also noch nicht die Breite und Höhe des Handels definiert. Deshalb sind unsere Colas standardmäßig mit diesen Breiten und Höhen ausgestattet. Also werden wir es in Visualizer JS ändern. Wenn Sie mit diesen beiden Dateien fertig sind, können wir mit der Visualisierung eines JS beginnen. 14. Gestalten der Figuren: Lasst uns wie immer anfangen, Farben zu kreieren. Verwenden wir hier unsere Commerce-ID. Lassen Sie uns auch CTX erstellen. Passen wir an, was an Windows angepasst wird. Und auch Größe, die wir in unseren Höhen kennen. Unser E-Commerce ist jetzt also vollständig angepasst und deckt alle Browser auf ihrem Bildschirm ab. Und als Nächstes wollen wir das neuen Mikrofon zuweisen. Und denken Sie daran, dass wir diese Klasse vom Mikrofon aus aufrufen. Und wir können es so machen. Wir importieren nichts, weil Microphone JS nur eine Schale mit Visualizer-JS ist. Und am Ende wird das gesamte JavaScript in diese HTML-Datei umgewandelt. Wir haben also tatsächlich eine Mikrofonklasse in Visualizer JS. Und lassen Sie uns überprüfen, ob alles funktioniert, indem einfach eine animierte Funktion erstellen. Animationsframe animate anfordern. Und denken Sie daran, dass diese Blogs uns eine Animation bieten , indem sie diese Animationsfunktion in jedem Frame aufrufen . Hier wollen wir also überprüfen, ob das Mikrofon bereits initialisiert ist. Diese Immobilie. Also, wenn das Mikrofon initialisiert ist, möchte ich die Samples bekommen. Proben. Mikrofon , das Proben abtastet. Lass es uns einfach protokollieren, um zu sehen , ob alles funktioniert. Ich werde die Konsole mit f 12 öffnen. Wir haben keine Proben. Also lass mich einfach öffnen. Das lebt wieder von vorne. Vielleicht gibt es eine Kiste. Wir haben noch nicht. Das liegt daran, dass wir die Animationsfunktion nicht als Mein Fehler bezeichnet haben. Okay. Jetzt können wir die Proben sehen, wenn ich spreche. Es wird den Audioeingang richtig machen. Jetzt können wir dieses Konsolenprotokoll entfernen. Wir können jetzt mit der Erstellung unserer Klasse beginnen. Dieses Mal. Ich möchte hier die Zahl ohne Klammern nennen hier die Zahl ohne Klammern da es verschiedene Methoden geben wird. Es wird also einstellbar sein. Es wird Highways geben, es wird Teleport- und Kettengrößenberechnungsmethoden geben, solche Dinge. Es ist also einfach nicht dieser einfache Ball. Deshalb habe ich beschlossen , es Figur zu nennen. Aber wie immer brauchen wir einen Konstruktor. Lassen Sie uns dieses Mal wieder mit X und Y beginnen, aber wir werden die Anzahl der Parameter später erhöhen. Dieses Delta x entspricht also x, dieser Punkt y entspricht der Y-Größe. Ich werde acht und dann vier Anfangsgrößen verwenden. Denken Sie jedoch daran, dass wir diesen Wert mit dem Mikrofoneingang ändern werden. Okay? Das reicht also vorerst. Lass uns einfach diese Zahl zeichnen. Und das ist alles. Für uns gibt es nichts Neues. Das tut es also, dieser Punkt FillStyle ist diese dunkle Farbe. Dx beginnt auch Pat dx arc, weil wir auch hier Abkürzungen zeichnen wollen. Also werde ich X4 Holzkohle x weitergeben. Warum? Und Größe. Dieses Mal habe ich Radius nicht angerufen. Man könnte auch Größe sagen, das Gleiche. Also Null für den Startwinkel. Und Math.Pi mal 24 und Winkel, was bei 260 Grad genau das Gleiche ist, aber wir sollten hier ein paar Radianten angeben. Also verwenden wir diesen Ausdruck. Und schließlich sollten wir fühlen, was wir gerade zeichnen. In Ordnung, lass mich das speichern. Und unten sollten wir Finger Irrtum gutschreiben, oder? Dafür brauche ich einen For-Loop. Ändern wir den Index auf i. Ich möchte zehn Zahlen erstellen. Ich werde also sagen, dass die Zahlen nahe an der Zahl liegen. Sie sollten also alle mit dieser Syntax vertraut sein, oder? Wir haben das alles oft gemacht. Also eine neue Figur, aber dieses Mal möchte ich, anstatt ein bestimmtes X und Y zu machen, anstatt ein bestimmtes X und Y zu machen, diese Figuren nach dem Zufallsprinzip spawnen. Okay, deshalb werde ich die Funktion Math.random aufrufen. Und ich werde es mit Color Suite multiplizieren, sodass der x-Wert zwischen Null und Column Sweet liegt. Es kann überall im Kongress sein und den gleichen Tank auch für den Y-Wert verwenden. Und dieses Mal sagen wir Komahöhe. In Ordnung? Versuchen wir also einfach, die Zahlen an dieser Stelle zu zeichnen. Also zunächst möchte ich direkt klarstellen, weil wir in Zukunft einige Animationen machen werden. Lassen Sie uns also die Ruhe und die ganzen Kommas in Airframe löschen . Und jetzt können wir versuchen, Zahlen zu zeichnen. Dafür. Ich möchte über das Zahlenarray iterieren, oder? Und ich werde für jede, ich sage Zahl, verwenden. Und für alle Figuren möchten Sie die Draw-Methode aufrufen. Okay? Wir haben also keine Farbe angegeben. Lass uns einfach eine helle Farbe machen , damit wir die Zahlen auf den Säulen haben. Und jedes Mal, wenn ich diesen Browser aktualisiere, wird uns eine zufällig generierte, positionierte Zahl angezeigt, da unsere X - und Y-Werte zufällig sind. Aber sie sollten in den unzähligen sein. Also sollten sie in jedem Bild genau zehn Finger haben. 1 234-567-8910. 15. Kreislaufbewegung: Das nächste, was ich mit diesen Figuren machen möchte ist, ihnen eine kreisförmige Bewegung zu geben. Wie kreisförmige Bewegungen , weil Objekte dadurch wie lebende Objekte aussehen. In Ordnung, also lassen Sie uns kreisförmige Bewegungen für unseren Lautsprecher implementieren . Im Figurenunterricht werde ich eine neue Methode entwickeln, die als kreisförmige Bewegung bezeichnet wird. Also hier bin ich tatsächlich, wir können Kosinus- und Sinusfunktionen verwenden. Wir sollten also den X-Wert und den Y-Wert der Figuren durch einige Werte ändern , sodass eine kreisförmige Bahn gezeichnet wird. Stimmt es? Wenn wir also nur den x-Wert ändern, sagen wir, nicht den Kosinus. Also brauchen wir hier auch einen Zähler die Schleife 0-360 durchläuft. Es wird also sein der ganze Grad bei Null beginnt und bis 360 reicht . zu tun, werde ich in dieser Abbildung einen Zähler implementieren. Es wird also bei Null beginnen. Und dann werde ich, ich werde es erhöhen. Jede kreisförmige Bewegung am Ende. Eigentlich. Lass uns diese Kontur plus, plus und lasse sie größer oder gleich 260 laufen , ich mache sie wieder auf Null. Stimmt es? Diese Kontur erhöht also die Erinnerung an kreisförmige Bewegungen. Und wenn es diese 260 Grad erreicht, geht es zurück auf Null und beginnt von dort aus. Schon wieder. Das ist es, was wir eigentlich brauchen. Jetzt rufe ich diesen Schalter hier an. Aber denken Sie daran, dass die Kosinusfunktion nicht nach Graden sucht. Stattdessen sucht es nach Lesen. Wenn Sie sich erinnern, Radiant zu Grad Formel x geteilt durch das 180-fache des Schlammkuchens. Okay? Also machen wir das für unseren Zähler geteilt durch 180 mal Pi, damit wir sicherstellen, dass er einen vollständigen Kreis zeichnet. Lassen Sie mich es einfach so speichern und in jedem Bild zirkuläres Moment aufrufen. Mal sehen, was passiert. Also bewegen sich unsere Eier, oder? Was großartig ist. So kosmisch, dass diese Kostenfunktion einen Wert zwischen minus eins und plus eins zurückgibt . Und es wechselt nur zwischen diesen Werten. Und wir aktualisieren x mit diesen Werten, sodass unsere Bälle kontinuierlich nach rechts und links gehen. Lassen Sie uns dasselbe auch für Y tun. Aber lassen Sie uns dieses Mal, ähm, eigentlich wieder den Kosinus verwenden, um zu sehen, was passiert. Ich kann es einfach kopieren und hier einfügen und speichern. Sie können also sehen, wenn wir dieselbe Funktion warum sie einen Pfad wie diesen zeichnet, wie zum Beispiel die Diagonale, weil wir gleichzeitig auf x und y erhöhen, demselben Wert, mit demselben Wert. Wenn Sie dies jedoch ändern, um zu signieren und es zu speichern, können Sie sehen, dass sie einen Moment lang einen Kreis zeichnen. Dies ist der Schlüssel, um eine solche kreisförmige Bewegung auszuführen. 16. Größe ändern mit Mic: In Ordnung Leute, lasst uns weiter anrufen. Der nächste Schritt besteht darin, den Mikrofoneingang zur Bewegung der Kreise hinzuzufügen . Eigentlich nicht der Moment, sondern die Größe der Schaltungen, die wir wollen. Mach sie größer. Wenn ein hoher Krieg eintrifft. Und ihre Größe hängt von der Spracheingabe ab. Sie werden je nach Mikrofoneingang größer und kleiner. Um das zu tun, werde ich der Figurenklasse eine neue Methode hinzufügen . Genau hier. Fügen wir eine neue Methode hinzu und Sie sind ein Name für Change Size. Das ist also wichtig, braucht einen Parameter. Ich nenne es Wert. Und dieser Parameter wird aus dem Samples-Array stammen, das im Hochformat mit dem Mikrofon verbunden ist. Wir verwenden also einen Parameter aus den Eingabeleisten und ändern die Größe jedes Bogens. Um das zu tun, überprüfen wir zunächst, ob Wert größer als die Größe ist. Also passen wir den Wert nur an eine Schüssel an. Aber zuerst überprüfen wir, ob der Wert größer als die Größe ist. Wenn ja, werden wir die Größe dem Wert gleichsetzen. In einem anderen Fall möchten wir die Größe ändern. Das bedeutet also, dass wir keine Spracheingabe haben oder wir haben eine, aber es ist wirklich, sehr leise, sodass wir es nicht hören können, sodass der Computer es nicht hören kann. In diesem Fall möchten wir die Größe ändern und die Größe verringern. Sagen wir, ich weiß 0,1 nicht. Das wird also in jedem Frame aufgerufen. Es ist also eine Größenreduzierung. Ich bin Tom, zu Prozent in Airframe. Stimmt es? Rufen wir diese Methode also einfach in der Animate-Funktion auf. Genau hier. Der Dreck, diese Kettengröße. Aber um ihm einen Parameter zu geben , der separat von der Probe stammt, müssen wir die Indexrate der Stichprobe ermitteln. Wir haben derzeit also keinen Index. Aber wenn Sie sich erinnern, können wir den Index abrufen, indem wir für jede Funktion einfach einen zweiten Parameter übergeben . Wenn Sie es also so machen, wird die erste Zahl die Zahl selbst sein , über die wir iterieren. Und der zweite Parameter wird der Index davon sein. Auf diese Weise können wir diesen Index im Samples-Array abrufen und seine Größe ändern. Ich verwende die Spracheingabe. In Ordnung? Lassen Sie mich das speichern und das Ergebnis sehen. In Ordnung, wir können also nichts sehen. Eigentlich haben wir am Anfang etwas gesehen, aber es verschwindet sofort. Warum passiert es also? Weil unser Wert des Absinkens vielleicht zu hoch ist. Ändern wir das auf 1% und speichern es erneut. Das ist jetzt also besser. Sie verschwinden langsam. Aber am Ende können wir nichts mehr sehen. Es sieht also so aus, als ob der Wert zu klein ist, oder? Also anscheinend reichen selten nicht aus, um die Größe zu vergrößern. Lass uns, wir können es auch überprüfen. Ich logge es ein. Lass uns sehen. Unser Wert ist also Null. Ähm, das habe ich nicht erwartet. Okay, lassen Sie uns versuchen, diesen Wert zu multiplizieren. Nehmen wir an, ich möchte eine neue Variable namens silent erstellen. Und es wird das Ergebnis von Wert mal 200 sein. Und lass uns den Sound hier und hier verwenden, Ezra. Lass mich das noch einmal sagen. Wir haben wieder keinen Output. Also werde ich das einfach in einem neuen Tab öffnen . Das war ein Bug für Google Chrome. Wenn wir es also in einem neuen Tab öffnen, ist das kein Problem. Sie können also sehen, dass sie größer werden, wenn ich höher spreche, oder kleiner , wenn ich viel spreche. Aber schauen wir uns auch Wert und den Sound in der Konsole an. Lassen Sie uns zuerst den Wert überprüfen. Sie können also sehen, dass es etwas wirklich Kleines ist. Deshalb wollen wir es einfach mit 200 multiplizieren. In Ordnung? Finde ich das, indem ich versuche, okay, dafür gibt es keine Formel. Aber ich habe einige Werte ausprobiert. Und 200 scheint nett zu sein , weil ich möchte die Zahlen größer werden, um sie größer zu machen. Und 200 sind in Ordnung für mich. Sie können verschiedene Werte ausprobieren und einen anderen zufälligen Wert entscheiden. Aber der Hauptpunkt hier ist, dass wir gerade Kreise haben und deren Größe sich je nach Spracheingabe ändert. 17. Musik spielen: Zu diesem Zeitpunkt sollte sich die Größe der Figuren mit den Eingaben der Ehefrau ändern. Also lass mich ein Lied spielen , um es zu sagen. Offensichtlich. 18. Teleport hinzufügen: Abschließend möchte ich Ihnen einige Anpassungsbeispiele zeigen. Weil ich möchte, dass du deinen eigenen Effekt nach Belieben anpassen kannst. Okay? als Beispiel eine Lassen Sie uns als Beispiel eine neue Methode in der Figure-Klasse hinzufügen. Also möchte ich eine Teleport-Methode hinzufügen. Denn wenn die Figuren Theropoden sind, sieht die Tatsache viel besser aus. Lassen Sie uns den Teleportationseffekt hinzufügen und Sie können das Ergebnis sehen. Also sage ich, teleportiere dich dorthin. Wir sollten den X- und auch den Y-Wert der Fehler ändern. Und ich möchte, dass sie sich nach dem Zufallsprinzip teleportieren. Also sagen wir einfach viel zufällig mal die Breite des Spaltenverlusts, was bedeutet, dass es irgendwo innerhalb des Carlos teleportiert wird . Okay? Und mach dasselbe für y, aber diesmal tippe hier Hunt. Wir haben also unsere Teleport-Methode. Nennen wir es Mondanimation. Also für jede Figur, wenn wir die Teleportfunktion aufrufen, ihre Position in jedem Frame geändert. Das sieht aus wie ein Cos. Okay, wir wollen keine Kühe. Wir sollten also nicht in jedem Frame Teleport aufrufen. Oder das ist ein echter Pflegeansatz. Auch hier könnten wir eine Einschränkung hinzufügen. Also, wenn etwas passiert, dann teleportiere, nicht in jedem Bild. Sie können also jede Einschränkung hinzufügen. Es liegt an dir. Der Einfachheit halber. Ich werde nur eine zufällige Einschränkung hinzufügen. Das kann also auch zufällig sein. Ich habe es vermasselt, es ist perfekt, wenn Sie eine Routine zufällig zusammenstellen. Wenn ich hier also eine Einschränkung wie diese hinzufüge, gibt Math Random eine Zahl 0-1 zurück. Und wenn es größer als 0,99 ist, was ungefähr für eine Person ist, oder? Dann teleportiere dich zur Figur. Lass mich das sagen. Du siehst, es ist momentan seltener. Wir sehen einige Teleports, aber das ist nicht ununterbrochen. Wir könnten die Frequenz verringern indem wir diesen Wert hier einfach erhöhen. Also sind sie fast, unterstützen nicht mehr. Oder Sie können die Frequenz erhöhen , indem Sie den Beschränkungswert verringern. 50% sind immer noch zu viel. Vielleicht werden 90% 95 sein. Okay? Aber meiner Meinung nach sieht 99 wirklich gut aus. Okay, der Grund, warum ich das zeigen wollte, ist um Ihnen zu zeigen, dass diese Zahl, dieser Effekt anpassbar ist. Sie können jede gewünschte Methode hinzufügen und damit spielen. Sie können unterschiedliche Ergebnisse sehen. Und zum Schluss möchte ich Ihnen noch eine Sache zeigen, nämlich die Erhöhung der Animationsgeschwindigkeit. Okay? Im Moment ist unsere kreisförmige Bewegung also zu langsam. Meiner Meinung nach. Ich möchte es erhöhen. Du könntest es also auch mit Anrufen machen. Aber was ist, wenn Sie die Bildrate ändern möchten? Wenn Sie den FPS ändern möchten, können Sie dazu auch verschiedene Bibliotheken usw. hinzufügen . Aber dafür gibt es noch einen anderen kniffligen Ansatz. Ich will es dir zeigen. Also rufen wir hier animate function und sie ruft sich immer wieder selbst auf, oder? Was ist, wenn wir die Enumerate-Funktion jetzt für mich aufrufen? Also ändern wir das vielleicht auf zehn oder fünf. Nennen Sie Animieren einfach einen Sturz. Dadurch wird die Animationsgeschwindigkeit um das Fünffache erhöht , da wir die Animationsfunktion fünfmal aufrufen . Lass mich das speichern. Sie können also sehen sich die Kreise schneller bewegen. In Ordnung? Das erhöht also im Grunde die Bildrate in einer Sekunde.