Kreatives Coding: Partikelbilder und Logos

1. Projekt 1: Slice- und Würfeleffekte auf Bildern: Ich möchte Ihnen eine spezielle Formel für die Bewegungsphysik vorstellen . Und sobald Sie wissen, wie es funktioniert, Sie bereit die epischsten interaktiven Effekte zu erzielen. Das vollständige Verständnis dessen, was der Code tut, ist sehr wichtig, wenn Sie vollständige Kontrolle haben und in der Lage sein möchten, zu experimentieren und Ihre eigenen neuen und einzigartigen Effekte zu entwickeln . Aus diesem Grund verwenden wir wie immer keine Frameworks und keine Bibliotheken, sondern nur einfaches Vanilla-Javascript und objektorientierte Programmierung. Lassen Sie uns einige anfängerfreundliche Slice & Dice-Animationen auf Bildern lernen anfängerfreundliche Slice & Dice-Animationen und drei sehr wichtige und grundlegende Techniken behandeln drei sehr wichtige und , mit denen Sie sich auf die ultimativen Effekte zur Bildmanipulation vorbereiten können . Wie immer ist dieser Kurs anfängerfreundlich, aber ein grundlegendes Verständnis von HTML, CSS und Javascript ist erforderlich, um folgen und tatsächlich verstehen zu können . 2. HTML-, CSS- und JavaScript-Einrichtung: Ich erstelle drei Dateien in meinem Projektordner: Index HTML, Style CSS und Script S. Im Index-HTML erstelle ich eine einfache Standardwebseite. Ich gebe ihr einen Titel. Ich verlinke mein Stylesheet, ich erstelle ein HTML-Five-Canvas-Element mit der ID Canvas One. Und ich verlinke meine Skriptdatei. Ich gebe ihm das Defer-Attribut, um sicherzustellen, dass der gesamte Inhalt der Seite geladen wird, bevor das Skript in Tysss ausgeführt wird Ich gebe meinem Canvas-Element Ich zentriere es in der Mitte der Webseite, sowohl Mit der Technik der absoluten Position. Wie in Script GS machen wir das Standard-HTML-Canvas richten vier Codezeilen ein , die immer gleich sind. Zuerst richten wir das Java-Skript anhand seiner ID auf das Canvas-Element aus. Dann nehmen wir diese Canvas-Referenz und rufen eine spezielle Get-Context-Methode auf. Und wir instanziieren eine in die Canvas integrierte API wie folgt. Jetzt können wir diese CTX-Variable verwenden, um alle Zeichenmethoden für die Leinwand aufzurufen , um auf ihre Eigenschaften zuzugreifen Für dieses Projekt habe ich die Breite der Leinwand auf 500 Pixel und die Höhe auf 700 Pixel festgelegt 500 Pixel und die Höhe auf 700 Pixel Ich stelle sicher, dass ich die Größe hier in Java-Skript und nicht in Style-CSS festlege , um sicherzustellen, dass sowohl die Elementgröße als auch die Größe der Zeichenfläche meines Canvas-Elements auf diese Werte eingestellt sind. Verzerrungen zu vermeiden, werden wir Bilder in ein Raster schneiden Jede Zelle in diesem Raster wird ein separates Objekt sein. Hier habe ich einen Bauplan für dieses Zellobjekt. Wir werden auch eine Klasse erstellen. Ich nenne zum Beispiel Effect das Haupt-Gehirn der Codebasis. Wir werden uns um den Status des gesamten Effekts kümmern. Von hier aus erwartet der Konstruktor Canvas als Argument. Ich konvertiere es in eine Klasseneigenschaft Ja, ich kann die Canvas-Variable aus Zeile eins direkt in meine Klasse ziehen aus Zeile eins direkt in meine Klasse Aber ich bevorzuge es, es auf diese Weise zu machen, um meine Klassen unabhängiger von dieser Canvas-Referenz zu halten . Wir werden mit und Höhe extrahieren, weil ich möchte, dass die Abmessungen des Effekts der Größe der Leinwand entsprechen. Ich erstelle eine Instanz der Klasse mit dem neuen Schlüsselwort. Es erwartet Canvas als Argument, ich übergebe ihm die Canvas-Variable aus Zeile eins. Wenn ich den Consol-Effekt verwende, können wir sehen, dass er drei Eigenschaften hat Canvas with und Height Bisher funktioniert alles gut. 3. Wie man alles in einem Raster organisiert: Wir wollen den verfügbaren Leinwandbereich in ein Raster aufteilen. Die Breite jeder Zelle entspricht der Breite der Leinwand geteilt durch, sagen wir, 35. Wir wollen 35 Zellen pro Zeile. Die Höhe jeder Zelle entspricht der Leinwandhöhe geteilt durch 55. Wir wollen 55 Zeilen, 35 Spalten, 55 Zeilen. Lassen Sie uns die Zellenklasse aus Zeile sechs verwenden , um zunächst nur ein Zellenobjekt zu erstellen. Der gesamte Code im Klassenkonstruktor wird Zeile für Zeile ausgeführt wenn wir mit dem neuen Schlüsselwort eine Instanz dieser Klasse erstellen neuen Schlüsselwort eine Instanz dieser Klasse erstellen Wenn ich das mache, wird automatisch eine Instanz der Zellenklasse erstellt An dem Punkt, an dem ich eine Instanz der Effektklasse erstelle , werde ich Ok Cell so konfigurieren, dass wir sehen können , wie ihre Eigenschaften in der Konsole angezeigt werden, während wir sie erstellen Auf diese Weise können Sie beim Aufbau des Projekts überprüfen, ob alles funktioniert Jede Zelle im Grid benötigt Zugriff auf die Eigenschaften der Haupteffektklasse Eine Möglichkeit, dies zu tun, besteht darin, eine Referenz zu erstellen , die auf den Effekt auf den Speicherplatz verweist . Das Haupteffektobjekt besteht darin, dass die Zellen in einem Raster angeordnet werden , sodass sie den gesamten Leinwandbereich abdecken. Jede Zelle erwartet X- und Y-Koordinaten , sodass sie genau weiß, wo sie sich im Raster befinden soll. Ich habe dieses Schlüsselwort übergeben das auf die gesamte Effektklasse verweist Zuerst möchte ich diese Zelle an der Koordinate 00 zeichnen. oberen linken Ecke der Leinwand können wir sehen, dass das Zellenobjekt die Eigenschaften hier in der Konsole korrekt empfängt. Ich möchte, dass alle Zellen dieselbe Breite und Höhe haben, sodass alle vom Haupteffektobjekt aus auf die Zellenbreite und Zellenhöhe zugreifen können. Jetzt haben wir genug Informationen über jede Zelle, um sie tatsächlich mit der benutzerdefinierten Zeichenmethode von Cannabis zeichnen zu können Wir erwarten Kontext als Argument. Auch hier könnte ich CTX direkt aus Zeile zwei ziehen, aber ich ziehe es vor, meine Klassen in Bezug auf ihren lexikalischen Umfang unabhängiger zu machen auf ihren lexikalischen Umfang unabhängiger Ich werde es so machen. Jede Zelle wird nur ein schwarzes Rechteck sein. Im Moment kann ich es von hier aus zeichnen, wenn ich will, aber das wäre nicht praktikabel. Da das Bild aus Tausenden von Zellen bestehen kann. Wir werden sie alle mit einer benutzerdefinierten Rendermethode wie dieser zeichnen . Jetzt rufe ich diese Render-Methode von meiner Effektvariablen aus auf. Ich übergebe es CTX von Zeile zwei. Wir wollen mehrere Zellen zeichnen und ich möchte sie in einem Raster organisieren Die erste Zelle wird hier horizontal sein. Die zweite Zelle wird hier sein. Wir werden horizontal nach der Zellenbreite springen , bis wir die gesamte Zeile abdecken. Dann springen wir vertikal nach Zellenhöhe zur nächsten Zeile. Wir werden dies wiederholen, bis wir den gesamten Leinwandbereich abdecken. Ich werde alle Zellen in einer Reihe halten. Ich nenne es Image Grid. Um diesen Effekt zu erzielen, müssen Sie zwei grundlegende kreative Codierungstechniken und zweitens die Animationstechniken verstehen zwei grundlegende kreative Codierungstechniken . Beide sind extrem wichtig und können allein aufgrund des Effekts, den wir heute erzielen, für Tausende verschiedener Dinge verwendet allein aufgrund des Effekts, den wir heute erzielen, für Tausende verschiedener Dinge werden. Die erste Technik, die wir verstehen müssen, ist, wie man alles in einem Raster organisiert. Wir werden es hier in einer benutzerdefinierten Methode zum Erstellen eines Grids tun. Um ein Raster zu erstellen, verwenden wir zwei verschachtelte vier Schleifen. Verschachtelt bedeutet, dass sich innerhalb einer anderen Schleife eine Schleife befindet. Die äußere Schleife verarbeitet Zeilen im Raster. Wir werden die Leinwand von oben nach unten, Reihe für Reihe, abdecken. Wir werden von oben an der vertikalen Koordinate Null beginnen. Wir werden diese vier Schleifen laufen lassen bis wir die Höhe der Leinwand erreicht haben, das heißt, bis wir den Boden erreichen Anstatt um eins zu springen, werden wir immer nach Zellenhöhe springen , um sicherzustellen, dass jede Zeile die richtige Höhe hat. Jedes Mal, wenn wir zu einer neuen Zeile springen, verwenden wir weitere vier Schleifen, um alle horizontalen Zellen in dieser Zeile zu durchlaufen , von links nach rechts, von Null bis zur Leinwandbreite. Lassen Sie uns das alles aufschreiben und wir werden schnell zusammenfassen, wie die Logik funktioniert Organisieren von Objekten in einem Raster ist eine äußerst nützliche Technik für kreatives Programmieren und auch für die Erstellung von Zwei-D-Spielen Jedes Mal, wenn wir zu einer neuen Zelle im Raster springen, nehmen wir ein Bildraster-Array und schieben eine neue Zelle hinein, wobei wir ihr den Verweis auf das Effektobjekt übergeben. Diesmal übergeben wir ihm den X-Index aus der inneren Schleife und den Y-Index aus der äußeren Schleife, um die Zelle im Raster zu platzieren , während wir sie Zeile für Zeile erstellen, von oben nach unten. Um es noch einmal zusammenzufassen: Die äußere Schleife behandelt Zeilen, die innere Schleife behandelt Spalten, die innere Schleife behandelt Spalten, also die Zellen, die horizontal nebeneinander liegen Nehmen wir an, innerhalb jeder Zeile befinden wir uns in Zeile Null, Y ist eine Null, wir sind oben Hier betreten wir die innere Schleife und schieben eine horizontale Zelle nebeneinander, wobei wir nach Zellenbreite springen, bis wir die Breite der Leinwand erreichen. Wir verlassen die innere Schleife. Die äußere Schleife erhöht Y um die Zellenhöhe. Wir springen wieder zu einer neuen Zeile, wir betreten die innere Schleife, wir platzieren alle Zellen in dieser Zeile von links nach rechts. Wenn wir die Breite erreicht haben, verlassen wir die innere Schleife, erhöhen Y um eins und betreten eine weitere Reihe. Und wir wiederholen diesen Vorgang, bis wir X- und Y-Koordinaten für jede Zelle im Raster haben Y-Koordinaten für jede Zelle im , das die gesamte Leinwand abdeckt. Es ist eine sehr nützliche Technik, wenn Sie ein Anfänger sind , und dies ist das erste Mal, dass Sie das sehen. Mach dir keine Sorgen, es wird sinnvoller sein, wenn du sie öfter verwendest. Wie gesagt, der gesamte Code im Konstruktor wird automatisch ausgeführt, wenn wir eine Instanz dieser Klasse mit dem neuen Schlüsselwort erstellen dieser Klasse mit dem neuen Schlüsselwort Aus diesem Grund kann ich Methoden automatisch auslösen. Von hier aus rufe ich create grid auf, sodass, wenn wir eine Instanz der Effektklasse erstellen, automatisch ein Raster von Zellenobjekten erstellt wird und auch eine Fehlermeldung angezeigt wird, weil wir diese Zelle hier nicht haben. Statt dieser Zeile rufe ich für jede Methode im Bildraster auf dem Array ab Zeile 26 auf. Für jedes Zellenobjekt, das wir gerade in dieses Array eingefügt haben, rufe ich die zugehörige Draw-Methode auf. Ich möchte alle Zellen zeichnen, die wir gerade in der Konsole erstellt haben. Ich kann sehen, dass mein Array 1.980 Zellenobjekte enthält. Ich werde sie stattdessen streichen, damit wir Raster, das wir gerade erstellt haben, besser sehen können Gute Arbeit. Ich kann diese Werte ändern , um die Größe meiner Zellen zu erhöhen oder zu verringern. 4. Wie man Bilder mit Code zeichnet, zuschneidet und schneidet: Jetzt mache ich ein Bild. Idealerweise sollte das Bild die gleiche Größe wie Canavas haben. In meinem Fall sind das 500 mal 700 Pixel. Ich habe das Bild in meinen Projektordner gelegt und verweise hier darauf. Ich gebe ihm eine Vorstellung vom Projektbild. Ich möchte das eigentliche IMG-Element nicht zeichnen . Ich gebe ihm keine Anzeige. Wir wollen das Bild auf Leinwand zeichnen. Stattdessen bringe ich es in mein Projekt hier in der Haupteffektklasse ein. Diese Bildeigenschaft innerhalb von Render nenne ich die eingebaute Draw-Image-Methode. Und ich übergebe ihm das Bild, das ich zeichnen möchte, sowie die X- und Y-Koordinaten. Wo ich es zeichnen soll, kann ich das Bild so bewegen. Ich kann ihm auch optionale Argumente für Breite und Höhe geben. Und das Bild wird gestreckt oder zusammengedrückt, damit es in diesen vordefinierten Bereich passt Ich möchte das Bild in Stücke schneiden. Also werde ich stattdessen die längste Version der Draw-Image-Methode mit neun Argumenten verwenden. Diese Version gibt uns die meiste Kontrolle über das Bild, das wir zeichnen oder animieren Wir übergeben ihr das Bild, das wir zeichnen möchten, Quelle X, Quelle Y, Quellbreite und Quellhöhe, den Bereich, den wir aus dem Quellbild und Ziel X ausschneiden möchten , Ziel Y, Zielbreite und Zielhöhe, um zu definieren, wo das ausgeschnittene Bild gezeichnet werden soll Nehmen wir an, ich möchte am Zielort Cannavas diesen Bereich zwischen der Koordinate 00.200 400 ausschneiden diesen Bereich zwischen der Koordinate 00.200 400 ausschneiden Und ich möchte das ausgeschnittene Stück über die gesamte Leinwand ausdehnen die gesamte Leinwand ausdehnen Wir dehnen es von der Koordinate 00 bis zur Leinwand aus. Bei der Leinwandhöhe haben wir jetzt die volle Kontrolle . Diese vier Werte bestimmen den Zuschneidebereich Diese vier Werte bestimmen, wo das ausgeschnittene Bild gezeichnet werden soll Auf Destination Canavas möchte ich, dass jede Zelle ein kleines Bildstück enthält Ich werde diese Linie durchtrennen. Stattdessen werde ich diese Bildeigenschaft in die Zelle einfügen. Jetzt zeichnen wir das Bild viele Male, einmal für jede Zelle im Raster. Wir können uns das nicht leisten, weil Canvas tatsächlich sehr effizient beim Zeichnen von Bildern ist. Es muss nichts berechnen. Es nimmt einfach die Bilddaten und zeichnet sie. Es ist eine billige Operation im Vergleich zum Zeichnen einer Form. Wenn ich dasselbe Bild an den X- und Y-Koordinaten jeder Zelle zeichne , erhalten wir das. Wenn ich es mit Höhe gebe, enthält jede Zelle das gesamte Bild. Wir wissen bereits, dass wir vier weitere Argumente benötigen , um einen Teil dieses Bildes auszuschneiden. Quelle X, Quelle Y, Quellbreite und Quellhöhe. Wir haben diese Zellen bereits einer Klasse zugeordnet. Wir haben bereits die Werte des Ernteguts in Koordinaten. Wir können das einfach machen. Jetzt sieht es so aus, als würden wir wieder nur ein einziges Bild zeichnen. Aber an diesem Punkt zeichnen wir tatsächlich einen Teil des Bildes aus jeder Zelle. Und die zusammengefügten Zellen ergeben das vollständige Bild. Wie kann ich das beweisen? Zum Beispiel werde ich den automatisch generierten Index verwenden Hier zwei Argumente brauchen wir Klammern. Zeichne nur die Zelle mit einem Index von 300 oder 500. Zeichnen Sie nur die Zellen mit einem Index von mehr als 500 oder weniger als 500. Weniger als 600, 801.000 201.300, ich glaube, das haben wir bewiesen Das ist kein einzelnes Bild mehr, es besteht aus vielen Teilen 5. Wie man Bilder mit Code animiert: Im nächsten Schritt werde ich eine Animationsschleife erstellen. Wir werden einige Werte aktualisieren und die Zellen immer wieder neu zeichnen die Zellen immer wieder um eine Illusion von Bewegung zu erzeugen Ich füge Render ein und rufe den eingebauten Anforderungsanimationsrahmen Und ich rufe Animate auf, um die Animation zu starten. Es sieht statisch aus, aber wir animieren bereits. Das kann ich beweisen. Ich gebe jeder Zelle Eigenschaften für Folie X und Folie Y. Je nachdem, wo wir diese innerhalb der Zeichenmethode hinzufügen, werden sehr unterschiedliche Dinge passieren . Ich werde diese zu den X- und Y-Koordinaten der Quelle hinzufügen , die den Schnittbereich bestimmen Wir könnten sie aber auch zu Ziel X und Ziel Y hinzufügen , um völlig andere Effekte zu erzielen Wenn jede Zelle denselben geringen Wert hat, bewegt sich das gesamte Bild. Aber was passiert, wenn wir sie randomisieren? Dadurch werden sie beim Laden der ersten Seite nur einmal randomisiert. Was ist, wenn ich eine Aktualisierungsmethode erstelle und diese für jeden Animationsframe randomisiere Für jeden Animationsframe rufen wir update und wir werden alle Zellen immer wieder neu zeichnen Interessant. Ich hoffe, das bereitet niemandem Kopfschmerzen. Ich kann Folie Y auch nach dem Zufallsprinzip anordnen, wie dieses wunderschöne Chaos, Kreatives Programmieren Ich kann das Bild auch zur Seite gleiten lassen. Höherer Wert, schätze ich. Ja, beweg dich schneller. Beweg dich in die entgegengesetzte Richtung, oder? Ich denke, wir haben bewiesen, dass wir tatsächlich animieren. Wir können das Raster auch hier sichtbar machen. 6. Maus-Interaktivität: Ich kann dieses Consolo löschen. Ich möchte Mauskoordinaten erfassen. Ich erstelle hier ein Objekt , das sie für mich speichert. Radius wird der Interaktionsbereich um die Maus herum sein , in dem die Zellen auf irgendeine Weise auf die Anwesenheit von Mäusen reagieren. Ich nehme diese Canvas-Referenz aus Zeile 28 und füge einen Mouse Move Event Listener Ich kann Event-Listener hier im Konstruktor deklarieren hier im Wir wissen bereits, dass dies bedeutet, dass sie automatisch angewendet werden , wenn wir eine Instanz der Effektklasse erstellen Die einzige Sache hier ist, dass die Callback-Funktion keine reguläre Funktion sein kann Es muss eine ES-Funktion mit sechs Pfeilen sein , damit wir dieses Schlüsselwort verwenden , das innerhalb dieses Callbacks auf dieses Effektobjekt und seine Eigenschaften verweist innerhalb dieses Callbacks auf dieses Effektobjekt und seine Eigenschaften Andernfalls wäre es undefiniert. Pfeilfunktionen erben diese Referenz, dieses Schlüsselwort aus dem übergeordneten Bereich Ich kann das automatisch generierte Ereignisobjekt konsolidieren. Wenn ich es öffne, wollen wir die X- und Y-Koordinaten des Mauszeigers Wichtig dabei ist , dass diese Werte nur dann gut für uns sind , wenn die Leinwand im Vollbildmodus angezeigt wird. Da meine Leinwand nicht im Vollbildmodus angezeigt wird, benötige ich X- und Y-Koordinaten, die den weißen Bereich um die Leinwand herum berücksichtigen. Ich muss die Werte Offset X und Offset Y verwenden. Stattdessen berücksichtigen diese Eigenschaften den Leerraum zwischen Webseite und der Leinwand, um uns die richtige Mausposition im Verhältnis zur Leinwand zu geben . Da ich hier eine Pfeilfunktion verwendet habe, kann ich vom Callback aus auf Domus X zugreifen und es auf Offset x einstellen. Ich mache dasselbe für die vertikale Y-Koordinate, die ich vertikale Y-Koordinate getestet habe, indem ich diese Werte konsologiere Ich bewege die Maus über die Leinwand und erhalte die Koordinaten 7. Wie man den Abstand zwischen 2 Punkten findet: Nun die zweitwichtigste Technik, die wir heute anwenden werden. Wir wollen den Abstand zwischen zwei Punkten in einem Raum mit zwei D berechnen , in diesem Fall zwischen Maus und Zelle. Dazu benötige ich D X, den Abstand zwischen der Maus und diesem Zellenobjekt auf der horizontalen X-Achse. Ich werde hier eine Helfereigenschaft haben. Ich nenne x-Geschwindigkeit auf der horizontalen X-Achse. Wenn ich Folie x plus gleich dx mache, entsteht völliges Chaos Lass uns das beenden. Ich brauche auch D Y, den Abstand zwischen diesen beiden Punkten auf der vertikalen Y-Achse. Um den Abstand zwischen diesen beiden Punkten in einem Raum mit zwei D zu berechnen, muss ich einen Hypotenus berechnen Wir haben diese Seite und diese Seite. Der Abstand zwischen diesen beiden Punkten ist der Hypotenus, die längste Seite des rechtwinkligen Das heißt, ich kann die Theoremformel von Pitagora verwenden, die in Java Script so aussehen würde Da wir uns jedoch in einer Java-Script-Umgebung befinden, können wir auch die eingebaute Masterhypotenus-Methode verwenden, die uns den gleichen Wert gibt, den Abstand zwischen Maus und dieser Zelle können wir auch die eingebaute Masterhypotenus-Methode verwenden, die uns den gleichen Wert gibt, den Abstand zwischen Maus und dieser Zelle . Ich sage, wenn die Entfernung kleiner ist als Radiuswert, den wir für das Mausobjekt definiert haben Wir werden etwas Emotionsphysik machen. Wir werden eine Hilfsvariable erstellen. Ich nenne zum Beispiel Gewalt. Sie entspricht dem Verhältnis zwischen der aktuellen Entfernung und dem Radius, der der maximal möglichen Entfernung entspricht innerhalb der die Zellen auf die Maus reagieren. Ich habe Geschwindigkeit x zu Kraft für jeden Animationsframe angegeben Wir vergrößern den horizontalen Schnittbereich der Folie für jede Zelle um diese horizontale Geschwindigkeit von V X. Wenn ich die Maus bewege, wird mir klar, dass wir die Entfernung bereits erkennen Ich sage L. Wenn die Entfernung größer ist, stellen Sie sicher, dass die Zellen nicht mehr rutschen. Die vertikale Geschwindigkeit entspricht ebenfalls der Kraft. Wir fügen es hier hinzu. Ich definiere es hier oben. Ich werde das Verrutschen in der L-Anweisung wieder beenden. Okay, wir kommen beim ersten Laden der Seite dorthin , wir bekommen eine Bewegung in der oberen linken Ecke, die von der Koordinate 00 herrührt. Das liegt daran, dass ich die Maus X und Y zunächst auf Null setze, aber in diesem Fall werden sie von Javascript als 00 angesehen. Obwohl es besser ist, die Null manuell zu setzen, muss ich in diesem Fall stattdessen auf undefiniert setzen Jetzt gibt es zunächst keine Bewegung in der oberen linken Ecke, die das Problem behoben hat Auch wenn die Maus die Leinwand verlässt, wird die Interaktion mit der letzten bekannten Mausposition fortgesetzt. Ich kopiere diesen Codeblock und verwandle ihn in ein Mouse-Leave-Event. Hier werden wir sie auch auf undefiniert setzen. Jetzt bekommen wir Animationen. Nur wenn wir die Maus über Canavas bewegen. Wir machen große Fortschritte. 8. Richtung von Punkt A nach Punkt B bekommen: Jetzt möchte ich, dass die Bildsegmente in die richtige Richtung, direkt oder in Richtung der Maus, erweitert werden. Das ist ziemlich weit fortgeschritten. Falls du Mathe 82 noch nie benutzt hast, musste ich diese Methode für ein paar Projekte anwenden , bevor ich sie besser verstanden habe. Mach dir keine Sorgen, wenn es nach einmaligem Gebrauch nicht ganz klar ist. Wenn Sie ein Animationsanfänger sind, können Sie sich diesen Teil einfach noch einmal ansehen Oder du kannst dir viele andere Tutorials ansehen ich gemacht habe, in denen ich diese Technik verwende Diese Technik verwendet ein kreativer Programmierer häufig. Und es wird klar sein, wenn Sie sie verwenden und mit den Werten herumspielen, um zu sehen, was sie bewirken in Mathematik eingebaute 8102-Methode gibt uns einen Winkel im Bogenmaß Wir können diesen Winkelwert verwenden , um einen Winkel zwischen zwei Punkten in einem Raum mit zwei D zu ermitteln und zwei Objekte aufeinander zu oder voneinander weg zu bewegen In diesem Fall sind die beiden Objekte der Mauszeiger und die Zelle, die den Bildausschnitt enthält. Wir berechnen bereits DX und DY, horizontalen und vertikalen Abstand zwischen der Maus und der Zelle. Methode 82 erwartet, dass diese Argumente uns den Richtungswinkel zwischen ihnen angeben. Sie erwartet zuerst y und D x als zweites. Es ist wichtig, sich daran zu erinnern, dass diese eingebaute Methode einfach so funktioniert. Methode 82 gibt uns einen Winkel zwischen zwei Punkten, Maus und Zelle. In diesem Fall gibt sie den Winkel im Bogenmaß zwischen der positiven X-Achse zurück Bogenmaß zwischen der positiven X-Achse Und ein Strahl von 00 zu einem bestimmten Punkt. So wie wir das verwenden, geht der Strahl von Objekt eins aus der Zelle in Richtung X und Y der Maus. Denken Sie daran, dass sich die Maus rechts oder links von der Zelle befinden kann , was bedeutet, dass wir positive oder negative Werte erhalten können. Der Wertebereich liegt zwischen plus Pi und minus pi Wenn Sie hier in dieser Formel zuerst oder an zweiter Stelle die Maus verwenden hier in dieser Formel zuerst oder an zweiter Stelle , erhalten Sie einen anderen Satz von Werten. Die resultierenden Winkelwerte werden unterschiedlich angeordnet sein, aber beim kreativen Programmieren macht uns das nichts aus, denn sobald wir die Animation erhalten haben die Objekte aufeinander zubewegen, können wir ihre Richtung ändern, indem die Werte mit minus eins multiplizieren Was ich damit sagen will, ist, dass wir den Code später an die Werte anpassen können , die Methode e zwei uns gegeben hat Ich werde es dir zeigen, um es noch einmal zusammenzufassen. Für unsere Zwecke verwendet Methode e zwei DY und dx, den Abstand zwischen zwei Punkten auf einer vertikalen, horizontalen Achse Basierend auf diesen beiden Werten erhalten wir einen Winkel zwischen minus Pi und plus pi. Aus diesem Winkel wissen wir, in welche Richtung wir die Objekte bewegen wollen , damit sie sich aufeinander zu oder voneinander weg bewegen. Der Wertebereich zwischen minus Pi und plus pi deckt die gesamte kreisförmige Fläche ab. Da der Vollkreis aus zwei Pi und 360 Grad besteht , bedeutet dies, dass wir alle möglichen Richtungen auf einer Ebene mit zwei D abdecken. Ich weiß, dass das viel Mathe für Anfänger ist Verspüre zu diesem Zeitpunkt nicht den Druck, all das vollständig zu verstehen. Durch die Übung wird klar, dass Sie, wenn Sie diese Technik erst einmal verstanden haben, so viele wirklich coole Effekte erzielen können. Die Mühe lohnt sich. Okay, jetzt werden wir diesen resultierenden Winkelwert an Sinus- und Kosinus-Methoden weitergeben , die ihre Position entlang einer kreisförmigen Fläche abbilden Sinus und Kosinus können zusammenarbeiten, wenn beide dieselbe Winkeleingabe erhalten , um eine kreisförmige Bewegung oder ein Wellengefühl zu erzeugen , je nachdem, wie wir sie verwenden Da Sinus und Kosinus diese Winkelwerte zwischen einem Bereich von minus eins bis plus eins umrechnen diese Winkelwerte zwischen , würden wir kaum eine Bewegung sehen Mit diesen kleinen Werten multiplizieren wir diesen kleinen Richtungsvektor mit einer Kraft, die seinen Radius vergrößert Wir wissen, dass die Kraft in direktem Zusammenhang mit dem Verhältnis zwischen der aktuellen Entfernung zwischen den beiden Objekten, Maus und Zelle, und ihrer maximal möglichen Entfernung steht dem Verhältnis zwischen der aktuellen Entfernung zwischen den beiden Objekten, Maus und Zelle, und ihrer maximal möglichen Dadurch wird unser Projekt um eine Menge schöner Physik und die Bewegung wird glatt und natürlich aussehen. Wir sind an dem Punkt angelangt, an dem ich überprüfe, welche Bewegung wir bekommen. Dann passe ich einfach die Werte an, um die gewünschte Bewegung zu bekommen. Ich synchronisiere die Sinus- und Kosinus-Ausgabe, indem ich sie vertausche. Stattdessen erhalten wir diese Bewegung Auf diese Weise können Sie eine kreisförmige Bewegung erzeugen, die vom Mittelpunkt weg strahlt. In diesem Fall ist unser Mittelpunkt der Mauszeiger. Ich habe hier diese L-Anweisung, damit das Bild wieder an seinen Platz rutscht, wenn sich die Maus wegbewegt. Aber um eine völlig gleichmäßige Bewegung zu erzielen , bei der die Bildteile hin und her gleiten. Idealerweise sollte das Ganze als ein einziger Wert berechnet werden. Und dann wenden wir diesen endgültigen Wert auf die Eigenschaften von Folie X und Folie Y an. Dadurch erhalten wir ein viel besseres Ergebnis, aber wie machen wir das? 9. Bewegungsphysik-Formel (Friktion und Lockerung): Ich möchte hier eine Berechnung haben , die das Ergebnis zweier konkurrierender Kräfte ist Der erste Teil hier ist das Wegdrücken von der Maus, wenn die Maus und die Zelle nahe genug beieinander sind. Der zweite Teil dieser Berechnung wird eine Kraft sein , die die Bilder an ihren ursprünglichen Platz zurückschiebt . Da diese beiden Kräfte Teil einer einzigen Formel sein werden, vermeiden wir jegliche Bewegung hin und her , da hier am Ende nur ein einziger Wert berechnet wird. Lassen Sie uns diese Formel erweitern und erklären. Der erste Teil ist die Kraft, die die Teile verschiebt. Und der zweite Teil wird versuchen, sie wieder dahin zu bringen , wo sie ursprünglich waren, und zwar in ihre Ausgangsposition Jetzt rutschen sie zu schnell zurück. Denken Sie daran, dass diese gesamte Aktualisierungsmethode wieder 60 Mal pro Sekunde ausgeführt wird. Diese Werte werden für jeden Animationsframe neu berechnet. Ich möchte die Folie nicht ganz nach hinten schieben, sondern nur um einen Bruchteil der Differenz zwischen der aktuellen Position und der ursprünglichen Standardposition Ich habe mit Easing multipliziert, um diese einzelnen Schritte dazwischen so zu erstellen diese einzelnen Schritte dazwischen so Ich möchte, dass sie langsam wieder dahin zurückkehren, wo sie waren. Ich probiere verschiedene Werte aus und sehe, was jetzt passiert. Gleichzeitig möchte ich, dass die Schubkraft Zeit abnimmt und allmählich schwächer wird. In der realen Welt der Physik nennen wir diese Kraft Reibung. , dass für jeden Animationsframe Ich möchte, dass für jeden Animationsframe nur 80% der Schubkraft auf die Kraft entfallen. Das bedeutet, dass sie allmählich schwächer und schwächer wird und irgendwann in der zweiten Hälfte der Formel, die ihr entgegenwirkt, überwältigt wird. Dabei wird versucht, die Zelle um einen Bruchteil der Differenz zwischen ihrer aktuellen Position und ihrer ursprünglichen ursprünglichen Position an ihren ursprünglichen Platz zurückzubewegen um einen Bruchteil der Differenz zwischen ihrer aktuellen Position und ihrer ursprünglichen ursprünglichen Position an ihren ursprünglichen Platz der Differenz zwischen aktuellen Position und ihrer ursprünglichen ursprünglichen Position an ihren ursprünglichen Ich mache dasselbe für die vertikale Y-Koordinate. Wir verschieben den Zuschneidebereich jeder Zelle, indem wir zwei konkurrierende Kräfte darauf anwenden Diese Kräfte wirken zwar gegeneinander, sind aber beide Teil einer einzigen Formel Wir bekommen eine sanfte Bewegung. Wenn also der Abstand zwischen Zelle und Maus kleiner als der von uns vordefinierte Radiuswert ist, die vertikale und horizontale Kraft berechnet die die Folien von der Maus wegdrückt. Diese Druckkraft wird als erster Teil der Formel auf die Werte von Folie X und Folie Y angewendet . Und diese Druckkraft nimmt jedem Animationsframe durch Reibung Die Geschwindigkeit dieses Abfalls kann geändert werden, indem dieser Reibung ein anderer Wert Dann wenden wir eine Kraft in die entgegengesetzte Richtung an. Wenn es hier ein Plus gibt, brauchen wir hier ein Minus. Und diese entgegengesetzte Kraft ist ein Bruchteil der Differenz zwischen der ursprünglichen Position der Partikel und der aktuellen Position. Wenn die Druckkraft langsam nachlässt und die Animation läuft, übernimmt irgendwann die rechte Seite der Formel die Oberhand und die Folien kehren wieder an ihre ursprüngliche Position zurück Ich ermutige Sie, mit all diesen Werten zu spielen. Vertausche, Sinus und Kosinus, vertausche Plus und Minus, gib Reibung und Lockerung verschiedener Werte Sie können diese Formel stattdessen auch auf X und Y der Zellen anwenden , um einen völlig anderen Effekt zu erzielen Nachdem Sie Ihre eigenen Experimente durchgeführt und dem Zufallsprinzip coole und einzigartige Effekte erzielt haben, werden diese Berechnungen noch sinnvoller sein. Ich kann die Rechtecke, die wir zeichnen, auskommentieren , weil der Effekt dadurch leistungsfähiger wird der Effekt dadurch leistungsfähiger Zeichnen von Bildern auf Leinwand ist billig, aber das Zeichnen von Formen ist teuer Selbst bei Rechtecken, die zu den einfachsten Formen gehören , bestimmt der Wert, den wir der Leichtigkeit beimessen wie schnell die Teile wieder an ihren Platz gleiten Der Wert, den wir der Reibung geben, bestimmt wie schnell die Schubkraft pro Animationsframe abnimmt Reibung muss immer kleiner als eins und größer als Null Wenn du ihm mehr als eins gibst, wird sich die Druckkraft einfach endlos erhöhen und das Bild wird sich nie wieder von selbst zusammensetzen Nicht nur diese Werte selbst, sondern auch das Verhältnis zwischen diesen beiden Werten beeinflusst die Bewegung Jetzt nimmt die Schubkraft nur noch um 1.000 pro Animationsframe ab, was bedeutet, dass sie für eine lange Zeit hoch bleibt Dot teilt im Grunde den Abstand zwischen der ursprünglichen Ausgangsposition und der aktuellen Position in mehrere Teile auf und bewegt ihn Schicht für Schicht zurück Richtung der ursprünglichen Position Wenn dieser Punkt 0,01 beträgt bewegen wir uns pro Animationsframe um 100% des Abstands zwischen der ursprünglichen und der aktuellen Position der Druck das Gehäuse jedoch um 10% pro Animationsframe drückt, können die Zellen irgendwann wieder an ihren Platz zurückgleiten. Ich bin mir nicht sicher, ob meine Erklärungen am Ende geholfen oder es noch verwirrender gemacht haben. Der beste Weg ist, selbst mit den Werten zu spielen, zu sehen, welche Bewegung Sie bekommen, und es wird Sinn machen. Nachdem wir uns mit dieser Technik befasst haben, sind Sie bereit für eine fortgeschrittenere Version dieses Effekts, bei der wir jedes Pixel im Bild in ein Teilchen umwandeln und eine ähnliche physikalische Formel darauf anwenden. Wir können auch die Anzahl der Zellen erhöhen , aus denen das Bild besteht. Je mehr Zellen, desto leistungsintensiver wird der Effekt sein. Natürlich fordere ich momentan Javascript auf, 3.500 Bilder 60 Mal pro Sekunde zu zeichnen und ihre Zuschneidebereiche so zu verschieben, und ihre Zuschneidebereiche so zu verschieben Bewegungsphysik für jede Zelle berechnet Auf meinem Computer läuft es immer noch ziemlich flüssig, aber ich sollte wahrscheinlich nicht so viele Zellen verwenden Es zeigt nur, wie gut Canvas Bilder rendern kann. 10. Bewege die Zellen herum: Okay, das war die anfängerfreundliche Version des Kurses. Ich komme zurück, um dir ein paar schnelle Feuerexperimente zu geben. Ich lösche diese Konsole, wir haben diese vier Variablen, um den Zuschneidebereich innerhalb jeder Zelle zu verschieben den Zuschneidebereich innerhalb jeder Zelle und zu verschieben Ich werde vier weitere Variablen erstellen. Und diese vier verschieben die Zellposition X und die Position Y für die horizontale und vertikale Position jeder Zelle. Und Geschwindigkeit X und Geschwindigkeit Y für ihre Bewegung. Geschwindigkeit, Folie X und Folie Y werden hier auf Quelle X und Quelle Y angewendet. Argumente, die an die Methode „Bild zeichnen“ übergeben werden, bestimmen die Position des Zuschnitts im Bereich Wir verschieben den Zuschnitt mit VX und VY in die Fläche. Jetzt nehme ich Position X und Position Y als separate Variablensätze und wende sie auf Ziel-X- und Ziel-Y-Argumente Dieser Bereich ist für die Nutzpflanzeneffekte vorgesehen, dieser Bereich für Zellpositionen und Bewegungen. Sie werden gut zusammenarbeiten. Wenn wir das machen, dann schauen wir mal, wie es läuft. Geschwindigkeit X ist die endgültige Zielposition abzüglich der Startposition. Wir werden wieder lockern. Wir werden diese Reise in zehn Teile zerlegen. Und wir werden die Zelle um ein Zehntel der Entfernung pro Animationsframe in Richtung ihrer Zielposition bewegen . Geschwindigkeit Y ist auch die Zielposition abzüglich der Startposition geteilt durch einen leichten Wert. Jetzt kann ich diese Werte nehmen und sie auf Position X und Position Y anwenden, da wir die Werte hier in Draw Image als Ziel X und Ziel Y verwenden . Dadurch werden die Zellen selbst tatsächlich so bewegt Sie bewegen sich alle gleichzeitig, also skaliert es einfach so Wir können das auf viele verschiedene Arten viel interessanter machen . Lass mich dir einige davon zeigen. Zum Beispiel wird jede Zelle einen zufälligen Wert 2-12 haben und wir werden jede Zelle um ihre eigene zufällige Leichtigkeit mit dem Wert 2,52 lockern . Hier können wir die Startpositionen ändern , werden die Zellen aus verschiedenen Punkten herausfliegen Leinwand Je nachdem, was wir hier tun, werden die Zellen aus verschiedenen Punkten herausfliegen, zum Beispiel aus verschiedenen Ecken der Untere rechte Ecke, untere Mitte. Nett, ich habe dir gesagt, wir werden das interessanter machen. Beachten Sie, dass die Bilder immer noch auf die Maus reagieren , indem sie den Zuschneidebereich verschieben 11. Performance-Optimierungen: Ich kann sie auch streicheln, aber ich muss hier Position X und Position Y verwenden Ja, das ist so cool. Das Streichen dieser Rechtecke beeinträchtigt die Leistung. Lassen Sie uns hier die Anzahl der Zellen reduzieren. Das sieht immer noch toll aus, findest du nicht? Versuchen wir, eine gute Zellengröße zu finden. Das einzige Problem ist, dass dieser Codeblock die ganze Zeit läuft. Ich möchte etwas Leistung sparen und Berechnung dieser kleinen Pix-Werte beenden Die Zellen befinden sich zu dem Zeitpunkt, an dem das Bild zusammengesetzt wurde, nahe genug an ihren ursprünglichen Zielpositionen Zeitpunkt, an dem das Bild zusammengesetzt wurde oder zumindest fast nahe genug zusammengesetzt Ich sage nur, wenn Geschwindigkeit x größer als 0,1 ist oder Geschwindigkeit Y größer als 0,1 ist. Erst dann bewegen Sie sie. Andernfalls gehen wir davon aus, dass sie das Bild bereits zusammengebaut haben. Diese Berechnungen sind nicht erforderlich. Jetzt haben wir keine Geschwindigkeit X und Geschwindigkeit Y. Wir müssen sie festlegen, wenn die Zelle erstellt wird Geben wir jeder Zelle eine benutzerdefinierte Startmethode. Hier werden wir die Geschwindigkeiten einstellen. Wir werden diese Startmethode automatisch vom Konstruktor aus aufrufen diese Startmethode automatisch vom Konstruktor aus Das Problem ist, dass sich Zellen links oder rechts befinden können. Die Geschwindigkeiten können negativ oder positiv sein. Grundsätzlich möchte ich diesen Code nur ausführen, wenn die Geschwindigkeiten kleiner als -0,1 und mehr als plus 0,1 sind , was bedeutet, dass die Zellen weit genug von ihren Zielpositionen entfernt sind weit genug von ihren Zielpositionen entfernt und ich möchte, dass sie sich bewegen Lass uns einfach das Minus entfernen. Wenn Sie diese wie folgt in die Methode Absolute einschließen, wird die absolute Zahl zurückgegeben. Okay, dieser Codeblock bewegt jede Zelle von ihrer Startposition zu ihrer Zielposition. Sobald die Zellen nahe genug sind und das Bild zusammengesetzt wurde, führen wir diesen Codeblock nicht mehr aus, um die Leistung zu erhöhen. 12. Kreative Programmierexperimente: Ich möchte testen, ob dieser Codeblock tatsächlich nicht mehr ausgeführt wird. Wir haben für jede Schleife den Indexwert der Zellen übergeben. Hier möchte ich, dass jede Zelle einen eindeutigen Indexwert für jede neue Zelle, die wir erstellen, um eins erhöht wird. Ich übergebe diesen Wert an den Zellenklassenkonstruktor. Als viertes Argument stelle ich sicher, dass es hier erwartet wird und dass es in eine Klasseneigenschaft umgewandelt wird Ich werde hier den Index jeder Zelle zusammenfassen. Ich möchte sicherstellen, dass alle diese Berechnung irgendwann beenden , wenn die Zellen nahe genug an ihren Zielpositionen sind und das Bild zusammengesetzt wurde. Die Grenze, wie nah sie sein sollen , kann hier und hier geändert werden Ja, wir können sehen, dass alle Indizes irgendwann nicht mehr gesperrt Ein solches Consolo wird Ihr Projekt verlangsamen. Wir müssen sicherstellen, dass wir es entfernen, wenn wir es nicht benötigen. Wir können so viele andere Dinge tun. Jede Zelle hat einen eindeutigen Indexwert. Wir rufen die Startmethode automatisch auf, wenn wir jede Zelle erstellen. Wir könnten sie auch verzögern, indem wir eine festgelegte Zeit festlegen. Hier übergeben wir die Callback-Funktion. Wie lange muss man warten, bis das läuft? Ich möchte sie nicht alle um 500 Millisekunden verzögern. Jeder wird durch seinen eigenen Indexwert verzögert. Callback führt die Startmethode und dies gibt uns einen Fehler Der Grund ist dieses Schlüsselwort, es wird im Rahmen dieses Rückrufs undefiniert Wir haben dieses Problem bereits mit Rückrufen und diesem Schlüsselwort hier in Event-Listenern festgestellt Wir wissen, dass es eine einfache Lösung gibt, da Pfeilfunktionen dies vom übergeordneten Bereich erben Wir verwandeln den Rückruf in eine Pfeilfunktion und los geht's, wir haben eine benutzerdefinierte Verzögerung Wir können diese Verzögerung erhöhen, indem wir den Index multiplizieren Zuschneidebereich der Zellen immer noch verrutscht Während all diese Dinge passieren, nett, jetzt kann ich hier die Startpositionen ändern , um eine Reihe von verschiedenen interessanten Effekten zu erzielen eine Reihe von verschiedenen interessanten Wie wäre es mit der Mitte? Anstatt die Zellen in das Array zu schieben, mache ich die Verschiebung rückgängig, fülle das Zellenfeld vom anderen Ende aus, und das wird dazu führen, dass die Zellen von der Rückseite des Bildes kommen, so wie hier Wenn Sie Leistungsprobleme haben, empfehle ich, den Strich, die rechteckige Kohle aus Zeile 32 zu entfernen . Andernfalls können Sie weniger Zellen zeichnen Durch die Anpassung der Zellen Zellenhöheneigenschaften auf dem Effektglas können wir dafür sorgen, dass sie von oben in der Mitte erscheinen. So wie das. Wir können ihr Start-X auch randomisieren und einen anderen Effekt erzielen Wie wäre es mit zufälligem X und unterem Y? Wir können auch alte Farbe zwischen jedem Animationsframe entfernen , um einen solchen Effekt zu erzielen. Wie wäre es mit zufälligem X und zufälligem Y0x und zufälligem Y negativem X und zufälligem Y0x Sie bewegen sich alle mit gleichbleibender Leichtigkeit. Dann kann ich die Muster besser organisieren indem ich diese beiden Werte anpasse. Ich habe dir so viele weitere Werte gegeben, die du anpassen kannst. Jetzt ist es an der Zeit, dass Sie das, was wir gelernt haben, nehmen und sich Ihre eigene einzigartige Kombination einfallen lassen Wir haben die vollständige Kontrolle und wir verstehen, wie dieser Code funktioniert. Wenn Sie sich bei einigen dieser Punkte nicht sicher sind, spielen Sie mit den Werten und beobachten Sie, was passiert. Es wird anfangen, mehr Sinn zu machen. Irgendwann können wir das auf eine ganz neue Ebene bringen. Indem wir jede Zelle nur zu einem kleinen Pixel im Bild machen, können wir Bilder haben, die aus viel mehr Teilen bestehen. Verwandeln Sie Bilder in Partikeleffekte und zum Beispiel sogar in Partikelregen oder Partikelfeuer. Wenn Sie bereit sind, Ihre Bilder auf das nächste Level zu bringen, sehen wir uns im nächsten Teil. 13. 106-intro mit geringerer Lautstärke: Javascript ist ein mächtiges Tool. Lassen Sie uns die Geheimnisse der Zeichen- und Animationstechniken in der modernen Frontend-Webentwicklung erkunden Zeichen- und Animationstechniken in der . In diesem Kurs zeichnen wir zunächst ein einfaches Rechteck und ein Bild auf HTML-Canavas Wir werden herausfinden, wie man aus diesen Rechtecken ein Es wird ein intelligentes Partikelsystem sein, das Formen auf der Grundlage von Pixeldaten nachbilden und sich diese merken kann Formen auf der Grundlage von Pixeldaten nachbilden und sich diese merken Ich werde Ihnen zeigen, wie Sie jedem Bild Physik wie Reibung und Lockerung geben können. Außerdem fügen wir einige Mausinteraktionen hinzu, fügen wir einige Mausinteraktionen bei denen wir das Bild in einzelne Pixel zerlegen können , sodass es sich automatisch wieder Komm zu mir und lass uns lernen, wie man Bilder in interaktive digitale Kunstwerke verwandelt 14. Lektion mit Partikelbildern 1: Wir beginnen mit der Erstellung von drei Dateien Index-HTML, Style-CSS und Script GS. Ich öffne Index-HTML. In meinem Internetbrowser werde ich Google Chrome verwenden. In Index-HTML erstelle ich ein grundlegendes Webseiten-Markup. Ich verwende den Visual Studio-Code-Editor mit der Erweiterung Met, also kann ich einfach das Ausrufezeichen und die Tabulatortaste drücken und schon erhalte ich eine grundlegende Webseiten-Bilerplate Dieses Video ist eine Einführung in HTML-Canvas. Aber ich gehe davon aus, dass Sie einige Grundlagen von Java-Skript kennen. Gib meiner Webseite einen Titel. Zum Beispiel tolle Javascript-Effekte. Ich verlinke meine Stasis als Datei wie folgt. Ich erstelle ein HTML-Five-Canvas-Element mit einer Idee von Canvas One HTML-Canvas-Element wird zum Zeichnen von Grafiken auf einer Webseite verwendet. Wir können sowohl statische Formen als auch dynamische interaktive Animationen zeichnen als auch dynamische interaktive Animationen , die auf Benutzereingaben reagieren, was wir heute tun werden. Das Leinwandelement ist ein Behälter für unsere Kunstwerke, es ist unsere Kunsttafel. Wir können Javascript verwenden, um Formen, Linien, Text oder Bilder darauf zu zeichnen . Es mag sehr einfach klingen, aber wenn Sie erst einmal verstanden haben, wie Leinwand funktioniert, können Sie eine unendliche Vielfalt an digitaler Kunst, interaktiven Spielen und Webgrafiken erstellen. In diesem Kurs werden wir untersuchen, was mit Bildern gemacht werden kann, und wir werden von den Grundlagen zu einigen wirklich coolen Effekten für Fortgeschrittene übergehen . Hoppla, ich erstelle ein Diff-Element mit einer Klasse von Steuerelementen, und darin werden wir eine Schaltfläche mit einer Vorstellung von der Warp-Schaltfläche und einem Text mit der Aufschrift Warp haben Warp-Schaltfläche und einem Text mit der Aufschrift Warp Wenn wir darauf klicken, zerlegt es das Bild in einzelne Partikel und das Bild einzelne Partikel und das Bild setzt sich wieder von selbst zusammen Automatisch können wir die Geschwindigkeit und das Gewicht der Partikel steuern , während sie sich bewegen Dieses Projekt wird auch zwei D-Physiken beinhalten. Keine Sorge, es ist nicht so kompliziert, wenn du es Schritt für Schritt mit mir machst, während wir den Code schreiben. Wir werden auch die Skript-G-Datei hier unten verlinken. Um unsere Java-Script-Logik in StyssSS zu verknüpfen, beginne ich mit einem globalen Reset, um sicherzustellen, dass unsere Seite in allen verschiedenen Browsern gleich aussieht Ich verwende den Sternchen-Selektor , um alle Elemente auf der Seite als Ziel auszuwählen, und setze den und setze Und wenn Sie eine Leinwand mit einer Leinwand-ID auf Null auffüllen, hat eine Leinwand einen blauen Hintergrund . Das ist nur temporär, damit ich sehen kann , wo es sich auf der Seite befindet, wenn ich es positioniere . Eine Klasse von Steuerelementen wird Dadurch wird es aus dem Dokumentenfluss entfernt und über dem Canvas-Element platziert. Wir müssen sicherstellen, dass die darin enthaltenen Schaltflächen durch nichts verdeckt werden und dass sie immer anklickbar sind Also habe ich seinen Z-Index auf 100 gesetzt ihn ganz oben vor allen anderen Elementen platziert 15. Lektion 2 mit Partikelbildern: Ich gehe zurück zum HTML-Index und erstelle ein Bildelement. Ich gebe ihm eine Bild-ID mit der Quelle des Bildes. Wir müssen einen kleinen Trick machen. Ich habe meine Bilddateien auf meinem Desktop bereit. Es ist nur ein normales Bild im PNG-Format mit transparentem Hintergrund. Wenn ich dieses Bild einfach in meinen Projektordner lege und das Bildquellenattribut darauf verweise, wie wir es normalerweise tun würden , können wir das Bild auf Leinwand zeichnen, aber wir können es nicht auf Pixeldaten analysieren und es in Partikel aufteilen. Wenn wir das versuchen, erhalten wir eine Fehlermeldung, die besagt, dass die Leinwand durch ursprungsübergreifende Daten verunreinigt wurde Dieser Fehler sollte nur auftreten , wenn Sie Ihren Code lokal ausführen Sobald Sie das Projekt auf einen Online-Server hochgeladen haben, wird die PNG-Datei in der Quelle als derselben Quelle betrachtet. Aber wir wollen , dass dieses Projekt jederzeit funktioniert. Wir wollen keine Fehler auslösen auch wenn wir so lokal arbeiten. Um die Warnung vor verdorbenem Canvas zu umgehen, konvertieren wir das Bild selbst in Code Wir weisen diesen Code hier als Quelle zu. Auf diese Weise wird das Bild selbst Teil der Index-HTML-Datei sein. Daher wird es unter allen Umständen als identischer Ursprung betrachtet unter allen Umständen als identischer Ursprung Die meisten Menschen wissen nicht, dass Bilder im Internet in eine einzige sehr lange Codezeile aufgeteilt werden können . Wir nennen das eine Base-64-Zeichenfolge. Diese Codezeile enthält alle Bilddaten. Ersetzt die PNG-Datei, die wir hier haben, vollständig. Ich kann mein Bild in das Base-64-Format konvertieren , indem ich das Bild auf die Leinwand zeichne und dann die integrierte Methode mit zwei Daten-URLs für das Canvas-Element aufrufe , wodurch die gesamte Leinwand mit dem darauf gezeichneten Bild in einen Datenbildschirm umgewandelt wird. Heute werden wir dafür eine noch einfachere Option verwenden, und wir werden eine von vielen verfügbaren Websites , die das schnell für uns erledigen. Ich öffne ein anderes Browserfenster und googele Phrase PNG Two Base 64. Ich wähle den ersten Link von Png Tools.com aus . Wenn du dieselben Bilder verwenden möchtest, die ich verwende, kannst du sie in der Videobeschreibung herunterladen. Bilder sind Feinde aus dem Steampunk Fish-Spiel-Tutorial , das ich Ich kann das Bild einfach nehmen und es per Drag & Drop hierher auf der rechten Seite Es generiert Base-64-Code für mich. Damit der Code funktioniert, muss ich sicherstellen, dass die Zeichenfolge mit dem Datendolon Image, PNG Base 64, wie folgt beginnt . Wenn es bei Ihnen nicht so anfängt, stellen Sie einfach sicher, dass Sie dieses Kontrollkästchen aktivieren. Wir haben eine PNG-Bilddatei genommen und das gesamte Bild in eine Codezeile umgewandelt. Diese Zeichenfolge enthält jetzt alle Pixelpositionen und Farbwerte ersetzt damit die Bilddatei selbst vollständig. Jeder Internetbrowser kann diese Zeichenfolge verstehen und das Bild daraus zeichnen. Sie möchten lernen, wie Sie die andere Methode verwenden und diese Zeichenfolge dynamisch mit Javascript generieren , ohne eine externe Website zu verwenden. Ich mache das in meinem anderen Kurs, wo wir komplexe fraktale Formen erzeugen und daraus fallende Schneeflocken machen Ich markiere diese sehr lange Base-64-Zeichenfolge und kopiere sie in Index-HTML Ich platziere meinen Mauszeiger zwischen den Anführungszeichen im SRC-Attribut und füge all das Wenn ich die Änderungen speichere, zeichnen wir das Bild. Sie können sehen, dass die Base-64-Zeichenfolge das gesamte Bild enthält Die eigentliche PNG-Datei wird nicht benötigt. Auf diese Weise können wir es mit Javascript beliebig manipulieren . Sie können auf Zeilenumbruch anzeigen klicken, um zwischen einer Ansicht umzuschalten, in der Zeilen wie dieser umgebrochen Wir können den gesamten Code sehen Und in einer anderen Ansicht, in der sich das Ganze in einer Zeile wie dieser befindet, können Sie sehen, dass es eine Menge Code gibt Vor Jahren habe ich eine einfache Version dieses Algorithmus veröffentlicht. Und es würde nur mit kleinen Bildern funktionieren, 100 mal 100 Pixel. Alles, was größer wäre, würde sehr langsam und verzögert werden. Diese Version funktioniert auch mit größeren Bildern, da wir mit Java-Skript steuern wie viele Partikel das Bild , in wie viele Partikel das Bild zerfällt Diese Codebasis hat viele Verbesserungen und Optimierungen. Sie werden sehen, je größer das Bild ist, das Sie verwenden, desto länger ist die Base-64-Zeichenfolge Anstatt die Bildquelle direkt auf eine PNG-Datei zu verweisen, haben wir unser Angular Fish-Bild in eine Base-64-Zeichenfolge konvertiert . diese Weise können wir das Bild auf Pixeldaten analysieren und alle Arten von coolen Effekten und Animationen darauf ausführen ohne uns mit ursprungsübergreifenden Fehlern auseinandersetzen zu müssen. Ich möchte das Bildelement nicht wirklich auf meiner Webseite zeichnen . Ich möchte dieses Bild auf mein blaues Leinwandelement zeichnen. Ich nehme das IMG-Tag und zeige es an, keins, das Bild ist versteckt. Aber wir können immer noch mit Java Script darauf zugreifen , um es bei Bedarf auf die Leinwand zu zeichnen. Es befindet sich immer noch hier im Index HTML. 16. Lektion 3 mit Partikelbildern: Im Skript GS erstelle ich einen Event-Listener für das Ladeereignis. Der gesamte Code in diesem Projekt wird diesen Event-Listener geschrieben Load-Ereignis stellt sicher , dass die gesamte Website, einschließlich aller abhängigen Ressourcen wie Stylesheets und Bilder, vollständig geladen und verfügbar ist, vollständig geladen und verfügbar ist bevor wir Javascript-Code ausführen Bei der Arbeit mit Javascript-Code , der von einem Bild abhängt, ist es ein häufiger Fehler, mir oft passiert ist, dass ich nicht darauf gewartet habe , dass das Bild geladen wurde und ich eine leere Leinwand bekommen habe. Javascript-Code wird sehr schnell ausgeführt. Das Laden von Bildern kann noch ein paar Millisekunden dauern. Wir können diesen Unterschied nicht mit bloßem Auge erkennen, aber wenn Javascript-Code ausgeführt wird, bevor das Bild geladen wird, erhalten wir einen leeren Canvas Load. Der Event-Listener ist eine der Möglichkeiten, mit dieser Verzögerung umzugehen Wir beginnen mit einem einfachen Canvas-Setup. Ich erstelle eine konstante Variable. Ich nenne zum Beispiel Canvas. Und ich habe auf das HTML-Canvas-Element hingewiesen , das wir in der Index-HTML-Datei erstellt haben. Durch die Verwendung von Get Element by ID haben wir ihm eine ID von Canvas One gegeben. Wie diese Variable nenne ich CTX. Abkürzung für Kontext ist diese Canvas-Variable aus Zeile zwei Get Context Context ist eine spezielle Methode , die nur für eine Variable aufgerufen werden kann , die einen Verweis auf HTML enthält. Get Context mit fünf Canvas-Elementen Methode Get Context mit fünf Canvas-Elementen erwartet ein Argument, wir nennen Context-Typ, wir können ihr zwei D oder Web-GL übergeben. Heute arbeiten wir mit zwei D, wenn sie so aufgerufen werden. Die Methode get context erzeugt eine Instanz eines Objekts namens canvas Rendering Context two D. Dieses Objekt enthält alle Leinwandeinstellungen und alle integrierten Zeichenmethoden, die wir heute benötigen werden. Ich kann CTX trösten , um es mir anzusehen . Ich kann es genau hier sehen Wenn wir es öffnen, können wir alle Standard-Canvas-Einstellungen sehen , den sogenannten Canvas-Status. Sie können zum Beispiel sehen, dass der Standardfüllstil hier auf Block eingestellt ist, Standardschrift ist zehn Pixel, ohne Serife, dass die Standardlinienbreite ein Pixel ist Wir können jede dieser Einstellungen überschreiben, indem wir sie mit Javascript einem anderen Wert zuweisen , und das werden wir später tun Wenn ich hier auf den Prototyp klicke und ihn erweitere, können wir alle integrierten zwei D-Methoden sehen Wir können diese Methoden verwenden, um Rechtecke, Kreise und Linien zu zeichnen Rechtecke, Kreise und Linien Wir können Farbverläufe erstellen und Bilder manipulieren. Heute werden wir uns mit den Grundlagen befassen und uns eingehend mit der Methode zum Zeichnen von Bildern befassen , die genau hier zu Ich werde Ihnen auch zeigen, wie Sie ein Bild Pixel für Pixel analysieren und es mit der Methode „ Bilddaten abrufen“, die von hier kommt, für coole Animationszauber verwenden und es mit der Methode „ Bilddaten abrufen“, die von hier kommt, für coole Animationszauber können. Lassen Sie uns den Consoloc löschen und die Browserkonsole schließen. Ich nehme die Canvas-Variable aus Zeile zwei und greife auf ihre Breiteneigenschaft Ich habe es auf Fensterbreite eingestellt, damit Leinwand das gesamte Browserfenster horizontal abdeckt. Ich mache dasselbe auch mit der Höhe , damit sie den Bildschirm vertikal abdeckt. 17. Partikelbilder Lektion 4: Heute möchte ich dir zeigen, wie man ein sogenanntes Partikelsystem erstellt. Im Allgemeinen ist ein Partikelsystem eine Ansammlung kleiner Objekte. Jedes Partikel ist ein kleines grafisches Element. Es kann ein Bild oder eine Form sein. Wir können diese Partikel so programmieren , dass sie auf eine bestimmte Weise aussehen und sich verhalten , um alle Arten von Effekten zu simulieren. Das können Feuer, springende Bälle, Schwärme von Feinden in einem Spiel oder viele andere Dinge Heute werden wir jedes Partikel in unserem Bild zu einem Pixel machen und es in einzelne Teile zerlegen Gleichzeitig werden diese Partikel auf angenehme dynamische Weise auf die Maus reagieren , wobei Physik und Reibung eine Rolle spielen. Um all diese Partikel zu erzeugen, werden wir eine benutzerdefinierte Javascript-Klasse verwenden. Ich nenne es zum Beispiel Partikel wie dieses mit einem großen P. Javascript-Klassen sind Blaupausen , um viele ähnliche Objekte zu erstellen Javascript ist eine auf Prototypen basierende Sprache. Jedes Javascript-Objekt hat eine interne Eigenschaft namens Prototyp, mit der Objekteigenschaften und Methoden erweitert werden können . Klassen in Javascript werden als syntaktischer Zucker bezeichnet. Es ist eine sauberere und elegantere Syntax, die auf nativen JavaScript-Prototypen basiert Klassen aus anderen Programmiersprachen nachahmt Einfach gesagt, Klasse ist eine Vorlage. Jedes Mal, wenn wir diese Partikelklasse aufrufen, erzeugt sie ein neues Partikelobjekt für uns. Wir werden auch eine Klasse haben, die ich Effect nennen werde. Diese Klasse behandelt den gesamten Effekt, alle Partikel auf einmal. Die letzte Komponente, die wir hier benötigen, ist Animation Loop Particle-Klasse als Blaupause, um einzelne Partikelobjekte zu erstellen, die Effektklasse, um alle Partikel gleichzeitig zu verarbeiten Und Animationsschleife Um alles animiert und interaktiv zu gestalten , gebe ich meiner Partikelklasse die Konstruktormethode Dies ist eine spezielle Methode, wenn ich meine Partikelklasse später mit dem neuen Schlüsselwort aufrufe meine Partikelklasse später mit . Der Konstruktor führt den gesamten darin enthaltenen Code aus , um ein neues leeres Objekt zu erstellen Werte und Eigenschaften zuzuweisen, die auf dem darin enthaltenen Bauplan basieren Lassen Sie uns diesen Entwurf definieren. Definieren wir die Eigenschaften unserer Partikel. Jedes Partikel wird ein Teil eines Bildes sein, ein Pixel. Es muss an einer ganz bestimmten Position sitzen und alle Partikel zusammen ergeben das gesamte Bild. Das bedeutet, dass es X- und Y-Koordinaten benötigt , damit Java-Skript weiß wo es auf der Leinwand auf HTML-Canvas gezeichnet werden soll, genau wie bei der Webentwicklung im Allgemeinen. Wir haben eine horizontale X-Achse, die von Null Pixeln auf der linken Seite beginnt und zunimmt, wenn wir uns nach rechts bewegen. Wir haben auch eine vertikale Y-Achse, die bei Null Pixeln oben beginnt und mit steigender Tendenz nach unten zunimmt. Zum Beispiel wird Position 5.100 auf der Leinwand hier 50 Pixel von links auf der X-Achse und 100 Pixel von oben auf der Y-Achse entfernt Zunächst werde ich die beiden X - und Y-Koordinaten festlegen, 00 für die obere linke Ecke der Leinwand Wenn wir Eigenschaften in der Java-Klasse definieren, sagen wir dieses X, was X-Eigenschaft bedeutet. In dieser Instanz der Partikelklasse, die der Konstruktor erstellt, werden unsere Partikel derzeit Rechtecke sein , weil Canvas beim Zeichnen von Rechtecken schneller ist als bei Kreisen . In der vorherigen Version dieses Effekts habe ich Kreise verwendet. Dieses Mal werden wir in der Lage sein, mehr Partikel effizienter zu zeichnen. Die Größe jedes Partikelrechtecks beträgt dreimal drei Pixel. 18. Partikelbilder Lektion 5: Um ein Rechteck auf Leinwand zu zeichnen, müssen wir nur die CTX-Variable aus Zeile drei nehmen , die eine Instanz der Canvas-Two-D-Join-API enthält , und wir rufen die eingebaute Phil Rectangle-Methode wie folgt Es werden vier Argumente erwartet X- und Y-Position an der Stelle stehen, an der es gezeichnet und mit der Höhe des Rechtecks wird das Rechteck mit Farbe gefüllt Wenn wir den Füllstil nicht definieren, wissen wir, dass der Standardstil auf dem Canvas-Element Schwarz ist. Hier ist unser schwarzes Rechteck 120 Pixel von links auf der X-Achse und 150 Pixel von oben auf der Y-Achse gezeichnet 120 Pixel von links , 100 Pixel breit und 200 Pixel hoch. Wenn dies dein erstes Leinwandprojekt ist, solltest du vielleicht das Video posten und diese Werte ändern , damit du verstehst, wie Rechtecke, genau wie Bilder auf Leinwand, anhand der Koordinaten, die wir ihnen geben, gezeichnet werden Und von diesem Punkt an bewegen sie sich je nach Breite und Höhe nach rechts und unten je nach Breite und Höhe nach rechts und Wir können auch Kreise, Kurven oder Linien zeichnen und verschiedene Formen und Animationen erstellen. Mit diesen kannst du so ziemlich alles zeichnen. Sobald du weißt, wie Leinwand funktioniert, und wenn du dich für Kunst interessierst , die mit Linien gemalt werden kann, schau dir meinen Kurs über Fraktale an Heute beschäftigen wir uns intensiv mit Bildern. Lassen Sie uns unser Bild von einem Fisch aus der Vogelperspektive in das Projekt einbringen und es auf Leinwand zeichnen. 19. Partikelbilder-Lektion 6: Ich erstelle eine konstante Variable, ich nenne Bild eins. Ich habe mit der ID image one, die ich ihm hier gegeben habe, auf das Bildelement mit der ID image one, die ich ihm hier gegeben habe, gezeigt. Jetzt kann ich die CTX-Variable aus Zeile zwei nehmen , die, wie gesagt, alle Canvas-Eigenschaften und Methoden enthält alle Canvas-Eigenschaften und Methoden ich als eingebaute Draw-Image-Methode nenne Draw-Image-Methode erwartet mindestens drei Argumente Das Bild, das wir zeichnen wollen, und die X- und Y-Koordinaten. Wo soll ich es zeichnen? Ich übergebe ihm Bild eins aus Zeile sieben und möchte das Bild von der oberen linken Ecke der Leinwand aus den Koordinaten 00 zeichnen das Bild von der oberen linken Ecke der Leinwand aus den . Ich gebe ihm die Position x 100. Wir schieben das Bild auf 100 Pixeln nach rechts. Wenn ich es 100 Pixel als vertikale Y-Koordinate weitergebe, schiebe ich das Bild um 100 Pixel nach unten. Ich kann es auch optional mit den Argumenten und Höhe übergeben. Wenn wir mit und Höhe nicht angeben, zeichnet Javascript das Bild einfach in seiner Originalgröße. Wenn ich die Breite von 100 Pixeln und die Höhe von 100 Pixeln übergebe , drücken wir das Bild auf eine Fläche von 100 mal 100 Pixeln zusammen und verzerren es Ich kann das Bild auf diese Weise dehnen und zusammendrücken, was für bestimmte Effekte nützlich sein könnte Wenn Sie zum ersten Mal die Methode zum Zeichnen von Bildern verwenden, können Sie das Video posten und ihm verschiedene Werte für X, Y mit und Höhe übergeben verschiedene Werte für X, Y mit und , sodass Sie sehen können, wie sich dies auf die Position und Größe des Bildes auswirkt. 20. Partikelbilder Lektion 7: Jetzt wissen wir, wie man ein Htimlcnvas-Projekt einrichtet. Wir wissen, wie man mit der Methode „ Rechteck füllen“ ein einfaches Rechteck zeichnet , und wie man mit Methode „Bild zeichnen“ ein Bild auf Leinwand zeichnet Lassen Sie uns unsere Partikelklasse verwenden, um etwas zu zeichnen. Ich lösche diesen Code. Nehmen wir an, ich möchte jedes Partikel ein schwarzes Quadrat von 30 mal 30 Pixeln ist. Ich gebe meiner Partikelklasse eine benutzerdefinierte Methode. Ich nenne zum Beispiel Zeichnen. Seine Aufgabe wird es sein, Eigenschaften aus dem Klassenkonstruktor zu übernehmen und Partikel dieser Größe an diesen Koordinaten zu zeichnen Partikel dieser Größe an diesen Koordinaten Fangen wir einfach an und überarbeiten es dann, um bewährte Methoden der objektorientierten Programmierung anzuwenden wieder etwas zu zeichnen, nehme ich die CTX-Variable aus Zeile drei Daraus rufe ich die eingebaute Phil Rectangle-Methode auf. Wir haben bereits gelernt, dass Phil Rectangle vier Argumente erwartet: x, y, width und height. Dieses Java-Skript weiß, wo das Rechteck gezeichnet werden muss und welche Größe es haben sollte. Ich übergebe ihm dieses X aus Zeile 11. Dieser Punkt Y aus Zeile 12 als X- und Y-Koordinaten. Ich übergebe es als Dipunktgröße aus Zeile 13. Wie bei der gleichen Größeneigenschaft wie bei der Höhe wie hier Wir definieren unsere Partikelklasse. Wir haben einen Bauplan mit allen Eigenschaften. Und wir haben eine Zeichenmethode, bei der wir diese Eigenschaften nehmen und sie verwenden, um ein Rechteck zu zeichnen Wie führen wir diesen Code eigentlich aus? Um ihn zu zeichnen, müssen wir eine Instanz dieser Klasse erstellen. Ich erstelle eine konstante Variable, ich nenne Partikel eins. Ich setze es einem neuen Partikel wie diesem gleich. Das neue Schlüsselwort ist ein spezieller Befehl in Java-Skript. Es wird nach einer Klasse mit diesem Namen suchen. Es wird diese Klasse hier in Zeile neun finden und ihren Konstruktor automatisch auslösen Methodenkonstruktor erstellt ein neues leeres Objekt und weist ihm Eigenschaften zu, die auf dem darin enthaltenen Blueprint basieren Da dieses Particle-One-Objekt mit dieser Partikelklasse erstellt wurde, hat es Zugriff auf die Zeichenmethode, die wir in Zeile 15 definiert haben Wir können es einfach so nennen: Particle One Draw. Nett. Wir verwenden unsere Klasse, um ein Partikel zu erstellen und zu zeichnen. Ich kann seine X- und Y-Position hier anpassen, um es zu bewegen. Ich kann auch seine Größe ändern. 21. Partikelbilder Lektion 8: Wenn ich mehr als ein Partikel erzeugen möchte, kann ich diesen Code einfach wiederholen und Variablen für Partikel zwei, Partikel drei usw. erstellen , aber das wäre nicht sehr effizient. Unser Code sollte trocken sein, was eine Abkürzung für Don't repeat yourself ist. Wir versuchen auch, alles in einer objektorientierten Codestruktur zu halten . Wir können diese Effektklasse, die wir in Zeile 20 definiert haben, verwenden , um mehrere Partikel zu erzeugen und zu verarbeiten. Partikel werden mit einzelnen Partikeln umgehen. Effektklasse behandelt den gesamten Effekt, also alle Partikel gleichzeitig. Diesmal gebe ich ihm einen Konstruktor. Der Konstruktor erwartet, dass zwei Argumente für Breite und Höhe von außen kommen Dadurch wird sichergestellt, dass der Effekt die aktuellen Leinwandabmessungen berücksichtigt. Im Inneren wandle ich diese Argumente in Klasseneigenschaften Ich sage, nimm die Breite, die als erstes Argument an den Klassenkonstruktor übergeben wurde , und konvertiere sie in die Breiteneigenschaft diese spezielle Instanz der Effektklasse, die Sie gerade erstellen, gilt das Gleiche für die Höhe Wir werden auch eine Partikelanordnungseigenschaft haben. Anfangs habe ich es auf ein leeres Array eingestellt. Es wird alle derzeit aktiven Partikelobjekte enthalten, Es wird alle derzeit aktiven Partikelobjekte enthalten von der Partikelklasse erstellt wurden. Ab Zeile neun gebe ich meiner Effektklasse eine benutzerdefinierte Methode, die ich aufrufe Ihre Aufgabe besteht zum Beispiel darin, den Effekt zu initialisieren und das Partikelarray aus Zeile 24 mit vielen Partikelobjekten zu füllen 24 mit vielen Partikelobjekten Fangen wir mit nur einem Partikel an. Ich nehme dieses Partikel-Array und rufe die eingebaute Push-Methode darauf auf. Die Push-Methode fügt ein oder mehrere Elemente am Ende des Arrays hinzu. Ich möchte ein Partikel hineinschieben, also übergebe ich ihm ein neues Partikel wie dieses. Das neue Schlüsselwort springt zur neunten Zeile und löst den Partikelklassenkonstruktor ein neues Partikelobjekt erstellt auf der Grundlage dieses Entwurfs ein neues Partikelobjekt erstellt. Ich lösche diesen Code Wir werden Formen aus unserer Effektklasse zeichnen. Um nun dieses eine Partikel zu zeichnen, das wir in der Partikelanordnung halten , erstelle ich die Zeichenmethode. Diese Methode nimmt das Partikelarray aus Zeile 24 und ruft jede darin integrierte Array-Methode auf. Die Methode for each führt eine bereitgestellte Funktion einmal für jedes Array-Element Ich werde hier den modernen ES Six für Steuern verwenden. Das ist die sogenannte Pfeilfunktion. Partikelanordnung enthält jetzt nur ein Partikel, sie kann aber auch viele enthalten. Ich meine, nimm das Partikel-Array und rufe jedes einzelne davon auf. Weisen Sie jedem Objekt im Array einen temporären Variablennamen zu. Partikel jedes Objekt rufen Sie die zugehörige Zeichenmethode auf. Ab Zeile 15 haben wir die Effektklasse mit Init-Methode, um das Partikelarray mit Partikelobjekten zu füllen , und die Draw-Methode, um sie alle zu zeichnen Diese Zeichenmethode in Zeile 29 zeichnet alle Partikel, also den gesamten Effekt Diese andere Zeichenmethode in Zeile 15 legt fest, wie die einzelnen Partikel aussehen sollen. In unserem Fall haben wir uns entschieden, sie als einfache schwarze Rechtecke die Partikel zu zeichnen, erstelle ich jetzt eine konstante Variable Ich rufe effect auf und setze es auf eine Instanz meiner Effektklasse wie diese. Zeile 21 kann ich sehen, dass Konstruktor Argumente für Breite und Höhe erwartet Ich übergebe ihm die Leinwandbreite ab Zeile vier und die Leinwandhöhe ab Zeile fünf Lassen Sie uns diese Effektvariable zusammenstellen , um zu überprüfen, ob bisher alles funktioniert Nett. Ich kann mein Effektobjekt sehen und es hat Eigenschaften für Breite und Höhe sowie Partikelanordnung, die derzeit leer ist. Ich nehme meine Effektvariable und nenne sie Methode aus Zeile 26 wie folgt. Diese Methode sollte ein Partikel hineindrücken. Ich checke in der Konsole ein, ja, wir haben ein Partikelobjekt darin und ich kann sehen, dass es X-, Y- und Größeneigenschaften hat , die alle korrekte Werte haben. Wenn Sie in einigen davon „undefiniert“ sehen, bedeutet das, dass irgendwo in Ihrem Code ein Fehler Es ist gut, beim Schreiben Ihres Codes von Zeit zu Zeit zu überprüfen , ob alle Ihre Eigenschaften Werte haben, insbesondere wenn Sie beim Codieren auf Probleme oder Fehler stoßen . consoloc hilft uns dabei Jetzt kann ich wieder die Effektvariable verwenden und ich rufe die Draw-Methode ab Zeile 29 Ich lösche auch den Consoloc. Schön, wir zeichnen ein Partikel mit unserer neuen Codestruktur Ich kann das Partikel bewegen, indem ich diese Werte ändere. 22. Partikelbilder Lektion 9: Wir machen etwas Schlimmes. Hier ziehen wir die CTX-Variable aus Zeile drei direkt in unsere Klasse Wir möchten, dass unsere Klassen und Objekte modular, so weit wie möglich eigenständig und unabhängig von ihrem umgebenden Code und ihrer lexikalischen Anstatt CTX direkt abzurufen, werde ich es in eine Variable umwandeln und weitergeben Ich werde sicherstellen, dass die Draw-Methode Partikelklasse den Kontext als Argument erwartet Ich werde dann diese Kontextvariable hier verwenden, um die Phil-Rectangle-Methode daraus aufzurufen. Ich werde die TX-Variable aus Zeile drei als Argument an die Draw-Methode übergeben . Wenn wir es in der Effektklasse in Zeile 36 aufrufen , geben wir ihm hier einen Variablennamenskontext wie folgt. Wir geben diese Referenz an die Draw-Methode für die Partikelklasse weiter. Diese Referenz wird hier übergeben. Von dort aus rufen wir Phil Rectangle an. Wenn Sie das so machen, stellen Sie sicher, dass unser Code modular ist. Es wird eher als gute Praxis angesehen als als das, was wir zuvor hatten. 23. Lektion 10 mit Partikelbildern: Wir können die Partikelpositionen auch randomisieren. Anstatt die Koordinaten fest zu codieren, kann ich die horizontale X-Position auf eine Zufallszahl zwischen Null und Leinwandstärke setzen eine Zufallszahl zwischen Null und Leinwandstärke vertikale Y-Position könnte ein Wert zwischen Null und der Höhe der Leinwand sein. Jedes Mal, wenn ich meine Seite aktualisiere, befinden sich Partikel jetzt an einer anderen zufälligen Position irgendwo auf der Leinwand. Ich könnte die Größe auch nach dem Zufallsprinzip anpassen, wenn ich möchte. Innerhalb dieser Methode erstelle ich zwei Partikel, indem ich diese Linie kopiere Toll, jetzt haben wir zwei Partikel während wir sie mit dem neuen Schlüsselwort erzeugen. Jedes Mal, wenn der Konstruktor in Zeile zehn läuft, weist er jeder Zeile eine unterschiedliche zufällige X- und Y-Position zu Ich kann auch drei Partikel auf diese Weise erzeugen, genau wie wir es mit der CTX-Variablen gemacht haben Hier ziehen wir die Breite und Höhe der Leinwand direkt in unsere Klasse, wodurch diese Klasse von ihrem umgebenden Code abhängig ist Wir konvertieren hier bereits die beiden Klasseneigenschaften Canvas-Breite und Canvas-Höhe beiden Klasseneigenschaften Canvas-Breite und Canvas-Höhe für die Effektklasse, indem wir sie in Zeile 36 an den Effektklassenkonstruktor übergeben Zeile 36 an den Effektklassenkonstruktor Lassen Sie uns diese beiden Partikel entfernen, um sicherzustellen, dass jedes Partikel die aktuelle Leinwandgröße kennt Ich stelle sicher, dass der Partikelklassenkonstruktor einen Verweis auf die gesamte Effektklasse erwartet, das Ganze als Argument. Ich konvertiere diesen Verweis in eine Klasseneigenschaft namens Punkteffekt Sie daran, dass Objekte in Java-Skript sogenannte Referenzdatentypen sind Das heißt, wenn ich diesem Partikelobjekt einen Verweis auf das gesamte Effektobjekt übergebe , erstelle ich nicht jedes Mal, wenn ich ein neues Partikel erstelle, eine Kopie der Effektklasse. Dieser Punkteffekt ist keine Kopie, sondern nur ein Verweis, der auf einen Bereich im Speicher verweist, in dem die Haupteffektklasse gespeichert ist. Er hat viele Vorteile. Der wichtigste ist, dass, wenn wir Werte in der Effektklasse aktualisieren, diese Änderungen sofort anhand dieser Punkteffekt-Eigenschaft auf Partikelobjekten sichtbar sind. Jetzt zeigt dieser Punkteffekt auf die gesamte Effektklasse, und wir können innerhalb der Partikelklasse auf alle Eigenschaften dieser Effektklasse zugreifen . Aus diesem Grund kann ich die Breite der Leinwand durch die Punktbreite des Dist-Effekts ersetzen Leinwand durch die Punktbreite des Dist-Effekts den Wert aus Zeile 23 verweisen Wie wir wissen, steht dieser Wert für die Breite der Leinwand. Wir können das auch hier in Zeile 13 tun und den Dist-Effekt Dot Height verwenden, einen Wert, der aus Zeile 24 stammt. Wenn Sie ein Anfänger sind, solche Werte weiterzugeben , kann es einige Zeit dauern , bis Sie es vollständig verstehen. Mach dir nicht zu viele Sorgen. Wenn Sie Probleme haben, werden Sie darin gut werden , wenn Sie mehr objektorientierte Codebasis schreiben. Nun, da wir wissen, dass die Partikelklasse ein Argument erwartet , das auf die Haupteffektklasse verweist. Hier in Zeile 28, wo ich eine Instanz der Partikelklasse erstelle, übergebe ich den Effekt als Argument, als Referenz auf all das, diese gesamte Klasse. Da wir uns jedoch in dieser Effektklasse befinden, muss ich stattdessen dieses Schlüsselwort verwenden. Dieses in dieser Klasse verwendete Schlüsselwort steht für die gesamte Klasse selbst. Wenn ich die Seite aktualisiere, wird ein Partikel zufällig generiert und irgendwo auf der Leinwand gezeichnet. Nett. Wir übergeben Leinwandbreite an die Effektklasse in Zeile 35, konvertieren sie in diese Eigenschaft der Gedankenbreite in Zeile 23 und verwenden diesen Wert in Zeile 12, und verwenden diesen Wert in Zeile um die Partikelposition zu berechnen. Das Gleiche machen wir auch für die Höhe. Jetzt kann ich diese Linie erneut kopieren , um viele Partikel zu erzeugen. Aber was ist, wenn ich 100 Partikel haben möchte? Das Kopieren dieser Codezeile würde unpraktisch werden. Dies ist ein perfektes Szenario , um eine Vierschleife zu verwenden. Ich lösche den ganzen Code und werde ihn stattdessen in eine Viererschleife einwickeln . So wie das. Der Index beginnt bei Null, solange der Index kleiner als zehn ist Erhöhen Sie den Index um eins und es entsteht ein Partikel. Diese vier Schleifen werden zehnmal ausgeführt und es entstehen zehn Partikel. Vier Schleifen eignen sich hervorragend, um Code-Wiederholungen zu reduzieren. 24. Lektion 11 mit Partikelbildern: Lassen Sie uns auch ein Bild zeichnen. Aber weil ich dieses Bild nicht als eine Variable von außen in meinen Unterricht mitnehmen möchte . Lassen Sie mich es einfach so in eine Klasseneigenschaft für die Effektklasse umwandeln. Ich nenne es Did-Image. Wir können es zeichnen, indem wir den Kontext nehmen und Draw Image darauf aufrufen. Ich übergebe ihm ein Punktbild aus Zeile 24.00 für die X- und Y-Koordinaten Wir zeichnen unsere Fische wieder auf Leinwand. Aber dieses Mal machen wir es von einer eigenständigen objektorientierten Codebasis aus. 25. Lektion 12 mit Partikelbildern: Bilder auf Leinwand werden von der oberen linken Ecke nach rechts und unten gezeichnet . Lassen Sie mich Ihnen zeigen, wie Sie ein Bild genau in der Mitte von Leinwänden zentrieren können. Ich werde eine Hilfsvariable namens Center X erstellen. Es wird die Punktbreite aus Zeile 21 sein Also die Breite der Leinwand mal 0,5 Mitte der Leinwand horizontal, Punktmitte Y ist die Punkthöhe von der Linie 22 mal 0,5 der Mitte der Leinwand Ich kann diese neuen Eigenschaften als X- und Y-Koordinaten verwenden , die an die Methode draw image übergeben Jetzt wird das Bild von dem Punkt auf der Leinwand aus gezeichnet , der sich genau in der Mitte befindet. Das Bild ist jedoch nicht zentriert. Das Punktbild ist ein Verweis auf das IMG-Element, das wir im Index-HTML erstellt haben. Lassen Sie mich trösten Dieses Bildelement hat automatisch Breiten- und Höheneigenschaften generiert Wenn ich die Breite eines Punktbilds konsologge, kannst du es sehen. Es heißt, dass die Punkthöhe des Punkts mit 500 Pixeln 369 Pixel beträgt. Jetzt, wo wir das wissen, können wir den Consoloc löschen. Und wir können Breite und Höhe des Bildes verwenden, um die Position um die Hälfte der Bildbreite und die Hälfte der Bildhöhe Um es zu zentrieren, erstelle ich eine Eigenschaft namens Punkt X in der Effektklasse. In diesem Fall bedeutet Distotex horizontale Position des Fischbildes Es wird der Punkt Mitte x von Zeile 25 sein, also die horizontale Mitte der Leinwandfläche minus die Hälfte der Bildbreite Jetzt kann ich didot x an die Methode draw image in Zeile 37 übergeben. Und das Bild ist horizontal zentriert. Machen wir dasselbe für die vertikale Y-Position Punktmitte Y minus Sdt, Bildpunkthöhe mal 0,5. Ich ersetze es hier. Um ein Bild auf der Leinwand zu zentrieren, suchen Sie einfach die Mitte der Leinwand vertikal und horizontal und verschieben Sie diese Werte um die Hälfte der Bildbreite und die Hälfte der Bildhöhe 26. Lektion 13 mit Partikelbildern: Also zeichnen wir unsere Fische als Bild und wir zeichnen zehn Partikel. Machen wir 100 Partikel draus. Machen wir aus jedem Partikel ein Quadrat, fünf mal fünf Pixel. Sie können mit der Größe spielen. Immer wenn ich meine Seite aktualisiere, bekommen all diese hundert Partikel eine zufällige Position irgendwo auf der Leinwand. Wir können die Partikelgröße auch zufällig bestimmen, so wie hier. Wir können diese Partikel auch bewegen lassen. Wir werden uns hier mit dieser Logik befassen. Innerhalb der Update-Methode benötige ich eine neue Eigenschaft namens V x velocity x, was im Grunde eine horizontale Geschwindigkeit ist. Stellen wir es auf 11 Pixel pro Animationsframe ein. Im Moment erstelle ich auch die Geschwindigkeit y und setze sie ebenfalls auf plus eins. Innerhalb der Aktualisierungsmethode für jeden Animationsframe wollen wir die horizontale Position ab Zeile zehn um den Wert von Vx ab Zeile 13 erhöhen zehn um den Wert von Vx ab Zeile 13 Außerdem möchten wir die Position Y um den Wert von V Y erhöhen. Für jedes Partikel wird eine eigene Aktualisierungsmethode verwendet, die seine Bewegung definiert Ich erstelle auch eine Aktualisierungsmethode für die Effektklasse. Die Aufgabe dieser Methode besteht darin, das Update für alle derzeit aktiven Partikelobjekte darin aufzurufen . Ich nehme ein Partikelarray. Für jedes Partikelobjekt im Array rufe ich seine Aktualisierungsmethode auf, die in Zeile 19 wie folgt erstellt wird. Wenn ich die Update-Methode so aufrufe, wird nicht viel passieren. Alle Partikel werden nur einmal gezeichnet und ihre Eigenschaften werden einmal aktualisiert. Es gibt nichts Wenn wir die Aktualisierungs- und Zeichnungsmethoden immer wieder aufrufen , benötigen wir eine Animationsschleife. Ich nehme diese beiden Codezeilen und füge sie in diese benutzerdefinierte Funktion ein, die ich Animate genannt habe Ich nenne die eingebaute Methode des Request-Animationsframes. Es befindet sich auf dem Fensterobjekt, kann aber direkt aufgerufen werden. Wie bei dieser Anfrage ruft die Animationsframe-Methode eine Funktion auf, die wir ihr als Argument übergeben bevor der Browser das nächste Mal neu zeichnet. Wenn ich sie übergebe, animierte sie den Namen ihrer übergeordneten Funktion. Es zeichnet ständig alle Partikel und aktualisiert sie immer wieder, sodass die Animation mit dem gewünschten Animationsframe erstellt wird. Die Anzahl der Rückrufe beträgt normalerweise 60 Bilder pro Sekunde. Im Allgemeinen wird versucht, der Bildwiederholfrequenz der Anzeige in den meisten modernen Browsern zu entsprechen . Außerdem wird die Animation automatisch angehalten, wenn sie in Tabs im Hintergrund ausgeführt wird, um die Leistung und Akkulaufzeit des Computers zu verbessern . Wenn ich Animate aufrufe und meinen Code ausführe, bekommen wir das. Unsere schwarzen Rechtecke bewegen sich und hinterlassen Spuren. Die Spuren sind die alten Animationsframes. Wenn wir nur den aktuellen Animationsframe sehen möchten, müssen wir bei jeder Aktualisierung der Partikelpositionen die Leinwand löschen . Ich mache das, indem ich die eingebaute Methode mit durchsichtigen Rechtecken verwende. Ich möchte um 00 Uhr die Leinwand von Corin löschen. Ich möchte die gesamte Leinwand löschen. Ich nehme Werte von hier oben. Die Breite des gelöschten Bereichs entspricht der Breite der Leinwand. Die Höhe entspricht der Leinwandhöhe. Jetzt animieren wir. Herzlichen Glückwunsch, du bist ein kreativer Programmierer. Sie haben gerade ein funktionierendes Partikelsystem gebaut. Partikel bewegen sich, weil wir die Geschwindigkeit x und die Geschwindigkeit y zu ihren aktuellen X- und Y-Koordinaten addieren . Wenn wir möchten, dass sich jedes Partikel mit einer anderen Geschwindigkeit bewegt, kann ich ihnen eine zufällige Geschwindigkeit aus einem vordefinierten Bereich zuweisen wenn sie hier im Partikelklassenkonstruktor zum ersten Mal erstellt hier im Partikelklassenkonstruktor von 0-10 einstellen werden. Ich kann ihre Geschwindigkeit zum Beispiel auf eine zufällige Zahl . Das ist sehr Wenn Sie möchten, dass sich die Partikel in alle möglichen Richtungen bewegen, nicht nur nach rechts und unten, können wir den Geschwindigkeitsbereich so dass er bei negativen Zahlen beginnt Diese Linie steht für eine Zufallszahl zwischen minus eins und plus eins. Partikel mit einem Minuswert bewegen sich nach links. Partikel, die hier einen Pluswert haben, bewegen sich in Bezug auf die vertikale Y-Koordinate nach rechts. Es ist dasselbe. Partikel mit einem Minuswert bewegen sich nach oben. Partikel mit einem Plus-Wert bewegen sich nach unten, da jedem Partikel an dem Punkt, an dem sie vom Konstruktor erzeugt werden, eine andere zufällige Geschwindigkeit x und Geschwindigkeit y zugewiesen eine andere zufällige Geschwindigkeit x und Geschwindigkeit y an dem Punkt, an dem sie vom Konstruktor erzeugt Hier gibt das Verhältnis zwischen V, x und y jedem Partikel eine andere Bewegungsrichtung und Geschwindigkeit Jedes Partikel wird einen anderen Vektor haben. Lassen Sie uns den blauen Hintergrund entfernen und Leinwandhintergrund transparent lassen. Wie sorge ich dafür, dass meine Partikel die Form und Farbe des Bildes annehmen , und wie bringen wir sie dazu, sich an diese Form zu erinnern und sie nachzubilden Wenn wir es mit der Maus kaputt machen, werden wir das gerade lernen Damit ist der erste Teil des Kurses abgeschlossen, in dem wir die Grundlagen von HTML-Canvas behandelt haben. Wir haben gelernt, wie man ein einfaches Partikelsystem erstellt und wie man Bilder auf der Leinwand handhabt, zeichnet und zentriert. Der zweite Teil dieses Kurses wird weiter fortgeschritten sein und wir werden mehr über Bildmanipulation und Teilchenphysik erfahren . Herzlichen Glückwunsch! Wenn Sie ein Anfänger sind und dem Weg folgen, geht es Ihnen gut. sich keine Sorgen, wenn sich der Code in den folgenden Lektionen schwieriger anfühlt. In diesem nächsten Teil betreten wir fortgeschrittenes Gebiet der kreativen Programmierung. Aber ich denke, du kannst es schaffen. Wir werden es Schritt für Schritt machen, und ich werde mein Bestes tun, um Ihnen das Verständnis zu erleichtern. Lass uns gehen. 27. Partikelbilder Lektion 14: Dies ist unsere benutzerdefinierte Partikelklasse. Ihre Aufgabe ist es, bei jedem Aufruf ein neues Partikelobjekt zu erstellen jedem Aufruf ein neues Partikelobjekt . Mit dem neuen Schlüsselwort. Im Moment sehen unsere Partikel aus wie kleine schwarze Quadrate. Ich möchte das Bild eigentlich pixelig machen und jedes Pixel dazu bringen, ein Partikel einer bestimmten Farbe zu blockieren Dieses Partikel muss sich auch merken, wo es sich im Gesamtbild befindet , weil wir es herumschieben und andere Tricks mit ihnen machen wollen , und wir wollen immer, dass sie den Weg zurück zu ihrer ursprünglichen Position finden , um das Bild neu zu erstellen Hier in Zeile 36 haben wir die Methode initialisiert, bei der einfach 100 zufällige Partikel in Ich kommentiere das, wir müssen einen anderen Weg finden , unser Bild in Partikel umzuwandeln Denken Sie auch daran, dass das verzerrte X aus Linie 33 und das verzerrte Y aus Linie 34 die horizontale und vertikale Position des Fischbildes definieren , das wir auf Leinwand zeichnen Ich kann das beweisen, indem ich hier für jeden Animationsframe diste x um eins erhöhe Dadurch bewegen sich die Fische in positiver Richtung nach rechts Auf der horizontalen X-Achse. Ich lösche den Code aus Init-Methode und füge das Zeichnungsbild ein. Die Aufgabe dieser initialisierten Methode besteht darin, ein Bild auf Canvas zu zeichnen, es zu analysieren und in Partikel umzuwandeln Dann löschen wir das Bild vollständig aus Canvas, weil unsere Partikel das Bild selbst bilden und neu erstellen werden Bild selbst bilden und neu erstellen Lass es uns Schritt für Schritt machen. Da wir etwas von innen zeichnen, müssen wir sicherstellen, dass es einen Zeichenkontext als Argument erwartet . Ich rufe es auf Zeile 48 hier unten an. Und ich muss sicherstellen, dass ich ihr die Kontext-CTX-Variable aus Zeile drei übergebe Kontext-CTX-Variable aus Zeile drei Es wird nur einmal beim Laden der ersten Seite aufgerufen. Hier Animate sofort die Leinwand und löscht das Bild für einen Moment Ich werde Animate auskommentieren , damit es nicht mehr läuft Konzentrieren wir uns auf die initialisierte Methode Hier ist unsere benutzerdefinierte Partikelklasse, die unsere Partikel mit diesen Eigenschaften erzeugt Dann werden sie als schwarze Quadrate gezeichnet und bewegt sie, wodurch ihre Positionen aktualisiert werden. Wir werden diese Partikelklasse verwenden und dafür sorgen, dass jedes Pixel im Bild in ein Partikel umgewandelt wird. In dieser Methode erstelle ich eine temporäre Hilfsvariable namens Pixel. Dies wird ein Array sein, das alle Positionen und Farbwerte für jedes einzelne Pixel auf Cannavas Wir können das Bild selbst nicht analysieren. Wir müssen das Bild auf Leinwand zeichnen , wie wir es hier in Zeile 37 tun. Und dann verwenden wir get image data, um unser Canvas-Element mit dem darauf gezeichneten Bild zu analysieren . Methode „Bilddaten abrufen analysiert einen bestimmten Teil der Leinwand und gibt seine Pixeldaten in Form eines speziellen Bilddatenobjekts zurück . Sie benötigt vier Argumente, um anzugeben, welchen Teil der Leinwand wir analysieren möchten Ich möchte das gesamte Canvas-Element von der Koordinate 00 bis zur Breite von canavasdizotwidth aus Zeile 27 und der Höhe der Leinwandhöhe ab Zeile 28 analysieren von der Koordinate 00 bis zur Breite von canavasdizotwidth aus Zeile 27 und der Höhe der Leinwandhöhe ab Zeile 28 und der Höhe der Leinwandhöhe Die wichtige Sache, die hier erwähnt werden muss , ist, dass die Bilddaten einige eingebaute Sicherheitsmaßnahmen erhalten einige eingebaute Sicherheitsmaßnahmen wenn wir den Code lokal ausführen, wie wir es gerade in diesem Projekt tun Wenn wir eine Bilddatei zeichnen und dann versuchen, diese Leinwand mit dem darauf gezeichneten Bild zu analysieren, erhalten wir eine Konsolenfehlermeldung, die besagt, dass die Leinwand durch Daten unterschiedlicher Herkunft verunreinigt war Selbst wenn Sie die Bilddatei in demselben lokalen Ordner wie Ihre Skriptdatei ablegen , wird sie dennoch als ursprungsübergreifend betrachtet Deshalb haben wir das Ganze am Anfang gemacht, als ich die Bilddatei in eine Base-64-Zeichenfolge konvertiert habe. Dadurch wird das Bild selbst Teil der Index-HTML-Datei Wir können diese Warnung vor verschmutzter Leinwand vermeiden. Lassen Sie uns Pixel trösten, um das Bilddatenobjekt in der Konsole zu sehen Bilddatenobjekt in Ich kann sehen, dass Get Image Data korrekt das Bilddatenobjekt zurückgegeben In dieser Dateneigenschaft befindet sich ein riesiges Array, das die Farbwerte jedes Pixels im gesamten Canvas-Element darstellt . Dabei handelt es sich um einen speziellen Array-Typ, sogenanntes UI NT-Array mit acht Klemmen Es handelt sich um ein Array von nicht zugewiesenen 8-Bit-Ganzzahlen , die auf eine Anordnung von 0-255 geklemmt sind. Wenn Sie schon einmal mit Webfarben gearbeitet haben, wissen Sie, dass jede Farbe durch RGB und einen Alphawert ausgedrückt werden kann, der als RGBA-Farbdeklaration RGB und einen Alphawert ausgedrückt werden kann, der als RGBA-Farbdeklaration Wir verwenden es ständig in CSS. In diesem Fall können Rot, Grün und Blau einen beliebigen Wert von 0 bis 255 haben. In CSS ist die Alpha-Opazität hier in diesem Array ein Wert von 0 bis 1, Alpha ist auch ein Bereich von 0 bis 255 wobei Null transparent und 255 vollständig sichtbar ist Dieses Array ist auf besondere Weise organisiert, wobei jeweils vier Elemente Rot, Grün, Blau und Alpha eines Pixels repräsentieren Grün, Blau und Alpha Vier Elemente in diesem Array sind ein Pixel. Es ist wichtig, sich daran zu erinnern. Ich habe gerade den Anfang des Arrays geöffnet und die Leinwand wird anhand der Kit-Bilddaten aus der oberen linken Ecke analysiert. Das bedeutet, dass dieses Pixel in der oberen linken Ecke null Rot, Null Grün, Null Blau und keine Opazität hat Null Grün, Null Blau und keine Opazität Es ist ein schwarzes transparentes Pixel. zweite Pixel ist ebenfalls Null Rot, Null Grün, Null Blau und Null Opazität Keine Opazität bedeutet, dass diese Pixel vollständig transparent sind Die einzigen sichtbaren Pixel auf der Leinwand sind diejenigen, aus denen unsere Fischzeichnung besteht Wenn Sie das Array durchsuchen, insbesondere in der Mitte, werden Sie hier die Werte 0-255 sehen, wobei jeder Wert für Rot, Grün, Blau und Alpha jedes einzelnen Pixels steht , Blau und Alpha jedes einzelnen Pixels Ich kriege hier nur Nullen, weil ein großer Teil der Leinwand durchsichtig ist Hier ist nichts, bis wir anfangen, die Fische hier unten zu zeichnen Die Pixel selbst sind natürlich viel kleiner. Ich verwende dieses rote Quadrat nur als visuelle Hilfe. Stellen Sie sich vor, das rote Quadrat wäre einmal ein Pixel groß. 28. Lektion 15 mit Partikelbildern: Ich lösche die Konsole. Wir haben ein Bild auf Canavas gezeichnet und die Pixeldaten analysiert Jetzt haben wir die Farbe jedes Pixels im Canavas-Shop. In dieser Pixelvariablen möchte ich, dass die Pixelvariable direkt auf das Array zeigt, nicht auf das gesamte Bilddatenobjekt Ich sage Daten, die auf dieses vorzeichenlose 8-Bit-Array zeigen . Jetzt werde ich dieses Array Zeile für Zeile von oben nach unten durchgehen dieses Array Zeile für Zeile von oben nach unten durchgehen Wenn der Alpha-Wert größer als Null ist, bedeutet das, dass es sich um die Pixel handelt, aus denen der Fisch besteht, um die nicht transparenten. Wenn ich ein nicht transparentes Pixel finde, erstelle ich mit unserer Partikelklasse ein Partikelobjekt dafür. Jedes Mal, wenn wir ein nicht transparentes Pixel finden, erzeugen wir ein Partikel , das es repräsentiert. Um ein Objekt Zeile für Zeile von oben nach unten zu durchlaufen, können wir sogenannte Nested Four Loops verwenden Verschachtelt bedeutet einfach, dass es sich um eine Schleife innerhalb einer anderen Schleife handelt. Die äußeren vier Schleifen verarbeiten die vertikale Y-Koordinate. Es springt Reihe für Reihe von oben nach unten, bis wir die Leinwandhöhe erreicht haben, und dann hören wir auf. Ich möchte eigentlich nicht, dass jede Zeile nur ein Pixel hoch ist. Ich möchte in größeren Schritten springen, wodurch unser Bild pixeliger wird und der Effekt leichter zu handhaben ist Wir können nicht wirklich 40.000 Partikel erzeugen und trotzdem Das ist möglich, aber dafür wären erweiterte Optimierungen erforderlich die ich in diesem Kurs nicht eingehen werde Wir wollen die Auflösung ein wenig verringern. Anstatt um ein Pixel zu springen, wenn wir eine Zeile beenden, springen wir um einen bestimmten Wert. Ich nenne zum Beispiel eine Lücke. Es ist nicht wirklich eine Lücke, sondern eher die Größe eines einzelnen Partikelpixels , aus dem unser Bild besteht. Wir werden in der Lage sein, es dynamisch zu ändern. Es ist nicht wirklich wichtig , welchen Wert ich ihm gebe. Denken Sie jetzt daran, dass höherer Wert in Gap eine bessere Leistung bedeutet, aber ein pixeligeres Bild, ich sagte, Abstand zu beispielsweise fünf Jedes Mal, wenn wir eine Pixelzeile durchgegangen sind, springen wir um fünf Pixel nach unten und beginnen mit der Analyse dieser Jedes Mal, wenn wir eine neue Zeile eingeben, gehen wir von links nach rechts, bis wir die Breite der Leinwandfläche erreicht haben. Jedes Mal, wenn wir von Position zu Position springen, springen wir um den Lückenwert. Diese verschachtelten vier Schleifen könnten zunächst etwas schwierig zu verstehen Die äußere Schleife ist eine vertikale Y-Position von Reihe zu Reihe springt Die innere Schleife bildet für jede Zeile horizontale X-Positionen ab, die von links nach rechts verlaufen. Nehmen wir an, wir beginnen hier, y ist Null. Wir betreten die innere Schleife und gehen Schritt für Schritt von x05 Pixeln auf einmal, x05 Pixeln auf einmal, bis wir die Breite und das horizontale Ende erreichen die Breite und das horizontale Ende Wir verlassen die innere Schleife. Wir treten in die äußere Schleife und y erhöht sich um fünf, und wir befinden uns in einer anderen Reihe. Wir betreten die innere Schleife. Auch hier gehen wir von links nach rechts, jeweils fünf Pixel. Wenn wir wieder das Ende erreichen, verlassen wir die innere Schleife, treten in die äußere Schleife ein, y erhöht sich um fünf. Wir betreten die innere Schleife und gehen über horizontale X-Positionen. Diese Schleifen werden so lange fortgesetzt, bis wir den unteren Rand der Leinwand erreichen, hier die Höhe der Leinwand. Zu diesem Zeitpunkt haben wir alle Pixel im Bild durchsucht alle Pixel im Bild durchsucht Diese Technik ist für viele andere kreative Codierungseffekte nützlich viele andere kreative Codierungseffekte Wenn Sie sich durch ein Raster bewegen müssen, ist es gut zu wissen, und es wird viel einfacher, wenn Sie es verwenden. Häufiger durchlaufen wir die gesamte Leinwand, Zeile für Zeile, Sprünge mit fünf Pixeln Jedes Mal, wenn wir zur nächsten Zelle in diesem imaginären Raster springen , wollen wir überprüfen, ob dort Farben vorhanden sind oder ob wir gerade über den transparenten Bereich gehen Wenn wir einige Farben finden, erzeugen wir mit unserer Partikelklasse Wir möchten, dass sich dieses Partikel an seine X- und Y-Position, seine Position im Bild und seine Farbe erinnert . Die Herausforderung besteht darin, dass beim Durchlaufen dieses riesigen Pixeldaten-Arrays, das von get image data zurückgegeben und in einer Pixelvariablen gespeichert wird, die Indizes des Arrays von Null auf Zehntausende steigen von Null auf Zehntausende Wir müssen einen Weg finden dieser linearen Zahlenreihe aus dieser linearen Zahlenreihe X - und Y-Koordinaten und auch die Farbe Lassen Sie uns damit beginnen, den Index zu ermitteln, den aktuellen Index des Pixels, den wir gerade in unserem Raster in diesem riesigen Pixeldatenarray durchgehen . Diese Formel ist etwas fortgeschritten Machen Sie sich also keine Sorgen, wenn Sie sie zunächst nicht verstehen. Der aktuelle Index des Pixels ist y aus der äußeren Schleife, die Anzahl der Zeilen, während wir das Bild Zeile für Zeile von oben nach unten durchgehen das Bild Zeile für Zeile von oben nach unten durchgehen , multipliziert mit der Breite der Leinwand, die wir analysieren. Dadurch erhalten wir zum Beispiel einen Block wie diesen. Dann fügen wir die übrig gebliebenen horizontalen Pixel hinzu, je nachdem, wie weit wir in der neuen Zeile sind plus X. Zum Beispiel so etwas Wir befinden uns fünf horizontale Pixel in der neuen Zeile. All das muss in Klammern stehen und mit vier multipliziert werden , weil wir wissen , dass in dem vorzeichenlosen 8-Bit-Clemped-Array von get image data zurückgegeben wird, jedes Pixel durch vier Positionen in diesem Array repräsentiert wird durch vier Positionen in Vier Werte für Rot, Grün, Blau und Alpha Wir wollen den tatsächlichen Array-Index wenn wir von Pixel zu Pixel springen. Diese Zeile soll sicherstellen, dass wir wissen, an welcher Stelle im Pixel-Array wir uns gerade befinden. Während wir Zeile für Zeile durch die Pixel im Bild blättern, ordnen wir der X- und Y-Koordinate eine lineare Zahlenlinie zu. Wenn Sie es immer noch nicht vollständig verstehen, diesen letzten Teil gerne noch einmal ansehen, oder machen Sie sich nicht zu viele Gedanken darüber Logik auf diese Weise verstehen zu können , ist etwas für Mathe-Experten Wir sind kreative Programmierer und Javascript-Entwickler. Sie müssen solche fortgeschrittenen Formeln nicht wirklich verstehen , besonders wenn Sie ein Anfänger sind Sie müssen nur wissen, wann und wie man sie benutzt. Wir wissen, dass jedes Pixel durch vier ganze Zahlen im Array repräsentiert Wir wissen, dass der rote Pixelwert das erste Ein-Pixel-Array aus dem aktuellen Index in Zeile 39 in dem Array ist das erste Ein-Pixel-Array aus dem aktuellen Index in Zeile 39 , auf dem wir uns gerade befinden, also auf diese Weise Wir wissen, dass der grüne Wert für dasselbe Pixel dem nächsten Index plus eins entspricht. Dann gibt es eine Ganzzahl blauen Wertindex plus zwei darstellt , und wir haben den Alpha-Opazitätsindex plus drei Danach haben wir wieder Rot, Grün, Blau und Alpha für das nächste Pixel Jetzt, wo ich Rot, Grün, Blau und Alpha dieses Pixels habe, kann ich es zu einer guten alten Standard-RGB-Farbdeklaration einer guten alten Standard-RGB-Farbdeklaration Ich kann in Anführungszeichen wie diesem eine öffnende RGB-Klammer sagen, dazu Rot aus Zeile 43 plus Grün plus Koma plus Blau plus eine Die Sache ist, dass uns transparente Pixel in diesem gesamten Bereich nicht wirklich wichtig sind. Wir erzeugen keine Partikel für die transparenten Pixel in diesem Bereich. Wir interessieren uns nur für die Pixel , aus denen unser Winkelfischbild besteht. Die Pixel in der Umgebung sind weiß, weil der Hauptteil der Website dahinter weiß ist. Die Leinwand selbst ist in diesen Bereichen transparent. Es ist Alpha, da ist Null. Ich kann sagen, ob Alpha aus Zeile 46 mehr als Null ist, was bedeutet, dass das Pixel in diesem Bereich nicht transparent ist. Erst dann erstelle ein Partikel für diese Position. Wir erzeugen ein Partikel, indem wir das Partikelarray aus Zeile 29 nehmen und die eingebaute Array-Push-Methode aufrufen. Wir übertragen ein neues Partikelobjekt, das mit unserer benutzerdefinierten Partikelklasse erstellt wurde , aus Zeile 7 in das Array. Unsere Partikelklasse weiß derzeit nur, wie man schwarze quadratische Partikel zufällig auf der Leinwand verteilt. Wir müssen ihr beibringen, wie sie diese neuen Pixeldaten erwartet und sich richtig anordnen kann, um ein Bild zu erzeugen. Wenn du das Gefühl hast, dass ich gerade etwas zu schnell gehe , lass es mich wissen. Ich werde diese Technik der Pixelanalyse Schritt für Schritt zusammenfassen. Sobald wir die gesamte Logik eingeführt haben , sind wir fast am Ziel. Innerhalb der initialisierten Methode sind wir einfach Zeile für Zeile durch das Bild gegangen X- und Y-Positionen sowie den RGB-Wert jedes Partikels erfasst RGB-Wert jedes Partikels Ich muss sicherstellen, dass der Partikelklassenkonstruktor diese Werte wie diese erwartet , im Inneren konvertiere ich sie in Anstatt dieses X auf den als Argument übergebenen X-Wert zu setzen , erstelle ich eine neue Eigenschaft namens origin X. Diese Eigenschaft merkt sich immer , wo sich das Partikel im Gesamtbild befindet Ich habe es auf X gesetzt, das als Argument übergeben wurde. Dieses X wurde in unseren Nested-Four-Schleifen berechnet. Nachdem wir die Leinwand auf Pixeldaten analysiert haben , ist Y der Ursprung Y. Das wurde als Argument übergeben Ich werde diese Werte im mathematischen Grundriss zusammenfassen, um sie abzurunden , nur um sicherzugehen, dass wir keine Subpixelwerte erhalten Und Canvas muss kein Antialiasing verwenden, um das Bild zu glätten ist es gut, alles, was wir auf Leinwand zeichnen, mit einem Mathodenboden auf Leinwand zeichnen Diese Farbe wird von hier aus als Argument übergeben. Sie wird von der RGB-Farbe stammen, die wir vor einiger Zeit in Zeile 50 so verkettet haben , dass jedes Partikel ursprüngliche Farbe des Bildes beibehält Okay, jetzt erwartet der Partikelklassenkonstruktor in Zeile acht die Effekte X, Y und Ich gehe wieder in unsere Haupteffektklasse Immer wenn ich ein neues Partikel erstelle, übergebe ich ihm dieses Schlüsselwort, um gesamte Effektobjekt darzustellen Als erstes Argument übergebe ich den Index der inneren vier Schleifen als horizontale Position, y der äußeren vier Schleifen als vertikale Y-Position und Farbe. So analysiert man ein Bild nach Pixeldaten und wandelt es in ein Partikelsystem um. Wenn das für Anfänger etwas zu kompliziert war, falls Sie es immer noch verfolgen, gut gemacht, jetzt ist es an der Zeit, etwas Spaß mit Animation zu haben. 29. Lektion 16 mit Partikelbildern: Um es noch einmal zusammenzufassen: Die initialisierte Methode wird der ersten Seite nur einmal ausgeführt Zuerst zeichnen wir unser Bild auf die Leinwand, dann verwenden wir get image data um das gesamte Canvas-Element zu analysieren Bei Pixeldaten befinden sich diese Pixeldaten in einem speziellen Array, in dem jeweils vier Elemente ein Pixel darstellen. Es handelt sich um Rot-, Grün -, Blau- und Alphawerte. Wir haben es wie folgt in verschachtelte vier Schleifen aufgeteilt. Um eine lineare Reihe von Zahlen umzuwandeln, Indizes im Array in X- und Y-Koordinaten umgewandelt Wir verwenden Breite und Höhe des Bilds, um zu wissen, wo jede Zeile und jede Spalte unterbrochen wird, um sie korrekt zuzuordnen wir in unserem imaginären Raster von fünf mal fünf Pixeln auf der gesamten Leinwand von Zelle zu Zelle springen unserem imaginären Raster von fünf mal fünf Pixeln auf der gesamten Leinwand von , extrahieren wir Rot-, Grün -, Blau - und Alphawerte, wenn Alpha größer als Null ist Wenn das Pixel nicht transparent ist, erstellen wir mit unserer benutzerdefinierten Partikelklasse ein Partikel an dieser Position Lassen Sie uns das nun darin zeichnen und animieren. Die Methode wird beim Laden der ersten Seite nur einmal ausgeführt. Lassen Sie uns den Consoloc-Effekt überprüfen, um zu sehen ob alle Pixelpartikel da sind Ich kann mein Effektobjekt hier sehen von unserer benutzerdefinierten Effektklasse erstellt wurde Zeile 28 sehe ich die Partikelanordnung, die wir in Zeile 32 definiert haben. Es enthält 2.775 Partikelobjekte. Diese Zahl hängt von dem Bild ab, das Sie verwenden, davon, wie viel des Bilds transparent ist, und auch von der Auflösung , mit der Sie das Bild gescannt haben In unserem Fall haben wir es mit einer Auflösung von fünf mal fünf Pixeln gescannt , die in dieser Lückeneigenschaft definiert sind. Zeile 38 sehe ich, dass jedes Partikel eine Farbreferenz auf jedes Partikel eine Farbreferenz das Haupteffektobjekt, Position des Ursprungs X und des Ursprungs Y, horizontale und vertikale Geschwindigkeit sowie die aktuellen X - und Y-Positionen hat. Wenn Sie in einem dieser Felder in Ihrem Projekt den Wert undefined sehen, bedeutet das, dass sich irgendwo in Ihrem Code ein Tippfehler Wir müssen sicherstellen, dass all diese Eigenschaften Werte haben, damit der Effekt funktioniert Uncommen animiert Zeile 76, wodurch das Fischbild sofort gelöscht wird und ein Satz schwarzer Partikel entsteht Ich möchte, dass sich diese Partikel zu ihren Ausgangspositionen X und Y bewegen , um das Bild neu zu erstellen Bevor wir das tun, setzen wir einfach diesen Punkt x auf x. Das wurde als Argument übergeben Dieses Punkt-Y-Spielzeug wie dieses. Ja, die Fischform ist da perfekt. Jedes Partikel erinnert sich auch an die Farbe des Bildes. Wir müssen es nur benutzen. Wir setzen Phil Style auf diese Punktfarbe wie diese. Nett. Der Fisch zerbricht aufgrund seiner VX- und VY-Eigenschaften in Stücke aufgrund seiner VX- und VY-Eigenschaften Ich habe V x Null und VY perfekt auf Null gesetzt. Jetzt wissen Sie, wie Sie ein Bild als Partikelsystem neu erstellen ein Bild als Partikelsystem Ich habe diese Punktabstandseigenschaft in Zeile 39, die bestimmt, wie viele Details wir im Bild haben wollen Je niedriger die Zahl, desto leistungsintensiver wird dieser Effekt sein. Der Abstand beträgt fünf Pixel und ich zeichne Partikelblöcke von zehn mal zehn Pixeln. Es gibt viele Überschneidungen. Ich kann es auf fünf setzen, oder wenn ich vier mache, wird es ein Pixel geben. Lücken in der Farbnuance können sie dynamischer machen , wenn der Effekt „ Lücke machen“ aktiviert wird. Auf diese Weise ändert sich die Größe der Partikel automatisch , wenn wir diese Eigenschaft für den Punktabstand ändern. Ein großer Wert bedeutet eine geringere Auflösung. Verwenden Sie hier keine Dezimalstellen. Aus Leistungsgründen wollen wir keine Subpixelwerte . Außerdem ist das Zeichnen von Partikeln als Rechtecke leistungseffizienter Ich habe schon einmal ein Tutorial für alle Versionen dieses Effekts erstellt, in dem jedes Partikel ein Kreis war Diese neue Version mit Rechtecken wird viel schneller sein, wenn wir anfangen, sie zu animieren und sie mit der Maus interagieren zu lassen Zeichnen von Rechtecken ist schneller als das Zeichnen von Kreisen Und wenn Sie 3.000 Formen, 3.000 Partikel oder mehr haben , können Sie den Unterschied wirklich spüren Wir können die Lücke sogar auf zwei oder drei Pixel vergrößern, was zu einem scharfen Bild führt. Ich empfehle nicht, ein Pixel zu verwenden. Dadurch erhalten Sie je nach Bildgröße viel zu viele Partikel , und es wird langsam laufen, wenn wir es animieren Es gibt einige Techniken und Algorithmen zur Optimierung der Leinwand , mit denen wir dafür sorgen können, dass sich Partikel auch nur eines Pixels reibungslos bewegen Aber das werde ich in diesem Kurs nicht behandeln. Ich kann die Partikelgröße immer um ein Pixel kleiner als den aktuellen Lückenwert machen , um etwas Platz hinein zu bekommen. Sie können mit den Werten spielen, um zu sehen, was passiert. Bisher sieht es so aus, als hätten wir das Bild gerade verpixelt. Denken Sie jedoch daran, dass jeder Pixelblock ein Partikelobjekt ist, das ihm Physik und Verhalten verleihen kann Für ein paar wirklich coole Effekte habe ich Abstand von 23 Pixeln gesagt. Vorerst werde ich die Partikelanordnung aus Zeile 33 trösten, indem ich sage, dass Effektpartikel wie folgt angeordnet Weil ich gesagt habe, Abstand zu drei Pixeln ergibt das 7.557 Partikel, aus denen sich das Fischbild zusammensetzt 30. Lektion 17 mit Partikelbildern: Ich möchte, dass die Partikel immer versuchen , sich an ihre ursprüngliche Position zu bewegen. Wenn wir sie also mit der Maus herumschieben oder das Bild auf andere Weise auseinandernehmen, werden die Partikel immer ihre ursprüngliche Position gezogen. Ich möchte, dass sich das Bild immer automatisch neu erstellt, wenn es kaputt ist Wir werden diese Logik in die Aktualisierungsmethode für die Partikelklasse schreiben . Fangen wir einfach an. Ohne jegliche Physik entspricht dieses Positionsplus der Differenz zwischen der Ausgangsposition , also der Position der Partikel im Bild, und ihrer aktuellen horizontalen Position Y plus entspricht dem Ursprung eines Punktes minus ty Wir möchten, dass sich Partikel immer des Unterschieds zwischen ihrer aktuellen Position und ihrer ursprünglichen Position im Bild bewusst zwischen ihrer aktuellen Position und ihrer ursprünglichen Position im Wir rufen die Update-Methode für die Effektklasse hier in der Animationsschleife in Zeile 74 auf. Innerhalb dieser Methode lösen wir die Aktualisierungsmethode ab Zeile 23 für jedes einzelne Partikelobjekt Hier in Zeile 63 setzen wir diese Werte in Klammern und verteilen die Partikel auf der Leinwand Beim ersten Laden der Seite entspricht dieses X der zufälligen Methode zwischen Null und der Breite der Leinwand mal dem Punkteffekt. Um die Bewegung tatsächlich sehen zu können, muss ich sicherstellen, dass der einzelne Schritt pro Bild nur einen kleinen Bruchteil des Unterschieds zwischen der aktuellen Belichtung und der ursprünglichen Belichtung So wie hier. Ich mache dasselbe für Dist Y. Ich setze die anfängliche vertikale Position auf einen zufälligen Wert zwischen Null und der Punkthöhe des Dist-Effekts , der Höhe des verfügbaren Leinwandbereichs. Lassen Sie uns ganz einfache Physik machen. Ich nenne es, ich setze es auf 0,2 und benutze es hier und hier. Indem wir diesen Wert ändern, ändern wir, wie schnell oder wie langsam sich das Bild zusammensetzt Es könnte interessant sein, diesen Wert nach dem Zufallsprinzip zu ordnen und jedes Partikel mit einer anderen Geschwindigkeit bewegen zu Wenn Sie Zeitlupe wollen, stellen Sie vielleicht sicher, dass es sich um eine sehr kleine Zahl handelt Nun, das ist ziemlich cool. Wir können so viel Spaß mit dieser Codebasis haben. Nun, ist es nicht toll, was man mit nur einem Elga-Skript machen kann? mit nur einem Elga-Skript Wir verwenden nicht einmal Bibliotheken. Wir haben all diese Logik selbst geschrieben. Wir können auf viele Arten mit diesem Effekt spielen. Selbst wenn wir nur den Start in der X- und Y-Position ändern , erhalten wir etwas anderes. Zum Beispiel, als ich saß und von X auf Null anfing oder ich das Starting Y über einen viel größeren Bereich verteilte. Wir können auch einen einfachen Schrumpfungseffekt erzielen. Dies würde anders aussehen, wenn die Geschwindigkeit oder die Lockerung der einzelnen Partikel zufällig Es gibt viele Möglichkeiten, wie wir mit dieser Codebasis spielen können. Ich kann auch x verteilen und Y auf Null setzen. Ich habe jetzt einfach Spaß damit. 31. Partikelbilder Lektion 18: Lassen Sie uns eine Schaltfläche erstellen , auf die wir geklickt haben. Wir werden die X - und Y-Positionen jedes Partikels nach dem Zufallsprinzip anordnen und wir erhalten eine schöne Animation, in der sich das Bild jedes Mal, wenn auf die Schaltfläche geklickt wird, wieder zusammensetzt Ich nenne das zum Beispiel Warp, wie eine Teleportation aus einem Science-Fiction-Film, wenn Menschen in Partikel zerlegt und wieder Menschen Wenn diese Warp-Methode ausgeführt wird, wird horizontale X-Koordinate jedes Partikels nach dem Zufallsprinzip zwischen Null und Effektbreite Zufallsprinzip Y ist ein zufälliger Wert zwischen Null und Effekthöhe. Auf diese Weise gebe ich ihm auch einen anderen Wert , nur um damit zu experimentieren. Ich gehe zur Haupteffektklasse. Und genau wie bei Draw und Update erstelle ich eine Warp-Methode Wenn sie ausgelöst wird, durchläuft sie eine Partikelanordnung. Für jedes Partikelobjekt in der Reihe wird die Warp-Methode ab Zeile 28 ausgeführt Gehen wir zum HTML-Index, wenn Sie möchten , dass sich die lange Base-64-Datenzeichenfolge , die unser Bild enthält , in einer Zeile Im Visual Studio-Code-Editor können Sie im oberen Navigationsbereich die Option „Zeilenumbruch anzeigen“ auswählen . Hier haben wir einen Unterschied mit einer Klasse von Steuerelementen und darin befindet sich eine Schaltfläche mit der ID der Warp-Schaltfläche zurück im Skript GS Ich gehe hier runter und wir kümmern uns um die Funktionalität der Warp-Taste Ich erstelle eine konstante Variable, rufe Warp-Button auf und setze sie gleich der Warp-Schaltfläche „ Dokument abrufen“. So wie das Dann nehme ich es und füge Event-Listener für ein Klickereignis In der Callback-Funktion nehme ich eine Effektinstanz, die wir in Zeile 35 definiert und in Zeile 76 instanziiert Und ich rufe die zugehörige öffentliche Warp-Methode Auf diese Weise ruft diese Haupt-Warp-Methode Warp für jedes einzelne Partikel auf, wobei die X- und Y-Positionen zufällig angeordnet und ein anderer Wert eingestellt wird X- und Y-Positionen zufällig angeordnet und anderer Wert eingestellt Jetzt können Ihre Benutzer diese Schulanimation auslösen , indem sie auf die Warp-Schaltfläche klicken Fantastisch, lass uns den Button ein bisschen schöner machen. Ich bin mir sicher, dass du weißt, wie man etwas mit CSS stylt, und das ist kein CSS-Kurs, aber lass es uns trotzdem machen Ich nehme alle Knöpfe auf der Seite. Derzeit haben wir nur einen, und ich setze den Abstand auf 20 Pixel, Schriftgröße auf 30 Pixel Rand auf zehn Pixel Abstand zehn Pixel und Rand 20. Vielleicht öffne ich ein anderes Browserfenster und gehe zur Google Fonts-Website Ich werde nach einer Schrift namens Bangers für den Schul-Comic-Kunststil Ich klicke auf diese Plus-Schaltfläche , um sie meiner Bibliothek hinzuzufügen. Dann klicke ich auf Ausgewählte Bibliotheken anzeigen und es werden mir diese drei Link-Tags angezeigt. Ich kann sie einfach kopieren und hier in Index-HTML einfügen . Ich stelle sicher, dass ich sie vor meine CSS-Datei im benutzerdefinierten Stil setze meine CSS-Datei im benutzerdefinierten Stil , um sicherzustellen, dass sie dort verfügbar ist. Dann muss ich nur noch diese CSS-Regel für die Schriftfamilie kopieren und sie auf Steuerelemente anwenden. Nein, okay. Ich muss es auf das Button-Tag selbst anwenden. Lass uns das löschen. Perfekt 40 Pixel, Schriftgröße, Textfarbe weiß, Hintergrundfarbe schwarz. Nur um es interessant zu machen, tausche ich beim Schweben die Farbe aus Textfarbe, Schwarz, Hintergrund weiß. Nett. Geben wir einen Übergang von 0,2 Sekunden an. Okay, das gefällt mir. Wir haben Bilder in Partikel umgewandelt und ein Warp-Muster hinzugefügt , das einen Übergang wiedergibt Es wird zeigen, wie sich unser Bild automatisch wieder zusammensetzt, wenn es auseinandergebrochen Lassen Sie uns mehr Physik und Interaktivität hinzufügen, indem wir einzelne Partikel auf die Maus reagieren 32. Partikelbilder Lektion 19: Ich möchte, dass die Haupteffektklasse immer die aktuelle Position des Mauszeigers kennt Ich erstelle eine benutzerdefinierte Mauseigenschaft. Es wird ein Objekt mit drei Eigenschaften sein: Radius. Ich setze zunächst auf 3.000. Damit wird der Bereich um den Cursor herum definiert der Bereich um den Cursor herum , in dem Partikel auf die Maus reagieren. Es werden nicht wirklich 3.000 Pixel sein. Ich werde erklären, warum die Zahl so hoch ist , wenn wir da sind, es ist aus Leistungsgründen. X- und Y-Position des Mauszeigers wird zunächst undefiniert sein Klassenkonstruktor wird einmal an dem Punkt ausgeführt, an dem die Klasse instanziiert wird, indem Wir können das ausnutzen und hier tatsächlich beliebigen Code hinzufügen, der zu dem Zeitpunkt ausgeführt werden soll, an dem die Effektklasse Ich kann hier sogar einen Event-Listener so hinzufügen. Wir werden auf das Mousemove-Event warten. Ich muss sicherstellen, dass dieser Event-Listener an seinen aktuellen lexikalischen Geltungsbereich gebunden ist Ich möchte, dass es sich um einen internen Effektklassenkonstruktor , damit ich die Eigenschaften Mousex und Mousey überschreiben kann , wenn das Mousemove-Ereignis Um sicherzustellen, dass sich die Callback-Funktion auf diesem Event-Listener merkt, wo in welchem Objekt sie zuerst definiert wurde, kann ich eine spezielle Java-Script-Bindungsmethode verwenden oder die Callback-Funktion in eine ES-Sechs-Pfeil-Funktion merkt, wo in welchem Objekt sie zuerst definiert wurde, kann ich eine spezielle Java-Script-Bindungsmethode verwenden oder die Callback-Funktion in eine ES-Sechs-Pfeil-Funktion umwandeln. Manchmal nennen wir es auch Fat Arrow-Funktion. Eine der Besonderheiten von Pfeilfunktionen besteht darin, dass sie dieses Schlüsselwort automatisch an den Kontext des umgebenden Codes binden . Es wird immer in der Lage sein, diese Domouse-Immobilie zu sehen, was genau das ist, was wir hier brauchen. Wir benötigen Zugriff auf das automatisch generierte Event-Objekt, da diese Pfeilfunktion nur ein Argument hat Ich kann die Klammern sogar so entfernen. Immer wenn das Mousemove-Ereignis ausgelöst wird, nehme ich diesen Punkt mit der Maus x aus Zeile 47 und setze ihn auf die aktuelle horizontale Koordinate des Mauszeigers für Ereignis X. aktuelle horizontale Koordinate des Mauszeigers Außerdem setze ich diesen Kuppelpunkt von Zeile 49 auf Ereignis Y. Also so. Lassen Sie uns testen, ob es funktioniert, indem wir Mäuse und Maus konsologinieren Weil ich diesen Mousemove-Event-Listener in den Klassenkonstruktor der Effektklasse eingefügt habe. Es wird automatisch angewendet, wenn wir Effektklasse hier in Zeile 86 instanziieren Speichere meine Änderungen, aktualisiere mein Browserfenster. Wenn ich jetzt die Maus über die Leinwand bewege, kann ich sehen, dass die Mausposition aktualisiert wurde und die aktualisierten Werte aktualisiert wurde und die aktualisierten Werte in unserer benutzerdefinierten Punkt-Maus-Eigenschaft auf Effektglas korrekt gespeichert wurden. Perfekt. Lassen Sie uns den Consolog in Zeile 88 löschen Auch dieser in Zeile 54. Es ist gut, solche Konsolenprotokolle immer zu löschen. Aus Performancegründen erfassen wir die aktuellen X - und Y-Koordinaten der Maus Hier wollen wir, dass jedes Partikel ständig überprüft, wie weit es von der Maus entfernt ist. Wenn die Maus nah genug ist, wollen wir, dass das Partikel von ihr weggedrückt wird. Wir werden diese Logik innerhalb der Aktualisierungsmethode für die Partikelklasse x schreiben . Die Entfernung auf der horizontalen X-Achse zwischen Maus und diesem Partikel ist Punkteffekt mousettx von Zeile 50 hier minus st x dy Die Entfernung zwischen Maus und Partikel auf der vertikalen Y-Achse ist dieser Punkteffekt dom y minus disty Um den Abstand zwischen zwei Punkten zu berechnen, können wir den Satz von Pitagori verwenden. Es funktioniert so Das ist Maus, das ist ein Partikel. Wir erzeugen ein imaginäres rechtwinkliges Dreieck zwischen diesen beiden Punkten Dies ist der horizontale x-Abstand. Das haben wir bereits in Zeile 25 berechnet. Bei dieser Stelle handelt es sich um eine DY-Entfernung auf der vertikalen Y-Achse. Das haben wir in Zeile 26 berechnet. Um diese Stelle zu ermitteln, die die tatsächliche Entfernung zwischen diesen beiden Punkten darstellt, verwenden wir den Satz von Ptagora, um den Hypotenus zu berechnen, die längste Seite eines Dreiecks, die dem rechten Winkel entgegengesetzt ist längste Seite eines Dreiecks, die dem rechten Winkel entgegengesetzt eines Dreiecks, die dem rechten Winkel entgegengesetzt Die Theoremformel von Pitagora lautet, dass C gleich der Quadratwurzel a im Quadrat plus b im Quadrat ist, Quadratwurzel a im Quadrat plus b im Quadrat umgewandelt in Java-Skript. Wir sagen, die Entfernung ist die Quadratwurzel des Mundes von disto x mal stod x, was ein Quadrat plus also mal Didi-Quadrat ist disto x mal stod x, was ein Quadrat plus also mal Didi-Quadrat ist . Das gibt uns den Abstand zwischen zwei Punkten, zwischen Partikel und Maus. Ich entferne die Quadratwurzel, weil das eine sehr leistungsintensive Operation ist eine sehr leistungsintensive Operation und wir sie nicht wirklich brauchen. Ich muss nur den Mausradius auf einen größeren Wert einstellen , wenn Sie hier keine Quadratwurzel verwenden. Deshalb habe ich den Mausradius hier in Zeile 51 auf 3.000 gesetzt. Sie können den Bereich anpassen, wenn Sie sehen, wie groß er ist, wenn die Animation in einer Minute läuft. Ich möchte etwas Physik implementieren. Ich möchte , dass die Partikel stärker gedrückt werden , wenn sie näher an der Maus sind. Ich mache das, indem ich eine Helper-Eigenschaft erstelle, die to force genannt wird. ist der Radius der Maus, also der Bereich um die Maus herum, in dem Partikel darauf reagieren, geteilt durch den aktuellen Abstand zwischen Maus und Partikel, sodass sich das Partikel in die richtige Richtung von der Maus weg bewegt . Ich muss hier ein Minus setzen. Wir werden sehen, wie es funktioniert , wenn wir etwas Animation haben. Sie können versuchen, hier Plus und Minus einzugeben und sehen, was passiert. Die Kraft, mit der die Partikel gedrückt werden , entspricht dem Verhältnis zwischen dem Radius der interaktiven Mausfläche und der aktuellen Entfernung des Partikels vom Mauszeiger. Ich überprüfe, ob die Entfernung kleiner als der Mausradius ist. Ist dies der Fall, drücken wir das Partikel von der Maus weg. Bevor wir das tun, verwende ich einige neue Klasseneigenschaften, die nicht im Konstruktor definiert Definieren wir sie zuerst. Dx, dy-Punkt-Abstand und Didot-Kraft. All diese Eigenschaften werden zunächst Null sein. Ich werde auch eine weitere Eigenschaft erstellen , die ich zum Beispiel Punktwinkel nenne. Punktwinkel bestimmt die Richtung, in der die Partikel weggedrückt werden , wenn sie mit der Maus nach unten interagieren . Hier berechnen wir diesen Winkel mit Matote, einer integrierten Javascript-Methode von 102 Matote 8102-Methode gibt einen numerischen Wert für die Strahldichte zwischen minus Pi und plus Pi zurück Strahldichte zwischen minus Pi und plus Pi Wir wissen, dass der Kreis eine Strahldichte von zwei Pi hat. Dieser Wert, den Matoteen Two zurückgibt, steht für sogenannten Theta-Winkel zwischen einem bestimmten X- und Y-Punkt und einer positiven X-Achse ist wichtig, sich daran zu erinnern , dass diese integrierte Javascript-Methode erwartet zuerst einen Wert der Y-Koordinate und dann der X-Koordinate Der Unterschied zwischen der x-andy-Position des Partikels und der x-andy-Position des Mauszeigers dargestellt durch Diddy und dis dot x hinter der Methode 102, gibt uns einen Winkelwert Wir werden die horizontale Geschwindigkeit, die Vx-Geschwindigkeit x, mit der Kraft von Linie 33 aus erhöhen Vx-Geschwindigkeit x, mit der Kraft von Linie 33 aus Das hängt vom Verhältnis zwischen dem Mausradius und dem Abstand zwischen Maus und wodurch Partikel, die näher beieinander liegen, durch eine größere Kraft gedrückt werden , um anzugeben, in welche Richtung sie gedrückt werden Ich übertrete diesen Winkel. Wir rechnen in Zeile 3062 nach der Kosinus-Methode. Bei dieser Methode wird der Winkel, den wir ihr übergeben, im Bogenmaß als Wert zwischen minus eins und plus eins zugeordnet Dieser Wert stellt den Kosinus des Winkels dar und sorgt dafür, dass die Partikel gut an den Außenkanten des Kreises entlang schweben , wenn die Maus mit ihnen interagiert Diese Zinn-Zwei- und Kosinus-Methoden und alles, was mit Trigonometrie zu tun hat, ist ziemlich schwer zu erklären, wenn man es zum ersten Mal sieht Ich denke nicht, dass es wichtig ist, sie vollständig zu verstehen, solange man weiß, wie man sie benutzt und wie man die gewünschte Bewegung bekommt Wenn wir die Animation zum Laufen bringen, spiele ich diese Werte ab, um zu sehen, was sie bewirken. Das visuelle Feedback, das wir erhalten, wenn die Animation läuft könnte es einfacher machen, sie zu verstehen. Das ist schwierig. Fühlen Sie sich also nicht schlecht, wenn Sie dieser ganzen trigonometrischen Logik nicht gefolgt Es beeinträchtigt nicht Ihre Fähigkeit, ein guter Javascript-Entwickler zu sein ein guter Jetzt haben wir VX ab Zeile 16 aktualisiert, indem die Stärke des Schubs und die Richtung des Schubs Wir werden dasselbe für die vertikale Geschwindigkeit tun, aber dieses Mal werden wir die Methode Sinus verwenden Wir fahren im gleichen Winkel vorbei. Methode Cosinus und Methode Sinus arbeiten zusammen, um eine Position entlang des Radius eines Kreises abzubilden Jetzt kann ich die vertikale und horizontale Geschwindigkeit von VX und VY sowie die X- und Y-Position verwenden, die hier wie folgt berechnet wurden. Lassen Sie uns zunächst versuchen zu sehen, was es macht, während Partikel sicherlich auf Maus reagieren Aber etwas stimmt nicht. Ich repariere das in einer Sekunde. Um die Physik zu verbessern, können wir auch Reibung anwenden. Ich erstelle eine Eigenschaft namens Reibung. Ich setze es auf 0,95. Ich multipliziere V x damit, sodass es langsam an Stärke verliert Bei jedem Animationsframe ist die Bewegung falsch. finde ich es interessant zu überprüfen, was passiert. Ich kann sehen, dass ich hier in Zeile 33 einen Tippfehler gemacht habe. Es sollte D x mal Dx sein, dy mal dy. So, der Satz von Pitagra. Jetzt verhalten sich die Partikel wie erwartet, perfekt. Wir schieben sie hin und her, damit sie zur ursprünglichen Position zurückkehren. Wir müssen hier mal gleichwertig sein. Wenn ich auf 0,2 ändere, bekommen wir eine viel schnellere Bewegung. Je niedriger der Reibungswert, desto mehr Reibung wird aufgebracht. Hier gibt es eine Menge Mathematik. Konzentrieren Sie sich nicht zu sehr darauf. In diesem Kurs geht es hauptsächlich um Java Script und Zeichnen auf Canvas. Sie können diese mathematischen Codefragmente für andere Projekte verwenden. Auch wenn Sie noch nicht ganz verstehen , wie die Mathematik funktioniert, empfehle ich Ihnen, mit den Werten Veränderung minus Wechselsignierzeichen zu spielen , zu versuchen, sie zu durchbrechen und zu sehen, wie sich das auf die Bewegung auswirkt Ich hoffe, das macht es klarer, was passiert wenn ich die Reibung erhöhe und den Radius vergrößere, wir bekommen diese allmählichere Grenze. Es gibt eine erweiterte Version dieses Kurses, die in der Beschreibung unten verlinkt Dort gehen wir noch weiter und erstellen einige spezielle Übergänge. Du kannst es dir ansehen, wenn du willst. Ich hoffe, du hast heute etwas Wertvolles gefunden. Ich bin für Sie da , um Ihnen zu helfen, Java-Skript zu lernen und all die tollen Dinge zu entdecken , die Sie damit machen können. Glaubst du, das war ein schwieriges Projekt mit all den Algorithmen? Wie schwierig war es für dich? Gib mir eine Nummer in den Kommentaren. Eins ist extrem einfach, zehn ist sehr schwierig, fünf ist etwas dazwischen, ich fühle mich später. 33. Lektion 20 mit Partikelbildern: Lassen Sie uns das Bild gegen etwas anderes austauschen. Sie können Ihre eigene PNG-Datei mit transparentem Hintergrund verwenden oder dasselbe Bild, das ich verwende, im Assets-Bereich herunterladen . Dieses Bild ist ein weiterer Charakter aus meinem anderen Javascript-Kurs, in dem wir einen fremden Planeten und seine seltsamen mechanischen Lebensformen erkunden . Wir können das Bild mit Java Script in einen Base-64-String konvertieren . Es ist jedoch schneller , eine externe Website zu verwenden , wenn Sie sehen möchten, wie ich auf Canvas gezeichnete Bilder im Handumdrehen in solche Daten umwandle , die dynamisch Teil der Javascript-Codebasis sind. Schauen Sie sich meinen anderen Kurs zum kreativen Programmieren über Linien, Rotation und Fraktale Dort erkläre ich Schritt für Schritt, wie ich mein prozedurales Fraktal erstellen Im Grunde genommen genauso wie zuvor. Ich google PNG bis Base 64. Es gibt viele Websites , die das können. Stellen Sie einfach sicher, dass der konvertierte Code mit dem Daten-Dolon-Bild beginnt. Wenn dieses Kontrollkästchen nicht aktiviert ist, kopiere ich die lange Codezeile. Ich gehe zum Index von HTML und möchte es hier in Zeile 15 ersetzen. Es ist einfacher, wenn ich den Zeilenumbruch aktiviere. In Visual Studio-Code klicke ich auf Word Rap anzeigen. Ich möchte den gesamten Code im Quellattribut ersetzen. Dieser Code ist das gesamte Bild. In Visual Studio Code kann ich einfach den Teil am Anfang hervorheben. Dann scrolle ich nach unten, wo der Code endet, und um alles dazwischen hervorzuheben, drücke und halte ich die Umschalttaste gedrückt und klicke mit der linken Maustaste auf die Stelle, an der die Auswahl so enden soll. Ich habe den neuen Code, den wir von der Website kopiert haben, gelöscht und eingefügt. Los geht's, wir tauschen das Bild und alles funktioniert super. Es macht wirklich Spaß, mit diesem Effekt zu spielen. Ich finde es sehr entspannend. Aus irgendeinem Grund passe ich die Reibung in Zeile 19 an, ich habe den Mausradius auf 3.000 gesetzt. Zurück im Index-HTML gehe ich zum Beispiel Zurück im Index-HTML zu Zeilenumbruch, um ihn auszuschalten Es ist besser, die lange Datenzeichenfolge der Basis 64 in einer einzigen Zeile zu haben, sonst müssen wir viel nach unten scrollen Ich kopiere dieses Markup für die Arbeitsschaltfläche und gebe ihr eine Vorstellung von einer Blockschaltfläche mit dem Text Blöcke im Skript GS Ich kopiere diesen Codeblock und passe ihn so an, dass er auf diese neue Blockschaltfläche zeigt In Visual Studio Code können Sie auf diese Weise eine Mehrfachauswahl vornehmen, indem Sie jedes Mal einen Text markieren , wenn Sie auf dem Mac die Befehlstaste und auf dem PC die Strg-Taste gedrückt halten und den Buchstaben D drücken Sie wählen ein anderes Vorkommen dieses Textes aus. Ich speichere einen Verweis auf das Blockmuster, füge ihm einen Event-Listener hinzu und rufe darin die öffentliche Methode Effect Block auf Wir müssen es erstellen. Ich stelle sicher, dass ich in der Effektklasse bin, in der wir Warp erstellt haben Ich erstelle die Block-Methode. Ihre Aufgabe besteht einfach darin, die Partikelanordnung von Zeile 56 aus zu durchlaufen . Für jedes Partikelobjekt in dieser Reihe wird eine Methode ausgelöst, die auch Blöcke genannt wird. Wir müssen sicherstellen, dass jedes einzelne Partikel eine Methode mit diesem Namen hat. Ich gehe hier zur Partikelklasse und hier, wo wir die Warp-Methode entwickelt haben Bevor ich diese neue Blockmethode erstelle, kann ich im Inneren alle möglichen Dinge tun, um die Partikel durcheinander zu bringen , weil wir wissen, dass sie sich wieder zu einer Bildform zusammenfügen werden Auch hier kann ich aufgrund der Logik innerhalb der Aktualisierungsmethode, die wir zuvor geschrieben haben innerhalb der Aktualisierungsmethode, die wir zuvor geschrieben haben, zum Beispiel Partikel in zwei Gruppen aufteilen. Eine Gruppe wird vom oberen Rand der Leinwand kommen , Koordinate Null. Die andere Hälfte der Partikel wird von der Unterseite der Leinwand ausgehend von der vertikalen Koordinate, die der Höhe der Leinwand entspricht, kommen Leinwand ausgehend von der vertikalen Koordinate, die der . Ich kann das machen, indem ich den sogenannten ternären Operator verwende. Es ist der einzige Java-Script-Operator mit drei Opern. In diesem Fall verwenden wir ihn als einfache einzeilige L-Anweisung Die Struktur ist einfach auszuwertende Bedingung, Fragezeichen, etwas, das getan werden muss, wenn die Prüfung den wahren Doppelpunkt auswertet Etwas anderes zu tun, wenn es das Falsche auswertet. Die auszuwertende Bedingung besteht darin, zu überprüfen, ob Method Random mehr als 0,5 ist . Method random allein, so wie hier, gibt einen zufälligen Wert von 0-1 zurück. In etwa 50% der Fälle sollte dieser gibt einen zufälligen Wert von 0-1 zurück Wert höher als 0,5 sein In etwa 50% der Fälle die Partikel ihre vertikale Position auf Null setzen Bei der oberen Hälfte der Partikel wird deren vertikale Y-Position festgelegt, um die Höhe zu beeinflussen Die ternäre Operator-Bedingung am unteren Rand der Leinwand um zu überprüfen, ob dies zutrifft, tun Sie dies, andernfalls tun Sie dies Wenn ich jetzt auf Blockmuster klicke , werden die Partikel in zwei Gruppen aufgeteilt, von oben und unten kommen Schön, ich kann den Wert in Warp tatsächlich auf 0,2 in Blöcken ändern in Warp tatsächlich auf 0,2 in Blöcken Wir können es anders versuchen , denn wenn wir auf verschiedene Knöpfe klicken, Partikel haben unterschiedliche Beschleunigungsgeschwindigkeiten, wir können alle Eigenschaften der Partikel ändern, die wir wollen Hier kann ich sie zum Beispiel vergrößern. Lassen Sie uns die Größe des Rechtecks einzelner Partikel auf zehn Pixel setzen . Interessant. Das Problem ist, wenn ich auf Warp klicke, bleibt die Größe der Partikel jetzt bei zehn Pixeln Ich muss daran denken, wenn ich einen neuen Wert in der Block-Methode manipuliere, muss ich ihn auch für die Warp-Methode definieren, wenn ich nicht möchte, dass die Größe dieselbe ist wie hier Jetzt hat Warp kleine Partikel, Blöcke geben uns große Pixelblöcke von oben und unten kommen 34. Lektion 21 mit Partikelbildern: Dieser nächste Effekt ist wirklich cool. In Index-HTML erstelle ich eine neue Schaltfläche mit der ID Assembler-Button. Und der Text sagt Assemblieren im Skript GS. Auch hier unten erstelle ich einen Abschnitt, in dem ich eine Variable erstelle , um eine Java-Script-Referenz auf diese neue Schaltfläche zu speichern , und ich gebe ihr einen Event-Listener darin Wir nennen Effect Assemble. In der Effect-Klasse werde ich eine Top-Level-Version der Assembler-Methode erstellen eine Top-Level-Version der , die alle Partikel verwaltet, genau wie wir es mit Warp und Blocks hier oben in der Partikelklasse gemacht haben Blocks hier oben in der Partikelklasse Ich muss diese neue Assembly-Methode definieren und ihr eine gewisse Logik geben Im Inneren setzen wir x auf eine Zufallszahl zwischen Null und Effektbreite Y wird eine Zufallszahl zwischen Null und Effekthöhe sein. Ich möchte, dass die Partikel einfach zufällig auf der verfügbaren Leinwandfläche verteilt werden. Ich muss Leichtigkeit und Größe definieren. Da wir diese Werte auch auf den Untertasten ändern , funktioniert das genauso wie Warp Ich möchte, dass es sich anders verhält , wenn es das Bild wieder zusammensetzt Ich möchte, dass die Partikel zu ihrer ursprünglichen Position im Bild zurückkehren , aber nicht alle auf einmal, sondern eins nach dem anderen Bei einer bestimmten Geschwindigkeit müssen wir einen Schalter einrichten, der das Zielsuchverhalten jedes Partikels aktiviert und deaktiviert. Im Moment wollen die Partikel immer zu ihrer Ausgangsposition im Bild zurückkehren. Ich brauche einen Schalter , der sie daran hindert. Und richten Sie ein Ampelsystem ein, das Stop and Go sagt. Ich werde diese Logik schreiben, die verhindert, dass Partikel zu ihrer ursprünglichen Position zurückkehren. Und dann werde ich die gesamte Logikschleife zusammenfassen . Sie sich nicht zu viele Sorgen, wenn Sie in der ersten Runde nicht alles vollständig verstehen Lass es uns zuerst schreiben. Hier unten in der Haupteffektklasse erstelle ich eine Eigenschaft namens Counter. Anfangs habe ich es auf Null gesetzt. Diese Gegenvariable wird langsam zunehmen. Wenn sie zunimmt, können sich immer mehr Partikel an ihre ursprüngliche Position im Bild zurückbewegen an ihre ursprüngliche Position im Bild zurückbewegen Jedes Partikel wartet eine bestimmte Anzahl von Millisekunden, bevor es sich zurückbewegt, um das Bild zusammenzusetzen Diese Verzögerung in Millisekunden entspricht dieser Gegenvariablen innerhalb der Master-Assembler-Methode . Ich habe den Zähler auf Null gesetzt. Das ist wichtig , weil wir einen weiteren Übergang haben werden , der denselben Zähler verwendet Wir müssen sicherstellen, dass der Zähler immer Null ist, wenn auf die Schaltfläche zum Zusammenstellen geklickt wird oder wenn wir zwischen verschiedenen Übergangsschaltflächen klicken Wir werden es hier haben, es wird in einer Minute mehr Sinn machen. Jedes Mal, wenn die Assembly-Methode für jedes einzelne Partikel ausgelöst wird , wird dieselbe einzelne Zählervariable kumulativ erhöht , indem sie dieselbe einzelne Zählervariable kumulativ erhöht , indem assemblieren für jedes Partikelobjekt innerhalb der Partikelanordnung aufrufen . Jedes Partikel erhöht den Zählerwert um eins Ich werde hier ein festgelegtes Timeout erstellen. Java-Script-Methode „Set Timeout“ ruft eine Funktion auf, nachdem das eingestellte Timeout nach einer bestimmten Anzahl von Melisekunden einer bestimmten Anzahl von Melisekunden auf dem Fensterobjekt installiert Entspricht dem Anforderungsanimationsframe. Wir können es direkt so aufrufen. Es erwartet, dass die Funktion mit zwei Argumenten aufgerufen und verzögert, wie lange gewartet werden soll, bis wir sie als Verzögerung aufrufen. Ich werde diesen Punkteffekt verwenden, um dem Wert entgegenzuwirken, der jedes Mal , wenn jede Methode zur Partikelassemblierung aufgerufen wird, um eins zunimmt . Auf diese Weise verzögert jedes Partikel das nächste , das ihm folgt, geringfügig. Wie bei jeder Methode innerhalb der Haupteffektklasse wird die Assembler-Methode für jedes Partikelobjekt nacheinander aufgerufen. Die Funktion, die nach dieser Erhöhung der Verzögerung aufgerufen wird, wird eine Pfeilfunktion sein , da wir uns innerhalb einer Klasse, innerhalb eines Objekts befinden . Und ich muss sicherstellen, dass dieses Schlüsselwort an den Kontext gebunden ist , in dem das eingestellte Timeout definiert ist Wie bereits erwähnt, wird die ES-Sechs-Pfeil-Funktion automatisch an ihren aktuellen Gültigkeitsbereich gebunden Auf diese Weise kann ich diesen Punkt hier drinnen verwenden und es wird funktionieren. Alternativ müssten wir hier die Java-Script-Bindungsmethode verwenden . Verwendung der Pfeilfunktion ist Die Verwendung der Pfeilfunktion ist eine einfachere Syntax und sie macht dasselbe wie gesagt. Ich möchte ein Ampelsystem erstellen, Ich möchte ein Ampelsystem erstellen in dem Partikel angewiesen werden, anzuhalten und zu gehen. Dazu erstellen wir eine weitere Hilfseigenschaft, die als Punkt aktiv bezeichnet wird. Wenn der Parameter aktiv auf true gesetzt ist, kann er sich bewegen. Wenn active auf False gesetzt ist, friert das Partikel an seiner aktuellen Position ein. Nach dem eingestellten Timeout erlischt der Timer. Wir haben active hier oben im Partikelklassenkonstruktor auf true gesetzt , wir haben active zunächst auch auf true gesetzt In der Update-Methode haben wir Code, der auf den Mauscode reagiert , der das Partikel an seine ursprüngliche Position zurückbringt , um das Bild zusammenzusetzen Ich möchte, dass der gesamte Code nur ausgeführt wenn das aktive Flag auf true gesetzt ist. Wenn hier unten die Schaltfläche „Zusammenstellen“ gedrückt wird, ordnen wir die X- und Y-Positionen der einzelnen Partikel nach dem Zufallsprinzip verteilen sie auf der gesamten Leinwand Wir legen Geschwindigkeit und Größe der Beschleunigung fest. An diesem Punkt, wenn sich die Partikel verteilen, setzen wir sie aktiv auf Stürze, wodurch sie alle an ihrem Platz eingefroren Da die Methode for each innerhalb der Haupteffektklasse ausgeführt wird, durchläuft sie sehr schnell sie sehr schnell das gesamte Partikelarray, vom Startindex bis zum Endindex. Jedes Mal, wenn dieser Code für ein neues Partikel ausgeführt wird, erhöht sich der Zähler leicht, wodurch sich dieser Verzögerungswert erhöht. Jedes Partikel im Array hat einen etwas höheren Zählerwert, sodass dieser eingestellte Timeout mit zunehmender Verzögerung aufgerufen wird Wenn der eingestellte Timeout schließlich ausgelöst wird, wird jedes Partikel auf „active true“ gesetzt Und die if-Anweisung, die wir in der Update-Methode in Zeile 32 erstellt haben in der Update-Methode in Zeile 32 erstellt , ermöglicht es ihm endlich, an seine ursprüngliche Position zurückzukehren Gleichzeitig ermöglicht sie aber auch Mausinteraktionen. Das hat Spaß gemacht, denn der Wert des Timers entspricht der Verzögerung in Millisekunden, die jedes Partikel warten muss, bevor es den Timer hier um einen höheren Wert erhöhen Sie den Timer hier um einen höheren Wert erhöhen, müssen die sich zusammensetzenden, langsameren Partikel mehr Millisekunden warten, bevor sie sich Die Geschwindigkeit des Zusammenbaus selbst hängt auch vom Bild ab und davon, welche Auflösung Sie für diese Lückeneigenschaft haben Denn wenn Ihr Bild aus weniger Partikeln besteht , die größer sind, wird es schneller zusammengesetzt Sie können es auch verlangsamen, indem den Zählerwert mit etwas multiplizieren Auf diese Weise erhöhen Sie auch die Millisekunden. Daher verlangsamen Sie den Zusammenbauprozess. Wenn Sie ihn mit etwas weniger als eins multiplizieren, etwas weniger als eins multiplizieren weniger als Ich finde es wirklich cool, wie Partikel an Ort und Stelle warten, bis sie da sind, drehen und dann springen sie Position, um das Bild neu zu erstellen Wir können auch mit Mausinteraktionen spielen, während das Bild zusammengesetzt wird, und es wird immer noch funktionieren, sie werden einfach wieder an ihren Platz fallen, wenn wir es ihnen erlauben Ich denke, das ist eine ziemlich solide Codebasis. Fühlen Sie sich frei, Ihre eigenen Experimente damit zu machen. Ein Problem, das wir hier haben , ist , dass, wenn wir auf die Schaltfläche Assemblieren klicken, sofort diese Timeout-Sequenz für alle Partikel festgelegt diese Timeout-Sequenz für alle Partikel Und wenn wir zu diesem Assembler-Übergang hin- und zurückwechseln diesem Assembler-Übergang hin- und zurückwechseln der Timeout noch nicht aktiviert ist, beginnt die Animation irgendwo in der Mitte Wir müssen auch alle Timeouts löschen, alle Partikel. Jedes Mal, wenn wir den Assembler-Effekt aktivieren , beginnt das Bild immer von Anfang an zusammenzusetzen Eine Möglichkeit, Timeouts zu löschen besteht darin, sie in einer Variablen zu erfassen Ich erstelle eine neue Variable namens Dot Timeout. Anfangs habe ich es hier in Zeile 68 auf undefiniert gesetzt, wo wir ein neues Timeout erstellen Wir setzen es gleich diesem Punkt-Timeout. Es wird tatsächlich wie zuvor aktiviert. Wenn Sie es einer solchen Variablen gleichsetzen, hat dies keinen Einfluss darauf, wie sich das Timeout von selbst auslöst Es gibt uns jedoch eine einfache Möglichkeit, es zu löschen, wenn Assemble aufgerufen wird Zunächst möchte ich das Timeout löschen, wenn es in Java eine aktive One-Clear-Timeout-Methode gibt. Dadurch wird ein zuvor festgelegter Timeout storniert Durch den Aufruf von set timeout wird ein Argument erwartet, das den Timeout identifiziert , den wir stornieren Set timeout gibt beim Aufruf eine ID zurück, aber wir haben sie in einer Variablen, also kann ich sie dieses Mal einfach so weitergeben Und es wird hier funktionieren. Ich bin mir eigentlich nicht sicher, warum es immer noch aus der Mitte geht. Es hat etwas damit zu tun, dass diese Zahl zu klein ist, denn wenn ich das mache, wird sie korrekt zurückgesetzt. Es funktioniert mit größeren Zahlen. Wenn ich zu viele Dezimalstellen angebe, wird es von der Mitte aus zusammengesetzt Ich denke schon, weil die Zahl, die wir als Millisekunden-Verzögerung übergeben, zu klein für die Anfangsindizes in einem Array wie diesem ist für die Anfangsindizes in einem , Vielleicht ist es besser, die Montagegeschwindigkeit anzupassen, indem man kontrolliert, um wie viel sich der Zähler hier bei Experimenten der Linie 68 erhöht. 35. Lektion 22 mit Partikelbildern: Lassen Sie uns einen weiteren Übergangseffekt erstellen. Ich nenne es Partikeldruck, weil es mich an Drei-D-Drucker erinnert. Schicht für Schicht , Zeile für Zeile etwas erschaffen. Ich erstelle eine weitere Schaltfläche mit der ID „ Partikeldrucktaste“ und einem Text mit der Aufschrift „Partikeldruck“. Wie üblich bringen wir den Button in das Projekt ein. Hier unten in diesem Bereich des Skripts geben wir ihm einen Event-Listener für das Klickereignis und wir rufen die Partikeldruckmethode Wir erstellen hier unten die Partikeldruckmethode , genau wie Assemblieren Außerdem muss der Zähler wieder auf Null zurückgesetzt werden. Dann durchläuft es die gesamte Partikelanordnung von Anfang bis Ende. Dadurch wird die Partikeldruckmethode ausgelöst, die wir definieren werden. Jetzt definiere ich es hier oben und es wird sehr ähnlich wie die Assembler-Methode funktionieren. Diesmal möchte ich, dass die anfängliche X-Koordinate genau in der Mitte des Leinwandbereichs liegt. Dieser Effekt mit dem Faktor 0,5 Jetzt kommen alle Partikel aus dieser einzigen Linie in der Mitte. Wenn ich die ursprüngliche Y-Koordinate vertikal zur Mitte der Leinwand angeben würde, würden alle Partikel zu einem einzigen Punkt Wir haben eine Pixel-Singularität geschaffen. Von dort aus fügt sich das Bild wie Leinwand zusammen, ein umgekehrtes schwarzes Loch, das Partikel ausspuckt und die Entropie abnimmt. Ich finde das sieht echt cool aus. Welcher Übergang ist euer Favorit: Warp-Blöcke zusammenbauen oder Partikel drucken? Hinterlassen Sie einen Kommentar, um es mich wissen zu lassen. Ich hoffe, Sie haben etwas Wertvolles gefunden und etwas Neues gelernt. Schauen Sie sich meine anderen Kurse an, wenn Sie mehr über kreatives Programmieren oder die Entwicklung von Zwei-D-Spielen mit Vanilla Java Sq erfahren oder die Entwicklung von Zwei-D-Spielen mit möchten, siehe später.