Codekunst: Kreatives Programmieren lernen, um Visuals mit JavaScript zu generieren

1. Einführung: Hey, willkommen zum Kurs für Produkt, kreatives Programmieren, Generierte Kunst oder wie auch immer du es nennst, was sind sie? Nun, es ist wahrscheinlich das unerforschteste Gebiet dieser Zeit. Warum? Denn wenn man einmal gelernt hat, Kunst mit Programmieren zu kreieren, gibt es eigentlich keine Grenzen. Du schaffst das. Das und sogar das. Sie haben nicht die Grenzen von Programmen mit visuellen Effekten. Es ist die Kombination aus technischer Seite und Design. Das Beste daran, alles, was wir wissen müssen, sind die Grundlagen von JavaScript und HTML, Sprache und die Art der Erstellung. In diesem Kurs werden wir JavaScript-Algorithmen verwenden. Denn JavaScript ist heutzutage überall. Sie haben die Möglichkeit, Ihr Projekt mit anderen Technologien interaktiv zu gestalten mit anderen Technologien interaktiv wenn Sie JavaScript verwenden, wie zum Beispiel? So wie das. Das war ein Clip vom College. Wir werden Partikel erzeugen, damit Sie Musik hören und sich anders verhalten. Nachdem Sie diesen Typ gelernt haben, können Sie den Audioeingang für jeden gewünschten Effekt verwenden. Sie werden schockiert sein , wenn Sie sehen, wie einfach es ist, diese Animationen zu erstellen. Wenn Sie bereits eine Programmiersprache kennen, ist das ein großes Plus. In Ordnung? Okay, das sind wirklich gute Animationen. Was kann ich eigentlich benutzen? Es liegt an dir. Sie können Ihre eigene NFT-Sammlung erstellen, auf Ihre Website hochladen, in Ihr Portfolio aufnehmen oder sie einfach zum Spaß erstellen. Große Agenturen nutzen bereits die Macht der Kälte und Dunkelheit, und nur sehr wenige Menschen wissen, wie man sie einsetzt . Komm zu uns und lerne mit Code zu zeichnen, bevor es zu spät ist. 2. Vor dem Start: Hey Leute, zuerst wollte ich über die Tools sprechen , die wir in diesem Kurs verwenden werden. Sie können sie herunterladen, um diesen Anweisungen zu folgen. Seien Sie sich nicht bewusst, dass sie nicht benötigt werden. Weil es heutzutage viele Möglichkeiten gibt , dasselbe zu tun, oder? Zum Beispiel werde ich VS Code als ID verwenden, aber Sie können natürlich andere IDEs verwenden, wie Atom oder Sublime Text oder eine beliebige Idee. Aber für diejenigen, die mit mir genauso vorankommen möchten , können Sie den VS-Code hier herunterladen. Also sicher, dass Sie die richtige Version installieren. Zum Beispiel verwende ich Insiderversion von VS Code, weil ich einen einzigen Chip verwende Sie können die richtige Version von ihrer offiziellen Website herunterladen . Aber ich verwende auch das macOS-Betriebssystem , das ich jetzt total zum Erstellen von Ordnern und Dateien verwenden werde. Sie könnten also die gleichen Schritte auch manuell ausführen. Denn am Ende erstellen wir nur Ordner und Dateien und lassen Special vom Terminal aus. Das könntest du also manuell machen. Aber ich glaube, dass sie die Befehlszeile benutzen können , ist eine bessere Wahl für mich. Also schlage ich vor, dass du sie während des Kurses benutzt. Okay, für macOS, Benutzer, drücken Sie einfach Command Space, um die Spotlight-Suche zu öffnen. Und tippe Terminal. Hier. Klicken Sie auf Enter. Ihr Terminal ist also ganz gepumpt und Sie können loslegen. Okay? Für Windows-Benutzer können Sie die Befehlszeile verwenden, einfach CMD berechnen. Öffne deine Kommandozeile. könntest du für beide Betriebssysteme verwenden. Ich kann es vorschlagen, hypertonisch zu sein. Sie haben einen Hybrid das IS gemacht und für Ihr System heruntergeladen. Am Ende ist es dasselbe, aber Bluthochdruck allein hat mehr Anpassungen und Buchstaben-Benutzeroberfläche. Ich möchte noch eine Sache für Windows-Benutzer angeben. Das heißt, einige Befehle sind zwischen diesen Betriebssystemen nicht identisch. Wir werden hauptsächlich zum Erstellen von Ordnern und Touch zum Erstellen von Dateien verwenden. Okay. Ich glaube, Nectar ist für Roboterbetriebssysteme gedacht, daher ist es auch Mitte März einsetzbar. Touch ist möglicherweise nicht, so dass dies in Windows nicht erkannt wird. Wenn ich also touch command tippe, kannst du echo verwenden. Also sage ich zum Beispiel, sagen wir, ich gehe auf den Desktop. Du könntest auch den Befehl cd verwenden. Bewegen Sie sich in den Ordnern. Wenn ich cd dot sage, geht dot zurück und ich sage CD, weil sie es sind, also erstellen wir eine neue Datei auf dem Desktop namens js. Wir können dies rückwärts mit Pfandkommentar, Zeitraum, dieser Datei tun. Aber wenn Sie es unter Windows nicht können, können Sie einfach Eco-Labortests sagen. Dies ist das äquivalente Patch-Format. Seit ich macOS in diesem Kurs verwende. Wenn ein Befehl unter Windows nicht funktioniert, können Sie von Google nach der entsprechenden Version suchen. Wenn es nicht finden kann. Zögern Sie nicht, mich zu fragen, ob Sie bereit sind. Lasst uns mit dem nächsten Video anfangen. 3. Erste Schritte (Teilchen): Keine Kommentarzeile. Geh auf den Desktop. Oder wo auch immer Sie Ihren Ordner erstellen möchten . Ich erstelle einen neuen Ordner Projekte und gehe in den Projektordner. Und hier möchte ich zwei neue Dateien erstellen. Einer für HTML, und ich nenne es index.html. Während ich für JavaScript bin, index.js. Okay, also lass mich jetzt meine Mappe hierher bringen. Wir haben zwei Dateien erstellt. Lass es uns in einer Sekunde mit uns öffnen, wenn wir so kalt sind. Okay? Das sind also die neuen Dateien, die wir erstellt haben. Öffnen Sie also auch index.HTML und indexjs. In index.HTML möchte ich HTML eingeben, und ich möchte dieses auswählen, HTML5, weil wir möchten, dass es die HTML5-Vorlagen automatisch vervollständigt. Wenn ich also auf Enter klicke, siehst du, dass es den Kopfkörper erzeugt. Und so wollen wir eine neue Spalte Azteken im Körper erstellen. Weil wir das für unsere Bilder verwenden werden. möchte ich einen Ausweis geben , Carlos. Carlos. Und auch alle lassen uns ein eingetipptes Skript erstellen , da wir JavaScript verwenden werden. Und lassen Sie uns force index js geben , damit es verstehen kann, dass wir JavaScript-Funktionen aus dieser Datei aufrufen. Also rette es. Im Index js. Wir wollen dieses Canvas-Objekt bekommen. Und dann bekommen wir seinen Kontext und schreiben alles mit diesem Kontextobjekt. Um dies zu tun, verwenden wir die ID der Farben. Also werde ich eine neue Variable namens Comas erstellen. Und wir können dieses Element nach ID-Funktion dokumentieren. Und wenn du die ID meiner Leinwand hier übergibst, kontrolliert das sie. Es ist das Gleiche. Das kann uns die Cola's von HTML5 bringen. Und dann kriegen wir es Kontexte. Und ich möchte es CTX nennen. Der Einfachheit halber werden wir CTX viele Male schreiben. Deshalb verwende ich hier eine Abkürzung. Also können wir Colas bekommen, noch keine Kontexte. Die Kontexte funktionieren so. Wir möchten den Kontext 2D erhalten, damit wir ihn CTX zuweisen können, um das Kontextobjekt zu verwenden. Lassen Sie mich also einfach TTX in der Konsole sperren , damit wir es besser verstehen können. Okay, jetzt speichere ich das und wir sollten Index-HTML auch in einem Browser öffnen. Tu das. Sie können dies tun, indem Sie diesen Index-HTML mit Google Chrome öffnen . Okay? Jetzt habe ich das geöffnet. Dies ist eine Chrome-Tab und ich werde dies nur tun, um sowohl den Code als auch das Ergebnis gleichzeitig zu sehen. in Chrome mit der rechten Maustaste und sagen Sie Inspect, um die Entwicklertools zu öffnen. Hier möchte ich die Konsole öffnen. Also haben wir gerade den CTX protokolliert und lassen uns prüfen, was es ist. Das ist also ein Objekt von Carlos. So können wir einige Eigenschaften von ctx sehen. Zum Beispiel der Füllstil , der gerade auf Schwarz eingestellt ist. Oder Schriftart, die zehn Pixel, serifenlos oder Linienbreite ist, was eins ist. Standardmäßig. Wir können hier keine Funktionen sehen, da sie von der Vererbungsfunktion von JavaScript stammen. Wenn ich also den Prototyp öffne, können Sie einige Funktionen sehen , die wir verwenden können. Zum Beispiel, arc, werden wir verwenden, um Schaltkreise zu zeichnen. Lass mich einfach kaputt machen. Wir verwenden oder handeln zum Zeichnen von Rechtecken. Okay? Bristol, wir werden damit unseren Handel wiederherstellen oder die Leinwand drehen. Okay, das ist also ein CTX-Objekt, und von nun an werden wir meist ctx für jede Aktion in JavaScript verwenden . Okay, also lasst uns weitermachen und ein grundlegendes Rechteck zeichnen. Zunächst wollen wir mit C-Texten beginnen, dem Gamepad. Das sagt dem Browser nur , dass ich anfange, etwas zu zeichnen. Sie können diese Funktion hier sehen. Und dann möchte ich ein Rechteck zeichnen. Und dieses Rechteck können Sie die Eigenschaften exponentiell sehen , richtig. Wir brauchen x, y, Breite und Höhe. Nun, ich gebe für jeden von ihnen 100 für dieses Beispiel. Schließlich müssen wir angeben, ob wir dieses Rechteck füllen möchten. Wir möchten dieses Rechteck streichen , nur um die Ränder hervorzuheben. Lassen Sie mich diese Zeile vorerst einfach kommentieren. Wir füllen uns. Wenn ich das nur für die Datei sage, passiert nichts, weil dies kein Live-Server ist. Wir müssen uns auffrischen. Und ich mache das, indem ich Command R drücke. Sie müssen den Browser aktualisieren. Aktualisieren. Wir können unser Rechteck sehen. Und wenn wir uns entscheiden, mich zu aktualisieren, wird es wieder so aussehen. Du solltest hier fragen, wo ist das Endergebnis? Stimmt's? Wir haben nicht die Unterseite des Rechtecks. Lassen Sie mich also erklären, warum das passiert ist. Zuallererst haben wir gerade einen Canvas erstellt, aber wir wussten nicht, wie groß die Leinwand ist. Eigentlich. Lassen Sie mich einfach den Hintergrund der Bedrohung der Kühe sortieren. Wir können unseren Canvas sehen, die Seite aktualisieren. Wir erwarten also, dass die Kuh im Vollbildmodus sein muss. Aber das Gegenteil ist gerade da. Standardmäßig ist es kein Vollbildmodus. Also sollten wir hier angeben, dass die Spalte mit und Handelshöhe war. Also werde ich Carlos Gewicht sagen, und ich werde einfach die innere Route von Windows zuweisen. Wie auch immer, es ist innerhalb des Browsers, also der weiße Bereich. Okay? Es ist also nur von dieser Seite zu dieser Seite. Okay? Und für die Höhe können wir auch verwenden, wenn keine innere Höhe vorhanden ist. Und du kannst auch so in deinem Kopf denken. Manchmal haben Sie vielleicht hier eine URL und die obere Navigationsleiste. Die innere Höhe enthält diesen Teil also nicht. Es ist nur der weiße Bereich. Wenn ich dies speichere und die Seite aktualisiere, können Sie sehen, dass das Commonwealth jetzt die gleiche Größe unserer inneren Breite und Höhe hat. Aber es gibt ein kleines Problem. Schon wieder. Das sind diese Bytebereiche oben, links und unten. Also lasst uns sie auch entfernen. Also sollten wir CSS nur verwenden, um die Größe der Umkehrung zu ändern. Ich möchte nicht alles in Zeile schreiben, also erstelle ich nur dafür eine neue CSS-Datei. Lassen Sie mich das einfach löschen. Und wir können auch einen Link im head-Tag hinzufügen. Lassen Sie uns also ein Index-CSS machen und diese Datei speichern. Also sollten wir hier eine neue Datei erstellen, die Index CSS ist. Wir sollten sie nennen meine Kolumne war ein Tag so. Wenn ich die Seite aktualisiere, wirst du sehen, dass es kein CSS gibt. Okay. Weil wir gerade die Hintergrundfarbe gelöscht haben. Lassen Sie es mich also einfach wieder blau machen , damit wir verstehen können, ob unser Code funktioniert. Okay? Ja, es funktioniert. Was ich hier also machen möchte, ist zuerst, dass ich die Position auf absolut setzen möchte. Okay. Weil wir hier nichts haben, Elternteil und Kind oder irgendeine Komponente, um es zu rendern. Deshalb gibt es nur Handel. So können wir seine Position auf absolut setzen und wir können oberen und linken Werte einfach auf 0 zwingen. Okay? Lassen Sie uns auch die Breite und Höhe einstellen. Wir sind uns also 100 sicher, dass unsere Leinwand vollständig zwischen unserem Browser verbunden ist. Okay. Das ist großartig. Noch eine Sache möchte ich über seine rasche Veränderung sprechen. Löschen wir einfach die Hintergrundfarbe hier. Du willst einfach nur testen. Also noch eine Sache, ich möchte darüber sprechen , wenn ich irgendwelche Unterschiede mache. Wenn ich jedes Mal etwas ändere, sollte ich in den Browser gehen und die Seite aktualisieren. Also mache ich dies, indem ich Command R drücke. Wenn Sie ein Windows-Benutzer sind, können Sie Control R verwenden. Dies ist jedoch kein effizienter Weg. Bei jeder Änderung sollten Sie nicht die Aktualisierungstasten drücken. Deshalb möchte ich über eine Erweiterung im VS-Code sprechen. Wenn Sie also Sublime Text oder zu Hause verwenden, gibt es einige ähnliche Erweiterungen wie diese. Sie sollten also einfach nach Live Server suchen. Dies ist sehr verbreitet. In der ersten Zeile sehen Sie eine Live-Show oder Erweiterung, die etwa 20 Millionen Mal heruntergeladen wurde . Also mach weiter und installiere das. Okay, ich habe schon installiert. Sie dann in Ihrer HTML-Datei irgendwo und klicken Sie mit der rechten Maustaste. Und sagen wir einfach mit Live Server öffnen. Okay, Ryan, das machst du. Es ist nur die Dusche begann bei Port 55 Nullen, Nullen. Das ist jetzt ein Live-Server, was bedeutet, dass wir Änderungen vornehmen. Es wird nur automatisch aktualisiert. Okay, als ich die Datei gespeichert habe, das bereits geändert. Wir müssen uns nicht mehr jedes Mal aktualisieren. 4. 2EventListeners: Okay Leute, lasst uns was machen. Also möchte ich über Event-Hörer sprechen, was ein wirklich praktisches Tool oder interaktive Kunst in JavaScript ist. Also werden wir das Klickereignis verfolgen und ein Rechteck auf die Kohle zeichnen . Warum werden wir geklickt? Okay, also lasst uns zuerst schneien zum Handel. Sommer gibt es eine eingebaute Funktion . Und hier können Sie tippen, Sie können den Typ des Ereignisses eingeben. Wir suchen nach einem Klickereignis. Also sage ich klick. Und für den zweiten Parameter ist dies eine Callback-Funktion. Sie sollten eine Funktion verwenden , die das Commonwealth ausgeführt hat, Collect ist. In Ordnung? Wir werden also einige Aussagen in diese Zeilen schreiben. Und diese Zeilen werden mit Klick ausgeführt. Sperren wir zuerst das Ereignis selbst. Also können wir hier e als Parameter machen, und Sie können diese Funktion einfach verwenden. Also sperren Sie zuerst das e, um zu sehen, was es ist. Ich hebe das einfach auf. Und lasst uns auch diese Zeile löschen. Okay, also ist unsere Konsole klar. Und wenn ich irgendwo klicke, gibt es eine Sperre und ein Zeigerereignis. Also lasst es uns öffnen. Es gibt viele, viele Immobilien hier. Aber wenn du untergehst, kannst du x- und y-Eigenschaft sehen. Wenn ich also konsole sage, logge es x dot y auf und speichere es. Wenn ich also auf Solver klicke, können Sie sehen, dass wir die X- und Y-Position dieses Ortes abrufen können . Okay? Das ist ein großartiges Werkzeug, da wir diesen Punkt verwenden können, um ein Rechteck zu zeichnen. Anstatt dies zu protokollieren, benutze ich es einfach. So können wir diese Zeilen übrigens einfach verschieben, indem wir die Alt-Option gedrückt halten und mit den Pfeiltasten Linien wie diese verschieben. Und wenn wir hier, statt während 100, e dot x dot y sagen können. Machen wir das also einfach kleiner, vielleicht zehn. Und lass es sich einfach anfühlen. Okay. Wenn ich also sage oder wenn ich auf Carlos klicke, kannst du sehen, dass wir einfach ein Rechteck zeichnen. Wo auch immer wir klicken. Okay, das ist großartig. Gehen wir weiter und ändern Sie Ihre Miete das Zentrum. Anstatt zu klicken, möchte ich Mars Mond benutzen. Okay? Und spar dir das auf. Wenn Sie also irgendwo klicken, wird es auch das Mausereignis verfolgen, damit wir mit unserer Maus tun können. Diese Funktion wird also viele, viele Male aufgerufen. Lassen Sie mich einfach, protokollieren wir einfach die x- und y-Werte. Also spar dir das auf. Sie können also sehen, dass es viele Male protokolliert wird, weil wir die Maus bewegen und der Event-Listener Marshmallow verfolgt. Jedes Mal, wenn ich meine Maus bewege, erstelle einfach ein neues Rechteck. Und es sperrt einfach das x und y. Echt ist, das ist so etwas wie Pinsel, oder? Also können wir zeichnen, was wir wollen. 5. 3Arc: In Ordnung, Leute, wir können jetzt Rechtecke zeichnen. Mal sehen, wie wir Kreise zeichnen können. Um Kreise zu zeichnen, verwenden wir CTX-Bogenmethoden. Und ich möchte darüber sprechen, wie das im Detail funktioniert. Betrachten Sie diese Parameter. Im Parameterbereich können Sie X, Y sehen, was dem üblichen Radius entspricht. Dabei handelt es sich um den Radius des Kreises, den Startwinkel und den Winkel. Ich werde erklären, was sie gerade sind und am Ende einen optionalen Boleon-Parameter Sie müssen keine optionalen Parameter angeben. Sie müssen nur entscheiden, ob Sie mit dem Zeichnen des Kreises im Uhrzeigersinn oder umgekehrt beginnen möchten . Okay. Du wirst es jetzt besser verstehen. Stellen Sie sich eine Koordinatenebene und wir haben hier einen Nullpunkt. Sie können über Trigonometrie nachdenken. Wenn wir die Bogenfunktion aufrufen, beginnt sie bei Null und fängt an, einen Kreis wie diesen zu zeichnen Wenn Sie einen Endwinkel von 90 angeben, zeichnen Sie nur einen Bogen, keinen vollständigen Kreis. Sie können auch den Startwinkel und den Endwinkel definieren. Weil diese Funktion nicht immer zum Zeichnen von Kreisen vorgesehen ist. Sie könnten auch einen Bogen zeichnen. Lassen Sie uns also im Code versuchen, einen Kreis zu zeichnen. Also werde ich diese Zeilen einfach auskommentieren und speichern, damit wir klare Kommas haben Wenn wir nun 100 und hundert für die X- und Y-Werte, 50 für den Radius, Null für den Startwinkel und sagen wir einen Winkel von 360 angeben für die X- und Y-Werte, 50 für den Radius, Null für , um einen vollständigen Kreis zu zeichnen Ich werde diese Aktualisierung speichern. Wir sollten also auch sagen, mit dem CTX-Feld beginnen. Speichere das und du kannst den Kreis sehen. Ändern wir es auf eins 80. Sie können wieder einen vollständigen Kreis sehen. Lassen Sie uns den Winkel auf 90 ändern. Warum das passiert, weil diese Parameter keine Grade erwarten. Stattdessen erwartet es Ausstrahlung. Deshalb sollten wir hier den Pi mal zwei für einen vollständigen Kreis oder den Pi für einen Halbkreis verwenden einen vollständigen Kreis oder den Pi für einen Halbkreis Sie könnten auch einige Umrechner von Grad in Strahlstärke verwenden einige Umrechner von Grad in Strahlstärke Oder Sie könnten Ihren eigenen Konverter schreiben. Schreiben wir Funktionsgrad in Radiance. Das kann eine Pfeilfunktion sein. Das tut mir leid, so. Die Formel dafür lautet Grad I geteilt durch eins 80 mal Pi. Speichern wir das und verschieben wir auch unsere Funktion nach oben. Dann können wir jetzt Abschlüsse verwenden. Rufen wir die Funktion auf, die wir gerade geschrieben , sagen wir eine 80 und speichern Sie sie. Das ist wieder dasselbe. Versuchen wir es mit 270. Du kannst sehen oder 90. Beachten Sie, dass dies nicht den Bereich dieses Teils ausfüllt. Damit soll ein Bogen gezeichnet werden. Sagen wir Schlaganfall, und jetzt ist es aussagekräftiger, glaube ich. Wenn ich eine 80 sage, ist das ein Halbkreis oder so. Ordnung. Wir könnten auch 360 für einen kompletten Kreis sagen. Okay. 6. 4Atome: Nun, da wir auch wissen, wie man einen Kreis zeichnet, es zu diesem Video, in dem wir anfangen werden, spannende Dinge zu zeichnen. Also lass uns anfangen. Zuallererst werden wir in diesem Video mehr als einen Artikel erstellen. Wir werden also Kreise erstellen, und ich möchte in dieser Zeit eine Klasse verwenden, weil wir diese Klasse verwenden werden, um viele Atome zu erzeugen. Ich möchte anfangen, mit der Atom-Klasse zu deklarieren. Es braucht einen Konstruktor, Atome erzeugt und das sind im Grunde kleine Kreise Deshalb brauchen wir X- und Y-Werte im Konstruktor. Also, dass x gleich x und y gleich y ist. Für den Radius möchte ich den zufälligen Radius auf 10-0 setzen, aber ich möchte nicht, dass er Null ist, weil er dann nicht sichtbar ist Fügen wir zwei hinzu, oder wir könnten auch acht daraus machen. Es ist 2-10. Wir werden auch Geschwindigkeit in X-Richtung angeben Es kann auch zufällig sein, aber das ist zu viel Machen wir vier draus. Wenn wir eine Geschwindigkeit wie diese angeben, 0-4, werden sie immer nach rechts fahren Damit sich ein Kreis nach links bewegt, benötigt er eine negative Geschwindigkeit, da er den X-Wert hat, also verringern Sie sich, wenn Sie sich nach links bewegen Deshalb sage ich einfach minus zwei. Das Ergebnis wird zwischen minus zwei und plus zwei und dasselbe gilt auch für y. Wir sind mit dem Konstruktor fertig. Lassen Sie uns auch eine Aktualisierungsmethode erstellen. Diese Aktualisierungsmethode wird also in jedem Frame aufgerufen, und sie sollte den X-Wert der Atome aktualisieren, und sie sollte den X-Wert mithilfe der Geschwindigkeits-X-Variablen und dasselbe auch für y tun. Aber wir definieren nur einige Variablen, die Kreisgeschwindigkeit , den Radius x und y, aber wir haben noch nichts gezeichnet. Um das zu tun, müssen wir eine Funktion zeichnen. Das Atom kann sich also selbst zeichnen. Denken Sie daran, wie wir zeichnen. Wir sagen zuerst CTX beginnen PT, und dann können wir CT x r sagen, hier können wir den X-Wert angeben Wir können den Y-Wert angeben, und wir können auch den Radius vom Konstruktor aus angeben Der Startwinkel sollte wie immer Null sein. Ich kann das Pi mal zwei für den Endwinkel angeben , weil wir immer einen vollständigen Kreis wollen. Ich verwende hier auch die Funktion. Lass uns das speichern. Auf den Kohlen ist immer noch nichts , weil wir kein Atom geschaffen haben Wir deklarieren es nur, damit der Computer die Atomklasse im Speicher behält, aber sie wird momentan nicht benutzt Lass uns weitermachen und die Atomklasse verwenden. Darüber hinaus möchte ich ein Atom-Array erstellen, das zunächst ein leeres Array sein wird. Dann fügen wir einen Event-Listener hinzu, sodass, wenn wir auf irgendeinen Punkt klicken, die Atome an diesem Punkt generiert werden können Also werde ich als Event-Listener aufrufen. Der Event-Listener hört das Klickereignis ab. Und für die Callback-Funktion übergebe ich das Ereignis Damit wir auf die X- und Y-Werte des angeklickten Punktes zugreifen können Y-Werte des angeklickten Punktes Innerhalb des Event-Listeners möchte ich hier eine For-Schleife verwenden Ich werde die Abkürzung benutzen. In vier Schleifen. Ändern wir den Index mit, damit er besser lesbar ist, glaube ich. Ich möchte 20 Atome erschaffen. Lassen Sie uns die Grenze angeben und dann diese Linien löschen. Was wir hier tun wollen, ist, in Atome vorzudringen, ein neues Atom, richtig? Lassen Sie uns also auch seinen X- und Y-Wert mit dem Ereignis deklarieren , das wir gerade verwendet haben. Okay. Ich werde das speichern. Wenn ich irgendwo draufklicke, passiert immer noch nichts. Aber nur um zu überprüfen. Wenn diese Zeilen funktionieren, können wir hier ein Protokoll hinzufügen. Lass uns Hallo sagen. Wenn ich irgendwo draufklicke, siehst du, dass es 20 Mal Hallo protokolliert. Wenn ich erneut klicke, 20 weitere und so weiter. Diese Leitungen funktionieren. Wir sehen noch nichts, weil wir die Funktion nicht benutzt haben. Wenn wir hier die Draw-Funktion verwenden, könnte sie auch zeichnen. Aber was ich hier tun möchte, ist Ihnen eine Animationsfunktion zu zeigen. So können wir eine neue Animationsfunktion wie diese erstellen. Hier werden wir den Anforderungsanimationsframe verwenden. Diese Funktion ist wirklich einfach zu verstehen. Diese Funktion ruft einfach eine übergebene Funktion auf. Wenn wir hier animate übergeben, damit sie sich selbst wieder aufruft, würden wir eine Schleife erzeugen, und das ist eine Endlosschleife, und genau das wollen wir Denn was auch immer wir dazwischen schreiben, es wird unendlich aufgerufen Denn in dieser Zeile wird Animate erneut aufgerufen und es geht von vorne los und führt die Codes aus und geht dann wieder zurück und so Was wir hier hinzufügen wollen, ist ein Zeichnen der Atome. Also werde ich Atome verwenden und ich werde für jedes Atome verwenden, wodurch jedes Element im Atom-Array wiederholt wird Wir können also einen Parameter übergeben, das Iterationsobjekt sein wird Atom. Hier iteriert das Atom über das Atom-Array, sodass wir hier die Draw-Funktion verwenden können Mit diesen Linien zeichnen wir einfach jedes Atom in den Atomen. Nach dem Zeichnen möchte ich auch die Update-Funktion aufrufen , weil wir die Geschwindigkeit erhöhen werden. Wir werden das X mit der Geschwindigkeit erhöhen oder die X- und Y-Werte verringern. Die Animationsfunktion wird viele Male aufgerufen und wir werden die X- und Y-Werte immer aktualisieren und erneut zeichnen, sodass wir jetzt die Animation sehen können. Ich sage es, wenn ich klicke, immer noch nichts auf den Komas Wir sollten noch etwas hinzufügen. Wir haben gerade eine Animate-Funktion erstellt, aber wir rufen sie nie Nennen wir es einfach. Wenn wir jetzt endlich klicken, können Sie das Ergebnis sehen. Wo auch immer Sie klicken, es entstehen 20 Atome, sich einfach zufällig verteilen. Die Geschwindigkeit und der Radius sind zufällig. Und wir können eine Animation sehen, weil wir einen Anforderungsanimationsframe verwendet haben. Also lass mich einfach die Seite aktualisieren und nochmal schauen. Dies ist bereits ein großartiges Projekt für den Anfang, für das wir in Zukunft bessere Grafiken erstellen werden 7. 5DestroyAndBlur: Derzeit werden die Atome nicht irgendwann zerstört Dies ist kein guter Ansatz für Leistungsprobleme. Sie bewegen sich einfach unendlich, aber sie werden irgendwann nicht zerstört werden Ich glaube auch, wenn man Atome in jedem Frame kleiner macht, und das können sie auch sein, wenn sie irgendwann zerstört werden können, sodass sie in jedem Frame kleiner und kleiner werden Das wird ein besserer visueller Effekt sein. Versuchen wir, diese Logik zu implementieren. Ich werde zuerst versuchen, die Aktualisierungsfunktion der Atomklasse zu ändern. Dieses Update wird nur die Geschwindigkeit ändern , sodass wir auch die Größe des Atoms aktualisieren können. Wir könnten dieselbe Methode verwenden. Hier könnte ich auch den Radius aktualisieren, aber ich möchte einfach eine neue Aktualisierungsmethode erstellen und ich werde diese Aktualisierungsgeschwindigkeit aus Gründen der Flexibilität nennen, weißt du, in Zukunft können wir vielleicht die Geschwindigkeit einfach zweimal aktualisieren wollen und wir wollen die Größe nicht aktualisieren. Es geht also nur um Flexibilität. Ich werde eine neue Methode für die Größe von Updates erstellen. Bei dieser Methode werde ich den Radius verringern. Lass uns 0.1 versuchen. In jedem Frame verringern wir den Radius, wenn wir die Methode update size aufrufen. Lassen Sie uns diese Update-Größe ausprobieren und diese auch ändern , um die Aktualisierungsgeschwindigkeit zu ändern. Speichere das. Lass uns sehen, was wir haben. Lass mich jetzt einfach die Konsole öffnen. Wir haben ein Problem beim Ausführen Arc, der angegebene Radius ist negativ. Wir verringern nur den Radius und irgendwann wird er negativ sein. Da wir keinen negativen Radius haben können, gibt die Konsole einfach eine Warnung aus. Was wir hier also tun können, ist , die Atome zu löschen, die einen negativen Radiuswert haben. Wenn wir das tun, werden wir uns auch mit dem Leistungsproblem befassen, denn sobald wir ein Atom gelöscht haben, müssen wir nicht mehr darüber nachdenken. In den vier Fällen, in denen wir jeweils über Atome iterieren, könnten wir den Radius der Atome überprüfen, und wenn er niedriger als 0,3 ist, sollten wir das Atom löschen Die Atome werden einfach in einer Atomanordnung gespeichert Wenn wir sie aus der Atomanordnung löschen können, geht es uns gut Wir haben keine neuen Variablen oder irgendeine Art von Datenspeicher erstellt . Wir halten sie einfach in Atomen fest. Es gibt einen Weg dazu. Es gibt viele Möglichkeiten, Atome zu löschen , um ein Element aus dem Array zu löschen. Wir werden hier die Splice-Methode verwenden. Ich werde hier sagen, dass Atome, für die Spleißverbindung eine Zahl benötigt wird. Dies ist der Index des Elements, das wir löschen möchten Um das zu erreichen, sollten wir hier eigentlich zuerst die vier Werte für jede Funktion ändern Ich werde hier einen neuen Parameterindex hinzufügen, und jeder von ihnen ist bereits bereit, uns den Indexwert der Schleife zu geben. Sie können hier sehen, dass Sie einen Wertparameter und auch einen Index angeben können und wir könnten auch dem obersten Parameter geben, was wir gerade nicht benötigen. Wenn wir hier Index eingeben, können wir auch hier einfach Index verwenden. Und wir sollten die Anzahl der Löschungen angeben . Wir wollen also nur ein Element löschen. Also das ist in Ordnung. Ich glaube, wir löschen gerade Atome mit einem Radius von unter 0,3. Sagen wir und versuchen es. Jetzt haben wir keine Fehler mehr. Es wird eine nette Sternanimation. Man kann also den Effekt sehen , dass die Kreise einfach abnehmen, immer kleiner werden und irgendwann, wenn sie einen Radius von unter 0,3 haben, zerstören sie sich selbst, sodass es uns gut geht. Nach der Animation haben wir nichts im Speicher. Okay. Also das ist sehr effizient. In Ordnung. Aber lassen Sie uns diesen Effekt cooler machen. Also werde ich diesen Klick einfach auf Mamu ändern und sehen, was passiert Vielleicht ist das zu viel. Wir erstellen gerade Objekte und unser Koma ist einfach voll, und unser Koma ist einfach weil wir sie nicht aus der Szene löschen. Was können wir dagegen tun? Ich möchte jetzt über ein Konzept sprechen. Kontext speichern und Kontext wiederherstellen. Also diese Blöcke sind einfach, weißt du, es ist selbsterklärend Sie speichern nur den Kontext, alle Einstellungen des Kontextes, zum Beispiel Füllstil oder, du weißt schon, Linie mit allem anderen, es ist hier nur der Speicherpunkt Und wenn wir etwas zwischen ihnen ändern, können wir den Füllstil ändern, wir können den Füllstil auf Rot ändern. Wenn wir also zum Beispiel zwischen diesen beiden Zeilen den Füllstil in dieser Zeile ändern , war der Füllstil schwarz. Wenn wir „Wiederherstellen“ sagen, geht es einfach zurück. In der 27. Zeile ist es also wieder schwarz. In Ordnung. Also können wir jede Änderung vornehmen, was wir wollen, und dann können wir es einfach wiederherstellen, sodass die gesamte Einstellung bis zu diesem Punkt wieder zu dieser Linie zurückkehrt. Also möchte ich die Blöcke hier hinzufügen und den Füllstil ändern. Lass es uns mit Rot versuchen, okay. Und ich möchte ein Rechteck zeichnen. Ich werde Fill für den ganzen Fall verwenden. In jeder Animationsschleife zeichnen wir ein Rechteck in das gesamte Coas. Um das zu tun, sollten wir Conva - und Cas-Werte geben Sagen wir das. Wir zeichnen nur das rote Rechteck in jedem Rahmen, sodass wir nichts sehen können. Okay. Also hat es offensichtlich keinen Sinn, das zu tun. Aber wenn wir dieses Rot in einen RGB-Wert ändern. Unser Hintergrund war also weiß. Sagen wir also 2505, 2505, 2505, und das ist für die Einstellung einer Das ist also so, als würde man nur weiß schreiben. Aber dieses Mal möchte ich auch Alpha hinzufügen, das ist die Opazität Dieses A steht für Alpha. Hier möchte ich 0,2 ein Alpha hinzufügen. Der direkte Winkel hat eine Opazität von 0,2, was uns einen schönen Effekt verleiht Wenn ich das sage, wenn ich das bewege, können Sie sehen, dass ich auch die Konsole schließe Du kannst also diesen schönen blauen Effekt sehen, oder? Und unsere Partikel bewegen sich einfach mit einem schönen Anhängereffekt, und sie werden irgendwann zerstört, wenn sie wirklich klein werden. 8. 6SkyAndStars: Wir haben einen schönen visuellen Effekt erzeugt , der auf Massenbewegungen hört. Was wenn wir wollen, generiert der Code standardmäßig die Atome. Was ist, wenn wir das Mausereignis nicht hören wollen ? Stattdessen wollten wir automatisch bekannte Atome schaffen. Also werde ich diese Zeilen hier auskommentieren. Und auf dem Button möchte ich eine neue Funktion erstellen. Okay? Nennen wir diese Funktion Atome generieren. Und ich benutze die Pfeilfunktion wieder. Okay? Um zum Beispiel Atome zu erstellen, können wir hier einfach dieselbe Logik verwenden. Es reicht aus, Atome einfach ins Array zu schieben, oder? Da wir dann eine Animationsfunktion haben, wird sie zeichnen, die Geschwindigkeit aktualisieren, Größe aktualisiert und alles erledigt. Also sollten wir einfach zuerst in Atome drängen. Also werde ich Atome diesen Busch sagen. Wir wollen Zufallswerte. Dieser Ausdruck erzeugt hier, wie Sie wissen, einen Zufallswert zwischen, wenn ich Ihren Zehnten eintippe, zwischen 010, oder? Aber ich will hier keinen statischen Wert. Stattdessen können wir como sweet benutzen. So können die Atome überall im Commerce erzeugt werden. Und mach das Gleiche auch für Y. Diesmal Komas Höhe. Okay? Und dann können wir einfach Request Animation Frame sagen und hier dieselbe Funktion aufrufen , weil wir eine Schleife sein wollten. Okay? Wenn ich jetzt generiere Atome aufrufe und diese Datei speichere. Es tut mir leid, das haben wir nicht. Wir haben gerade X- und Y-Werte angegeben. Wir rufen dann die Klasse an. Also werde ich am Anfang Mu-Atom und am Ende die Klammer hinzufügen . Ich hebe es nochmal auf. Sie können also sehen, dass wir überall auf der Leinwand ein Zufallsmate-Atome generiert haben. Okay, also sieht das gut aus, aber lass es uns besser machen. Ich glaube, wenn wir den Hintergrund schwarz machen und Atome kleiner und weiß machen, wird es wie Himmel aussehen. Okay, wie wär's damit, das zu versuchen? Wir sollten diese Linie ändern. Ich werde nur kommentieren , weil ich das nicht verlieren möchte. Aber dieses Mal wollen wir, dass es schwarz ist. Also gebe ich 0 für RGB-Werte. Lass es mich retten. Unsere Leinwand ist momentan schwarz. Wir können Atome nicht richtig sehen, weil wir ihren FillStyle in Weiß ändern sollten. Wo wir tatsächlich Atome zeichnen. Kurz vor dem Zeichnen. Wir können TTX, TTX Style zu Weiß sagen . Im Moment sieht es also viel besser aus. Und sie sind auch zu groß. Ich möchte, dass sie kleiner sind. Vielleicht können wir hier den Radius ändern. Also lasst uns auch was versuchen. Anstelle von acht statt acht. Jetzt gibt es kleinere und sie sehen aus wie Sterne am Himmel. So können Sie mit JavaScript einen Himmel - oder Raumeffekt erzeugen . 9. 7ParabolicMovement: Es ist wirklich einfach, zufällige Atome zu erstellen. Aber was ist, wenn wir an bestimmten Orten Atome schaffen wollen ? Und wir wollen sie auch auf eine Weise verschieben, die wir angeben möchten. Okay? Um das zu tun, erstelle ich einfach einen neuen JavaScript-Objektpunkt. Es sollte zwei Grundwerte haben, x und y. Also hier möchte ich anstelle von Zufallswerten nur Punkt X, Punkt Y verwenden. Lassen Sie mich das also speichern. Also wenn ich hier 500 gebe, siehst du dort an der konkreten Stelle, okay. Oder wenn Sie etwas Bestimmtes bei etwas wollen , das in der Mitte liegt, könnten wir natürlich sagen, dass Carlos Breite durch zwei geteilt wird. Höhe geteilt durch zwei. Es ist also genau in der Mitte. Okay? Also lasst uns weitermachen und das in Spalten verschieben. Was wir hier also tun wollen, ist, den Punkt x zu ändern. Wenn ich Punkt x ändere, wenn ich ihn mit einem in jedem Animationsframe vergrößere , wird es richtig gehen. Lass es mich retten. Sie können also sehen, dass es einfach richtig geht. Wenn wir auch das y ändern, jetzt neu gestalten, wird es unten gehen und schreiben. Irgendwann wird es außerhalb der Leinwand gehen. Okay, also wie lassen wir es zwischen einigen Punkten springen , mit denen wir sie hier hineinbringen können . Weil die Funktion cos x zwischen eins und minus eins liegt, während die Grad zunehmen. Okay? Wenn Sie also Kosinus verwenden, um Punkt x zu erhöhen, wird es richtig gehen. Und dann wird es irgendwann zurückdrehen und anfangen zu gehen und nach links zu gehen. Okay, lass uns das in unserem Code verwenden. Fangen wir tatsächlich x und y von 0 an. Vielleicht können wir hier Kosinus benutzen. Wir sollten wieder Bogenmaß machen, nicht Grad, aber ich möchte einfach von Grad in Bogenmaß umwandeln. Und ich werde auch eine neue Variable zuweisen. Es beginnt bei 0 und es wird in jedem Frame zunehmen , so dass unser Kosinus einfach geht und zurückkehrt. Also lasst uns diese Variable hier verwenden, Grad. Und denken Sie an die Formel für die Umwandlung in Bogenmaß. Teilen Sie es durch das 180-fache Pi. Okay? Also möchte ich Atome aus der Mitte der Säulen erzeugen . Deshalb füge ich einfach die Carlos-Breite hinzu. Dividieren Sie durch zwei plus, und auch hier cos Höhe geteilt durch zwei plus. Nochmal, wenn ich sage, kann man es plötzlich sehen, dass es einfach Sommer geht. Jetzt sehe ich, dass es daran liegt, dass wir hier gerade einen Tippfehler gemacht haben. Es sollte so sein. Wenn wir es retten. Sie können sehen, dass es in der Mitte der Leinwand generiert wird, aber wir erhöhen Punkt x oder nehmen in jedem Frame ab. Aber nichts hat sich geändert. Dies geschieht, weil der Bereich des Punktes x zwischen 011 liegt daher nicht viel beeinflusst. Deshalb möchte ich diesen Wert hier multiplizieren. Sagen wir Hunderte. Und warum auch? Sagen wir nochmal 200. Jetzt können Sie sehen, dass es sich nur zwischen diesen Routern dreht. 1 x ist also eins. Es wird auf der rechten Seite sein. Wenn es minus eins ist, ist es hier links Gaze. Was wir also auch tun können, können wir diese Bewegung auch parabolisch machen. Im Moment tun wir also nicht viel für y, wenn wir immer eins sagen. Also verlagern wir es einfach. Das ändert sich also nicht. Aber erinnere dich an Parabelformel. Also lass mich einfach aufmachen. Dies ist nur die Grundparabel, y ist gleich x Quadrat. Lassen Sie uns das einfach in unseren Code implementieren , der 2 x mal gleich ist x. Was glauben Sie, wird passieren? Unsere Form, wir fangen gerade an, ein Gleichnis zu zeichnen. Lass es mich einfach aufheben. Sie können das Ergebnis sehen und diese Logik verwenden. Und für Oma kannst du alles zeichnen. Du willst es. Ein Kreis Acht, ein Unendlichkeitssymbol, Fehler. 10. Erste Schritte (Pixel: In diesem Abschnitt werden wir mit Vanilla JavaScript einen schönen Pixeleffekt erzeugen . Am Ende dieses Abschnitts können Sie diesen Pixeleffekt auf Fehler-PNG-Bilder verwenden . Wenn Sie also bereit sind, öffnen Sie Ihre Kommandozeile und wir können anfangen. In den vorherigen Abschnitten. Denken Sie daran, dass wir einen neuen Projektordner im Desktop erstellt haben. Also gehe ich in den Projektordner. Ich erstelle hier einen neuen Ordner zu diesem Projekt. Und ich nenne es Pixeleffekt und gehe in diesen Ordner. Was wir also hier brauchen, sind eigentlich drei Telefone. Indexieren Sie wie immer HTML. Also werde ich sagen, berühren Sie index.HTML, um es zu erstellen. Und berühren Sie auch index.js und auch für CSS, style.css. Okay, jetzt haben wir unsere Akten erstellt. Lasst uns aufmachen. 11. Das Projekt anlegen: Wir können das Projekt auch mit VS-Code über Terminal öffnen . also in Ihrer Befehlszeile Wenn Sie also in Ihrer Befehlszeile nur abgefangene Punkte sagen, wenn Ihre Befehls-Shell bereits installiert ist, werden die Befehle den VS-Code unter Verwendung Ihres Verzeichnisses hier geöffnet . Wenn also so etwas wie Befehl nicht gefunden wird, lassen Sie mich auf den Bildschirm gehen, Sie können einfach in VS Code gehen und unter Windows Befehl V oder Control V drücken. Und hier tippe Shell-Befehl. Da ich also Insiderversion von VS Code verwende, verwende ich eine Arms Sechs- bis Vierer-Version für Apple Silizium. Es heißt Insider genannt, aber normalerweise können Sie hier sehen, dass der Befehl in pet installiert heißt. Wenn Sie also Insider verwenden, sollten Sie diesen installieren. Wenn Sie die normale Version verwenden, nur VS Code. Also kannst du es hier überprüfen. Sie sollten hier sehen installieren, kalt installieren. Und sobald Sie das getan haben, Befehl einmal installiert, sobald Sie darauf geklickt haben. Und dann kannst du hören, benutze diesen Befehl. Da ich in dieser Version für mich verwende, heißt sie Insider. Okay? Und es wird das Projekt in VS Code für mich öffnen. Okay, also fangen wir mit Index-HTML an. Wie immer verwenden wir die HTML5-Vorlage. Hier. Wir können Pixeleffekt für den Titel sagen. Und dann sollten wir wie immer unsere Kolumnen erstellen. Ich gebe an, dass mein Code wie eine obdachlose ID war. Wir sollten auch ein Skript-Tag erstellen , da die Indexquelle js ist. Schließlich verknüpfen wir unsere CSS-Datei auch mit einem Link. Okay? Also ist alles in HTML bereit. Lasst uns ins CSS gehen. Also hier möchte ich alles wählen. Deshalb verwende ich Asterix und setze Marge 0, Polsterung, 0, Box-Sizing, Border-Box. Dies ermöglicht einige Anpassungen. Du kannst dafür recherchieren. Es ist ein CSS-Thema, das ich gerade nicht besprechen werde. Lass uns den Hintergrund schwarz machen. Und dann können wir unseren Kosmos mit Ivy Tech anrufen. Und lasst uns eine Grenze setzen. Ein px einfarbig weiß. Und setze seine Position auch auf absolut , weil wir nichts anderes haben. Wir haben nichts Relatives, so dass wir es in der Mitte des Bildschirms reparieren können , indem wir die oberen und linken Werte ausführen. Es gibt viele, viele Alternativen. Dies auf jede Weise zu tun, wird funktionieren. Also wollen wir endlich die Farben übersetzen, meine minus 50%. Diese Linien werden also nur dazu führen, dass die Farben den Kongress bei jeder Entschließung ins Zentrum bringen . Okay, ich speichere einfach CSS und wir sind fertig mit HTML und CSS. Wir können jetzt die JavaScript-Datei öffnen. Es ist also wie immer, wir sollten zuerst die Autos mit Element für ID erstellen. Pass den Ausweis meines Autos war. Und wir werden auch unsere CTX in diesem Zusammenhang schaffen. Goody. In Ordnung. Nun möchte ich einige PNG-Bilder in diesen Ordner verschieben einige PNG-Bilder in und dieses Bild ebenfalls verwenden. Ich stelle Ihnen dieses Bild aus dem Ressourcenbereich zur Verfügung. Sie können sie also herunterladen und genau dieselben Bilder mit mir verwenden. Oder wählen Sie Ihre eigenen PNG-Bilder in Ihrem eigenen Projekt aus. Also lass mich meine Bilder mitbringen. Okay, also haben wir drei und PNG-Bilder. Gerade jetzt. Jetzt, da wir es im lokalen Dateisystem gemacht haben, können wir jetzt darauf zugreifen. Ich werde eine neue Variable erstellen, welche sein wird, und sie wird ein Objekt der Bildklasse sein , damit wir jetzt ihre Quelle ändern können, um es sagen zu lassen. Fangen wir mit Kerry an. Okay, das ist also der Name der Datei im selben Ordner. Deshalb brauchen wir keinen Schrägstrich und Punkte, sonst noch irgendetwas. Wir können seinen Namen einfach weitergeben , weil sie sich in derselben Hierarchie befinden, oder? Auch. Jetzt, da wir die Quelle des Bildes haben, können wir es tatsächlich nennen. Also können wir Image Lot sagen. Dies wird also aufgerufen, wenn das Bild bereits protokolliert ist. Wir können also sagen, dass wir hier Funktion sagen können. Und alles, was wir schreiben werden. Diese Zeilen werden aufgerufen, nachdem das Bild geladen wurde. Okay? Wenn Sie nicht gesagt haben, wenn Sie nicht benutzt haben, sind Sie nicht Eigentum des Bildes. Wir könnten vor dem Ladevorgang mit dem Codieren beginnen. Das wird also einige Fehler verursachen. Okay, das ist also die sicherste Art , Bild mit JavaScript zu verwenden. In Ordnung? Wenn es geladen ist, möchten wir die Carlos-Breite auf diese Bildbreite und auch die Carlos-Höhe auf dieses Bild einstellen . Jetzt können wir das Bild mit der CTX-Bildfunktion zeichnen. Für den ersten Parameter sollten Sie also das Bild selbst geben. Also werde ich Image sagen und ich beginne x und beginne y sollte 0 sein. Schließlich können wir Handel mit der Höhe von Carlos oder den Endpunkten tätigen. Wenn ich das speichere, gehen wir auch in die HTML-Datei. Klicken Sie mit der rechten Maustaste darauf und öffnen Sie es mit Live Server. Und wenn Sie den Abschnitt , in dem wir den Live-Server installiert haben, nicht gesehen haben, ist das wirklich einfach. Du solltest einfach hier auf die Erweiterungen gehen. Wir können Live Server tippen und Sie können diesen einfach installieren. Es sind ungefähr 20 Melians. Es hat ungefähr 20 Minuten Download. Es ist also sicher zu benutzen. Sobald Sie es installiert haben, können Sie mit der rechten Maustaste in die HTML-Datei klicken und „Mit Live Server öffnen“ sagen. 12. 3getImageData: Der Eintrag wird in Ihrem Standardbrowser geöffnet. Ich werde es tun, ich werde Chrome benutzen. Lassen Sie mich also einfach so als Code stapeln , damit wir beide gleichzeitig sehen können. Alles klar, wir sind bereit zu gehen. So können wir jetzt das Bild in das Auto zeichnen, was bedeutet, dass wir auch die ImageData-Funktion für unser Bild verwenden können . Also lass mich einfach dx sehen. Lassen Sie mich einfach erklären, holen Sie sich die ImageData-Funktion. Also sollten wir x, y, Breite und Höhe geben . Geniessen. Wie ein Rechteck zeichnen. Und was diese Funktion bewirkt , ist , die Bilddaten tatsächlich zu erhalten. Das zurückgegebene Objekt ist ein Fehler. Also lass mich eigentlich nur ImageData. Okay, lasst uns einfach angemeldet haben, um es zu sagen und es leicht zu verstehen. Also öffne ich das Konsolenbild, das du sehen kannst. Wir haben ein Datenobjekt. Okay, also lasst uns tatsächlich protokollieren, die Daten selbst protokollieren. Es ist also ein Array. Es hat so viele Gegenstände. 2 Milliarden, vielleicht 2 Millionen. Ich ziehe mich an. Und wenn Sie sich innen öffnen, können Sie sehen, dass es sich nur um einen geklemmten Typ eines Arrays handelt. Es ist also eigentlich ein einziges Array. Es ist keine Matratze. Es gibt keine. Es scheint also gäbe es drei Elemente in einem Array, aber es ist nur, weißt du, das sind aber es ist nur, weißt du, nur Developer Tools, die Dinge sehr abstützen. Aber normalerweise ist es ein 1D-Array, also sind sie für jede Zahl direkt nebeneinander. Und du kannst das überprüfen. Es beginnt bei 0. Und wenn Sie den zweiten Abschnitt öffnen, der 400 versteckt ist, steigt der Index kontinuierlich. In Ordnung? Was sind diese Nullen? Bedeutung? Es funktioniert so. Weißt du, RGB-Werte, oder? R steht für Rot. G steht für Grün, B steht für Blau und a steht für Alpha. So können wir erkennen, dass jedes Pixel in der Kuh diese Farbe verwendete. Nun. Wir haben also eine Zahl zwischen 0 und Zwei, 55 für jeden von ihnen. Und das wird zeigen, wie stark diese Farbe in diesem Bild ist. wie in diesem Beispiel Lassen Sie mich wie in diesem Beispiel diesen Tab erweitern. Okay, also sagen wir in diesem Beispiel, unser erstes Pixel ist genau hier. Und der rote Wert dieses Pixels ist 0, weil es hier keine Miete gibt. Es ist alles schwarz, oder? Das Blau ist ebenfalls 0. Das Grün ist ebenfalls 0. Es tut mir leid, Green. Blau ist auch 0 und Alpha ist auch 0, weil es nicht transparent ist, oder? Es gibt keine Pastete. Es gibt keine Aufhellungen in diesem Pixel. Aber lass mich einfach was in der Mitte finden. Ich entscheide mich nur nach dem Zufallsprinzip. So selten und ich hoffe, ich finde jemanden, der nicht schwarz ist. Sollte nicht so schwer sein. Also sollten wir danach suchen. Okay, wir haben es bei diesem Pixel gefunden. Ich weiß nicht wo es gerade ist. Aber wir wissen, dass der rote Wert 217 ist, der Grünwert 10928, Blauwert 166 und Alpha 25 ist. Okay? Jetzt kannst du verstehen, dass wir es haben. Rgba-Werte für alle Pixel in den Spalten. Was großartig ist, weil wir diese Werte nutzen können, um alles zu tun, was wir wollen. So können wir das Bild auf der gegenüberliegenden Seite zeichnen. Wir können seine Farben bekommen und sie auf verschiedene Arten verwenden. Oder wir können einen Pixel-Regeneffekt erzeugen , den wir tun werden. Okay? Wenn es also klar genug ist, hoffe ich, dass ich die Dinge nicht erklärt habe. Wir können jetzt weitermachen. Jetzt, da wir ImageData haben, können wir die Rot-, Grün- und Blauwerte tatsächlich trennen , oder? Wir können sie in verschiedenen Datenstrukturen aufbewahren. Okay? Mit diesen Einnahmen können wir eine gewisse Helligkeit berechnen. Du kannst also besser verstehen, wenn ich tippe. Fangen wir also mit einer for-Schleife an. Ich ändere den Index auf i. Also sollten wir zu Bilddaten, Daten, die fehlten, oder? Also lass mich die Konsole nochmal öffnen. Ich schätze, ich sollte es nicht schließen. Okay, also haben wir zwei Millionen. Zwei Millionen. Ja, wir haben rund 2 Millionen Elemente und wir sollten sie durchlaufen. In dieser for-Schleife möchte ich also rote, grüne und blaue Werte identifizieren . Rot wird ImageData sein. Die Daten. Und wir werden uns erinnern, dass die roten sind, der erste ist rot und dann grün, blau, Alpha. Und der vierte, eigentlich der fünfte ist wieder rot. Und dann ist dieser wieder rot. Dieser ist wieder rot. Also können wir sagen, dass ich mal vier bin, wir können den ganzen roten Wert gerade bekommen. Zuerst. In der ersten Iteration wird es 0 sein. Die zweite Iteration wird es vier sein. So können wir alle roten Werte erhalten. Also werde ich das Gleiche auch für Grün tun, aber dieses Mal kannst du hier nur noch eine Klammer machen. Und wir können plus eins sagen, denn dieses Mal werden wir 159 bekommen und so weiter. Also lasst uns weitermachen und das auch für Blau machen. Es sollte plus zwei sein. Und mit Rot-, Grün - und Blauwerten können wir einfach eine neue Helligkeitsvariable erstellen. Es ist also nur, dass es für diesen Effekt nützlich sein wird. Okay? Wir möchten also nur einen Durchschnitt an roten, grünen und blauen Variablen verwenden . Also werde ich, ich bekomme einfach die Summe der drei Werte und dividiere durch drei, um den Durchschnitt zu erhalten. So können wir es aufhellt zuweisen. Stimmt's? Und dann erstellen wir einfach ein neues Array. Ganz oben von allem. Ich nenne es brightness-Array, ein leeres Array. Und lassen Sie uns einfach den Helligkeitswert in dieses Array drücken. Okay, also wie lang wird die Helligkeits-Array sein? Es wird mit den Pixeln in unseren Spalten genauso sein, oder? Wir erhalten also nur Rot -, Grün - und Blauwerte von jedem der Pixel. Und wir bekommen den Durchschnitt von ihnen. Und wir nennen diesen Wert auf Helligkeit, und wir werden ihn in die Helligkeit schieben, Eric. Okay? Wenn Sie sich also erinnern, wird unser Ergebnis nicht farbig sein. Später. Wir können dies auch mit farbigen tun, aber im ersten Schritt wollen wir nur den Helligkeitswert und wir werden ihn verwenden. Alles klar, lass uns weitermachen. Erzeugen wir Tarzan-Teilchen oder diesen Effekt. Dafür werde ich eine neue for-Schleife benutzen. Wieder werde ich mich wieder benutzen. Und sagen wir, dieses Mal werde ich statische 10 Tausend für die Grenze der for-Schleife geben . Jetzt wird diese Schleife zehntausend Mal iterieren und wir sollten einfach drücken. Eigentlich sollten wir zuerst Partikel-Array erzeugen. Was wollen wir jetzt tun, Partikel oder ein zehntausendmal neues Teilchen zu schieben , oder? Also, aber wir haben momentan kein Teilchen. Wir haben keine Klasse erstellt. Also lasst uns das zuerst machen. Wir hinterlassen hier einfach einen Kommentar. Also sollten wir, wir sollten hier neues Teilchen sagen können. Okay? Und dann werden wir es auskommentieren, sobald wir diese Teilchenklasse haben , tut mir leid. 13. 4CreateParticleClass: Okay Leute, es ist an der Zeit, eine Partikelklasse für unseren Partikeleffekt zu erstellen . Ganz oben. Vielleicht können wir hier Klassenteilchen sagen. Und wir sind an diese Syntax gewöhnt, oder? Wir haben das schon mal benutzt. Also nenne ich einfach seinen Konstruktor. Und wir müssen eigentlich keine Parameter angeben , weil wir sie standardmäßig machen können. Wie immer haben wir den X-Wert, der zufällig sein kann. Und der Bereich wird zwischen 0 und Carl mosfet liegen, oder? Also, ähm, einige von euch verpassen vielleicht den Math.Random Abschnitt Beginn des Kurses. Dieser Wert gibt also einen Zufallswert zwischen 0 und Spalten zurück , okay, wenn wir also gerade hier sagen, wird ein Zufallswert zwischen 010 zurückgegeben. Also können wir hier Handel sagen. Es wird einen x-Wert dazwischen zurückgeben. Schließen wir einfach die Konsole jetzt. Ein zufälliger x-Wert zwischen dem Campus im Kosmos. Und lasst uns das Gleiche auch für Y machen. Aber wir wollen, dass unsere Teilchen oben in den Säulen beginnen. Dieses Mal wollen wir keine Zufälligkeit. Deshalb sage ich für jedes Teilchen 0. Es wird also zufällig in der x-Richtung beginnen, aber es beginnt jedes Mal an der Spitze. Ich werde auch Helligkeit genannt, weil wir Helligkeit verwenden werden. Denken Sie daran, wir berechnen es einfach. Ich werde es einfach standardmäßig 0 machen, aber wir werden es später ändern. Okay? Sie sollten auch eine Geschwindigkeit haben, da sie mit einer zufälligen Geschwindigkeit herunterfallen . So etwas wie drei Arbeiten. Und es werden auch Kreise sein. Deshalb brauchen sie einen Radius. Und ich möchte, dass jedes Teilchen in verschiedenen Größen sein wird. Deshalb lassen Sie uns seine Radiuswerte dazwischen legen. Ich möchte also nicht, dass es bei 0 beginnt. Also füge ich hier einfach eins hinzu. Dieser Wert liegt also zwischen 1,52. Okay? Also haben wir den Konstruktor-Teil gedrückt. Es ist Zeit, Stempel, die an die Update-Funktion gebunden sind. In der Update-Funktion wissen Sie bereits, welche Update-Funktion vier ist. Es wird in jedem Frame, richtig, mit unserer Animationsfunktion aufgerufen . Und wir werden die Animationsfunktion später schreiben. Update-Funktion wird jedoch in jedem Frame aufgerufen. Was auch immer wir zwischen der Update-Funktion umschreiben, diese Zeilen werden in jedem Frame kontinuierlich aufgerufen. Was wir also tun wollen, läuft kontinuierlich, um die Y-Werte der Partikel zu erhöhen , damit sie herunterfallen können. Wir wollen sie also mit der Geschwindigkeit der Partikel erhöhen , die ebenfalls zufällig sein wird. Also lasst uns das hier hinzufügen. Ich möchte nicht, dass das 0 ist, weil es 0 sein wird. Sie werden nicht herunterfallen, sie bleiben einfach an diesem Pixel hängen. Also werde ich einfach 0.1 hinzufügen , nur um sicher zu sein , dass sie fallen. Okay, wir können weitermachen. Und so werden die Partikel einfach ununterbrochen herunterfallen. Und irgendwann werden sie an die Unterseite der Säulen kommen, oder? Wenn sie das tun, sollten wir eigentlich nur zwei Möglichkeiten geben, sie entweder zu zerstören oder ihren y-Wert wieder auf 0 zu ändern, damit sie von Anfang an beginnen. Ich werde den zweiten Weg in diesem Projekt nutzen. Also werde ich sagen, ob dieser Punkt y größer ist. Als oder gleich ich war Größe, was bedeutet, dass sie gerade außerhalb der Leinwand gehen. Machen wir wieder y 0 , damit es von Anfang an beginnt. Und ich möchte auch ihr x so ändern , dass sie wieder nach dem Zufallsprinzip positioniert werden. Schlamm, zufällig. Und unsere Grenze ist mit irgendetwas unterhalten. Das ergibt also Sinn, oder? Es ist einfach reine Logik. Okay? Ich sage das einfach. Lassen Sie uns mit unserer Draw-Funktion fortfahren. Bevor ich die Funktion zeichne, möchte ich eigentlich über die Helligkeit sprechen da wir hier die Helligkeit verwenden. In der Update-Funktion. Wir werden die Helligkeit des Partikels in jedem Frame mit dem Wert ändern , den wir aus dem tatsächlichen Bild erhalten. Denken Sie also an dieses Helligkeits-Array, nur ein riesiges Array, aber es ist 1D. Es ist also nur, es hat vielleicht mehr als 2 Millionen Elemente. Und wir können den genauen Punkt für unser Praktisches bekommen. Wie macht man das? Ich sage diese Punkthelligkeit. Und wir können Helligkeit nennen. Hier. Wir sollten den X- und Y-Wert des Teilchens verwenden. Wir sollten sehr geschickt verwenden, damit sie ihrer Position im Helligkeitsfehler entsprechen. Okay, also denk darüber nach. Wie können wir X- und Y-Werte unseres Teilchens verwenden? Dass es mit der Aufhellung der Mitte übereinstimmt. Und das wird auch aus den Bilddaten stammen. Aber es gibt einen kleinen Unterschied zwischen ihnen. Hier haben wir X- und Y-Werte der Spalten. Es ist also eine Matratze, welche Dienstag ist, oder? Aber hier haben wir nur eins, das Array. Irgendwie müssen wir diese X- und Y-Werte dieser Helligkeit zuordnen. Ich werde diesen Teil mit einer Diashow erklären. 14. 5Mapping2d1d: Das sind unsere Kolumnen. Wir haben die x-Werte auf der Horizontalen, wir haben die Y-Werte auf vertikal. Und das ist das Helligkeitsarray, das wir verwendet haben. Also haben sie deinen Geschenken das Gleiche gekauft. Die Pixel im Kosmos. Aber es gibt einen kleinen Unterschied. Einer von ihnen ist in 2D, während der andere 1D ist. also X- und Y-Werte verwenden, können wir ein Pixel in zwei Dimensionen darstellen. Weil wir X- und Y-Werte verwenden. Aber im Helligkeits-Array ist es linear. Wir haben nur eine Dimension. Hier sehen Sie also die Reflexion des Helligkeits-Arrays in X- und Y-Koordinaten. Diese Werte stellen also dar der Index außerhalb der aufgehellten Umfrage in den Canvas-Bereich liegt. Wir können die Formel verwenden, um mit X- und Y-Werten der Pixel auf den Index der hellen Umfrage zuzugreifen der Pixel auf den Index der hellen Umfrage . Nehmen wir an, wir möchten auf das zehnte Element und das Pixel zugreifen . Also, aber wir wissen nicht , welches Pixel es sich im Helligkeits-Array befindet. Wir wissen nur, dass x zwei ist und y zwei ist. Also lasst uns die Formel verwenden. Es wird uns zehn geben. Und das funktioniert, weil wir nur den y-Wert mit der Anzahl der Zeilen multiplizieren . Es ergibt Sinn, oder? Dann fügen wir einfach x. Okay? Sehen wir uns also ein anderes Beispiel an. Wenn wir auf sechs Pixel X4-Virus zugreifen wollen, gibt uns die Formel 44. Also werden wir diese Formel in unserem Code verwenden. Es wird so aussehen. Übrigens verwenden wir einfach Math.floor im Code, da die X- und Y-Werte nur zufällig generierte Float-Werte sind. Da sie also fließend sind, sind sie keine ganze Zahl. Aber wir werden es tun, wir brauchen ganze Zahlen. Deshalb werden wir Math.Floor im Gericht benutzen. 15. 6UseTheFormula: Verwenden wir diese Formel in unserem Code. Also werde ich Math.Floor sagen, dieser Punkt y minus einmal Kommas. Aber im Moment kann ich dieses Fenster plus Mod Floor wieder erweitern dieses Fenster plus Mod Floor , das x. Wir sehen also immer noch keine Animationen, weil wir unsere Animationsfunktion nicht erstellt haben. Aber sei geduldig. Wir sind gerade dabei, das zu tun. 16. 7DrawFunction: Lassen Sie uns auch die Draw-Methode erstellen, die wirklich einfach ist, und das haben wir vorher gemacht. Also hier drin sage ich Draw. Wirklich sollte anfangen zu zeichnen, wird Pads beginnen. Und wir können FillStyle sagen, weiß. Übrigens können Sie diese Linie mit jeder gewünschten Farbe ändern . Oder in Zukunft möchten wir diese Zeile möglicherweise mit der Bildfarbe ändern , damit die Pixel ebenfalls gefärbt werden. Wir möchten also einen Kreis mit x, y, Radius 0 und dem vollständigen Kreis zeichnen. Deshalb benutze ich math.pi mal zwei Mal. Also haben wir in den vorherigen Abschnitten bereits erklärt, was diese Parameter sind und wie man einen Kreis zeichnet. Und schließlich sollten wir CTX sagen, Angst. Okay, lass mich das einfach speichern, aber wir nennen nicht trieb es funktionierend. Deshalb sehen wir keine Animationen. 17. 8CompleteTheEffect: Lass uns bis zum Ende gehen. Hier können wir animierte Funktionen erstellen. Also möchte ich es zu einer Pfeilfunktion machen. Und als erstes möchten wir in der Animationsfunktion die Deckkraft der gemeinsamen ändern. Wir können dies tun, indem wir die globale Alpha-Eigenschaft des CTX verwenden. Und lassen Sie es uns auf 0,05 einstellen. Ändern Sie auch FillStyle zu Schwarz. Okay? Und wir möchten ein Rechteck zeichnen, mit dieser Deckkraft und dieser schwarzen Farbe neu gestalten. Deshalb gebe ich Handel mit und Handel Höhe. Dieses Rechteck deckt also den gesamten Bereich ab. Okay? Du kannst also sehen, was wir hier machen, oder? Wir zeichnen nur ein bläuliches und geben als 005 Alpha-Rechteck aus, was uns einen schönen Unschärfeeffekt der Partikel geben wird. Und wir zeichnen ein Rechteck, das alle Kameras abdeckt, damit wir uns nicht um alle Partikel einzeln kümmern müssen , sondern stattdessen nur ein großes Rechteck zeichnen. In Ordnung? Und natürlich wollen wir Update-Partikel in der Animate-Funktion zeichnen . Dafür werde ich für jede Entität verwenden. Nennen wir also Particles Array. Für jeden. Wir werden über Partikel iterieren. Für jedes Teilchen möchte ich aktualisieren. Und ich will es. Und dazwischen. Lassen Sie uns auch das globale Alpha noch einmal ändern. Also verlieren wir hier die Partikelhelligkeit. Als Teil Helligkeitsarray weisen wir es einfach den Partikeln zu , so dass jedes Partikel je nach Pixel dieser Position eine andere Helligkeit hat je nach Pixel dieser Position eine andere Helligkeit . Stimmt's? Nutzen wir diese Helligkeit zwischen Update und Zeichnen. Lasst uns die globalen Alpha-Partikel ändern, richtig? Am Ende der Animation. Ich werde auch wie gewohnt einen Anforderungsanimationsrahmen aufrufen. Okay, dann rufen wir einfach die Animate-Funktion auf und speichern diese Datei. Wir sehen keine Partikel. Das liegt daran, dass wir keine Partikel in das Partikel-Array gedrückt haben. In dieser for-Schleife. Wir haben nicht generiert, weil dies nur Kommentare sind. Also Array Partikel, von denen wir sagen sollten schieben Sie ein neues Teilchen und das sollte in Ordnung sein. Wenn ich „Warte“ sage, sehen wir nichts wieder. Okay, das ist merkwürdig. Oh, es gibt ein, ich sehe nur ein Teilchen. Vielleicht ist unser Frühstück zu viel zum Zeichnen. Multiplizieren wir diesen Wert mit einer kleinen Zahl. Okay, jetzt haben wir unsere Teilchen. Sie reagieren auf das Bild, was großartig ist. Aber ich möchte das nur ein bisschen erhöhen . Das ist nicht schlimm. Vielleicht sollten wir immer noch abnehmen. Ja, das ist viel besser. Was wir hier getan haben, ist, das globale Alpha mit der Helligkeit zu ändern das globale Alpha mit , die wir gerade berechnet haben. Indem Sie den Durchschnitt der roten, grünen und blauen Werte dieses Pixels im Originalbild nehmen . Und diese Werte gaben an, war die Helligkeit oder das Pixel. Und diese Helligkeit verwenden wir in unserem Pixeleffekt. Ich hoffe, dass Ihnen dieser Effekt gefallen hat. Und was hier aufregend ist, ist, dass wir diesen Effekt von nun an in jedem Bild verwenden können , das wir wollen. Okay? Also stelle ich dir auch die Wand oder die PNG-Datei in der Udemy zur Verfügung . Es reicht also aus, sich auch hier zu ändern um diesen Effekt auf dieses Bild anzuwenden. 18. 9addRGBColors: Ich glaube, das ist schon ein großer Effekt. Wenn Sie jedoch die Originalfarben anstelle von Schwarz und Weiß verwenden möchten , können wir dies ganz einfach tun. Lasst uns also unseren Code öffnen. Eine Verbeugung. Ich möchte ein neues RGB-Array erstellen. In Ordnung? Also werden wir RGB-Array wie Helligkeits-Array verwenden. Bei jeder Iteration dieser for-Schleife möchten wir auch rote, grüne und blaue Werte in ein Array schieben . Und das werden wir später benutzen. Also hier werde ich auch RGB-Array einschieben. Also werde ich JavaScript-String-Literale verwenden. Ich glaube, das ist der Name der Technik hier. Also stell einfach einen Rücken an Rücken hierher. Und wir können jetzt Texte, Text mit den JavaScript-Objekten wie diesem kombinieren . Und am Ende wird es als ***** zurückkehren. So sage ich Dollarzeichen mit dem Elternteil. Das ist Carla Paranthesis. Sie können jetzt rot eingeben, und dann können Sie einfach weiter stink tippen. Wir möchten also sagen, dass RGB, Rot und Rot von hier kommen. Roter Wert, was auch immer es ist. Dann wollen wir auch Grün importieren. Ich bin endlich blau und schließe die Klammer. Das sieht also gut aus. Wir könnten es auch so machen. Es ist das Gleiche. Rgb-Klammern plus Rot plus Komma plus Leerzeichen plus Grün und so weiter. Also denke ich, dass das viel lesbar ist. Deswegen habe ich das benutzt. Okay? Im Moment haben wir ein RGB-Array von jedem Pixel. Und innerhalb dieses Arrays werden Strings haben, die für RGB-Werte stehen. Und wenn Sie unten gehen, sagen wir CTX FillStyle schwarz und nicht dieses. Ttx FillStyle weiß Anstatt weiße Partikel zu züchten. Wir können mit den RGB-Werten arbeiten, die wir gerade gestoppt haben. Hier. Wir sollten dieselbe Logik mit Helligkeitsarray verwenden, da dies wiederum ein 1D-Array ist, das die gesamten RGB-Werte der Kameras enthält. Sagen wir also RGB-Array. Also werde ich das Gleiche benutzen. Eigentlich kopieren wir es einfach. Schließen Sie diesen Abschnitt. Kopieren wir das einfach und fügen Sie es hier ein. Okay, sagen wir das. Sehen wir uns das Ergebnis hier an. Eigentlich funktioniert es. Lassen Sie mich also das Originalbild öffnen. Es ist richtig. Deshalb werden unsere Partikel erzeugt. Stimmt's? Versuchen wir es mit Curry. Curry hat mehr Farben, oder? Versuchen wir es mit Curry. Okay, großartig. Jetzt haben unsere Partikel die exakte Farbe dieses Pixels. Das ist auch großartig. Also lasst uns einfach einen Morton ändern und wir werden fertig sein. Am Anfang. Wenn ich diese Aktualisierung speichere, siehst du das Bild des Codes, oder? Also lasst uns es einfach löschen, weil unsere Partikel zeichnen werden. Also haben wir es gesehen, weil wir hier einfach das Bild zeichnen. Um also ImageData zu erhalten, sollten wir das Bild zeichnen. Wir können die Schlacke nicht löschen, aber was wir stattdessen tun können, das Bild nicht behalten, nachdem wir die Bilddaten erhalten müssen wir das Bild nicht behalten, nachdem wir die Bilddaten erhalten haben. Im Gegensatz dazu. Wir können einfach klar rect sagen, beginnend von 00 bis nach oben, um uns zu beruhigen was? Unsere Zeichen. Wenn ich das also speichere, sehen wir am Anfang nichts und die Teilchen werden anfangen, es zu zeichnen. Okay, aktualisiere einfach nochmal. Wir sehen hier nichts, aber die Teilchen sind gezeichnet, okay, also das ist großartig. Ich glaube, es ist der endgültige Zustand dieses Effekts. Ich hoffe, es hat dir gefallen. Ich glaube, dies wird ein nützlicher Effekt für Ihre Erkältung sein. Unsere Reise. 19. 1NodeAndNPM: Wenn Sie Node JS noch nicht installiert haben, Sie ihn herunter. Sie können also keine Stühle von dieser URL herunterladen. Und Sie sollten die Version auswählen, die nach Ihrem Betriebssystem entspricht. für L1-CPU-Benutzer Seien Sie für L1-CPU-Benutzer versichert, dass Sie die Version der Arme sechs bis vier herunterladen . Oder wenn Sie Windows verwenden, können Sie es einfach hier installieren. Dann sollten Sie den Einrichtungsvorgang abschließen. Nach der Installation möchten Sie möglicherweise überprüfen, ob der Knoten vollständig installiert ist, indem Sie den Befehl verwenden. das zu tun, öffne ich ein Kommandozeilenterminal auf dem Mac. Sie können PowerShell-Fenster verwenden. In Ordnung? Sehen Sie, ob der Knoten installiert ist, können wir den Befehl naught dash V verwenden . Oder das ähnelt der Naught Dash Dash Version. Es zeigt uns also die Version von node.js. Oder Sie können auch prüfen, ob npm installiert ist , da wir npm verwenden , einen Paketmanager für NodeJS, und wir werden Bibliotheken mit MPM herunterladen. In Ordnung? Seien Sie versichert, dass Node und NPM installiert sind und Sie die Versionen davon sehen können , damit wir loslegen können. 20. 2InstallCanvasSketch: Nachdem wir jetzt installiert und PM installiert haben, können wir jetzt die Karma Sketch-Bibliothek installieren, die wir in Google verwenden werden. Beginnen wir mit Sketch gemeinsam mit Sketch und gehen auf diese Detailseite. Dies ist also der Schöpfer der Commerce-Skizze. Sie können die Bibliothek hier sehen. Wir verwenden diese Bibliothek, damit Sie die Dokumentation und Beispiele von hier unten überprüfen können . Wenn Sie unten gehen, sehen Sie eine Installationsanleitung für die Commerce-Skizze. Also haben wir das MPN bereits heruntergeladen. Wir können diesen Befehl benutzen. Kopieren Sie diesen Kommentar hier und gehen Sie zurück zum Terminal oder PowerShell, egal ob wir macOS oder Windows verwenden, die Liste Dash g am Ende macht es global. Wir laden es also nicht lokal in einen Ordner herunter, aber wir laden global herunter. Drücken Sie also die Eingabetaste und warten Sie auf den Download-Vorgang. Wenn Sie also Probleme wie ich haben, Fehler am Terminal, ist es nur der Berechtigungsschuh. In Ordnung? Sie können also am Anfang einfach sudo sagen und dann den Befehl einfügen, ist es, es wird dieses Problem lösen. Okay, tippe einfach sudo am Anfang ein und drücke dann die Eingabetaste. Okay, also laden wir jetzt auch die Sketch-Bibliothek herunter. Im Moment möchte ich nur ein bisschen über die Kommentare des Terminals sprechen . Ich möchte nur, dass du Befehle kennst , denen du folgen solltest . In Ordnung, also können Sie zuerst mit dem CD-Kommentar in ein Verzeichnis gehen. Sagen wir CD Desktop. Und jetzt sind wir auf dem Desktop. Sie können einen neuen Ordner mit Vektoren erstellen. Also nenne ich es Skizze. Wir haben gerade einen Skizzenordner auf dem Desktop erstellt und gehen dann in diesen Skizzenordner. Übrigens können Sie sehen, dass wenn ich SK tippe und die Tabulatortaste drücke, einfach automatisch abgeschlossen wird, oder? Weil es nur einen Ordner gibt, der mit s k, meinem Desktop, beginnt . Und so würde ich in dieses Verzeichnis gehen. Wenn du zurückgehen willst, kannst du einfach cd dot dot dot sagen. Also sind wir auf dem Desktop. Schon wieder. Wir werden in Scouts skizzieren, wir können eine Liste von Ordnern und Dateien abrufen, indem wir einfach ls eingeben. Derzeit haben wir also nichts im Sketch-Ordner. Darum kriegen wir nichts. Lasst uns also einen neuen Teststapel erstellen. Touch command erstellt also eine Datei. In Ordnung. Wenn Sie jetzt ls eingeben, können Sie den Test JS sehen, den wir gerade erstellt haben. Wenn du zum Jazz geschaffen hast und ls tippst, kannst du das auch sehen. Alice sollte also, Sie sollten die Liste der Dateien sehen. Es zeigt alle Dateien in einem Ordner an. Okay, das sind die grundlegenden Befehle, Kommandozeile, die wir verwenden werden. Also haben wir unseren Ordner erstellt. Lassen Sie uns unser erstes Skizzenprojekt erstellen. Übrigens, um es einfach zu visualisieren, möchte ich meinen Ordner in diesen Bildschirm bringen , damit Sie ihn gleichzeitig sehen können. Die Dateien in diesem Ordner. Wir brauchen sie nicht wirklich. Ich lösche sie einfach. Wir können jetzt unser Karma-Skizzenprojekt erstellen. Also lasst uns nachsehen. Geh wieder zurück nach oben. Wir haben den Befehl, Ihr Projekt zu erstellen. Öffne es auch im Browser. Aktualisieren Sie den Strich geöffnet. Also lasst es uns einfach einfügen. Kopieren wir es und fügen Sie es hier ein. Und drücken Sie Enter. Sie werden sehen, dass die Datei, die ich gerade erstellt habe. Und wir haben das Projekt auch im Browser geöffnet. Dies ist also ein Live-Server, was bedeutet, dass Sie im Terminal den Server sehen können, der unter dieser URL läuft. Wenn Sie diese URL in einen Browser kopieren, können Sie die Skizze sehen. 21. 3CanvasSketch: Wir können unsere Bilder jetzt im Browser sehen. Aber vorher gehen wir noch einmal in den Ordner. Sie können sehen, dass es drei Dateien erstellt. Unter Ordner. Wir werden den Code auf Skizze js schreiben. Also lasst es uns öffnen. Ich verschiebe die Datei einfach auf den Bildschirm. Lassen Sie mich diese Zeilen erklären. Die erste Zeile, das ist einfach nicht nur ein wichtiger Begriff. Diese Zeile ist also nur erforderlich und erfordert eine Komma-Sketch-Bibliothek , die wir gerade heruntergeladen haben. Und es behält das Ergebnis der Bibliothek in Canvas-Skizze variabel. Okay, damit wir Farbskizze aus der Bibliothek verwenden können . Und darunter gibt es Einstellungen. Einstellungen ist nur ein JavaScript-Objekt, das hier als Parameter der Commerce-Get-Funktion übergeben wird. Damit diese Bibliothek weiß, wie man sich mit den Einstellungen verhält, die wir gerade anpassen. Sagen wir also, ich möchte die Dimension ändern. Ich schaffe es hier. Sagen wir vorerst, wir wollen das Commonwealth in Form von A4. Du siehst, dass es in Form einer Vier ist. Oder wir könnten auch die Ausrichtung der Farben ändern. Als Landschaft. Zum Beispiel. Du machst das, du siehst, du drehst es einfach um die Farben. Okay? Das Einstellungsobjekt ist also für allgemeine Einstellungen vorgesehen, die Sie anpassen können. Für weitere Details. Sie können immer die GitHub-Seite überprüfen. In Ordnung, hier in der Dokumentation werden Sie auch weitere Beispiele sehen. Sprechen wir weiter über diese Funktion. Dies ist also eine Pfeilfunktion , die eine andere Funktion zurückgibt. Diesen Kontext werden wir jedes Mal verwenden, wenn wir etwas zeichnen wollen. Und wir können das Gewicht, auch die Höhe der Leinwand auch mit diesen Parametern erhalten. Wir könnten hier auch einige Parameter hinzufügen, aber das reicht vorerst. In Ordnung. Also, okay, genug für den theoretischen Teil. Lasst uns in Aktion treten und ein grundlegendes Rechteck zeichnen. Also schreiben wir den größten Teil unseres Codes hier unten. Okay, zuerst sollten wir FillStyle ändern, um zu mischen, weil es vorher weiß war. Du willst etwas zeichnen. Wir sollten zuerst den Weg beginnen sagen. Damit JavaScript weiß, dass wir anfangen zu zeichnen. Okay? Und dann können wir Kontexte aufrufen, die rect Funktion haben, um ein Rechteck zu zeichnen. Sie sollten also x, y, Breite und Höhe genießen. Und ich werde allen von ihnen Hunderte geben. Ich bin endlich hier. Wenn ich Kontexte sage, die sich füllen, spüren wir einfach den Bereich des Rechtecks. Oder wir könnten einfach Strich sagen , um einfach die Ränder des Rechtecks hervorzuheben. Also lasst uns den Unterschied sehen. Jetzt. Lassen Sie mich zuerst das Feld eingeben. Also werde ich es retten. Und wenn eine Sekunde, ja, können Sie sehen, dass es den Browser automatisch aktualisiert , weil es sich um einen Live-Server handelt. Wir müssen also nicht mehr auffrischen. Okay, das ist ein nettes Merkmal der Karma-Skizze. Ich benutze den Bildschirm so sortiert. Wir können den Code gleichzeitig schreiben und das Ergebnis sehen. Also haben wir hier Pille getippt. Du siehst, dass dieser Bereich besetzt ist. Und wenn Sie es nur streichen lassen, können Sie sehen, dass es sich jetzt um ein leeres Rechteck handelt. In Ordnung. Einer der Vorteile der Commerce-Skizze ist also, dass Sie einen Screenshot der Bilder machen können. Du schaffst es. Wir können dies tun, indem wir einfach Command S unter macOS drücken und wie unter Windows steuern. Das macht also Spaß. Sagen wir, wir wollen nur unsere Praxis sagen. Und ich drücke einfach Command S Und wenn Sie Windows verwenden, wenn Sie Windows verwenden drücken Sie bitte Strg S und sobald Sie das getan haben, wird nur ein Screenshot der Spalten erstellt. Und das Ergebnis geht einfach in den Download-Ordner auf Ihrem Computer. Das ist also das Ergebnis. Es ist nur ein PNG von, aber wir nennen es einfach. Wir könnten natürlich auch einen Screenshot wie diesen von dem Bild machen, das Sie wissen, es ist nur, das ist einfach nicht die beste Vorgehensweise, ist schneller und einfacher. Deshalb gefällt mir dieses Merkmal der kommunistischen Skizze. 22. 4PracticeRechtecke: In diesem Video haben wir eine neue Herausforderung. Wir werden versuchen, dieses Bild mit Como-Skizze zu zeichnen. Es gibt also 12 Rechtecke nebeneinander mit 100 Pixeln. Jep. Lasst uns versuchen, diese Ansicht mit einer Koma-Skizze zu zeichnen. Zuerst müssen wir also ein Rechteck erstellen, oder? Wir werden eine Fill-Funktion verwenden. Okay? Und wir möchten auch die Abmessungen des Rechtecks so ändern, dass es länger dauert. Versuchen wir, die Höhe zu ändern. Wir wollen kein horizontales Rechteck, daher sollten wir vielleicht die Breite verringern. Okay? Aber das ist kein guter Ansatz. Wir haben gerade statische Rollen auf Breite und Höhe gegeben. Dies ist kein guter Pinsel , denn wenn Sie die Bildschirmgröße ändern, reagiert das Rechteck nicht. In Ordnung? Was ist, wenn wir die Dimensionen ändern? Lasst uns also die Komas-Dimension ändern. Die Anzahl der Pixel in Kameras ist viel mehr. Also wird mein Rechteck viel kleiner. So können die Objekte auf diese Weise nicht dynamisch sein. In Ordnung? Aber was wir tun können, ist eine neue Variable zu deklarieren. Das wird sein, dies kann die Zeit sein, in Prozent der üblichen. Okay. Lassen Sie uns diese Zeile kopieren. Und auch für die Höhe werde ich es zerstörte Höhe nennen, Zeit treffen Prozent der Kardiomyozyten. Aber es sollte vielleicht sein, ich weiß es nicht. Versuchen wir es auch mit 0. Verwenden wir Vektoren und Vektorhöhenfunktion. Okay? Jetzt ist es also reaktionsschnell. In Ordnung. Dies ist ein besserer Ansatz. Aber unser Rechteck ist immer noch nehmen, Lass uns weitermachen und das Rechteck dünner machen. Vielleicht 01. Das ist zu viel. Versuchen wir es mit 05. Nicht schlecht. Wie wär's mit 0? Okay, das ist großartig. Wir haben ein Rechteck erstellt, aber was wir brauchen, ist 12. Oft. Anstatt 12 Rechtecke manuell zu erstellen, können wir for-Schleife verwenden. Hier. Wir laufen, um Ralph-Objekte zu erstellen. Lassen Sie uns also die Grenze der for-Schleife 12 und der geschriebenen Erhöhung mit einer in jeder Iteration angeben . Dann sollten wir diese Zeilen in dieser Form verschieben, oder? Also sollten wir in jeder Iteration mit dem Pad beginnen und Sie sollten in jeder Iteration ein Rechteck zeichnen. Und wir sollten sie auch füllen. Also lasst mich diese Datei einfach speichern. Im Moment haben wir zwei Rechtecke, aber sie sind alle übereinander. Okay, deswegen sehen wir nur ein Rechteck. Also lass mich sie einfach trennen. Also sollten wir den x-Wert ändern, oder? In jeder Iteration. Versuchen wir also, den x-Wert zu ändern. Wir sollten also, wir können Multiplikation mit KI machen. KI steigt also in jeder Iteration, und das ergibt eine Lücke von 100. Jetzt können wir sehen, dass viele Rechtecke, aber wir brauchen größere Fleischfresser. Das ist also großartig. Wenn du nicht sterben kannst, sollten 12 Rechtecke sein. 12345678910. Hart. In Ordnung? Und es gibt auch einen Abstand von 100 Pixeln zwischen jedem Rechteck, oder? Weil wir den I-Wert in jeder Iteration erhöht haben. Und das multiplizieren wir mit Händen. Es gibt eine Lücke von 100. 23. 5CanvasTranslate: Vor dem nächsten Shape möchte ich über einige Funktionen sprechen. Lasst uns zuerst über Carlos translate sprechen. Das ist also unsere Canvas. Am Anfang. Wir haben einen Ursprungspunkt, der 00 ist. also in diesem Zustand Wenn wir also in diesem Zustand den Code auf der linken Seite schreiben, die Spiel-Pads und das grundlegende Rechteck, das bei 0054 beginnt, haben die Höhe geschrieben. Es wird eine Form wie diese zeichnen. Dann werden wir Charles spät sehen. Die Kühe unter Verwendung von Farben übersetzen Funktion. Parameter werden für x und für y behandelt. Es funktioniert so. Also mu kamm war Ursprungspunkt ist 100100. Okay, wir übersetzen nur auf dem Kurs. Unsere neue Herkunft wird also zu den Übersetzungspunkten. Sie sehen es also nicht im Browser. Aber unter der Haube funktioniert es so. Also dieser Zustand, nachdem Sie unzählige Ihr Feld übersetzen, sagen Sie Million Pad und zeichnen Sie ein neues Rechteck bei 0. Es wird dieses Rechteck auf den neuen Ursprung zeichnen. In Ordnung? Aber auch hier sehen wir es nicht im Browser. Wir sehen nur diese beiden Rechtecke. Wenn der Code wie auf der linken Seite ist. In Ordnung. Am Ende übersetzen wir nur, dass die Kuh sie einfach verschoben hat und den Ursprung in einem neuen Übersetzungspunkt begonnen hat. Okay, also lasst es uns im Code sehen. Lass es uns versuchen. Zunächst einmal möchte ich nur den Füllstil ändern. Es sollte schwarz sein. Dann sagen wir, es wurde ein Pad. Zeichnen wir das erste Rechteck aus dem 0,0054 mit 54 Bytes. Kontexte füllen sich. Sie werden sehen, dass wir ein Rechteck haben, den Ursprung. Dann wollen wir auf den Punkt in Hollywood übersetzen . Also an dieser Stelle, wenn wir sagen, ändern zu lassen, Ordnung, denn wir übersetzen sie nur 12 Blei Zinn. Kopieren Sie diese Zeilen erneut, fügen Sie sie ein und speichern Sie sie. Jetzt können Sie sehen, obwohl wir sagen, aus dem Ursprung ziehen, es beginnt hier. Stimmt's? Dies ist das Ergebnis. 24. 6CanvasRotate: Letztes Video sehen wir, wie wir die Farben übersetzen können. Sehen wir uns also an diesem Beispiel an, wie wir den Kohleverlust drehen können . Also sind wir in diesem Zustand und auf dem Weg, um zu übersetzen. Was ist, wenn wir es auch nach Columbus drehen? In der Rotate-Funktion verwenden wir also math.pi geteilt durch ein AD, da es den Bogenmaß erweitert, nicht Grad. Um von Grad in Bogenmaß umzuwandeln, verwenden wir diese Formel. Also muss ich übersetzen. Wenn wir uns drehen, wurde das Auto so gedreht. Unser neues Rechteck sollte also ungefähr so sein. Weil wir die Leinwand drehen und das Rechteck nach dieser Drehung zeichnen. Okay, versuchen wir das in unserem Beispiel. Geh zurück zum Redakteur. Also hier, nach der Übersetzung, möchte ich auch den Kontext drehen. Also möchte ich es auf Grad drehen. Aber denken Sie daran, ich erwarte Bogenmaß nicht Grad. Also sollten wir es umwandeln. Und die Funktion ist, dass wir Pi geteilt durch 180 verwenden werden. Es gibt einige Funktionen aus Bibliotheken wie Coma-Skizze, die diesen Begriff machen , diese Konvertierung automatisch. werden wir später benutzen. Seien Sie jedoch vorerst sicher, dass Sie von Grad in Bogenmaß umwandeln. In Ordnung? Wenn ich es also speichere, wirst du sehen, dass sich das zweite Rechteck gedreht hat. 25. 7SaveRestore: Aber alles, was nach dieser Rotation entstanden ist , wirkte sich auf. Es gibt also ein Problem. Weil wir einfach die Farben drehen. Ich möchte vielleicht nicht alles andere nach dieser Linie drehen , oder? Es sollte eine Möglichkeit geben , die Farben wiederherzustellen, oder? Und das gibt es. So können Sie den Block zum Speichern und Wiederherstellen verwenden. Jedes Mal, wenn Sie nur einen Checkpoint, einen Speicherpunkt haben möchten , können Sie Kontext sagen, würde ich sagen. Also. Lassen Sie uns einfach vor dem Übersetzen und vor dem Drehen hier hinzugefügt. Wir wollen sagen, weil wir einfach nur in die Anfangsphase gehen wollen , sagen wir mal. Nachdem wir also Kontexte gesagt haben, Dr. Restore, können wir einfach ein neues Rechteck erstellen . Dieses Mal. Lasst es uns dorthin schaffen. Wir nehmen 70. Und Sie werden sehen, dass es am ursprünglichen Ursprung der Farben erstellt wurde. Also gehen wir im ersten Bundesstaat zurück. Okay? Versuchen wir es also, lasst uns versuchen, den Punkt nach der Übersetzung zu sagen. Dieses Mal werden wir in die Phase zurückkehren, die nach der Übersetzung, aber vor der Rotation. Wir werden also keine Rotation haben. Aber wir beginnen bei Hunderten und Hunderten. Lass es mich retten. Du siehst also, dass ich jetzt einfach den Füllstil ändern kann. Tourette sortiert können wir leicht sehen. Das ist also einfach nicht rotiert, sondern beginnt bei einem 100100, weil wir hier einfach Punkt sagen. Und während wir es wiederherstellen, geht es einfach zurück. Zu diesem Zeitpunkt. 26. 8Randomness: Ich möchte eine Weile über Zufallsprinzip sprechen. Kreatives Codieren. Zufallszahlen sind ziemlich praktisch. Wir verwenden sie, um zufällige Muster, Objekte und auch Animationen zu erzeugen . In JavaScript gibt es also eine integrierte Methode, um Zufallszahlen zu generieren . Vorerst. Sie sind nicht diese Zufallszahl. Vorerst. Loggen wir es einfach im Kolossalen ein. Sparen Sie es auf. Und im Browser, wenn Sie mit der rechten Maustaste klicken und sagen, dass es gepackt war. Hier, geh in die Konsole. Sie können das Ergebnis sehen. Es gibt also nur eine Zufallszahl zwischen 01. Jedes Mal, wenn ich diese JavaScript-Datei sage, ändert sich die Zufallszahl. Und wir können sehen, dass es da sein wird, es wird zwischen 01 sein, oder? Wenn Sie also etwas zwischen 010 wollen, können wir diesen Wert einfach mit zehn multiplizieren, dann wird die Ausgabe auf zehn erweitert, oder? So können wir also Zufallszahlen generieren. Verwenden wir in einem Beispiel eine Zufallszahl. Lassen Sie uns also zufällige Rechtecke erstellen. Also werde ich wie immer mit dem begonnenen Weg beginnen und runter. zuerst den Füllstil ändern, Lassen Sie uns zuerst den Füllstil ändern, um mich zu erpressen. Und ich möchte auch die Linienbreite 20 Pixel ändern. Jetzt können wir also Rechtecke wie diese erstellen. Lassen Sie mich einfach, ja, Moment möchte ich nur den x- und y-Wert zufällig machen. Also werde ich sagen, dass ich sie hier nicht bedrohen würde. Und wir können es mit Teer-Dateinerven multiplizieren. Es kann also zwischen 0500 und auch für y liegen. Also mal sehen, jedes Mal, wenn ich sage sich die Rechtecke ändert und es absolut zufällig ist, haben wir keine Ahnung, wo sie sich regenerieren wird. In Ordnung? Wir könnten sie auch in Zahlen für die Breite und Höhe des Rechtecks verwenden . So ist es, es ist völlig zufälliges Rechteck durch Verwendung von Mathe-Lüftern. Also lasst uns weitermachen und nur ein einziges Rechteck erstellen, aber es hat nicht davon. Um das zu tun, werde ich eine neue for-Schleife erstellen, die Rechtecke des Townsend. Ich verschiebe das einfach hierher. Also lasst uns vielleicht nicht über Schlaganfall fühlen. Und ich werde auch nur Carlos-Größe für X- und Y-Werte machen, aber die Werte für Breite und Höhe verringern. Also lasst uns einfach speichern und das Ergebnis sehen. Zu diesem Zeitpunkt ändert sich das Bild jedes Mal, wenn Sie die Datei speichern . Weil wir Zufallszahlen verwenden. Wenn Sie ein schnelleres Ergebnis haben möchten, können Sie einfach eine Zeile mit dem Ergebnis kommentieren. Oder Sie könnten auch die Linienbreite zufällig machen. Vielleicht ist es zwischen dem 05. 27. 9AnimationBounce: Kleiner als oder gleich 0, wählte auch die Geschwindigkeit. Das heißt also, das ist das 0,4 y, y beginnt hier, beginnt hier. Wenn es also gleich 0 ist, sollten sie zu diesem Zeitpunkt die Geschwindigkeit einfach in die entgegengesetzte Richtung machen. Also speichere ich das einfach auf. Und lasst uns die Geschwindigkeit fünf machen, um es schnell zu sehen. Okay? Ja, es funktioniert. Das wird also, dies ist eine Endlosschleife, da unsere Return-Funktion unendlich aufgerufen wird. Und der Ball wird einfach zwischen diesen beiden Seiten springen. 28. 10CircleClass: In diesem Video erstellen wir ein echtes Projekt mit Farbskizze. Am Ende wird das endgültige Projekt so aussehen. Sie sehen also ein Video, das wir über die Animation mit Farbskizze besprechen werden. Okay, wenn alles fertig war, öffne deine Kommandozeile. Und wir werden mit der Erstellung eines neuen Skizzenprojekts beginnen. Ich nenne es Project warm. Js, Strich, Strich, Strich, Strich offen. Es öffnet sich also einfach in einem Browser. Und lass mich auch den Ordner aufrufen. In Skizzen haben wir also einen Punkt js projiziert. Hier. Wir haben eine brandneue Spalte oder Skizze vorhanden. Und diese Gliederung wurde bereits in früheren Videos erklärt, sodass wir anfangen können, Code zu schreiben, um unser Projekt zu erstellen. Was wollen wir also zunächst einige Kreise schaffen, oder? Also möchte ich eine Circle-Klasse erstellen , da wir mehrere Verknüpfungen erstellen werden. Also vielleicht Hunderte von Kreisen. Lassen Sie uns deshalb zuerst eine Klasse wie Eric Klassen erstellen . Weil es einen Konstruktor braucht. Circle benötigt X -, Y - und Radiuswerte, um erstellt zu werden. Und dann sage ich, dass dieser Punkt x gleich x ist, dieser Punkt y ist gleich y, dieser Radius entspricht zwei Radius. Und diese Zeilen machen nur die Akte der Kreisspalten vom Parameter aus, wenn es Zeitverschiebung ist. Okay? Jetzt können wir einfach meinen Sarco verursacht haben. Sarco. Und ich gebe dir 100100 für x- und y-Werte, wie hier, 50 für den Radius des Kreises. Okay? Wenn ich sage, können Sie an dieser Stelle nichts im Browser sehen , weil wir den Kreis erstellt haben. Aber es gibt eigentlich nichts, was den Kreis auf der Säule genau dort getrieben den Kreis auf der Säule genau dort hat, wo sie Honorlock nicht benutzt haben. Wir haben keine Strich-Entität verwendet. Also um das zu tun. Wir brauchen auch eine Methode der Circle-Klasse, und ich nenne diese Methode gefahren. Okay? Die Drohne muss einen Kontext-Parameter annehmen. Es wird den Kontext verwenden, um den Pfad zu beginnen. Nacht haben wir im Gegenzug in früheren Videos gemacht. Und dann wird es den Kreis mit dem Bogen zeichnen. Jetzt können wir also den x-Wert des Kreises verwenden, y Wert außerhalb des Kreises. Radius des Kreises. Jetzt möchte ich, dass der Startwinkel Standard 0 ist. Okay? Weil wir niemals einen Halbkreis wollen. Wir wollen immer einen vollständigen Kreis. Deshalb werde ich auch feststellen , dass Pi mal 2 standardmäßig. In Ordnung? Und dann sagen wir schließlich einen Kontext-Strich. Also spar dir das auf. Und trotzdem denke ich, dass es im Browser ist , weil wir noch nicht Draw angerufen haben. Also mein Kreis, fuhr Während wir Drop-Funktion aufrufen und speichern, funktionieren immer noch die Highlights. Das liegt daran, dass wir den Kontext vor dem Militär in der Auslosungsfunktion angeben . Okay? Im Moment sieht man, dass der Kreis da ist. Vielleicht könnten wir diese Füllung machen, nur um es leicht zu sehen. Wir sollten auch Kontexte dot FillStyle in Schwarz ändern. Jetzt ist unser Kreis da. Okay, aber der früheste Schlaganfall, und ich möchte Lima einfach ändern. Lass es uns acht schaffen. Im Moment vernünftig. Okay, also haben wir unseren ersten Kreis mit der Circle-Klasse erstellt . Im nächsten Video werden wir mehrere Kreise erstellen und die Kreise beibehalten. Und dann können wir anfangen, auf Kreisen zu iterieren. 29. 11GenerateCircles: Leute, jetzt ist es an der Zeit , Kreise zu erschaffen. Wir wollten nur einmal die Kreise IRA erschaffen. Deshalb werde ich es im Gegenzug nicht umsetzen. Weil dies viele Male aufgerufen wird. C ändert die Einstellungen für die Animation. Dort rufe ich Kreise an. Kreise Array. Ich schaffe hier Kreise. Und dann brauchen wir eine Schleife, einfach zu offensichtlich. 100 Kreise in Delta gepaart. Also werde ich bei jeder Iteration einen neuen Kreis in die NRA schieben. Und lass mich diesen Tab einfach erweitern. Also möchte ich Zufallswerte für x, y und Radius. Nun, okay, ich sage einfach zufällige Zeiten r, was 2048 ist. Ich verwende diesen Wert für x- und Alpha-Y-Radius. Ich werde einfach, ich weiß nicht, vielleicht ist 20 eine großartige Grenze dafür. In Ordnung. Wir drängen 100 Kreise in die Kreisvermessung und ihre Eigenschaften sind vollständig, gelaufen. Okay, also lasst uns das aufheben. Wir können sie noch nicht sehen, weil wir Joel-Funktion von Kreisen nicht genannt haben. Also hier drin, anstatt einen Kreis zu erstellen, verwenden wir einfach Kreise für jede Funktion. Jeder iteriert in jedem Element von Kreisen Array. Also können wir einfach „Circle“ sagen. Wir können einen Kreis sagen, der den Kontext vorangetrieben hat. Wenn ich es speichere, siehst du rechts, die zufällig generierten Kreise auf unserem Canvas befinden. Jedes Mal, wenn ich sage, jedes Mal, wenn ich die Seite aktualisiere, die Kreise generiert. 30. 12AnimateCirlces: Jetzt, da wir unsere Kreise geschaffen haben, ist es heute an der Zeit, sich zu bewegen. Wir werden dies tun, indem wir die Como-Skizzenanimation verwenden. Wir geben jedem Kreis eine Geschwindigkeits-, X- und Y-Richtung. Also lasst uns weitermachen und es nochmal machen. Konstruktor-Funktion. Wir brauchen keine Parameter, da wir die Geschwindigkeit standardmäßig erzeugen. Also sage ich dies, notiere Velocity x bei diesem Gedanken und warum diese an Alice verloren gegangen sind, sei auch zufällig. Deshalb rufe ich match für die zuvor multiplizierte Funktion auf . Dieser Wert wird also 04 sein. Aber diese Kreise sollten auch nach links gehen. Manchmal. Wir wollen einen Wert zwischen minus 22. Um das zu tun, sagen wir einfach minus zwei mit dem Ergebnis. Also haben wir gerade den Altcoin verschoben. Der Ausdruck gibt hier eine Zahl zwischen minus 22 zurück. Ich werde auch für den Y-Wert sagen. In Ordnung? Jeder Kreis hat also eine Geschwindigkeit auf x und y, wobei es sich um völlig Zufallszahlen handelt. Lasst uns willkommen heißen. Sie möchten nur nächste Schritt darin besteht, eine neue Move-Funktion zu erstellen. In der Circle-Klasse rufe ich eine neue Funktion auf. Und diese schlechten Stimmungsstörungen. Wenn ein Rabatt darauf, wie wir das machen, ändert man einfach den x-Wert des Kreises mit der Geschwindigkeit x. Also fügen wir der Position in jedem Frame rezidiviertes dx hinzu , weil wir das kleine nennen werden Funktion im Gegenzug und führe mich aus aktiviere die Animationseigenschaft. Die Rückkehr wird als ovaler Rahmen bezeichnet. Move-Funktion wird also als Flugwerk bezeichnet, und x wird in einem Reframe geändert. Tu das auch für y. Perfekt. Also jetzt ist unser Klassenkreis schon gerade, wir sollten einfach die Funktion und die return-Anweisung hier verschieben , nachdem wir den Kreis gezeichnet haben, wollen wir uns auch bewegen. Diese Schleife würde in allen Kreisen iterieren. also schreiben, bewegt sich diese Zeile in jedem Frame. Aber denken Sie daran, Innovationen bei Emotionen zu entwickeln. Du änderst einfach die Einstellungen. So wie das. Ich will es nicht einfach sagen, großartig. Kreise bewegen sich nur nach dem Zufallsprinzip. 31. 13BounceCircles: Die Kreise bewegen sich, was großartig ist. Aber ich möchte hier bemerken , dass sie außerhalb der Leinwand gehen. Irgendwann werden wir also Kreise haben. Was Sie stattdessen wollen, ist, sie in den Kameras zu behalten. Lassen Sie uns also einen Code schreiben, dass die Kreise auf den Bällen springen werden. Wir brauchen eine ausgewogene Funktion. In der ausgeglichenen Funktion überprüfen wir den x-Wert der Kreise und vergleichen ihn mit der Breite. Also brauchen wir hier eine if-Aussage. Wenn dieses x kleiner als oder gleich 0 ist, bedeutet das, dass wir die linke Seite der Leinwand gehen oder dieser Punkt x größer als die Wurzel ist. Denken Sie daran, dass wir von innerhalb der Klasse nicht auf die Breite des Handels zugreifen können . erstelle ich einfach einen Parameter. Wenn also das X kleiner als 0 oder größer als ein Whit ist, springt der Kreis, oder? Und wie balancieren wir aus? Es ist so einfach. Wir sollten nur die Richtung des X ändern und das können wir tun, indem wir mit Minus eins multiplizieren. Wenn Sie mit einem Zweierstreit gut laufen, sagen wir mal, wenn Sie sich erholen möchten, sollte die Geschwindigkeit minus zwei betragen. Machen wir das einfach auch für das Y. Wenn es kleiner als 0 oder wenn das y größer als die Höhe ist, sollten wir auch den Höhenparameter haben. Wenn dies also der Fall ist, schimpfen wir außerhalb der Grenzen. Also sollten wir y minus eins multiplizieren. Okay? Dann können wir einfach die Bounds-Funktion aufrufen. Für jeden. Ich übergebe die Breiten- und Höhenparameter. Okay? Das hat nicht funktioniert. Okay, also habe ich einfach geschrieben, anstatt Anleihen zu schreiben. Okay, du kannst sehen, wie der Zirkus jetzt auf die Rollen springt , die er nicht nach draußen gehen kann. 32. 14EuclideanDistance: Wir haben bereits eine schön aussehende Animation. Machen wir es schöner und fügen die Linien zwischen den Kreisen hinzu. Tun Sie dies, wir müssen den Abstand zwischen zwei Kreisen berechnen und eine Linie in dieser Entfernung zeichnen. Es gibt eine bekannte Formel für die Entfernungsberechnung zwischen zwei Punkten. Die führende Distanz funktioniert so. Nehmen wir an, wir haben zwei Punkte und wir wissen, dass es sich um X- und Y-Werte handelt. Um den Abstand zwischen ihnen zu berechnen, sollten Sie sich zuerst den Unterschied zwischen X- und Y-Punkten ansehen . Also sollten wir zuerst X1 minus X2, Y1 minus Y2 herausfinden. Dann können wir die Okklusionsformel verwenden , um den Abstand zwischen zwei Punkten zu ermitteln. Schauen wir uns dieses Beispiel an. Wir haben zwei Punkte auf der Koordinatenebene. Und unsere Leinwand arbeitet mit Pixeln. Wir können also denken, dass es ähnliche gibt, was bedeutet, dass Sie diese Punkte als Kreise in meinem Projekt betrachten können. Zwischen zwei Kreisen beträgt der Abstand auf der x-Achse drei. Und der Abstand auf der Y-Achse ist für die Formel, wir können leicht feststellen, dass der Abstand zwischen zwei Punkten fünf beträgt. Also werden wir diese Formel in verwenden um die Entfernung unserer Kreise zu berechnen. 33. 15DrawLines: Lassen Sie uns unser Projekt fortsetzen und Linien zwischen Kreisen ziehen. Im Gegenzug verwenden wir for-loop oder iterieren jeden Kreis. Okay? Also werde ich eine neue for-Schleife benutzen. Aber dieses Mal verwende ich die Abkürzung und ändere den Index auf i und wir schießen diese letzte Grenze mit den Charcoals. Ich habe gedankt. Okay, ich plus, außerdem bin ich damit zufrieden. Also werde ich diese Zeile auch hier machen, Kreis eins sollte auch diese ändern. Okay? Jetzt haben wir eine for-Schleife, die jetzt 400 Mal laufen wird . Und wir behalten das Kreisobjekt nur in einer neuen Variablen. In dieser for-Schleife. Ich möchte auch eine weitere for-Schleife erstellen. Dies wird eine Schleife innerhalb einer Schleife sein, und rufen wir an, nennen wir es j. Diesmal. Wir sollten hier auch vier Kreise schleifen und diesen ebenfalls ändern. Und ich nenne diese Konstante das Kreiswerkzeug. Gerade jetzt. Wir suchen nach Kreisen und halten die Kreise in einer Konstante. Und dann suchen wir nach Schaltungen. Schon wieder. Wir halten den Kreis auch auf eine Konstante. Also werden wir zweimal im Charcoals-Array iterieren. Hier drin. Wir könnten eine Grenze zwischen diesen beiden Kreisen ziehen, oder? Aber wenn du es so machst, wird der Bootskreis manchmal derselbe Kreis sein. an, dass Kreis eins in der ersten Iteration Nehmen wir an, dass Kreis eins in der ersten Iteration die erste Kohle im Array ist. Der Kreis zwei ist auch der erste Artikel. Es ist also kein bester Weg in Bezug auf die Effizienz. Und wenn Sie auf diese Weise eine Linie ziehen, werden wir auf diese Weise eine Linie auf beiden Seiten ziehen. Also von Kreis 0 bis Kreis eins, und auch von Kreis eins, um 0 zu zeigen. Es ist also auch nicht effizient. Deshalb möchte ich aus diesen Gründen den j-Wert von I plus eins starten. Und auf diese Weise werden die Kreise nicht wieder gleich sein. Denn wenn ich 0 bin, wird j eins sein. Und wenn ich eins bin, wird j zwei sein und so weiter. Also zeichnen wir nicht zweimal und wir werden nicht zeichnen, werden nicht versuchen, eine Grenze zwischen demselben Zirkus zu ziehen. Okay? Auf diese Weise machen wir es Optionen. In Ordnung, versuchen wir nun, eine Linie zwischen diesen beiden einzigartigen Kreisen zu ziehen. Wie immer beginne ich mit dem Anfangspfad. Und dann haben wir hier eine neue Funktion, die ein Kontext ist, der zu diesem ziemlich selbsterklärenden übergegangen ist. Wir werden hier X- und Y-Werte machen. Wie übersetze diesen Kontext. Wir gehen zu diesem Punkt, damit wir an diesem Punkt mit dem Zeichnen beginnen können. Also kreise ich eins ein, kreise einen Punkt y sortiert ein. Wir sind jetzt an der Position des Kreises eins. Und was wollen wir tun, ist einen Linienkreis, eine Zahnposition zu zeichnen, oder? Also gleich dem, x ist gleich y. Und schließlich wollen wir den Schlaganfall. Lasst uns leere Zeilen loswerden. Speichern wir das und sehen wir uns das Ergebnis an. Okay? Eigentlich war es großartig. Es bedeutet, dass das, was wir gerade geschrieben haben, funktioniert, aber die Linienbreite ist zu groß. Ändern wir also auch die Linienbreite. Vielleicht hier. Aber ich will behalten, also will ich die Kreise behalten, oder? Also füge ich die Lunge hier hinzu. Aber für die Zeilen reicht einer. Das sieht besser aus. Der nächste Schritt ist, dass wir Linien zwischen allen Kreisen zeichnen. Das ist zu voll. Und der nächste Schritt wird die Berechnung des Abstands zwischen Kreisen und das Zeichnen der Linien entsprechend diesem Abstand sein. Wenn also zwei Kreise weit genug sind, wird es keine Grenze zwischen ihnen geben. 34. 16GetDistance: Wir werden den Abstand zwischen zwei Kreisen anhand der euklidischen Formel finden , die wir gerade besprochen haben. Lu, dass ich eine neue Funktion erstellen werde. Und ich benutze die Pfeilfunktion. Nennen Sie es ja, holen Sie sich Abstand. Diese Funktion benötigt vier Pi-Router, X1, X2, Y1 und Y2. Denken Sie also an die Formel. Wir wussten also den Abstand zwischen x-Werten. Wir müssen zwischen Y-Werten distanzieren. Wir können die sqrt-Funktion zurückgeben. Dies ist die Wurzel des Wertes innerhalb der Parameter. Also sollten wir a mit einer Macht von zwei und plus multiplizieren . Dieser Wert gibt also den Abstand zwischen zwei Punkten zurück wenn Sie X- und Y-Werte der Punkte übergeben. Lasst uns also weitermachen und diese Funktion nutzen. Hier. Ich werde eine neue Variable dist deklarieren und diese Distanzfunktion verlieren. X- und Y-Werte sind also Kreise. Also werde ich sagen Kreis einen Punkt x, zwei Punkt x. So lang, warum kreisen Sie zu y? Jetzt haben wir die Distanz. Und was wir hier brauchen, ist eine if-Aussage. Also sollten wir die Entfernung überprüfen. Sagen wir, wenn es weniger als 250 ist, okay? Wenn also zwei Kreise näher als 250 liegen, wollen wir eine Linie ziehen. Also werde ich diese Zeilen diese IF-Anweisung verschieben. Wenn ich also spare, können wir jetzt sehen, dass wir keine Linien zwischen allen Kreisen zeichnen, aber wir laufen nur zwei Kreise sind sehr nahe. 35. 17ResponsiveLineBreite: Ich möchte auch die Linienbreite in Bezug auf den Abstand zwischen Kreisen ändern . Ich habe gesehen, dass die Band zwei Kreise näher kommt. Die Breite wird Picker sein und dann auseinander gehen. Die Linie wird ein Tumor sein. Okay, um das zu tun, mehr in diese if-Anweisung, werden wir hier die Linienbreite ändern. Also möchte ich einen Höchstwert von zehn. Fangen wir mit zehn an. Und wir werden die Linienbreite in Bezug auf die Entfernung verringern . Aber die Distanz beginnt bei 250. Teilen wir es durch 25 auf. Dieser Wert wird also maximal zehn sein. Okay? Und es kann 0 für den Mindestwert 0 Zeile sein , was Tau sein wird. Und lasst uns das aufheben. Und jetzt können Sie sehen, dass unsere Linien in Bezug auf die Entfernung dicker und dünner werden . Also eine Sache, die ich auch reparieren möchte Die Linien sind innerhalb der Kreise sichtbar. Sie können sehen, dass es von der Mitte des Kreises beginnt, aber ich möchte, dass es von außerhalb des Kreises beginnt. Okay, also sollten die Linien im Zirkus nicht sichtbar sein. Um dies zu tun, können wir das Innere der Kreise mit weißer Farbe fühlen . Okay? Also können wir es in der gefahrenen Funktion machen. Füllen wir einfach den Stil, ändern Sie den Füllstil hier in Weiß. Und wir können einfach Treibstoff sagen. Jedes Mal, wenn Sie eine Linie zeichnen, zeichnen wir auch den Kreis. Und wenn Sie den Kreis innerhalb des Kreises mit Weiß füllen , werden die Linien immer labiert. Wenn ich es also speichere, sehen wir, dass es keine Linie innerhalb des Kreises gibt. Okay? Aber das macht unsere Zeilen, weißt du, zehn oder so. Ich ändere auch die Linienbreite. Vielleicht 12. Okay, das ist großartig. Es liegt also an dir. Von jetzt an. Wir können das Liniengewicht ändern. Wir können unseren Linienwert tatsächlich ändern, Sie können die Grenzen der Kreise ändern oder die Geschwindigkeit der Kreise ändern und so weiter. Es liegt also an dir. Probieren Sie es aus. Ich hoffe, Ihnen hat dieses Projekt gefallen. 36. Erste Schritte (Audio Visualizer 1): Willkommen zurück in diesem Abschnitt. Wir werden einen erstaunlichen Audio-Visualizer , der auf jeden Audioeingang reagiert. Wie du siehst, springen die Bälle, wenn ich rede, wenn ich schneide oder wenn ich Musik spiele. Und dann geht's dir immer noch gut. Wenn du bereit bist, das zu tun. Gehe zum nächsten Video, um zu beginnen. 37. 2SettingUp: Wie immer beginnen wir von der Kommandozeile aus. Also lass mich meins mitbringen. Ich bin gerade auf dem Desktop. Gehen wir in den Projektordner, in dem ich meine Projekte speichern und speichern werde. Wenn ich also hier tippe, kannst du unsere alten Projekte sehen. Erstellen wir also hier einen neuen Ordner. Und nennen wir es Audio Visualizer. Geh in diesen Ordner. Lasst uns einfach großartige Akten machen. Wie üblich benötigen wir 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 zur Visualisierung. Nennen wir es Visualizer dot js. Okay, wir sind bereit zu gehen. Wenn Sie sich an den Befehl erinnern oder diesen Ordner im Breitencode öffnen. Wenn Sie in dieser Version wie ich verwenden, können Sie einen Befehl wie diesen eingeben. Oder wenn Sie eine normale Version von Risikocode verwenden, können Sie einfach den Befehl spacetime nennen. Wenn wir diesen Befehl eingeben, öffnet er den Ordner in West-Code, damit wir loslegen können. 38. 3HTMLTemplate: Beginnen wir das Projekt mit dem Importieren HTML5-Vorlage. Wie immer. Also hier werden wir diesmal JavaScript-Dateien verwenden. Lassen Sie uns zunächst den Titel ändern. Also möchten wir diese beiden JavaScript-Dateien importieren , HTML Boilerplate. Also werde ich ein neues Skript erstellen und ein Swash-Mikrofon JS und auch Visualizer JS machen . Denken Sie also daran, dass wir die Mikrofonklasse im Visualizer verwenden werden. Die Reihenfolge ist also wichtig hier. Mikrofonskript sollte ein Bogen des Visualizer-Skripts sein. Okay, also bitte um anzufangen. Gehen wir in die JS-Datei des Mikrofons und wir speichern sie. 39. 4CompleteHTML: Diese Skript-Tags sollten nicht auf Hut sein, aber sie sollten im Körper sein. Kurz nachdem wir unzählige haben, oder? Ich nenne die ID von Michael war unzählig. Obwohl eine weitere Sache, die wir hier hinzufügen sollten, die CSS-Datei ist. Wir haben es fast vergessen, aber es gibt eine andere Möglichkeit, Dateien hinzuzufügen. Also kannst du es drinnen mit Gott machen. So können wir auf dieses neue Dateisymbol klicken und Sie können einfach den Namen eingeben. Okay, und lasst uns diese CSS-Datei auch so verknüpfen. Okay, also müssen wir keine neuen Dateien von der Befehlszeile aus 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. 40. 5MicrophoneJS: Anstatt die gesamte Mikrofon-JS-Datei zu schreiben, kopiere ich den Code einfach und füge ihn hier ein. Also habe ich das im Internet gefunden , um Mikrofondaten zu erhalten. Dies ist eine Boilerplate , mit der Sie alle Ihre Audio-Visualisierer verwenden können . Also müssen wir die Details hier nicht genau wissen. Es wird nur die Mikrofondaten, den Audioeingang, abrufen. Du musst 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 also einfach schnell erklären, was wir hier haben. Dies ist nur eine Gelegenheitsklasse namens Mikrofon. Hier haben wir den Konstruktor. Die erste Eigenschaft ist also zu identifizieren, 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, alles wenn religiös. Wir haben also keine Bibliotheken von Drittanbietern hier. Und anscheinend gibt diese Methode ein Versprechen zurück, weil sie dann die Funktion „After get user media“ verwendet, die im Grunde auf diese Zeile wartet. Und wir werden rennen, nachdem es etwas zurückgibt. Wenn es also erfolgreich zurückkehrt, werden diese Zeilen aufgerufen. Oder wenn es einen Fehler gibt, warnen Sie einfach den Fehler im Browser. Okay? Und wenn es fertig ist, werden diese Zeilen aufgerufen. Also haben wir einen Analysator hier. Und diese Zeilen entscheiden über die FFT-Größe, Pufferlänge und so weiter. Ändern Sie schließlich die initialisierte Eigenschaft nach dem Verbinden mit dem Mikrofon auf true. Und sonst wird es nur den Fehler im Browser warnen. Okay, also haben wir hier auch zwei Methoden. erste bekommt die Proben. Es ist also das Ergebnis , das wir verwenden werden. Das zurückgegebene Objekt ist ein Array und seine Länge beträgt die Hälfte der FFT-Größe. Also haben wir eine 50 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 während der Visualisierung des Audios verwenden . Okay, also denk darüber nach. Wir können 256 Bälle haben, auf die jeder Ball auf ein Element in diesem Array reagiert. Okay? Sie werden es besser verstehen, wenn wir es tatsächlich tun, tun und in die Praxis umsetzen. Und schließlich haben wir die Volumenfunktion, die Gebärmuttermethoden erhält. Und ich glaube, es ist ziemlich selbsterklärend. Diese Methode gibt die Lautstärke der Audioeingänge zurück. 41. 6MicData: Jetzt, da unser Mikrofon fertig ist, können wir den Code in der Visualisierung schreiben. Öffne diese Datei. Das erste, was ich hier machen möchte, ist Ihnen die Daten zu zeigen, die wir vom Mikrofon erhalten. Um dies zu tun, erstelle ich eine neue Variable, ein Mikrofon. Aus der Mikrofonklasse. Wir hatten keine Parameter im Konstruktor. Wir können ein neues Mikrofon oder Objekt wie dieses erstellen. Lassen Sie uns auch diese Animate-Funktion erstellen. Weil wir die Mikrofondaten kontinuierlich in Echtzeit abrufen wollen. Und wie Sie wissen, müssen wir einen Animationsrahmen anfordern , um diese Funktion zu animieren. Und wir müssen es auch irgendwo im Code nennen. 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 prüfen, ob das Mikrofon bereits initialisiert ist. Denken Sie also daran, wir haben eine Eigenschaft und es ist wahr, wenn Eris Dinge im Mikrofon gemacht hat. Wenn das Mikrofon initialisiert ist, holen wir uns einfach Beispiele mit der Samples Funktion. Und das hier. Vorerst wir uns einfach in der Konsole angemeldet. Also speichere ich das und gehe einfach in index.HTML. mit der rechten Maustaste auf Öffnen mit Live Wenn Sie diese Option nicht haben, können Sie die Live Server-Erweiterung immer von Erweiterungen in VSCode herunterladen . Wir haben das schon einmal in diesem Kurs gemacht. Also 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 mein Bildschirm so weiß. Okay, also läuft unser Code 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, das Mikrofon zu verwenden, okay? Und sobald Sie es akzeptiert haben, können Sie den Audioeingang verwenden. Okay, also schauen wir uns das eine Logbuch hier an. Es ist also ein Array. Wie wir besprochen haben. Länge beträgt 256 und die Werte sind nur einige kleine Werte. Diese Werte sind, jeder von ihnen repräsentiert etwas. Ich bin kein richtiger Sound-Experte. Und ich weiß nicht, ich weiß eigentlich nicht, was diese Werte sind. Aber Sie können sich das vorstellen, als wären es Frequenzen oder Signale, die den Klang genau an diesem Punkt erklären. Wir können diese Werte verwenden , um den Klang zu visualisieren. Und diese Werte sind wirklich kleine Werte. Es gibt etwa zwischen minus vier und plus vier. Und normalerweise sind sie weniger als eins. Es können also auch negative Werte oder positive Werte sein. Und ich glaube, wenn die Werte steigen. Jetzt bekommen wir ein paar interessante Sounds. In Ordnung? Wenn ich also nicht spreche, sind die Werte 0. Zum Beispiel gibt es an dieser Stelle 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 Grafiken zu erstellen. Okay, also lasst uns anfangen, unseren Handel zu nutzen , um ein paar Bilder zu erstellen. 42. 7BallClass: Lasst uns anfangen, unsere Bilder mit der Erstellung von Karl Marx zu zeichnen. Wie üblich erhalten wir Element für ID aus der HTML-Vorlage. Lassen Sie mich die ID meiner Farben überprüfen. Kopieren und fügen wir es hier nur um sicher zu sein, dass die Namen passen. Lassen Sie uns auch CTX erstellen, diese Kontextmethoden. Und wir wollen 2D. Und schließlich können wir das Gewicht auf Fensterbreite und Fensterhöhe einstellen . In Ordnung. Warum sind jetzt Anpassungen fertig? Wir können damit beginnen, die erste Klasse zu schaffen. am Ende Was wollen wir am Ende in unzähligen Bolzen, oder? Oder Kurzbefehle. Ich nenne sie einfach Bälle , weil sie springen werden. In diesem Projekt. Deshalb erstelle ich eine Klasse mit dem Namen Ball. Und wie immer werden wir einen Konstruktor dieser Klasse haben. Es wird zwei Parameter erhalten, x und y. Und diese Werte werden die anfänglichen X- und Y-Positionen des Balls sein , die es spawnen wird. Lassen Sie uns also einfach diesen Punkt x Punkt y zuweisen. Warum wollen wir also hier, also erstellen wir eine Schüssel und die ist ein vollständiger Kreis. Und wenn Sie sich erinnern, tun wir dies mit CTX Augmented. Was wir tun müssen, ist der Radiuswert. Deshalb brauchen wir auch einen Radius. Aber ich möchte es nicht aus Parametern bekommen weil wir nur alle Radien der Bälle sagen wollten . Also verwende ich einfach einen Standardwert von acht. Dann entscheiden wir uns auch über seine Farbe. Du kannst ändern, was immer du willst. Sie können Blau, Rot, Grau verwenden. Und ich denke auch, dass ich das später erklären werde, aber ich möchte einfach nur, lassen Sie uns diesen Teil einfach überspringen. Fügen wir diese Eigenschaft hinzu. Und was ich hier brauche, ist Sprung für SSH und auch falsch. Okay, denn Bälle werden fallen und sie werden laut Audio in Detroit springen. Aber in der Anfangsphase, zu Beginn des Projekts, werden die Bälle fallen. Also fangen sie von oben an und sie werden vor allem fallen. Deshalb möchte ich die Fallkraft nicht 0 machen, sondern stattdessen mache ich es einfach 0.1. In Ordnung? Wo ich mit dem Konstruktor fertig bin, fügen wir nur eine weitere Eigenschaft hinzu, aber ich füge sie hinzu, wenn die Uhrzeit korrekt ist. Wie üblich müssen wir auch Methoden zeichnen. Es ist eingeschlossen, dass sie FillStyle nimmt. Ich werde dies dieser Farbe zuweisen denn wenn wir die Farbe ändern wollen, wird der Ball auch in dieser Farbe sein. 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. Dies werden sie versuchen, für den Radius zu verwenden. Der Startwinkel beträgt 0 und der Winkel wird Pi mal zwei sein , da wir immer einen vollständigen Kreis zeichnen, der wie eine Schüssel aussieht. Schließlich können wir CTX-Pille sagen. Okay, also solltest du mit diesen Zeilen schon vertraut sein. Wir haben zuvor viele Praktiken dazu gemacht. Was wir also brauchen, was wir sonst noch brauchen, sind zwei weitere Methoden. Also wollen wir nur einen formatierten und einen Sprung. Das war's für die Ballklasse. Und wir werden später den Kontext der Fall- und Sprungmethoden schreiben . 43. 8GenerateBalls: Okay, wir haben die Ballklasse. Lasst uns weitermachen und den Ball generieren , damit wir sie auf Säulen sehen können. Um das zu tun, brauchen wir ein Array. Es wird am Anfang leer sein. Und wir brauchen eine Funktion , die die Bälle erzeugt. Ich benutze hier die Pfeilfunktion. Okay? in dieser Funktion zuerst dieses Protokoll löschen, Lassen Sie mich in dieser Funktion zuerst dieses Protokoll löschen, damit wir es nicht sehen. Also lasst uns putzen. Schließen Sie die Konsole. Okay. Also im Januar falsch, dieses Mal werden wir etwas anderes machen. Ich möchte die Länge des Balls Arrays nicht statisch definieren. Also möchte ich nicht einfach einen 100-Boss erschaffen. Sagen wir mal. Was ich stattdessen will, ist, die Bälle zu kreieren, die auf den Carlos-Fuß reagieren werden. Also was ich meine ist, wenn Kohle warum ist, weißt du , dass ich zum Beispiel weniger Bälle zum Ante haben sollte, oder? Wenn wir nun größere Commonwealths haben, können wir 100 Anleihen haben. Okay? Irgendwann wird das Land des Balls Array dynamisch sein. Um das zu tun, lassen Sie uns einfach zuweisen. Erstellen wir einfach eine neue Variable, Distanz. Dies wird den Abstand zwischen den einzelnen Ballgittern klären. Also möchte ich einfach nur eine Party oder den Anfang machen. Und wir berechnen einfach, wie viele Bälle ich benutzen sollte. Carlos-Breite geteilt durch Distanz. Okay? Was ergibt Sinn, oder? Da B eine Breite von 1 Tausend 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 und das Gewicht des Balls geben wird. Aber ich werde hier nur minus zwei sagen weil wir Abstand vom Anfang und am Ende haben wollen . Die Anzahl der Bälle wird so berechnet. Okay, jetzt reagiert es also 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 schleifen. Wir wollen die Menge von Bosch erkennen, dass dies oft oft 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 nennen wir einfach einen neuen Ball. Und wir müssen hier nur x- und y-Werte angeben. Für x- und y-Werte. Für y selten ist es wirklich einfach. Wir können einfach einen statischen Wert angeben. Zum Beispiel 500. Okay? Aber welcher x-Wert? Wir müssen die Distanz wieder nutzen. Der erste Ball sollte also Distanz sein, oder? Wenn ich also eine Verspätung sage, sollte es 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 mal Distanz sage, glaube ich, dass es einen Chef direkt nebeneinander unter dem Kosmos geben wird. Es wird also sowohl während des Kalten Krieges geben, es wird am Anfang Lücken und auch zwischen jedem der Bälle geben. Das wollen wir. Und wenn ich das speichere, passiert nichts, weil wir die generische Bälle noch nicht aufgerufen haben. Wenn ich es wie gesagt nenne, werden die Bälle erzeugt, aber wir können sie noch nicht sehen , weil unsere Farbe was ist? Eigentlich möchte ich nur den Hintergrund in Schwarz ändern, aber lasst es uns zuerst überprüfen. Durch Ändern der Farbe der Bälle. Haben wir das Balllied, Carlos? Das bin ich nicht genau. Das liegt daran, dass wir die Eier noch nicht gezeichnet haben. Also generieren wir nur 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 fett eine Draw-Funktion. Jetzt haben wir die Eier auf der Leinwand. In Ordnung? Unsere Funktion funktioniert also. Wir müssen die Mauern hier nicht zeichnen. Ich lösche es einfach. Und ich werde die Farbe auch wieder weiß machen. Und lasst uns in style.css gehen, sehr realer Lead, nur Hintergrundfarbe. Also hier möchte ich alles mit Asterix auswählen. Lassen Sie uns einfach Marge und Polsterung 0, Box-Sizing, Randbox abgleichen . Dies sind also nur Standard. Wir machen dieses Array fast in jedem Projekt. Und auch. Wenn Sie es bemerken, haben wir jetzt Balken auf der rechten Seite. Das ist also nur, das macht diese Zeilen den Kumpel scrollbar. Wir wollen das nicht. Deshalb sage ich einfach „Overflow“. Mal sehen. Also gehen die Bars. Schließlich ändern wir uns einfach. Die Säule war nackter Boden, Boden, schwarz oder draußen. 44. 9FallingBalls: Alles klar Leute, lasst uns die Eier ziehen und sie fallen lassen. Also zuerst animiere die Funktion. Wenn das Mikrofon initialisiert ist, möchte ich die Kugeln zeichnen. Um das zu tun genannt Balls Array. Und benutze für jede Methode. Lasst uns hier einfach einen Ball passieren , der die Bälle durchläuft. Und ich wollte nur „Ball gezeichnet“ sagen. Wenn wir das machen, siehst du die Eier in Komas. Und beachten Sie, wenn wir die Säulengröße ändern, die Anzahl der Kugeln Ketten, so dass wir beide Kühe versuchen. Und da wir hier eine Animation machen werden, möchte ich nur die Kegel in einem Reframe löschen. Ich werde dies mit der Clear rect-Funktion tun. Übergibt x und y von 0 bis zu Carl Woese, Breite und Höhe. Sie können also sehen, dass wir nette Anleihen haben. Wenn wir sie auch zum Fallen bringen. Kurz vor dem Unentschieden. Wir können sehen, wie die Eier fallen. Aber zuerst sollten wir auch nach Funktion suchen. das zu tun, verliere ich Fallformen und wechsle die Bälle. Warum? Eigentlich werde ich sagen, dass dieser Punkt y plus dieser Punkt-vollen Kraft entspricht, die den Y-Wert des Balls in jedem Frame aktualisiert und die volle Kraft hinzufügt. Wenn ich das speichere, sieht man, wie Bälle nur langsam ziehen. Lassen Sie uns das natürlicher aussehen. Im wirklichen Leben, wenn etwas fällt, nimmt die volle Kraft zu, oder? Wegen der Schwerkraft. Deshalb werde ich auch alle Kraft in jedem Frame erhöhen , 0,05. So können Sie jetzt 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 Mauern fallen, wenn sie es nur sind. Y ist weniger als Colemans Höhe geteilt durch zwei. Wenn also nur der Chef oder eine Schüssel, Hälfte der Farben, werden sie fallen. Sonst hören sie auf. Genau so. Lass es mich einfach noch einmal auffrischen. Also haben sie von Position Bifans angefangen. Und sie fingen an zu fallen, weil wir in jedem Frame Fallfunktion aufrufen. Und wir haben nur eine Einschränkung, bei der beide y-Position höher sein sollte als die Höhe von Carlos geteilt durch zwei. Deshalb gibt es, es gibt Top. Wenn sie diesen Punkt erreichen. 45. 10JumpingBälle: Wenn die Kugeln für jeden an dieser Stelle, so dass es auffällt, auf den Boden schlagen. Wir wollen sie zum Springen bringen, oder? Um das zu tun, brauchen wir hier eine andere if-Aussage. Wir müssen prü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. Lasst uns hinzufügen. Eine Immobilie fällt. Und es wird am Anfang wahr sein, denn der Chef wird in den Ausgangszustand fallen. Wenn also die Bälle nicht fallen, was bedeutet, dass Bälle fallen, ist die Eigenschaft falsch. In diesem Fall wollen wir, dass es springt. Alles klar, lass uns nach oben gehen und hier eine Sprungmethode deklariert. Also werde ich zuallererst, was wir tun wollen, ist, die volle Kraft auf 0 zu bringen, weil wir vorher eine volle Kraft hatten. Und es wird sich auf unsere Y-Position in jedem Frame auswirken. Wenn also der Fall und wenn das Halten der Eigenschaft falsch ist, wollen wir zuerst alle Viere 0 machen. Dann können wir jetzt unser y beeinflussen. Wir springen Kraft. Diesmal werde ich also Minus gleich verwenden , denn im Koordinatensystem des Handels, wenn der Ball steigt, sinkt ReLu. In Commonwealths ist 0 hier oben und es nimmt zu, wenn die Bälle sinken. Wenn Sie also möchten, dass ein Ball springt, sollten wir seinen Y-Wert verringern. Also möchte ich verringern, warum RelU die Kraft springen würde. Und um es natürlicher zu machen, werde ich wieder dieselbe Logik machen. 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 die Kraft gefallen sind. Okay, jetzt sehen sie also identisch aus. Sie sind einfach symmetrisch zum anderen. Okay, versuchen wir es mal. Hat nicht funktioniert. Und das liegt daran, dass unsere Sprungkraft 0 ist. Lasst uns das ändern. Also haben wir eine Sprungkraft. Ball. Okay, also sollten wir vielleicht auch wechseln Ball ist fallende Eigenschaft weil wir es nie falsch machen, oder? Es stimmt immer. Also werde ich hier eine andere Aussage hinzufügen. Und mach Ball fällt zu falsch. Und lass es uns versuchen. Es. Springt einfach für eine Weile. Siehst du das? Lass es mich nochmal laufen lassen. Und dann stetig fallend. Okay? Dies liegt also daran, dass diese if-Anweisung eine ausführt, obwohl sie fallende Eigenschaft falsch ist. Also sollten wir hier auch eine Einschränkung geben. Die Überprüfung, ob es fällt und fallend ist, oder? Also wenn der Ball, so haben wir nach Funktion gerufen, wenn nur der Ball in fallendem Zustand ist und seine Y-Position geringer ist als die Koma-Site. Also lasst uns das aufheben. Und vielleicht sollten wir das auch tun. Vielleicht sollten wir uns einfach auf else-if ändern. Und fügen wir einfach eine Einschränkung hinzu. Wenn Kugeln die y-Position größer ist als die Ursache Höhe geteilt durch zwei. Das sieht besser aus, oder? Weil wir nur springen wollen, wenn nur sein y-Wert größer ist als die Carlos-Höhe geteilt durch zwei. Mit anderen Worten, in der Mitte der Spalten. Okay, also werden wir später beide Sprengkraft hier ändern und hier wenn der Ball. Im Grunde nehmen wir also nur die Sprungkraft ab, oder? Wenn der Ball, kommentieren wir diese Zeile. Dann gehe ich nicht runter. Wenn ich nicht kommentiert bin, geht er unter. Wir verringern also auch die Sprungkraft, und sie beginnt bei 0,1, was ein negativer Wert sein wird. Anstatt also einen Sprung , lassen wir sie einfach machen, lassen wir sie einfach wieder fallen. Machen wir also einfach diesen Wert zehn, sagen wir 400. Nichts ändert sich. Kommentieren wir einfach diese Zeile. Das hat gerade, habe ich hier einen Tippfehler gemacht? Also sollten wir seine Y-Position in jedem Frame ändern. Also lasst uns in die Konsole gehen. Ich vermisse etwas. Wenn also der Ball fällt, sollten wir das tun, sollte dieser Baumstamm gerade in unserem Rahmen ertrinken. Und es ist in der Tat, dass wir in der Konsole sehen können, oder? Die Sprungmethode wird also jetzt reframe genannt und warum heißt sie. Loggen wir uns auch hier ein. Die Sprungkraft. Lasst uns das löschen. Die Sprungkraft ist also 0. Warum passiert das? Denn wenn wir fallen, machen wir einfach Sprungkraft 0, oder? Am Anfang haben wir es also zehn geschafft. Aber jedes Mal, wenn es gerade fallen ließ , wird die Kraft 0, also springen sie nicht. Eigentlich sollten wir es hier nicht zuweisen. Wir sollten es zuweisen, dass der Wahlstatus endet, was hier ist, oder? Wenn der Ball zieht, blieb falsch. Wir sollten auch eine Sprungkraft deklarieren. Ich mache einfach Tanh hier. Jetzt kannst du sehen, dass unsere Eier gerade springen. Aber vielleicht sind zehn zu viel. Lass es uns auch schaffen. Okay, großartig. Aber wir haben gerade ein anderes Problem. Die, sie kommen nie zurück. In Ordnung? dies zu verhindern, füge ich hier einfach eine weitere Einschränkung hinzu und if-Anweisung. Wenn der Ball springt, sollten wir irgendwann den entsetzlichen Zustand einschalten, richtig, damit er zurückkommt. Und ich will es einfach machen. Wenn gesprungen wird die Kraft 0. Okay, also ist es im wirklichen 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, oder Sprungkraft wird 0 und wir fangen an zu fallen. Stimmt's? Also lasst uns die gleiche Logik machen. Logik hier. Wenn die Sprungkraft 0 oder weniger als 0 wird, lassen Sie die Bälle erneut fallen. Aber um dies zu tun, sollten wir den Kommentar abnehmen, diese Linie, die abnimmt, die Kraft springt, neu formiert. Und wenn es kleiner als 0 ist oder gleich 0 ist, sollten wir den fallenden Zustand erneut auf wahr schalten. Also lasst uns das versuchen. Okay. Jetzt können wir sehen, dass unsere Bälle bei jedem Sprung springen, oder die Sprungkraft und die Fallkraft steigen und abnehmen wie natürlich. Und irgendwann, am Spitzenpunkt, wird die Sprungkraft 0. Wenn das passiert, fangen sie wieder an zu fallen. Okay? So können Sie also eine Schwerkraft-Logik ausführen, ohne eine Spiele-Engine und alles andere zu verwenden. Mit reinem Vanilla JS. Ein weiteres Team, das wir hier hinzufügen möchten, das ist 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. 46. 11AudioInput: Okay Leute, sind Bolts springen. Und es ist Zeit für den aufregendsten Teil , nämlich Jim, sie auf den Audioeingang reagieren zu lassen . Also sollten wir diese Linie offensichtlich ändern, weil wir die Mikrofondaten nur mit Kraft überspringen wollen . Okay, also bekommen wir schon Mikrofondaten. Und denken Sie daran, Samples Array Samples Bereich enthält 256 Elemente. Und wir haben aber auch ein paar Bälle, aber unsere Anzahl an Bällen ist nicht spezifisch. Es hängt von Canvas ab. Wir könnten also mehr als 256 haben oder wir könnten weniger haben. Also werde ich nicht genau mit ihnen übereinstimmen. Aber wir könnten, wenn wir irgendwie indexiert werden könnten , Array beinhalten, oder? Wir könnten jede Probe einem Ball zuweisen. So wie die erste Probe. Das erste Element in der Probenerhebung kann also die Sprungkraft für den ersten Ball sein. Und das zweite Element in der Probenuntersuchung kann die Sprungkraft für den zweiten Ball und so weiter sein. Ich glaube, es wird großartig sein. Und um das zu tun, sollten wir den Index der Bälle darin für jeden verfolgen . Und wenn Sie nur für 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 der Wert des aktuellen Elements. Wir nennen es einfach Ball. Wenn Sie die Sekunde überschreiten, ist dies optional. Aber du kannst bestehen. Und es ist, es gibt den Index des aktuellen Elements zurück, aber wir suchen nur. Also lasst uns weitermachen und es benutzen. Um das zu benutzen, füge ich einfach eine Klammer neben Ball hinzu. Ich sage „indexiert“. Jetzt kann ich in diesem Futter einschließen. Als Nächstes. Lassen Sie mich einfach die anderen Log-Zeilen löschen. Wir haben also nur dieses. Speichern wir das und überprüfen wir die Konsole. Sie sehen also, dass es bei 0 beginnt und in jeder Iteration zunimmt. Okay, damit wir diesen Indexwert verwenden können. Und hier drin möchte ich Sample anrufen, tut mir leid. Versuchen wir einfach den Beispielindex. Versuchen wir einfach, Samples für Sprungkraft zu verwenden. Sie jedoch daran, dass Samples nur wirklich, sehr kleine Werte sind. Lassen Sie uns also auch die Konsole protokollieren, loggen Sie sich bei den Konsolenbeispielen an Sie sehen also aus, als würden sie nicht springen. Aber wenn man genau hinsieht, sieht man einige kleine Bewegungen. Und das liegt daran, dass unsere Samples wirklich kleine Zahlen sind. sollten wir also, und es gibt auch negative Werte. Wir wollen also kein Negativ der Sprungkraft. So können wir die Matt-ABS-Funktion verwenden , um die Zusammenfassung des Wertes zu erhalten. Okay? Wenn wir das tun, haben wir keine negativen Werte mehr. Und was wir auch tun wollen, ist diesen Wert mit zehn zu multiplizieren, vielleicht weil sie zu klein sind. Lassen Sie uns sie positiv machen und mit zehn multiplizieren und sehen, was passiert. Wenn ich Console schließe. Wir brauchen keine Schlösser mehr. Sagen wir das. Gerade jetzt. Du kannst dich sehen und ich spreche, die Bälle springen nur und es sieht so aus, als wäre es genug, mit zehn zu multiplizieren. Sie könnten diesen Wert natürlich erhöhen, wenn Sie mehr wollen, springen Sie Fox. Oder wenn du verrückt werden willst, kannst du auch verrückt werden. Aber denken Sie daran, wenn sie zu viel gesprungen sind, werden sie außerhalb der Leinwand gehen. Also behalte ich es zehn. Und ich glaube, es ist erledigt. Versuchen wir es also mit einer anderen Lösung. Sie bewegen sich einfach wieder. Und an dieser Stelle könntest du tatsächlich, es liegt von jetzt an dir. Du könntest also die Farben ändern. Oder Sie könnten hier auch eine Methode hinzufügen. Nein, ändere die Farben. Und Sie können hier vielleicht einen Parameter machen, wie einen Wert. Und Sie könnten die Farben entsprechend dem Samples Index ändern . So können die Bälle mit Audio die Farben ändern. Und hier können Sie RGB-, RGBA-Werte verwenden und Parameter übergeben. Du kannst alles machen. Du kannst die Sprungkraft wechseln, wenn du schnellere Bälle willst. Oder was du tun kannst. Sonst. Wenn du höhere oder größere Bälle willst, kannst du den Radius einfach so ändern. Aber denken Sie daran, auch die Entfernung zu ändern. Nur um sicher zu sein , dass sie nicht kollidieren. Es macht sie wieder kleiner. Oder du könntest sie so sehr kleiner machen. Es liegt an dir. Spielen Sie mit den Werten und fügen Sie einige neue Funktionen für alle hinzu. 47. 1GettingStarted: In diesem Abschnitt erstellen wir einen weiteren Audio-Visualizer, den Sie auf dem Bildschirm sehen können. Lass mich Musik spielen, damit du den Effekt besser sehen kannst. Job. Wenn dir der Effekt gefällt. Ich arbeite nicht mit dem nächsten Video, in dem wir mit diesem Projekt beginnen werden. 48. Einrichtung für Audio Visualizer 2: Ich habe das Projekt erstellt und alles ist gleich mit dem vorherigen Audio-Visualizer. Ändern Sie diesmal einfach den Titel mit dem Audio-Visualizer in. Also haben wir auch Style-CSS verknüpft. Auch hier haben wir einen Handel mit der ID Mike obdachlos. Wir haben Mikrofon JS und Visualizer, genial und apo. Diese HTML-Datei mit Live-Show vorbei, 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 das brauchen wir in diesem Projekt. Auch Style-CSS ist mit dem vorherigen identisch. Verwenden Sie einfach Asterix, um alles auszuwählen , um Rand und Polsterung anzupassen. Machen Sie einfach eine versteckte Überlaufeigenschaft des Körpers und machen Sie den Hintergrund schwarz. Also haben wir die Breite und Höhe des Handels noch nicht definiert. Deshalb hat unsere Cola's standardmäßig diese bhutanische Höhe. Also werden wir es im Visualizer JS ändern. Wenn Sie mit diesen beiden Dateien bereit sind, können wir mit der Visualisierung eines JS beginnen. 49. 3CreateFigures: Beginnen wir wie immer, Farben zu erstellen. Verwenden wir unsere Commerce-ID hier. Lassen Sie uns auch CTX erstellen. Passen wir an, was zu Window gehört. Und auch Höhe, die wir in unseren Höhen kennen. Unser Handel ist jetzt vollständig angepasst und deckt alle Browser auf ihrem Bildschirm ab. Und als Nächstes wollen wir das Mikrofon einem neuen Mikrofon zuweisen. Und denken Sie daran, dass wir diese Klasse vom Mikrofon js aus nennen. Und wir können es so machen. Wir importieren nichts, weil Mikrofon JS nur eine Schüssel Visualizer JS ist. Und am Ende wird das gesamte JavaScript in diese HTML-Datei umgewandelt. Also haben wir tatsächlich Mikrofoncluster im Visualizer JS. Und lassen Sie uns prüfen, ob alles funktioniert, indem einfach eine Animate-Funktion erstellen. Fordern Sie Animationsframe animate an. Und denken Sie daran, diese Blogs bieten uns eine Animation, indem sie diese Animationsfunktion in jedem Frame aufrufen . Hier möchten wir also prüfen, ob das Mikrofon bereits initialisiert ist. Diese Eigenschaft. Wenn das Mikrofon initialisiert wird, möchte ich die Samples bekommen. Beispiele. Mikrofon , das Samples enthält. Loggen wir es einfach ein, um zu sehen , ob alles funktioniert. Ich öffne die Konsole mit f 12th. Wir haben keine Proben. Also lass mich einfach aufmachen. Das lebt wieder vorbei. Vielleicht gibt es eine Kiste. haben wir nicht immer noch. Es liegt daran, dass wir die Animate-Funktion nicht My schlecht aufgerufen haben. Okay. Jetzt können wir die Proben sehen, wenn ich rede. Es wird den Audioeingang richtig bekommen. Jetzt können wir dieses Konsolenprotokoll loswerden. Wir können jetzt mit der Erstellung unserer Klasse beginnen. Dieses Mal. Ich möchte hier Zahl keine Klammern nennen hier Zahl keine Klammern weil es verschiedene Methoden haben wird. Es wird also einstellbar sein. Es wird Autobahn, es wird Teleportieren und Verkettungsmethoden, einige Dinge wie diese. So einfach ist es also nicht. Deshalb habe ich beschlossen, es Zahl zu nennen. Aber wie immer brauchen wir einen Konstruktor. Beginnen wir dieses Mal erneut mit X und Y, aber wir werden die Anzahl der Parameter später erhöhen. Dieses Delta x entspricht also x, dieser Punkt y entspricht y-Größe. Ich verwende acht und dann vier Anfangsgrößen. Aber denken Sie daran, dass wir diesen Wert mit dem Mikrofoneingang ändern werden . Okay? Das reicht also für den Moment. Zeichnen wir einfach diese Zahl. Und das ist alles. Es gibt nichts Neues für uns. Das tut also, dieser Punkt FillStyle ist diese dunkle Farbe. Dx beginnt auch Pat dx arc, weil wir wieder Verknüpfungen zeichnen möchten. Also werde ich X4 Kohle passieren x. Warum? Und Größe. Diesmal habe ich den Radius nicht angerufen. Man könnte auch Größe sagen, das Gleiche. Also 0 für Startwinkel. Und math.pi mal 24 und Winkel, was mit 260 in Grad genau das Gleiche ist, aber wir sollten hier ein paar Bogenmaß geben. Also verwenden wir diesen Ausdruck. Und schließlich sollten wir fühlen, was wir gerade zeichnen. Okay, lass mich das aufheben. Und unten sollten wir Kreditfinger Fehler machen. Um das zu tun, brauche ich eine for-Schleife. Lassen Sie uns den Index auf i ändern. Ich möchte zehn Zahlen erstellen. Also werde ich sagen, dass Zahlen in die Nähe der Zahl kommen. Sie sollten also alle mit dieser Syntax vertraut sein, oder? Wir haben das alles viele Male gemacht. So neue Figur, aber dieses Mal , anstatt ein bestimmtes x und y zu machen möchte ich diese Zahlen zufällig spawnen, anstatt ein bestimmtes x und y zu machen. Okay, deshalb rufe ich die Math.Random-Funktion auf. Und ich multipliziere es mit Color Suite, so dass der x-Wert zwischen 0 und Spalte süß liegt. Es kann überall im Kongress sein und den gleichen Panzer auch für den Y-Wert machen . Und dieses Mal werden wir Komas Höhe sagen. In Ordnung? Versuchen wir also einfach, die Zahlen an dieser Stelle zu zeichnen. Zuallererst möchte ich Ziele klären. Wir werden in Zukunft einige Animationen machen. Lasst uns also die Ruhe klären, die ganzen Kommas im Flugwerk. Und jetzt können wir versuchen, Zahlen zu zeichnen. Dafür. Ich möchte über Figuren-Array iterieren, oder? Und ich werde für jeden benutzen, sage ich Figur. Und für alle Zahlen möchten Sie die Draw-Methode aufrufen. Okay? Also haben wir keine Farbe gemacht. Lassen Sie uns einfach eine helle Farbe machen , damit wir die Zahlen auf den Spalten haben. Und jedes Mal, wenn ich diesen Browser aktualisiere, wird es uns eine zufällig generierte positionierte Figur gerade machen , weil unsere X - und Y-Werte zufällig sind. Aber sie sollten in den Unzähligen sein. Also sollten wir in jedem Rahmen braune Zahlen haben , genau 12345678910. 50. 4CircularMovement: Das nächste, was ich mit diesen Zahlen machen möchte ist, ihnen eine kreisförmige Bewegung zu geben. Wie kreisförmige Bewegungen , weil es Objekte wie ein Leben aussehen lässt . Okay, lasst uns also kreisförmige Bewegungen für unseren Sprecher implementieren . In der Figur-Klasse erstelle ich eine neue Methode, die als kreisförmige Bewegung bezeichnet wird. Also hier bin ich eigentlich können wir Kosinus- und Sinusfunktionen verwenden. Wir sollten also den x-Wert und den Y-Wert der Zahlen mit einigen Werten ändern , damit sie einen kreisförmigen Pfad zeichnen. Stimmt's? Wenn wir also nur den x-Wert ändern, sagen wir nicht Kosinus. Also brauchen wir hier auch einen Zähler, sich zwischen 0360 schleifen wird. Es wird also sein der ganze Grad bei 0 beginnt und bis zu 360 geht. zu tun, werde ich den Zähler in dieser Zahl implementieren. Es wird also bei 0 beginnen. Und dann werde ich es erhöhen. Jede kreisförmige Bewegung am Ende. Eigentlich. Beginnen wir Contour plus und führen Sie es größer als oder gleich 260 aus. Ich schaffe es wieder 0. Stimmt's? So wird diese Kontur den Rückruf der kreisförmigen Bewegung erhöhen. Und wenn es diese 260 Grad erreicht, wird es wieder auf 0 gehen und von dort aus beginnen. Schon wieder. Das brauchen wir eigentlich. Jetzt rufe ich diesen Zähler hier an. Aber denken Sie daran, dass die Kosinusfunktion nicht nach Grad sucht. Stattdessen sucht es nach Lesen. Wenn Sie sich erinnern, Radiant auf Grad Formel x geteilt durch 180 mal Schlammkuchen. Okay? Machen wir dies also für unseren Zähler geteilt durch 180 Mal Pi, damit wir sicherstellen, dass er einen vollständigen Kreis zieht. Lassen Sie mich es einfach so speichern und kreisförmigen Moment in einem Reframe aufrufen. Mal sehen, was passiert. Unsere Eier bewegen sich also, oder? Was ist großartig. Also kostet MC, diese Kostenfunktion gibt einen Wert zwischen minus eins und plus eins zurück. Und es wechselt nur zwischen diesen Werten. Und wir aktualisieren x mit diesen Werten, damit unsere Bälle kontinuierlich nach rechts und links gehen. Lasst uns das Gleiche auch für Y machen. Aber dieses Mal lass uns benutzen, ich werde tatsächlich dazu veranlasst, wieder Kosinus zu benutzen, um zu sehen, was passiert. Ich kann es einfach hier kopieren und einfügen und speichern. Sie können also sehen, wann wir die gleiche Funktion geben warum sie einen solchen Pfad zeichnen wird, wie diagonal, weil wir gleichzeitig auf x und y ansteigen, zum gleichen Wert, mit dem der gleiche Wert. Wenn Sie dies jedoch ändern, um es zu unterschreiben und zu speichern, können Sie sehen, dass sie einen Moment einen Kreis zeichnen. Dies ist der Schlüssel, um einige kreisförmige Bewegungen wie diese zu machen. 51. 5ChangeSizeWithMicInput: Okay Leute, rufen wir weiter an. nächste Schritt besteht darin, den Mikrofoneingang zur Bewegung der Kreise hinzuzufügen . Eigentlich nicht der Moment, sondern die Größe der Schaltkreise, die wir wollen. Mach sie größer. Wenn es einen Input zu hohen Kriegen gibt. Und ihre Größe hängt von der Spracheingabe ab. Sie werden je nach Mikrofoneingang immer kleiner. das zu tun, füge ich eine neue Methode in der Figurenklasse hinzu. Genau hier. Lassen Sie uns eine neue Methode hinzufügen und Sie sind ein Name der Änderungsgröße. Also das wichtig ist, braucht einen Parameter. Ich nenne es Wert. Und dieser Parameter stammt aus dem Samples Array, das im Hochformat mit dem Mikrofon verbunden ist. Wir verwenden also einen Parameter aus den Eingabebalken und ändern die Größe jedes Bogens. Um dies zu tun, prüfen wir zuerst, ob Wert größer als die Größe ist. Also werden wir den Wert nur eine Schüssel anpassen. Aber lassen Sie uns zuerst prüfen, ob der Wert größer als die Größe ist. Wenn dies der Fall ist, werden wir die Größe gleich dem Wert S machen werden wir die Größe gleich dem Wert S machen. In anderen Fällen möchten wir die Größe ändern. Das bedeutet also, dass wir keine Spracheingabe haben oder eine haben, aber sie ist wirklich, sehr niedrig, so dass wir sie nicht hören können, damit der Computer sie nicht hören kann. In diesem Fall möchten wir die Größe ändern und die Größe verringern. Sagen wir mal, ich weiß nicht 0.1. Das wird also in jedem Frame aufgerufen. Es ist also Größenabnahme. Ich bin Tom Prozent im Flugwerk. Stimmt's? Rufen wir diese Methode einfach in der Animate-Funktion auf. Genau hier. Der Dreck, diese Kettengröße. Um ihm jedoch einen Parameter zu geben , der separat von der Probe stammt, müssen wir die Indexrate der Samples erhalten. Also haben wir momentan keinen Index. Aber wenn Sie sich erinnern, können wir den Index abrufen, indem wir einfach einen zweiten Parameter für jede Funktion übergeben. Wenn wir es also so machen, wird die erste 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 also speichern und das Ergebnis sehen. Okay, also können wir nichts sehen. Eigentlich haben wir am Anfang etwas gesehen, aber sie verschwinden sofort. Warum passiert es? Weil unser Wert des Abnehmens vielleicht zu groß ist. Ändern wir dies auf 1% und speichern es erneut. Also das ist momentan besser. Sie verschwinden langsam. Aber am Ende können wir nichts mehr sehen. Es sieht also so aus, als wäre der Wert zu klein, oder? So anscheinend ist selten nicht genug, um die Größe größer zu machen. Lasst uns, wir können es auch überprüfen. Ich melde mich an. Mal sehen. Unser Wert ist also 0. Ähm, das habe ich nicht erwartet. Okay, also lasst 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 das Geräusch hier und hier benutzen, Ezra. Lass mich das nochmal aufheben. Wir haben keine Ausgabe wieder. Also öffne ich das einfach in einem neuen Tab. Dies war ein Bug für Google Chrome. Wenn wir es also in einem neuen Tab öffnen, gibt es kein Problem. Sie können also sehen, dass sie größer werden, wenn ich höher oder kleiner spreche , wenn ich lauter spreche. Aber lassen Sie uns auch den Wert und den Sound in der Konsole sehen . Prüfen wir zuerst den Wert. Man sieht also, dass es etwas ganz Kleines ist. Deshalb wollen wir es einfach mit 200 multiplizieren. In Ordnung? Finde ich das beim Versuch? Okay, dafür gibt es keine Formel. Aber ich habe ein paar Werte ausprobiert. Und 200 scheint nett zu sein , weil ich möchte, dass Zahlen sie größer machen, um sie größer zu machen. Und 200 ist in Ordnung für mich. Sie können verschiedene Werte ausprobieren und Sie können sich für einen anderen Zufall entscheiden. Aber der Hauptpunkt hier ist, dass wir gerade Kreise haben und Größe ändert sich je nach Spracheingabe. 52. 6PlayMusic: Zu diesem Zeitpunkt sollte sich die Größe der Zahlen mit dem Input der Frau ändern. Also lass mich ein Lied spielen , um es zu sagen. Offensichtlich. 53. 7Teleport: Abschließend möchte ich Ihnen einige Anpassungsbeispiele zeigen. Weil ich möchte, dass Sie Ihren eigenen Effekt beliebig anpassen . Okay? zum Beispiel eine Fügen wir zum Beispiel eine neue Methode in der Figure-Klasse hinzu. Also möchte ich eine Teleport-Methode hinzufügen , denn wenn sich Zahlen nähern, sieht die Tatsache viel besser aus. Lassen Sie uns den Teleport-Effekt hinzufügen und Sie können das Ergebnis sehen. Also sage ich Teleport dort. Wir sollten den X- und auch y-Wert der Fehler ändern. Und ich möchte, dass sie sich nach dem Zufallsprinzip teleportieren. Sagen wir also einfach viel zufällige Zeiten Spaltenverlust Breite, was bedeutet, dass sie irgendwo innerhalb des Carlos teleportiert wird . Okay? Und mach das Gleiche für y, aber dieses Mal tippe hier Hunt. Wir haben also unsere Teleport-Methode. Nennen wir es „Mond-Animation“. werden sie für jede Figur Wenn wir also Teleportfunktion aufrufen, 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. Wenn also etwas passiert als Teleport, nicht in jedem Frame. Sie können also eine beliebige Einschränkung hinzufügen. Es liegt an dir. Einfachheit halber. Ich füge einfach eine Zufallsbeschränkung hinzu. Das kann also auch zufällig sein. Ich habe es vermasselt, wenn du eine Routine randomisierst. Wenn ich hier eine Einschränkung wie diese hinzufüge, gibt Math.Random eine Zahl zwischen 01 und wenn sie größer als 0,99 ist, was ungefähr eine Ein-Person ist, oder? Dann teleportiere zur Figur. Lass mich das sagen. Du siehst, es ist momentan seltener. Wir sehen einige Teleports, aber das ist nicht kontinuierlich. Wir könnten seine Häufigkeit verringern indem wir diesen Wert hier einfach erhöhen. Sie sind also fast, unterstützen sie nicht mehr. Oder Sie können seine Häufigkeit 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 echt gut aus. Okay, der Grund, warum ich das zeigen wollte, ist dir zu zeigen, dass diese Zahl, dieser Effekt anpassbar ist. Sie können jede gewünschte Methode hinzufügen und damit spielen. Sie können verschiedene Ergebnisse sehen. Und schließlich möchte ich Ihnen am Ende noch eine Sache zeigen, nämlich die Erhöhung der Animationsgeschwindigkeit. Okay? Im Moment ist unsere kreisförmige Bewegung 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 das FPS ändern möchten, können Sie dazu auch verschiedene Bibliotheken hinzufügen . Aber dafür gibt es noch einen anderen kniffligen Ansatz. Ich möchte es dir zeigen. Also rufen wir hier animate function und sie ruft sich immer wieder an, oder? Was ist, wenn wir jetzt Enumerate-Funktion für mich aufrufen? Also lasst uns das vielleicht in zehn oder fünf ändern. Ruf einfach „Animieren“ einen Sturz an. Dies erhöht die Animationsgeschwindigkeit um fünf Mal, da wir die Animate-Funktion fünfmal aufrufen . Lass mich das aufheben. So können Sie sehen, dass sich die Kreise schneller bewegen. In Ordnung? Dies erhöht also im Grunde die Bildrate in einer Sekunde. 54. 1WhatIsThreeJS: In diesem Abschnitt werden wir EJS verwenden, um visuelle 3D-Effekte zu erzeugen. Lassen Sie mich also erklären, was es wirklich schnell geht. Grundsätzlich ist es einfach , animierte 3D-Objekte in der Bibliothek selbst als eigene Kamera, Szene, Geometrie zu verwenden . Und es ist die beste Rasenbibliothek für 3D-Rendern auf der Karte. Man kann es also wie Einheit denken. Als würdest du Spiele entwickeln. Wenn du Spiele entwickelst, kennst du vielleicht Unity. Es ist also eine Spiele-Engine, oder? Also für JS ist es alles Physik-Engine, sodass es einfacher ist, 3D-Effekte zu erzeugen. In Ordnung? Also und es ist kein Programm oder ein Framework, es ist nur eine Bibliothek. Zukunft ist dies die offizielle Website von zwei js. Und es gibt viele, viele Beispiele und Anwendungsfälle davon. 55. 2UseCases: Schauen wir uns ein paar Anwendungsfälle an. Übrigens werden zwei EJS auch von großen Unternehmen genutzt. Du kannst also Nasa hier sehen. Und das war aufstehen, glaube ich. Ja. Hier ist die zerstreute Route also ein 3D-Modell. Und um diese Welt als 3D-Modell zu rendern, laden Sie ein animiertes ein. Wir können drei Js benutzen. Das war's also. Gitarre benutzt also tree js. Lasst uns nachsehen, was wir sonst noch haben? Es gibt auch Spiele wie diese. Das sieht aus wie eine nette Website. Warten wir drauf. Vielleicht ist der einzige Vorteil der 3D-Modellierung, dass das Rendern zu viel Zeit benötigt. Die Websites wie diese werden möglicherweise nicht schnell geladen, aber Sie können sehen, dass es wirklich cool ist. Es gibt also einige coole Websites wie diese, hauptsächlich für Agenturen. Und das Modell ist auch für den Agenten. Das ist kein Video. Dies ist ein 3D-Modell, sodass Sie damit interagieren können. Okay, das ist der Unterschied. Sehen wir uns weitere Beispiele an. Was haben wir? Apple verwendet also auch TJ, wie Sie vielleicht wissen, die iPhone-Integrationen, wie wenn Sie runtergehen, runter, Es ist nur, dass Sie damit interagieren können. In Ordnung. Es gibt also Spiele, es gibt Websites und so weiter. Verschwenden wir einfach nicht zu viel Zeit. Aber Sie können natürlich weitere Details eingehen. Sie können sich die Beispiele hier ansehen. Auch hier ist dies kein Baum-JS-Kurs. Deshalb werde ich nicht alle Funktionen von t j erklären. Aber hier habe ich eine nette Kurswebsite gefunden. Sieh dir das an. Ich weiß nicht, Burner Cyber, aber ich schätze seine Arbeit sehr. Dies ist also ein Geschäft, Ihre Website, aber vielleicht ist es die beste Kurswebsite, die ich je gesehen habe. Sie können also sehen, dass es sich um ein 2D-Modell handelt und sie animieren nur. Und ich kann die Drehung der Szene ziehen und ändern , oder? Ich kann nach oben gehen. Jetzt. Ich kann wirklich mit der Maus mit dem Objekt interagieren. Also habe ich diesen Kurs nicht absolviert. Ich kenne den Inhalt nicht, aber er sieht echt gut aus. Ich wollte es dir nur zeigen. So können Sie diese Art von Dingen tun, indem Sie Verräter verwenden. Okay, lass uns wieder hierher gehen. Wir können Dokumentationsbeispiele sehen. Auf der linken Seite. Du kannst Discord oder Foren beitreten und rooten und der Community der Lehrer beitreten. Also was sonst noch? Eigentlich ist die Website mehr oder weniger so. Verschwenden wir also keine Zeit hier. Beginnen wir mit unserem ersten beiden JS-Projekt, das sehr aufgeregt ist, weil wir einen 3D-Würfel erstellen und ihn in einem Browser im 3D-Raum verschieben werden. Lass uns das im nächsten Video machen. 56. 3InstallThreeJS: Zuvor in diesem Kurs sind wir hier, dass wir Node JS installiert haben. Wenn Sie dieses Teil überspringen, können Sie überprüfen, ob das Video namens installierter Knoten und npm das erste Video von Coma-Skizzenabschnitt ist. In Ordnung? Wenn Sie dieses Video von einem anderen Ort aus ansehen, können Sie nach dem Herunterladen und Installieren von NPM suchen. Und sobald Sie npm installiert haben, können wir loslegen. Sie können also immer nachsehen. Sie können jederzeit überprüfen, ob MPM installiert ist, indem Sie die Notiz verwenden, dass wir npm dash we sind. Das ist also meine Version Node.js und das ist meine NPM-Version. In Ordnung? Wenn Sie wie nichts oder MPN sind, können Sie die Version von thumb sehen. Wenn ja, wenn es heißt, sieht das so aus wie dieser Befehl nicht gefunden wird, und das bedeutet, dass Sie kein npm oder Node auf Ihrem Computer haben . In Ordnung? Und denken Sie daran, dass es am besten ist, die Zeit global herunterzuladen , damit Sie in jedem Verzeichnis darauf zugreifen können. Okay, also lasst uns zuerst unser Terminal löschen und einen neuen Ordner für drei JS erstellen. Ich möchte das auf meinem Desktop machen. Also werde ich sagen, mach ihre drei Riesen. Ich bin mir nicht sicher, ob dieser Befehl auch unter Windows gültig ist, aber wir erstellen nur einen neuen Ordner, Desktop, okay? Wenn dies unter Windows nicht funktioniert, können Sie einfach mit der rechten Maustaste klicken und einen neuen Ordner erstellen, okay? Oder Sie könnten Ihren eigenen Befehl für die aktuelle Zeile oder PowerShell in Windows finden. Okay, wenn ich diesen Befehl eintippe, haben wir einen neuen Ordner und wir möchten drei JS-Bibliothek in diesen Ordner installieren, okay, um sie in unserem Projekt zu verwenden. Gehen wir also in den Ordner, den wir gerade erstellt haben. Und ich möchte drei JS installieren, oder? Gehen wir zu Google und prüfen, wie wir Trigger installieren können. Also gehe ich auf die offizielle Website. Ich bin auf der linken Seite. Schauen wir uns die Dokumentation an. Also hier haben wir den Abschnitt „ Erste Schritte“, und hier haben wir eine Installation. Wir haben Glück, dass sie eine NPM-Installationsanleitung zur Verfügung stellen. Also haben wir auch MPM. Wir können diesen Befehl verwenden , der so einfach ist. Also möchte ich in den Ordner diesen Befehl einfügen und wir werden drei Minuten sehr schnell installieren. Also lass mich meine Mappe hierher bringen. Zwei Js. Lasst uns das öffnen. Okay. Ich setze es so aus. Also hier haben wir laute Modulpakete wie Jason, package.json, was bedeutet, dass wir auf Pages installiert haben. Und lasst uns auch nach Node-Modulen in drei suchen. Lasst uns zur Quelle gehen. Okay, also haben wir Renders, Lichter, Kameras oder Audiomaterialien und so weiter. Aber hier haben wir eine JS-Datei mit drei Punkten. Wir möchten also Befehle, Methoden, Funktionen und Variablen aus dieser Datei verwenden . Und es reicht aus, diese Datei in unsere Datei zu importieren , um sie zu verwenden , weil wir sie installiert haben. Wenn wir also hier eine neue Datei erstellen und unseren Code schreiben, können wir die Fehlerfunktion und -methode verwenden. Diese Knotenmodule, oder? Deshalb haben wir es im selben Verzeichnis installiert. 57. 4OpenTheProject: Lassen Sie uns unsere Dateien in diesem Verzeichnis erstellen. Es gibt also viele Möglichkeiten, dies zu tun, aber ich benutze gerne Ausländer. Ich sage „Touch“. Sagen wir Index-HTML. Wir können sehen, dass wir eine neue Datei erstellt haben. Und auch für JavaScript nennen wir es index js. Sie können also eine Datei nur so erstellen, wie Sie möchten. Und auch in Bezug auf dieses Problem, wenn diese Befehle nicht auf Ihrem Betriebssystem funktionieren, glaube ich, dass das Gegenteil von Limit gleich ist, aber Windows könnte anders sein. Es gibt also etwas, das als Hyperterminal bezeichnet wird. Du könntest es auf Mac oder Windows herunterladen. Es ist also so etwas. Und ich habe mich daran erinnert, dass Sie Linux-Befehle verwenden können. Der gleiche Befehl in einem Betriebssystem, das hypertonisch und seine Schnittstelle verwendet , ist wirklich gut. Dies ist also eine nette Plattform , die man als Terminal verwenden kann. Okay, also lass uns weitermachen. Wir haben unsere Dateien erstellt und sind bereit zu programmieren, oder? Und schließlich öffnen wir das Projekt. Wenn Sie wie ich die Insiderversion von VS-Code verlieren, können Sie diesen Befehl schreiben, um das Projekt zu öffnen. Wenn Sie eine normale Version dieses Codes verwenden, funktioniert die Standardversion, können Sie einfach nur Space nennen. Und wenn das für Sie nicht funktioniert, können Sie den VS-Code-Befehl P oder Command Shift P oder Command Shift P verwenden, um einen Shell-Befehl zu öffnen und kalt zu installieren. Oder nochmal, Sie müssen die Verknüpfung nicht unbedingt verwenden. Sie können das Projekt einfach manuell in VS Code öffnen, was auch in Ordnung ist. 58. 5ImportThreeJS: In der Index-TML-Datei drücke ich einfach das Ausrufezeichen und drücke Eingabetaste, um HTML5-Vorlagen zu erstellen. Okay, lasst uns zuerst den Titel des Projekts ändern. Zuerst. Drei Julius-App. Und dann können wir die Lücken zwischen dem Commonwealth und den Grenzen einfach beseitigen . Also nur wir, wir werden zwei EJS-Objekte erstellen, oder? Also müssen wir die Lücken um zu Kumpel beseitigen. Also lasst uns das in der Reihe machen. Vorerst. Ich sage mit der Marge 0. Wir könnten eine CSS-Datei hinzufügen und das auch tun. Aber alles was wir brauchen ist diese Linie. Also können wir es in der Schlange machen, okay? In Ordnung. Jetzt können wir die drei JS-Datei aufrufen , die wir gerade heruntergeladen haben. Öffnen Sie dazu ein neues Skript-Tag. Und als Quelle sagen wir viele Module drei. Lassen Sie uns also prüfen, ob es sich um drei JS-Dateien handelt. In Node-Modulen. In drei ist das, was wir brauchen , nicht bezogen, sondern zwei Regionen gebaut. Wir werden diesen Code verwenden. In Index-HTML sage ich also drei Built und wähle drei js aus. Und direkt darunter öffne ein neues Skript-Tag. Und alles, was wir schreiben werden, wird in dieses Tag hineingehen. 59. 6SceneCamera: Um tatsächlich alles mit zwei Gefängniswärtern zeigen zu können, brauchen wir drei Dinge. Scheint zufällig Kamera zu sein. Okay? Also lasst uns sie erschaffen. Eine Szene zu erstellen ist wirklich einfach. Wir können einfach eine neue Variable erstellen, die verursacht wird. Wir können neues Keyword verwenden. Und wir können drei Bibliothek hören weil wir sie gerade oben importiert haben. Und nennen wir C Capital Matrix. Okay? Der nächste Schritt besteht also darin, ein Terminal zu erstellen. Auch hier lieben wir, dass ich vielleicht eine neue tragbare Kamera erstellen möchte . Nennen wir nochmal neues Keyword. Wir werden drei benutzen. Also hier gibt es tatsächlich ein paar verschiedene Kameras, Ernährungswissenschaftler, wir werden anfangen, eine perspektivische Kamera zu verwenden , da dies der Dokumentation empfohlen wird. Und lass uns die Matte öffnen. Diese Methode benötigt also vier Argumente. Das erste Attribut ist das Sichtfeld. Es ist das Ausmaß der Szene, die zu einem bestimmten Zeitpunkt auf dem Display zu sehen ist . Also sollten wir ein paar Abschlüsse machen. Lassen Sie uns 7254 mehr geben und machen Sie sich keine Sorgen darüber. Es ist einfacher mit Beispielen zu verstehen. In Ordnung? Das zweite ist das Seitenverhältnis. Und wir können fast immer dasselbe in dieser Zeit sein, nämlich das Innengewicht des Fensters geteilt durch Fenster in ihrer Höhe. Dadurch wird sichergestellt, dass die Lösung korrekt ist. Okay, das Seitenverhältnis Ihres Browsers. Okay, also der dritte Parameter ist, dass ich einfach die letzten beiden Attribute tippe und erkläre. Wenn das Objekt also näher als dieser Wert an der Kalorie liegt , ist es nicht zufällig. Okay? Das Objekt, wenn es weiter von der Kamera entfernt ist als dieser Wert, wird es nicht gerendert. In Ordnung? Dies sind also die Einschränkungen von Nah und Fern. In Ordnung? Wenn es also weiter von größer als einem entfernt ist , wird es das nicht sein. In Ordnung. 60. 7CreateRenderer: Als Nächstes erstellen wir eine neue Variable, die erneut als Gender bezeichnet wird. Und wir werden drei benutzen. Dieses Mal. Wir werden Web Random verwenden. Drei JS verwendet also standardmäßig WebGL-Render, hat aber auch verschiedene Optionen für ältere Browser. Okay? Sobald Sie den Render erstellt haben, können wir die Größe festlegen, indem wir die Methode set size aufrufen. So könnten Sie beliebige Werte Breite und Höhe angeben. Für dieses Beispiel verwenden wir den gesamten Bildschirm. Deshalb sage ich Fensterbreite und Fenster in ihrem Auto. In Ordnung. Und schließlich fügen wir hinzu, um das Element der Puppe zu rendern. Und wir werden einfach die eifersüchtigen Skripte benutzen Kind damit anhängen. Okay. Ich werde von dem scheinbaren Kind dekretiert anrufen. Nennen wir es also „Render Dom“. Okay, das ist also die Ebene von Trajan in jedem Projekt, das Sie erstellen werden, Sie müssen die Schritte ausführen. Sie müssen den zufälligen Fehler der Szenenkamera erstellen. Sie müssen die Größe des Renders festlegen und dieses Element an die Tür anhängen. 61. 8CreateACube: An dieser Stelle möchte ich das Projekt in einem Browser öffnen und sehen, was wir bekommen. In der HTML-Datei ich einfach mit der rechten Maustaste und öffne mit Live-Show. Und wir alle wissen, dass sie das erklären. Wenn Sie keinen Live-Server haben, können Sie ihn von den Erweiterungen herunterladen. Okay, also lass mich meinen Pinsel abziehen. Das ist also eine Königin. Ich bin hier. Also lass uns einfach den Bildschirm benutzen. Lasst uns sie zusammenkleben. Oder wir haben hier noch nichts , weil wir kein Objekt erstellt haben. Aber die Dinge, die wir früher gemacht haben, waren nur ein Setup. Erstellen wir also das erste Objekt, einen Würfel. Vielleicht. Um ein Objekt zu erstellen, müssen wir Geometrie und Material färben. In Ordnung? Okay, für Geometrie erstellen wir eine neue Zeile. Wir werden wieder tree benutzen, und dieses Mal werden wir Bucks-Geometrie nennen. Boxgeometrie ist ein Objekt, das alle Scheitelpunkte und Flächen des Würfels enthält. Stimmt's? Als nächstes kommt das Material. Schon wieder. Und ich nenne Mesh-Basismaterial. Vorerst. Und lasst uns das öffnen. Wir werden nur Semikolon verwenden und wir können die Farbe hier geben. Und die Farbe hier hat die gleichen Attribute wie CSS-Farbe. Okay, also sucht es nach Hex-Code. Ich kopiere einfach den Hex-Code aus Dokumentation, um von zehn zu hören. Wir haben also Geometrie und Material geschaffen. Und sobald Sie gekauft haben, können Sie Material auf die Schuldigen anwenden. Okay? Also können wir das tun, indem wir viel verwenden. Lasst uns Röhre erstellen. Wir würden Mesh-Funktion aufrufen. Wir werden Geometrie und Material als Attribute verwenden. Diese Netzfunktion erfordert also zwei Parameter, Geometrie und Material, und wir können die Dinge verwenden, die wir gerade erstellt haben. Schließlich können wir den Würfel zur Szene hinzufügen. Und lass uns das sagen. Sieh immer noch nichts, was nein hat. Warum wir also bei dem Tank, den wir hinzufügen, anrufen, wird standardmäßig zu den Koordinaten Nullen, Nullen hinzugefügt. Dies ist ein Problem für uns , da sich die Kamera ebenfalls an dieser Position befindet. So werden sowohl die Kamera als auch der Würfel ineinander sein. Um dies zu vermeiden. Die Dokumentation sagt uns, dass wir die Z-Position der Kameras ändern sollen. Der Würfel befindet sich gerade auf Position 000, aber die Kamera befindet sich auf 005. 62. 9RenderTheScene: Wir sind fast fertig. Wir haben den Cube erstellt und zu C. hinzugefügt Lassen Sie uns die Szene rendern, damit wir sie im Browser sehen können . Eigentlich. Ich erstelle eine animierte Funktion. Und Sie sollten mit dieser Animationsfunktion aus den vorherigen Seitenketten vertraut sein . Nur ein kurzer Anruf. Unbelebte Funktion. Wir müssen einen Animationsrahmen anfordern und wir werden hier einfach wieder passen und gewichten. Dieser Anforderungsanimationsrahmen generiert die Schleife. Sah, dass die Animate-Funktion in jedem Frame aufgerufen wird , oder? Sie sollten bereits wissen, ob dies, sobald wir die Enumerate-Funktion haben, können wir Rounder aufrufen. Rounder-Szene, die wir gerade für den ersten Parameter und die Kamera erstellt haben. Wir haben gerade hier für das zweite Panel erstellt. Und das war's. Lass uns anrufen und warten Funktion in der App. Und wenn ich das sage, los geht's. Schließlich haben wir etwas im Browser. Es animiert also nicht auf new inkorrekt , weil wir den Code dafür nicht ausprobiert haben. Aber wir können den Würfel sehen, den wir gerade erstellt haben, oder? Es ist also grün, weil wir wieder die Farbe Grün und alles andere aus zwei JS-Bibliothek stammen. Zum Beispiel haben wir nicht die Hintergrundfarbe angegeben, sondern ihre Spalten aus der Bibliothek selbst, oder? Also haben wir die bleibe Marge 0 angegeben. Wir haben also keinen Spielraum an den Grenzen. Schließlich haben Sie die Box am Ende. Der nächste Schritt besteht darin, es zu animieren. 63. 10AnimateCube: Wenn Sie sich erinnern, haben wir die Position von Objekten in animierter Funktion geändert die Position von Objekten in , um uns zu bewegen. Wir werden die gleiche Logik hier anwenden. Wir werden den Umzug einrichten. Drehen wir es einfach. Okay? Also in der animierten Funktion nur eine Verbeugung da, Angela. Wir sollten die Drehung des Würfels ändern. Nennen wir es also q-Rotation. Man kann x oder y sagen. Versuchen wir zuerst rotational x. Ich meine, jedes Bild möchte ich seinen Rotation x -Wert um eins erhöhen . Versuchen wir, das Ergebnis zu sehen. Man sieht, dass es sich nur dreht, aber das ist zu schnell. Versuchen wir es mit 0.1. Besser, aber immer noch auf 1.01st 0. Und das sieht besser aus. Okay? Und wir könnten das Gleiche auch für den Y-Wert tun. Und jetzt haben wir ein animiertes Q. Wir haben Rotationsmethoden verwendet. Und natürlich könnten wir auch Positionsmethod-Attribut verwenden, um zu sagen, wenn Sie wissen möchten, okay, für x zum Beispiel werden Mütter aus der Kohle gehen, was so war. Lass es mich nochmal sagen. So können wir weiter dorthin gehen und es drehen. Wir können eigentlich tun, was wir wollen. Also jetzt möchte ich, dass du damit spielst. Du kannst viele weitere Würfel erstellen, sie drehen, ihre Position ändern, sie kollidieren lassen , alles was du willst. Jetzt können wir in 3D spielen. Perfekt. Okay, spiel um den Gettier State herum und wir sehen uns im nächsten Video. 64. 1Einführung: In diesem Abschnitt erstellen wir einen 3D-Raum-Effekt. Das Ergebnis wird so aussehen. Das sieht aus wie das Projekt, das wir früher gemacht haben, aber dieses Mal wird es ein 3D sein. Hauptsächlich Entwickler, Benutzer, diese Art von Fehlern in ihren Portfolios Zielseite. Okay, wenn du bereit bist, lass uns mit dem nächsten Video anfangen. 65. 2Setup: Wir müssen kein neues Projekt eröffnen. Wir können von hier aus weitermachen. Lassen Sie uns hier eine neue Datei erstellen. Ich nenne es Space, nicht HTML. Drücken Sie das Ausrufezeichen, drücken Sie die Eingabetaste, um eine HTML-Vorlage zu erstellen und den Titel in 3D-Raum zu ändern. Der nächste Schritt besteht darin, die Assets zu importieren. In diesem Projekt stellen wir nur ein eingekreistes PNG-Assets ein. Und ich stelle Ihnen diese Datei in Ressourcen zur Verfügung, damit Sie sie herunterladen und in Ihr eigenes Projekt importieren können. Okay, also lasst uns fortfahren und hier ein Style-Tag hinzufügen und den Körper CSS ändern. Also müssen wir hier nicht viel tun. Deshalb mache ich es in der Schlange. Sie also einfach sicher, dass wir keine Marge haben. Wir passen die Breite und Höhe an. Lassen Sie uns den Hintergrund auf Schwarz und Überlauf setzen. Versteckt. Morphium über Setup besteht darin, die verkörperte Free Jazz-Bibliothek zu importieren. Verweisen wir auf die JS-Datei des Baums. Es ist also keine Module kostenlos. Ich habe hier auch drei Haupt-JS gebaut. Trimmen von GIS reicht also für dieses Projekt. Ich öffne ein neues Skript-Tag. Und jeden Panzer, den wir ab jetzt schreiben werden, gehen wir in dieses Tag hinein. 66. 3InitFunction: Wie wir bereits in diesem Kurs besprochen haben, müssen wir die Kinokamera definieren. Und dieses Mal erstelle ich eine Init-Funktion, die alles anfängt. Zum Beispiel das Erstellen der Szene. Wie Mu drei Sünde oder die Kamera erschaffen. Aus der 3D-Bibliothek. Ich werde hier wieder die perspektivische Kamera benutzen. Und lasst uns 64 Fall geben, was für Sichtfeld steht. Für das Seitenverhältnis. Wir werden es wieder so einstellen , dass es geteilt durch innere Höhenschwelle integriert wird, unser Standardwert wie 11 Tausend. Stellen wir also die Kameras ein, die eine positionieren und Grad für 90 gedreht haben. Und wie Sie sich aus früheren Kursen erinnern, können wir es so einstellen, dass es Pi geteilt durch zwei entspricht, was 90 Grad entspricht. Also werde ich mit dem Erstellen fortfahren, den Renderer aus dem Baum erstellen, Gel-Zufallsfehler nicht löschen und die Größe des Renderers mithilfe von Metriken für festgelegte Größe festlegen. Lassen Sie es uns abschließend an den Dokumententext anhängen. Wir können append-untergeordnete Methoden und solches granuläres DOM-Element verwenden. Vier Parameter. 67. 4CreateStars: In diesem Video erstellen wir die Sterne mit einer for-Schleife. Verwenden Sie die Verknüpfung für for-loop und Change Iterator mithilfe von KI. Und ich werde die Grenze auf 5 Tausend setzen , weil wir wollen , dass viele Aktien schaffen. Also lasst uns auch die Zeile löschen und den Stern hier erstellen. Ich verwende Vektor T der Drei-Bibliothek. Also sollten wir X - und Y- und Z-Werte machen. Und ich möchte, dass sie zufällig sind. Eine Zufallszahl zwischen minus dreihundert und dreihundert. Also lasst uns diese Zeile auch für y und diese Werte kopiert. In Ordnung. Sobald wir den Stern erstellt haben, können wir seine Geschwindigkeit einstellen, weil sie sich bewegen werden. Und auch Beschleunigung. Wir werden dann später die Geschwindigkeit mit dieser Beschleunigung verbessern, wir können die Werte später ändern. Und was wir auch brauchen, ist hier ein Array, um den Stern voranzutreiben , den wir gerade geschaffen haben. Deshalb werde ich hier oben ein neues Array erstellen und es schieben, den Stern in dieses Array schieben. Wir brauchen diesen Bereich also, weil wir die Geometrie einstellen wollen und wir werden sie hier verwenden. Und lasst uns prüfen , was es genau ist. Ich öffne diese Datei mit Live Server und lasse mich meinen Tab direkt neben den Xcode bringen. Lassen Sie es uns erweitern und sagen „ Inspect“, um die Konsole zu sehen. Jetzt können Sie sehen, dass es an einem Array fehlt. Und hier ist es, die Beschleunigung und Geschwindigkeit, die wir gerade gesessen haben. Okay, also haben wir ein Array und jeder beinhaltet die Sterne. Also sollten wir auch eine Geometrie erstellen und wir werden dieses GO verwenden, Eric, ich werde dieses variable Sternjuwel nennen, aber lasst es uns zuerst definieren. Und wir können es jetzt neue Baumpuffergeometrie setzen. Dies ist also ein neues Feature von drei js. Wir können keine Geometrie mehr verwenden, aber wir sollten Puffergeometrie verwenden. Ich sage Set von Pints. Jetzt können wir das gerade erstellte Array übergeben. Lasst uns Star Geo protokollieren und sehen, was es genau ist. Es ist also eine Geometrie und ein Objekt von EJS und es hat Attribute wie count, und es sind 5 Tausend, weil wir fünftausend Sterne erzeugen. Lassen wir die Log-Anweisung hier. Wir brauchen es nicht. Wir werden im nächsten Video mit der Erstellung der Textur beginnen. 68. 5UseGeoAndMaterial: Wir erstellen das Sprite mit einer geladenen Textur. Okay, sagen wir neue drei, Textur-Loader. Und ich werde Lord-Methoden nennen. Wir können den PNG-Dateinamen in dieser Klammer übergeben. Sagen wir Circle PNG , das wir gerade importiert haben. Und lasst uns auch das Sternmaterial kreieren. Wir werden neues Drei-Punkte-Material sagen. Wir müssen also einige Eigenschaften anpassen. Zum Beispiel Farbe. Ich möchte graue Sterne mit einer Größe von 0,6 kreieren . Und wir werden das gerade erstellte Sprite für Kartenfelder verwenden . In Ordnung? Jetzt haben wir auch Ausgangsmaterial und Geometrie. Wir können mit drei Punkten erstellen und wir können Star Geo und Ausgangsmaterial für Parameter übergeben . Und schließlich sollten wir die Sterne hinzufügen, die wir gerade erstellt haben. Okay, dieser Codeblock sollte sich auch innerhalb der Init-Funktion befinden, da wir diesen Aufruf nicht vor der Initialisierung ausführen möchten , oder? Lassen Sie mich also einfach bewegen, verschieben Sie diesen ganzen Code in die Init-Funktion. Und ich habe hier einen Tippfehler gemacht. Wir verwenden Holzkohle-PNG. Lasst uns das auch in Ordnung bringen. Benennen Sie den Kreis um. Dann reparieren wir es auch in der HTML-Datei. Nicht bestimmte Codes zielen darauf ab. 69. 6AnimateFunction: In diesem Video fügen wir die Animate-Funktion hinzu. Du kennst das bereits. Wir benutzen diese Funktion schon oft. Rufen wir also auch den Anforderungsanimationsframe auf und rufen Sie die Animate-Funktion erneut auf, um eine Schleife zu erstellen. In Ordnung? Also möchte ich Ihnen etwas über gepufferte Geometrie zeigen , weil es etwas neue Ganzzahlen ist und schauen wir uns an, wie man sie benutzt. Also geh in seiner offiziellen Dokumentation einfach runter. Und hier können Sie sehen, dass wir an Punkten nach dem Zufallsprinzip werden und sie verwenden Attribute positions-Array. Wir brauchen also dasselbe, weil wir auch zufällige Punkte hinzufügen müssen. Lassen Sie uns also eine neue variable Position erstellen. Und wir werden Star Geo benutzen. Und genauso mit der Dokumentation können wir sagen, dass der Positionsfehler Tribut gibt. Und um es besser zu verstehen, verriegeln wir einfach die Position hier flankiert und auch die Länge des Geo Eric. Wir sehen noch nichts, weil wir meine Funktion nicht aufgerufen haben. Aber lassen Sie mich einfach diese drei Zeilen nach oben verschieben. Wir können alles noch einmal sehen lassen , weil wir es nicht auch Funktion genannt haben. Okay, also lasst uns, nennen wir es Funktion. Jetzt können wir die Länge von Arrays sehen. Wie Sie sehen können, 20.000 Licht. Es ist also dreimal genau zweimal Unterschied zwischen ihnen. Und das liegt daran, dass einer von ihnen in 1D ist und andere in 3D ist. Es ist also wie die erweiterte Version von einander. Okay? Im Dual-Array stoppt das erste Element die X-, Y- und Z-Werte der Sterne. In Positionen enthält das erste Element jedoch nur den x-Wert. Das zweite Element stoppt den Y-Wert. Und dritte Gastgeberin exakter Wert. Die Vier zu ALU werden also der x-Wert der zweiten Aktie sein. Deshalb ist es in einem. Okay, lass uns weitermachen. Wir brauchen auch eine Schleife in der Animate-Funktion. Ich erstelle erneut eine for-Schleife und setze den Iterator. Nennen wir Joanne verlinkt hier. Lass uns das benutzen, weil es das kürzere ist. Ich stelle deine Array-Eisgeschwindigkeit ein. Wir iterieren über das Array und wir haben ein Geschwindigkeitsfeld von Elementen erstellt. Stellen wir also Geschwindigkeit plus gleich Beschleunigung ein. Hier ist es also wirklich einfach. Was wir tun, ist nur eine Beschleunigung der Geschwindigkeit in einem Reframe hinzuzufügen. Außerdem sollten wir eine Position mit Geschwindigkeit festlegen, oder? So können wir die Position mit Geschwindigkeit aktualisieren. Aber lasst mich zuerst die Positionen sperren , nur um es leicht zu sehen. Ich sollte die Position hier lieben. Okay? Jetzt können Sie sehen, dass es nur ein Array ist, das alle Positionen hält. Und wie gesagt, X-, Y- und Z-Werte, und es ist in 1D, also ist Ford nur der x-Wert des zweiten Stils. Wir sollten sie auch mit Geschwindigkeit aktualisieren. In jedem Frame können wir also zwei Mal drei plus eins sagen. Und es wird der richtige Index sein. Es ist also die Transformation von 3D 1D. Du kannst die Mathematik machen. Weil wir also über die G0-Fluggesellschaft iterieren, in Ordnung, so wird der maximale Wert 5 Tausend in dieser Schleife betragen, aber wir müssen 15 Tausend in Positionen erreichen. In Ordnung? Lassen Sie mich auch eine Amidfunktion in der Init-Funktion nennen. Trotzdem sehen wir nichts. Und das liegt daran, dass wir den Renderabschnitt nicht ausprobiert haben. Okay, lass uns weitermachen. Wir sind gerade unter der for-Schleife. Wir können einfach eine Zeile für die Aktualisierung schreiben. Und lassen Sie mich das Update-Maximum überprüfen da es sich auch mit der angebotenen Geometrie geändert hat. Gehen wir zurück zu dieser Seite. Unten sehen Sie diese Zeile hier. Wenn Sie also rendern müssen, benötigen Sie ein Update. Die Syntax ist das. Wir sagen, dass die Position der Sternattribute , die aktualisiert werden muss, gleich wahr ist. Und danach rendern wir diese Szene und Kamera. Und schließlich auch fragen und wir haben diese Folie bereits gemacht. Lassen Sie es mich einfach löschen, diese Datei speichern und das Ergebnis sehen. Perfekt. Also haben wir die Animation. Es funktioniert alles, was wir geschrieben haben. Aber wir brauchen auch weiter. 70. 7FinishTheProject: Unser Effekt sieht echt gut aus. Ich probiere es jetzt aus. Wir haben ein Problem. Wenn Sterne ein Teil des Kalküls sind. Wir reagieren nicht auf sie. Genau dort, einfach außerhalb von uns zu gehen und wir können nach einer Weile nichts auf der Kuh sehen . Also lasst uns das auswählen und diese for-Schleife reparieren. Ich möchte eine neue IF-Erklärung eröffnen. Diese Aussage prüft, ob die Positionen nicht in Spalten liegen. Es reicht also aus, den Y-Wert nur zu überprüfen wenn die Position kleiner als minus 200 ist, was bedeutet, dass der Stern außerhalb der Commons ist. Und was wir hier tun können, ist, die Position wieder auf 200 zu setzen . Also antworten wir einfach auf den Stern bei 200 Jahren. So können wir auch seine Geschwindigkeit auf 0 ändern , um seine Geschwindigkeit zurückzusetzen , da es sonst sehr schnell ist. Auf der rechten Seite des Bildschirms können Sie sehen, wie der Effekt funktioniert und die Sterne reagieren, nachdem sie aus dem Auto gegangen sind . Und das ist auch für das System effizient. Es gibt keine Sterne außerhalb des Commonwealth, daher schaden wir der CPU nicht. Also lass uns auch die Sterne drehen. Warum? Wir auch, lasst uns sehen.com. Okay, das ist zu schnell. Lass mich einfach 0,2 machen. Immer noch schnell. 0.020.002 ist großartig. Es ist also ein filmischer Effekt, indem die Sterne ein wenig dreht. Ich glaube, es ist besser. Jetzt. Wir haben noch ein weiteres Projekt abgeschlossen. Dir geht's wirklich gut. Wie immer. Du kannst einfach mit dem Effekt spielen. Sie können alles ändern, was Sie wollen, die Farbgeschwindigkeit. Oder Sie können vielleicht auch eine neue Feature-Klasse hinzufügen. Ich hoffe, dir hat dieses Projekt gefallen und kümmere dich darum. 71. 8SomeThreeJSBeispiele: Bevor ich zu Ende komme, möchte ich Ihnen einige kostenlose JS-Beispiele zeigen , die Sie inspirieren können. Mir hat diese Arbeiten sehr gut gefallen. Also wollte ich nur mit dir teilen , damit du dir mehr Anwendungsfälle vorstellen kannst. In Ordnung? Der erste ist also der Atradius-Aufruf, damit Sie auf dem Bildschirm sehen können, lassen Sie mich die Seite neu laden, damit Sie auch die erste Animation sehen können. Also glaube ich, dass es wirklich eine nette Arbeit von Louis Hub Rugs ist. Sie können also sehen, ob Sie sich nur den Einkaufswagen ansehen, er ist mit JavaScript geschrieben und es ist die Baum-JS-Bibliothek verwendet wird. Ich glaube, es gibt einen praktischen Algorithmus und Gefrierschränke und einige Nachbearbeitung für volle Farben. Okay, also das zweite Beispiel von 1 Sekunde stammt aus der drei JS-Bibliothek. Es ist also von ihrer offiziellen Website. Und es ist ein Beispiel für den Partikeleffekt von 3D-Modellen. Sie geben den Code hier nicht an, aber wenn wir Inspect sagen, können wir den Anruf tatsächlich im Quellenbereich sehen . Prüfen Sie einfach Punkte, dynamisches HTML. Wir können den Code hier sehen und Sie können sehen, dass es nur HTML-Vorlage verwendet, genau wie zuvor. Und hier ist das wichtige die Baumbibliothek. Und sie verwenden kostenloses GIS für diese gut aussehende Animation. Und das ist hier etwas anderes. Es ist nur das gesamte J-Format, das für 3D-Modelle dieser menschlichen Modelle verwendet wird . Auch hier glaube ich, dass bei diesen OBJ-Modellen ein gewisser Partikeleffekt verwendet wird. Okay. Es ist also das, es ist fast dasselbe was wir früher im Partikeleffekt in diesem Kurs gemacht haben . Und eigentlich glaube ich auch an Skoll hier. Ich glaube, es wird auch im Scout-Projekt verwendet. Lassen Sie mich hier einfach nach dem Vermögenswert suchen , damit ich es Ihnen besser zeigen kann. Hier sehen wir den Vermögenswert , der für den Schädel verwendet wird. Geh einfach da hin. Dies ist für dunkle Textur, die PNG ist. Aber was wir suchen, ist das OBJ-Format für 3D-Objekte. Also lass es mich einfach einfügen. Es sollte das Modell herunterladen, damit ich es öffnen kann. Lassen Sie mich meinen Xcode in diese Szene bringen. So können Sie diese Option sehen, dieses 3D-Modell wird in diesem Projekt verwendet. Und dann werden einige Effekte, etwas Partikeleffekt angewendet. Das nennt man also Modell. Das bedeutet, dass Sie jedes gewünschte Modell verwenden können und den Partikeleffekt verwenden können , um Ihr eigenes zu erstellen. Okay, Die Hauptidee hier ist es, 3D-Modelle zu importieren. Ich denke, es wird wirklich cool sein, wenn die Skoll-Partikel mit einer Musik bewegen , wie wir es zuvor im Bereich Audio-Visualisierer getan haben . Wer weiß es? Vielleicht können wir so etwas in Zukunft machen. Lass es mich wissen, wenn du willst. Es ist völlig anders als das. Im Kommentarbereich. Kann ich einen Kurscurriculum je nach Bedarf erweitern? Aber im Moment war's das für mich. Ich bin euch allen sehr dankbar , die so weit zusehen können. Ich hoffe, es hat euch gefallen, wenn euch dieser Kurs gefällt. Vergiss nicht, eine Bewertung abzugeben. Wir sehen uns das nächste Mal. Tschüss.