Kreatives Coding mit Vanilla JavaScript lernen

1. Einführung und Projektvorschau: General Depart, der Künstler erstellt einen Prozess dann mit einem gewissen Grad an Autonomie in Gang gesetzt wird, was zu einem fertiggestellten Kunstwerk führt. Ich denke gerne darüber nach, dass es sich eine menschliche Maschine-Zusammenarbeit handelt. Heute sind wir die Künstler und HTML, CSS und JavaScript ist die Maschine. Machen Sie mit mir Ihr einzigartiges Kunstwerk und üben Sie dabei Ihre Front-End-Webentwicklungsfähigkeiten. In dieser Klasse werden wir davon ausgehen, eine einzige Linie zu diesem und diesem und diesem zu zeichnen . Ich möchte nicht, dass du einfach meinen Code kopierst. Ich möchte, dass du wirklich verstehst, was los ist. Also werden wir heute alles komplett von Grund auf neu schreiben , Zeile für Zeile mit einfachen Vanilla-JavaScript-Know-Frameworks und ohne Bibliotheken. Ich werde jede Codezeile im Detail erläutern , während wir weitermachen. Dieser Kurs ist nicht für Anfänger geeignet, aber wenn Sie zumindest die Grundlagen von HTML, CSS und JavaScript kennen , kommen zu mir und lassen Sie mich Ihnen zeigen, wie die Maschine uns beim Erstellen hilft etwas Einzigartiges und Schönes. Viel Spaß. 2. Projektaufbau: Alles, was wir heute brauchen , um mit der Arbeit zu beginnen, ist ein Code-Editor und ein Internetbrowser. Unser gesamtes Projekt wird diese drei Dateien sein, Index-HTML-Stil, CSS und script.js. Ich erstelle eine einfache Webseite. Ich gebe meinem Projekt einen Titel und verknüpfte Style-CSS-Datei im Dokumentkopf. Im Körper meiner Webseite erstelle ich ein Canvas-Element mit einer ID von Cannabis. Cannabis. Es gibt ein spezielles HTML-Element, dem wir mit Gold darauf zurückgreifen können. Wir können damit Formen und Bilder zeichnen und animieren. Wir können alles erstellen, von einfachen bis zu sehr komplexen Web-Animationen in HTML-Canvas-Element wird in allen modernen Browsern gut unterstützt und das Erlernen der Grundlagen wird so viele Möglichkeiten erschließen mit Visuals und Animation. Meiner Meinung nach sollte jeder Front-End-Webentwickler zumindest die Grundlagen von Canvas kennen. Lassen Sie mich Ihnen zeigen, wie einfach es ist, etwas darauf zu zeichnen bevor wir anfangen unsere interaktiven Formen zu zeichnen, wo das JavaScript, wir müssen script.js Datei hier unten im Stil CSS verknüpfen . Ich nehme mein Massenelement mit seiner ID als Selektor und gebe ihm einen blauen Hintergrund , damit ich sehen kann, wo es ist. Sie können hier einige Margen sehen, obwohl ich keine deklariert habe. liegt daran, dass jeder Browser über Standardränder und Paddings verfügt , die automatisch auf jedes Element angewendet werden , um sicherzustellen, dass unser Projekt in allen Browsern gleich aussieht Das liegt daran, dass jeder Browser über Standardränder und Paddings verfügt , die automatisch auf jedes Element angewendet werden, um sicherzustellen, dass unser Projekt in allen Browsern gleich aussieht. zielen Sie auf alle Elemente auf meiner Seite ab. Und ich sagte Marge auf alles auf 0 padding auch auf 0. Dies ist der sogenannte Global Reset. Wir können auch neuere CSS-Eigenschaft verwenden, die als Box-Sizing bezeichnet wird , und sie auf border-box setzen. Dies wird Elemente Grenze und Knospung in seiner Gesamtbreite und -höhe einbezogen. Dies ist eine meiner Lieblingseinstellungen, weil es großartig und Layouts so viel einfacher macht. Ich schätze, eine Art Position absolut. Und ich sagte, es ist die Spitzenposition 250% und es ist auch 250% links . Dann verwende ich Transform Translate minus 50% horizontal und minus 50% vertikal. So können Sie absolut positioniertes Element genau in der Mitte der Seite zentrieren genau in der Mitte der , die ich gebe, hat irgendwie einen Rahmen, fünf Pixel, einen festen Block, und ich entferne blauen Hintergrund. In meiner JavaScript-Datei. Ich habe damit begonnen, einen Ereignis-Listener für das Load-Ereignis zu erstellen. Dieses Ereignis wird für ein integriertes Window-Objekt aufgerufen, das das Browserfenster darstellt. Load-Ereignis wird ausgelöst, wenn die gesamte Seite mit allen HTML-Elementen sowie allen anderen unabhängigen Ressourcen wie Stylesheets und Bildern im Ereignis-Listener geladen wurde sowie allen anderen unabhängigen Ressourcen wie . Sobald die Seite vollständig geladen wurde, richte ich meinen Canvas ein. Es ist einfach. Ich erstelle eine konstante Variable. Ich nenne zum Beispiel USA, und ich setze es auf Document Dot getElementById und ich gebe es an ID, ich habe meinem Cannabis, Cannabis eine gegeben , um diese Variable auf das richtige Element zu setzen . Sie können hier auch Document Dot QuerySelector verwenden. Denken Sie daran, dass sie Element für ID etwas schneller und effizienter erhalten schneller und effizienter , weil es nur nach Ideen suchen muss. Es muss nicht alle möglichen Selektoren auf der Seite überprüfen , um das richtige Element zu finden, wie es QuerySelector tun muss. Der Unterschied wird sich nicht bemerkbar machen wenn Sie kein massives Projekt haben. Ich erstelle eine zusätzliche benutzerdefinierte Variable. Ich nenne zum Beispiel CDX-Shortcut für Kontext und setze sie von der Zeile zwei Punkt getContext auf Canvas. Kontext ist eine spezielle integrierte Methode , die nur für Variable aufgerufen werden kann , die einen Verweis auf eine Art von Us-Element enthält. Wir können es 2D oder WebGL übergeben. Heute werden wir mit 2D-Zeichnungen arbeiten. Wenn Ihre Konsole diese CTX-Variable protokolliert, sehen Sie, dass sie eine Instanz einer integrierten Canvas 2D-API mit all ihren Eigenschaften und Zeichnungsmethoden enthält einer integrierten Canvas 2D-API . Wann immer wir von nun an etwas auf uns zeichnen wollten, können wir ctx dot verwenden und eine dieser Methoden aufrufen etwas zu zeichnen oder Werte der kanadischen Eigenschaften wie Linienbreite, Füllung, Farbe usw. zu ändern der kanadischen Eigenschaften wie Linienbreite, am. Ich werde es Ihnen zeigen, ich sagte Canvas-Breite 600 Pixel und irgendwie Höhe bis 600 Pixel. 3. Fractals und Fractals: Was wir heute zeichnen werden, nennt man Fraktal. Fraktale sind unendlich komplexe Muster , die über verschiedene Skalen hinweg selbstähnlich sind. Sie werden durch wiederholtes einfaches Verfahren in einer laufenden Feedback-Schleife immer wieder erstellt , sagen wir, ich ziehe eine Linie, ich rotiere Cannabis, skaliere es und wiederholte den Prozess des Zeichnens einer Linie. Ich mache das immer und immer wieder, zeichne eine Linie, drehe, skaliere und zeichne die gleiche Linie wieder. Das wäre ein Prozess, um eine sehr einfache fraktale Form zu erzeugen . Ich kann meinen Code auf sogenannte prozedurale Weise schreiben, was einfach bedeutet, dass wir Variablen und Funktionen zeilenweise deklarieren , während wir unser Projekt erstellen Es ist der einfachste Weg, Code zu schreiben. Heute werde ich objektorientierte Programmierung verwenden , um das Zitat zu schreiben. Das bedeutet, dass ich Variablen und Funktionen in Objekten einreiben werde. Ich erstelle einen Kurs. Klassen sind Vorlagen zum Erstellen von Objekten. JavaScript-Klasse enthält eine Reihe von Anweisungen in Die JavaScript-Klasse enthält eine Reihe von Anweisungen in Form von Werten und Methoden, die als Blueprint dienen. Und wenn ich diese Klasse mit dem neuen Schlüsselwort aufrufe, erstellt sie eine neue Instanz des Fraktalobjekts basierend auf dem von uns definierten Blueprint Ich brauche auch eine benutzerdefinierte Partikelklasse und eine weitere Klasse I rufen Sie zum Beispiel Regen an. Heute wollte ich diesen fraktalen Regeneffekt erzielen. Wenn Sie jemals zuvor eine dieser komplexeren Formen gezeichnet haben, werden Sie wissen, dass es manchmal ein paar Millisekunden dauern kann, um mit Canvas zu rendern, wenn Sie möchten , dass Ihre Fraktale detailliert werden es manchmal ein paar Millisekunden dauern kann , normalerweise animieren wir Dinge, indem wir sie zuerst zeichnen, dann haben wir ihre Koordinaten aktualisiert, um sie zu bewegen. Wir löschen die ältere Zeichnung und zeichnen das Gleiche, aber mit aktualisierten Koordinaten. Wir machen es sehr schnell und immer wieder, was uns eine Illusion von Bewegung gibt. Damit diese Bewegung reibungslos verläuft, mussten wir mit rund 60 Bildern pro Sekunde laufen. Da der Tageseffekt aus komplexen Formen besteht, können wir diese Fraktale nicht einfach 60 Mal pro Sekunde löschen, neu berechnen und neu zeichnen . Ich glaube nicht, dass selbst die stärksten Computer das tun könnten, aber wir werden immer noch eine reibungslosere Animation bekommen weil wir es anders machen werden. Wir werden die fraktale Klasse verwenden, um eine komplexe mathematische Form für uns zu rendern . Dann werden wir diese Form annehmen und JavaScript verwenden , um es in Pixel zu konvertieren. Dann verwenden wir eine bestimmte Klasse, um diese Pixel als Partikelform zuzuweisen, Ihre Einblicksklasse, wir werden uns auch mit Bewegung befassen. Wir können schwimmende, regnende oder spinnende Partikel machen , wenn wir wollen. bestimmte Klasse enthält einen Blueprint zum Definieren Eigenschaften und Verhaltensweisen einzelner Partikel. Und die Regenklasse wird den gesamten Effekt bewältigen. Es wird Dinge wie die Anzahl der Partikel und so weiter definieren. 4. Grundlegende Formen zeichnen: Da wir uns für die Verwendung einer objektorientierten Programmierung entschieden haben, teilen wir unseren Code in Klassen wie diese auf, da der Code modularer und einfacher zu navigieren ist. Und dies ist ein gutes Beispiel für eines der vier Prinzipien der objektorientierten Programmierung, die als Verkapselung bezeichnet wird. Verkapselung bedeutet, dass wir Daten und Methoden bündeln , die mit diesen Daten in Objekten arbeiten. Heute werden wir unsere Daten in drei Klassen einkapseln Fraktal, Partikel und Regen. Constructor ist eine spezielle Art von Methode JavaScript-Klassenkonstruktor, der einen Blueprint enthält, und wenn wir die Klasse mit dem neuen Schlüsselwort-Konstruktor aufrufen , erstellen wir ein neues leeres JavaScript-Objekt und es wird diesem ein leeres Objekt Werte und Eigenschaften zuweisen , die auf dem darin enthaltenen Blueprint basieren. Daten im Konstruktor können innerhalb der Methode selbst generiert werden , und sie können auch von außen stammen. Es kann als Argument an den Konstruktor übergeben werden , wenn wir es mit dem neuen Schlüsselwort aufrufen, zeige ich Ihnen in einer Minute. Fraktal-Klassenkonstruktor wird erwarten, dass Der Fraktal-Klassenkonstruktor wird erwarten, dass zwei Argumente von außen übergeben werden, eines für uns mit und eines für die Höhe innerhalb des Konstruktors. Ich wandle diese Argumente in Klasseneigenschaften um. Auf diese Weise werden sie Teil der Blaupause. Fractile wird Zugang zu uns mit und so Höhe benötigen , damit es weiß, wo die Grenzen von uns liegen. Wir können damit sicherstellen , dass das Fraktal zentriert ist und sich nicht außerhalb des Canvas-Bereichs verzweigt. Jedes Objekt, das von der Fraktalklasse erstellt wurde hat auch Zugriff auf Ekel in einer Methode, die ich aufrufe, z. B. wird die Draw-Funktion , die auf einem Objekt sitzt, als Methode bezeichnet. Die Aufgabe dieser Zeichnungsmethode besteht darin einige Werte vom Konstruktor zu nehmen und eine fraktale Form basierend auf diesen Werten zu zeichnen eine fraktale Form basierend auf diesen Werten Es wird ein Argument erwarten, das ich zum Beispiel Kontexte aufrufe. Dieses Argument wird später an ihn weitergegeben , wenn wir es nennen. Und es wird angeben, auf welches Element wir zurückgreifen wollten. Wir können jede Form auf uns zeichnen. Wir wollen eine Linie ziehen ist einfach. Wir haben zuvor gesagt, dass CTX-Variable online oder drei eine Instanz enthält, in der wir eine 2D-API integriert sind. Wenn ich also eine dieser integrierten Zeichnungsmethoden aufrufen wollte , nenne ich sie von dort aus diese Kontextvariable. Wir werden den CTX vertreten. Wenn ich etwas später die Schubladen-Methode aufrufe, zeige ich Ihnen, dass wir begonnen haben, eine Form oder durch einen Doppelpunkt integrierten Begin-Pfad-Methode zu zeichnen . Denken Sie darüber nach, als würden wir Stift auf Papier legen. Wir sagen JavaScript, dass wir mit dem Zeichnen einer neuen Form beginnen wollten. Der Anfangspfad schließt auch alle vorherigen Shapes. Wenn es welche gibt, dann rufen wir die integrierte Move to Methode auf , um die Start-X - und Y-Koordinaten für diese Zeile festzulegen - und Y-Koordinaten für diese Zeile Ich übergebe sie einfach an 0 für die horizontale Koordinate. Und 0 für eine Vertikale. 0-Null bei uns ist hier die obere linke Ecke. Koordinaten auf Art gefragt ein sehr einfach. Wir haben eine horizontale X-Achse , die hier auf der linken Seite von 0 geht und zunimmt, wenn wir nach rechts reisten. vertikale Y-Koordinate beginnt hier oben an Position 0 und nimmt zu, wenn wir nach unten fahren. So zum Beispiel Punkt-Add-Koordinaten, hundert, zweihundert werden irgendwo hier sein, 100 Pixel von der linken Kante auf der horizontalen X-Achse und 200 Pixel von oben auf der vertikalen Y-Achse. Move to method legt die Start-X- und Y-Koordinaten für die Linie fest, Linie zu Methodensätze enden in X- und Y-Koordinaten. Wenn ich es übergebe, hat eine Art Breite von Linie vier als x und Höhe von Linie fünf als y. Das sind Koordinaten sechshundertsechshundert. Also in dieser Ecke können wir die integrierte Strichmethode aufrufen , um diese Linie tatsächlich zu zeichnen. Diese Linie sollte hier von den Koordinaten 00 gehen, zwei Koordinaten, sechshundertsechshundert hier. Nennen wir unseren Fuß zeichnen und ziehen tatsächlich die Grenze, um zu sehen, ob es funktioniert. Also hier haben wir die Fraktalklasse erklärt. Es hat eine Konstruktormethode. Wenn wir eine Instanz dieser Klasse erstellen, erstellt der Konstruktor automatisch ein neues Objekt mit dieser Klasse ist ein Blueprint. Ich mache das, indem ich eine Variable erstelle, die ich nenne, zum Beispiel Frac Ball One. Ich habe es auf das neue Fraktal gesetzt. Das neue Schlüsselwort ist ein Spezialbefehl in JavaScript. Es wird JavaScript dazu bringen, nach einer Klasse mit diesem Namen zu suchen, und es wird seinen Konstruktor in einer Zeile acht auslösen, ich kann sehen, dass meine Fraktalklasse uns mit und so Höhe wie Argumenten erwartet . Also gebe ich es irgendwie mit uns aus Eisen denn wir verstecken uns vor Linie fünf. Wir haben Fractal One erschaffen. Da es mit dieser Klasse erstellt wurde, hat es Zugriff auf seine Public Drawer Methode. Ich nenne es einfach, indem ich Fractal One Dot Draw online 12 sage . Ich kann sehen, dass die Draw-Methode Kontext als Argument erwartet , um anzugeben , auf welche Art von uns wir zurückgreifen wollten. Bisher haben wir nur eine Art von uns, l und n. So nicht viel zu wählen aus Abbasid, CTX aus Linie drei vernetzt. Wie Sie sehen können, haben wir eine Zeile, die von den Koordinaten Nullen 0 kommt , wie in Zeile 14 definiert. Und es geht bis hin zu Koordinaten sechshundertsechshundert wie online definiert, 15 5. Formen ändern: Ctx-Objekt online drei enthält einen Verweis auf alle Eigenschaften und Methoden von uns. Diese Eigenschaften sind im Grunde eine Art Zustand oder Sie können es irgendwie Einstellungen nennen. Sobald Sie einen von ihnen geändert haben, bleiben sie so, bis wir sie zurücksetzen oder bis wir sie erneut ändern. Wenn ich über CTX sprechen kann, können wir die Eigenschaften hier sehen. Dies ist der aktuelle Standardstatus von Canvas. Sie können beispielsweise sehen, dass FillStyle standardmäßig auf Schwarz festgelegt ist. Die Linienbreite ist hier unten auf ein Pixel eingestellt. Wir haben auch alle Arten von uns zu den Zeichnungsmethoden wie Bogenmethode, um einen Kreis zu zeichnen, beginnen Badmethode, die wir bereits online 15 verwendet haben und viele mehr. Was ist, wenn ich meine Linie dicker machen wollte? Ich muss diese Zeilenbreiteneigenschaft verwenden und ich muss sie mit einem anderen Wert aktualisieren. Ich mache es, indem ich sage, dass ctx-Punktlinienbreite fünf Pixel oder 20 Pixel entspricht. Ich kann die Linie auch bewegen, indem ich ihre Startkoordinaten oder ihr Ende in Koordinaten ändere . Lassen Sie uns die Linie von 50 Pixel breit machen. Es gibt auch eine Eigenschaft, die als Line Cup bezeichnet wird. Und schau was passiert, wenn ich es gesagt habe, die Runde, wir kommen zu runden Kanten. Wenn Sie verstehen, wie diese Koordinaten funktionieren, können Sie eine Linie zwischen zwei beliebigen Punkten auf uns ziehen, richtig. Jetzt beginnt die Linie bei 150 Pixel von links und einer 150 großen Quelle von oben. Und es endet 200 Pixel von links und 300 Pixel von oben. Ich könnte auch zu Minuswerten wechseln, oder ich kann die Linie am oberen Rand ausrichten und ein Ziel von den Koordinaten 002, Koordinaten 5000 machen. Jetzt bestimmt dieser Einzelwert von 500 tatsächlich die Länge meiner Linie. Lassen Sie es uns in eine Variable umsetzen. Ich erstelle eine Klasseneigenschaft, die diese Punktgröße genannt wird. Jetzt kann ich die Länge meiner Linie ändern, indem diese Punktgrößeneigenschaft so ändere. Ich kann auch die Größe der Linie relativ zur Größe von Canvas festlegen. Wenn ich die Farbe meiner Linie ändern wollte, greife ich auf die Strichstileigenschaft zu und überschreibe sie von der Standardfarbe schwarz auf beispielsweise grün. 6. Formen transformieren: Diese anderen integrierten Methoden zum Zeichnen von Formen, z. B. eine Methode für Füllrechteck, die vier Argumente, x und y, Position und Breite und Höhe, benötigt. Ich möchte mein Rechteck bei den Koordinaten 5050 und ich wollte 200 Pixel breit und 200 Pixel groß sein. Ich kann die Breite und Höhe so ändern. Ich kann dieses Rechteck auch die ganze Art von Fragen abdecken lassen , indem es von der oberen linken Ecke aus beginnt. Also Koordinaten 00, ich mache seine Breite genauso wie US-Breite und Höhe Höhe sein werden. Ich kann seine Farbe ändern, indem ich auf die FillStyle-Eigenschaft für ein Objekt zugreife , und ich ändere es von Standardschwarz in Blau, wir werden jetzt drehen. Also möchte ich, dass du genau siehst was im Stil CSS vor sich geht, ich gebe meinem Canvas-Element roten Hintergrund. Wenn ich das Rechteck von 50 Pixeln nach rechts schiebe, können wir sehen, dass wir ein rotes Canvas-Element auf der Rückseite haben. Wir haben blaues Rechteck auf Canvas online 20 gezeichnet, und wir haben eine grüne Linie von den Linien 21 bis 24 gezeichnet, ich lege die blaue Rechteckrinde, also beginnt es jetzt bei den Koordinaten 00. Behalten Sie das im Hinterkopf. Dies ist wichtig, um die volle Kontrolle über unsere Zeichnungen zu erhalten. Es ist wichtig zu verstehen, wie wir den Status von Canvas mithilfe der integrierten Übersetzungs-, Skalierungs- und Rotationsmethoden transformieren können den Status von Canvas mithilfe der integrierten Übersetzungs-, . Es ist einfach, wenn es richtig erklärt wird, aber es ist nicht sehr intuitiv. Lassen Sie mich Ihnen genau zeigen, wie es funktioniert. Wir können unseren Status mit der integrierten Rotate-Methode transformieren. Diese Methode braucht ein Argument, einen Winkel, um den wir die ganze Art von uns und alle darauf befindlichen Zeichnungen drehen wollten . Es nimmt diesen Winkelwert im Bogenmaß an, nicht in Grad. Wenn ich es um 0,8 Bogenmaß drehe, sind das ungefähr 45 Grad. Sie können sehen, wie ich mich in positiven und negativen Winkeln drehe, der Rotationsmittelpunkt ist die obere linke Ecke von Kanada hat Koordinaten 00, alle Zeichnungen auf uns, die nach diesem Rotationsziel kommen. Rechteck und Linie drehen sich also um die Koordinaten 00. Die Translate-Methode benötigt zwei Parameter. Die erste ist x, die Entfernung, die wir in horizontaler Richtung bewegen wollten. Positive Werte sind auf der rechten Seite. Bei negativen Werten gehen Sie nach links. Der zweite Parameter y definiert, wie weit sich in vertikaler Richtung bewegen soll. Positiver Wert des Scores nach unten, negative Werte steigen. Wenn ich es 5050 übergebe, bewegen wir alle Arten von Zeichnungen, 50 Pixel nach rechts und 50 Pixel nach unten. Es wird sich auf alles auswirken , was danach kommt. Wenn ich eine andere Form oder davor zeichne, wird sie nicht übersetzt oder gedreht. Hier übersetzen wir und danach drehen wir uns. Schau dir an, was passiert, wenn ich ihm einen anderen Winkelwert übergebe . Wir sind alle Daten in und wir können sehen, dass die übersetzte Methode auf Land 20 nicht nur alle Zeichnungen nach rechts und unten verschoben hat, sondern auch Rotationszentrum 0,2 Koordinaten geändert 5050 Rotate Methode wird dreht sich eigentlich immer um Koordinaten Nullen 0. Das ist der Teil, der nicht sehr intuitiv ist. Was tatsächlich passiert ist , ist , dass die Übersetzungsmethode die als Koordinaten 00 betrachteten, von ihrer Standardposition in der oberen linken Ecke auf uns zwei Koordinaten, 5050, verschoben die als Koordinaten 00 betrachteten , von ihrer Standardposition in hat. Sie können sehen, dass wir online 20 das blaue Rechteck aus den Koordinaten 00 zeichnen, aber es wird tatsächlich aus Koordinaten gezeichnet 5050, die von der Translate-Methode gedrückt werden. Dies liegt daran, dass die Translate-Methode den Status von uns ändert und die Position geändert wird, die als Koordinaten 00 betrachtet wird. Wenn Sie dies immer noch nicht vollständig verstehen, machen Sie sich keine Sorgen, es wird klarer, wenn wir unseren Effekt weiter ausbauen. Also alles, was die Übersetzungsmethode tut, bewegt es die als Koordinaten Nullen 0 auf uns, um Koordinaten zu machen , wo wir dorthin gehen. Dadurch versetzt dies alle Arten von Zeichnungen durch diese Pixelwerte. Und es bewegt auch den Rotationsmittelpunkt in diese Position. Sie haben die Fraktale gesehen, die wir heute bauen werden. Löse für unseren Effekt. Ich wollte, dass der Rotationsmittelpunkt genau mitten in Cannabis liegt. Um dies zu tun, übergebe ich sie Art von Breite und dividiere sie durch zwei als x-Parameter und als Höhe und dividiere sie durch zwei als Y-Parameter, wie folgt. Wenn wir jetzt um verschiedene Winkelwerte drehen, können wir sehen, dass sich der Rotationsmittelpunkt genau in der Mitte der Seite befindet. Perfekt. Wie gesagt, hat die verrottete Methode einen Argumentwinkel nimmt , um den wir drehen wollten. Und es nimmt diesen Wert im Bogenmaß an. Wenn ich genau um einen halben Kreis drehen wollte, also um 180 Grad, dieser Wert in einen Bogenmaß von 3,14 umgewandelt . Es ist eigentlich genau der Wert von Pi. Wenn ich also um math.pi rotiere, wird es um einen Halbkreis gedreht. Wenn ich etwas um math.pi mal zwei drehe, habe ich mich genau um 360 Grad gedreht. Wir haben alle alles rund um den ganzen Kreis gemacht und es endete zu einem Dollar in seiner Ausgangsposition. Ding, an das man sich erinnern sollte, dreht sich um einen Halbkreis. Durch Drehen mit dem math.pi times Werkzeug werden Ihre Zeichnungen in einem vollen Kreis gedreht. Ich sagte es wieder in die Ausgangsposition bei 0 Bogenmaß. Eine letzte Methode, die unseren Staat, den wir heute abdecken werden, verändert, ist die Skalierung. Es braucht zwei Parameter. Wir können sie x und y nennen. X ist der Skalierungsfaktor in horizontaler Richtung. Warum ist der Skalierungsfaktor in vertikaler Richtung? Basiswerte sind eins. Wenn wir es um eins skalieren, bleibt es gleich groß. Der Wert, der langsamer ist, wird nach unten skalieren. Werte, die höher sind, werden skaliert, wenn ich sie auf 0,5 als x übergebe und 0,5 ist , weshalb wir das blaue Rechteck und die grüne Linie um 50% auf die Hälfte ihrer ursprünglichen Größe skaliert die grüne Linie haben. Wichtig ist hier zu wissen, dass es in Richtung Koordinaten Nullen 0 schrumpft. Da translate diese Koordinaten in die Mitte von uns verschoben hat, ist auch der Skalierungsmittelpunkt da. Translate-Methode ändert also sowohl die Rotation als auch den Maßstab in zentralen Punkten. Behalten Sie das im Hinterkopf. Dieses Verhalten ist perfekt für den Effekt, den wir heute aufbauen werden . 7. Einfache geometrische Muster: Manchmal möchten Sie nicht, dass es übersetzt, skaliert und auf die gesamte Art von gefragten und älteren Zeichnungen dreht , die sich darauf befinden. Manchmal wollten wir nur etwas drehen und dann wollten wir den Status wieder auf das zurücksetzen , was er vorher war. Dafür haben wir zwei spezielle integrierte Methoden namens Speichern und Wiederherstellen. Save-Methode erstellt eine Momentaufnahme des aktuellen Zustands, alle ihre aktuellen Eigenschaften, die Sie sehen können, wenn Sie ctx in der Konsole protokollieren, also übersetzen, drehen Sie Skalierung, aber auch Dinge wie FillStyle, Linienbreite, im Grunde ganzer Zustand eines Objekts, wie es sich an dieser Stelle in unserem Code befindet, dann können wir alles ändern, was wir wollen. Wir können die Formen übersetzen, skalieren, drehen und neu zeichnen, die von dieser Übersetzung und Rotation betroffen sein sollen . Und dann nennen wir integrierte Wiederherstellungsmethoden , die wir nach dem zugehörigen sicheren Ziel suchen werden. Und es wird irgendwie unseren Staat wieder auf das zurücksetzen, was er zu dem Zeitpunkt war, an dem Safe genannt wurde. In diesem Fall wird es rotiert, skaliert und übersetzt. Alle Formen, die wir nach dem Wiederherstellen zeichnen, werden nicht durch Drehen oder Skalieren beeinflusst. Wie gesagt, speichern und wiederherstellen Forschung, nicht nur die Transformation, sondern auch alle Arten von Einstellungen, einschließlich FillStyle, Strichstil und so weiter. Dies kann bei einigen Effekten nützlich sein, die wir aufbauen. Hier sehen Sie, dass ich den Status gespeichert habe, übersetze, rotiere und skaliere. Ich zeichne mein blaues Rechteck und stelle wieder her, dass kleines Rechteck übersetzt und verkleinert wird , weil es ursprünglich die gesamten USA von Koordinaten 00 bis schnell wie Höhe abdecken die gesamten USA von Koordinaten sollte. Da wir die grüne Linie zeichnen , nachdem ein Zustand wiederhergestellt wurde, wird sie überhaupt nicht von Übersetzung und Skalierung betroffen. Für das blaue Rechteck befinden sich die Koordinaten 00 in der Mitte von uns wie definiert durch die Übersetzungsmethode für die Koordinaten der grünen Linie 00, die Standardposition in der oberen linken Ecke Kanadas. Ich sagte, Skalieren Sie auf 11 für die ursprüngliche Breite mal eins und die ursprüngliche Höhe mal eins. Wenn ich es jetzt geschrieben habe, kannst du sehen dass ich das blaue Rechteck drehe, aber die grüne Linie wird überhaupt nicht betroffen. Lasst uns das umtauschen. Ich lege grüne Linie in diesen sicheren und wiederherstellenden Bereich und kann nach dem Lagern ein blaues Rechteck machen. Jetzt steht das blaue Rechteck über allem, also können wir die Linie nicht wirklich sehen. Formen auf Kinematik werden von oben nach unten gezeichnet , während JavaScript die Datei liest. Also nehme ich diesen Rechteckcode und setze ihn vor Sicherheit. Jetzt, während ich es drehe, ist die grüne Linie betroffen, aber wir werden das Rechteck überhaupt nicht transformiert. Ich kann den direkten Winkel ein wenig drücken, damit wir sehen können, dass wir ein rotes, blaues Rechteck haben und die grüne Linie das einzige ist, was sich dreht. Wenn Sie die Dinge verstehen, die wir gerade behandelt haben, können Sie wirklich coole Dinge mit Cannabis machen. Jetzt lass mich dir was zeigen. Ich habe das blaue Rechteck gelöscht und Cannabishintergrund transparent machen. Ich gehe zurück in meine Fraktalklasse und erstelle eine private Klassenmethode namens Draw a Line. Was ich hier gerade gemacht habe, nennt man eine private Methode. Dies ist eine neue Funktion in JavaScript, die vor ein paar Jahren eingeführt wurde. Private Methoden werden mit harten Namen deklariert, Brief des Bezeichners wurde mit Hash-Symbol fixiert. Private Methoden sind nur innerhalb der Klasse aus zugänglich. Sie werden in erklärt. Wir können sie nicht von außen anrufen. Ich werde diese private Methode verwenden, um einige interne Funktionen unserer Klasse zu behandeln . interne Funktionalität von Haydn von Die interne Funktionalität von Haydn von außen ist ein gutes Beispiel für das zweite Prinzip der das zweite Prinzip objektorientierten Programmierung, die als Obstruktion bezeichnet wird. Behinderung bedeutet, dass wir unnötige Details des Innenbaus unserer Objekte von außen verstecken unnötige Details des Innenbaus . Und nur das Enthüllen des Essentials-Benutzers muss nicht wissen, wie genau unser fraktaler konstruierter Benutzer nur wissen muss, dass es eine öffentliche Draw-Methode gibt , die er aufrufen kann , die die gesamte fraktale Form. Natürlich ist der Tag, an dem wir diejenigen sind, die diesen Effekt aufbauen. Also werden wir alles verstehen. Was ich hier erreichen möchte, ist, dass ich eine private Helfermethode für meine Klasse haben wollte eine private Helfermethode für meine Klasse haben , die das Zeichnen einer einzelnen Linie oder eines fraktalen Zweigteils des Fraktals behandelt . Und ich wollte eine öffentliche Draw-Methode haben , die von außen aufgerufen werden kann von außen die vollständige fraktale Form zeichnet. Lasst uns das zusammenstellen. Draw Line erwartet Kontext als Argument, um anzugeben, auf welches Element wir zurückgreifen möchten. Im Inneren lege ich den ganzen Code ein, der eine Linie zeichnet. Beginnen Sie also den Pfad, um mit dem Zeichnen zu beginnen, zu wechseln , um die Startlinie X und Y Koordinaten auf festzulegen, und in X - und Y-Koordinaten und Strich, um die von uns definierte Linie tatsächlich zu zeichnen. Dann nenne ich diese private DrawLine-Methode innerhalb der Public-DrawLine-Methode mit diesem Schlüsselwort, ich kann sehen, dass DrawLine Kontext als Argument erwartet. Ich gebe es Kontexte weiter , die als Argument an die Methode der öffentlichen Schublade übergeben Argument an die Methode der öffentlichen Schublade die ich Ihnen später zeigen werde. Du siehst, dass es beim Drehen immer noch funktioniert. Wir haben den Code gerade umstrukturiert damit er etwas modularer ist und es einfacher sein wird, den Überblick zu behalten , was wir tun werden. Als Nächstes. Schau was passiert, wenn ich diese beiden Zeilen kopiere und die zweite Rotate-Kohle einen anderen Winkelwert hat. Ich kopiere sie immer wieder und immer wieder. Was ist, wenn ich jedes Mal, wenn wir drehen, auch als 5050 übersetze können Sie genau hier sehen, dass Transformationen additiv sind, kumulativ übersetzt und rotiert bis sie zurückgesetzt werden durch Restore haben wir hier einige Wiederholung genannt. Wenn Sie sehen, dass in Ihrem JavaScript-Code normalerweise eine gute Idee ist, eine Schleife zu verwenden. Ich lösche all diese wiederholten Ziele und erstelle eine for-Schleife für den Lead-Index beginnt bei 0, solange ich weniger als fünf Jahre alt bin, erhöhe ich um eins. Jedes Mal, wenn for-loop läuft, rufen wir die DrawLine Methode von Zeile 31 auf, um ein neues Liniensegment zu zeichnen. Und wir werden rotieren, irgendwie von weiteren 0,5 Bogenmaß gefragt. Die erste Zeile wird also um 0,52 gedreht, Zeile um 1, dritte Zeile um 1,5 usw. Rotationen sind additiv, es sei denn, wir stellen dazwischen wieder her. Während die for-Schleife läuft, werden Linien gezeichnet und die Drehungen summieren sich. Ich kann mehr Zeilen wie diese erstellen. Ich habe diesen Übersetzungsaufruf gelöscht. Was ist, wenn ich möchte, dass die Linien gleichmäßig in einem kreisförmigen Bereich aufgeteilt werden? Lass mich dir zeigen, was ich meine. Ich muss irgendwie übereinstimmen , wie oft diese for-Schleife läuft und wie viel er sich jedes Mal dreht. Derzeit führen wir diese for-Schleife dreimal in drei Zeilen aus. Wir wissen, dass math.pi in einen Bogenmaß von 180 Grad oder 3,14 umgewandelt wird. Also halber Kreis. Wenn ich einen Halbkreis teile, math.pi geteilt durch drei, bekommen wir diese Form. Wenn ich den ganzen Kreis nehme, um zwei Mal gemeistert wird, und ich teile ihn durch die Häufigkeit, mit der diese for-Schleife läuft, werden drei Zweige gleichmäßig in einem kreisförmigen Bereich geteilt. Hier können wir sehen, dass die Anzahl der Schleifen der Zahl übereinstimmen muss. Wir teilen den ganzen Kreis durch, um unsere Zweige gleichmäßig über eine kreisförmige Fläche zu verteilen. Lassen Sie uns das in eine Variable umsetzen. Ich nenne es diese Punktseiten , weil es bestimmt, wie viele symmetrische Seiten unsere endgültige fraktale Form erhalten wird. Ich habe es zum Beispiel auf fünf gesetzt und ersetze es hier und hier. Wenn ich diesen Wert ändere, ändern wir die Form unseres bald fraktalen Wertes. Wir haben diese Methode für öffentliche Schubladen in Zeile 20 und private DrawLine-Methode in Zeile 31. Wie gesagt, können private Methoden von außen aufgerufen werden. Wenn ich versucht habe, es aufzurufen, erhalte ich einen Fehler, der besagt, dass privates Feld zum Zeichnen Linie in einer umschließenden Klasse deklariert werden muss. Wir können sehen, dass dies eine integrierte Funktionalität ist und die private Kapselung dieser Klassenfunktionen , die mit einem Hash-Symbol beginnen , durch JavaScript selbst erzwungen wird. Auf der anderen Seite ist Zeichnen eine öffentliche Methode , die von außen so aufgerufen werden kann. 8. So zeichnest du Fraktale: Wir zeichnen hier ist noch nicht fruchtbar. Es ist nur die Linie, die übersetzt und gedreht wurde , um sternförmige mathematische Fraktale zu erzeugen , sind unendlich komplexe Muster, die über verschiedene Skalen hinweg selbstähnlich sind . Es ist ein sich wiederholendes Muster ähnlicher Formen, in das Sie immer näher zoomen können , um immer mehr Details zu erhalten. Bei der kreativen Codierung können wir unsere Fraktale unendlich komplex machen, denn dann wird JavaScript unendlich lange brauchen , um sie zu zeichnen. Wir können ihnen Komplexitätsschichten geben, bis wir auf einen bestimmten kleinen Wert skaliert sind, über den wir sowieso keinen Unterschied mit bloßem Auge erkennen können, weil einzelne Linien so klein sind, die Fraktale form wird heute aus Linien gezeichnet werden. Und was ich anstrebe, ist etwas Fraktal im Alter von drei Jahren inspiriert ist, wo Sie drei Linien haben, die die Basis-H-Buchstabenform bilden , die sich an jedem Ende in vier kleinere H-Buchstabenformen verzweigt an jedem Ende in vier kleinere H-Buchstabenformen in und an jedem Ende dieser kleineren gibt es noch kleinere. Im mathematischen Fraktal können wir immer näher zoomen und mehr Details sehen, da sich dieses Muster auf unendlich kleineren und kleineren Skalen wiederholt . Für unseren Effekt werden wir eine gewisse Tiefe definieren. Nehmen wir an, wir möchten, dass jede Linie fünfmal in kleinere Linien aufgeteilt wird , und dann ist unsere fraktale Form vollständig. Und ich zeig dir was ich meine. Wir werden unser Fraktal zeichnen diese private DrawLine-Methode immer wieder aufrufen lassen und diese private DrawLine-Methode immer wieder aufrufen lassen. In der Programmierung wird dies Rekursion genannt. Rekursion ist ein Prozess, bei dem sich eine Funktion direkt oder indirekt selbst aufruft. Jedes Mal, wenn Draw Line sich selbst anruft, wird es eine Linie ziehen. Es wird uns transformieren, drehen und skalieren. Und es wird sich dazu aufrufen, dieselbe Linie zu zeichnen, aber dieses Mal transformiert, skaliert und gedreht, und dann wird es sich wieder anrufen. Wir werden eine Bedingung hinzufügen, um zu definieren, wie oft sich dieser Prozess wiederholt, je nachdem, wie viel Detail wir in unserer endgültigen fraktalen Form wünschen. Ich zeige dir genau, wie das funktioniert und wie es aussieht. Jetzt fange ich damit an, alle Änderungen zu isolieren, die ich an einer Art Zustand vornehme. Also werde ich meinen Code in Speichern- und Wiederherstellungsmethoden innerhalb unserer Rotate-Art einwickeln , die von einem Radian gefragt wird. Und ich werde DrawLine dazu bringen, sich selbst anzurufen. Ich muss es Kontext-Argument übergeben. Seien Sie vorsichtig, wenn Sie diesen Code ausführen, wird eine Endlosschleife erstellt. Die meisten modernen Browser könnten heutzutage damit umgehen und sie werden nicht abstürzen. Wir müssen eine Bedingung erstellen , die die Rekursion irgendwann beendet , die verhindert, dass eine DrawLine vom Doppelpunkt selbst entfernt wird . Und wenn weiter, wenn ein bestimmtes Limit erreicht ist, mache ich es, indem ich ihm ein zweites Argument namens Level übergebe. Ich erstelle eine if-Anweisung und überprüfe, ob diese Levelvariable, die als Argument übergeben wird, mehr als diese Punkt-Maximalstufe ist . Wenn dies der Fall ist, verwenden Sie die Return-Anweisung wie folgt. Wenn eine return-Anweisung in einem Funktionskörper verwendet wird, wird die Ausführung der Funktion gestoppt. Ich muss hier oben eine maximale Eigenschaft erstellen. Nehmen wir an, ich möchte eine Linie ziehen, um sich zweimal anzurufen. Unser Fraktal wird eine Tiefe von zwei Ebenen haben. Wenn DrawLine sich selbst aufruft, kann ich hier oben sehen, dass es zwei Argumente, Kontexte erwartet und jedes Mal, wenn DrawLine sich selbst aufruft, ich erhöhe dieses Level-Argument um plus eins. Ich führe den Code aus und wir bekommen immer noch eine Endlosschleife. Das liegt daran, dass diese Ebenenvariable nicht definiert ist. Ich muss ihm einen Anfangswert geben. Als ich DrawLine zum ersten Mal aufrufe, sagte ich, dass die anfängliche Stufe auf 0, wir die DrawLine private Methode aufrufen und wir übergeben sie Kontexte, um anzugeben, auf welche Art von uns wir zurückgreifen wollten. Und wir passieren es anfängliches Level 0, das nannte Ron's, um eine Linie zu ziehen. Und dann ruft die Funktion durch ein Programm, das prinzipiell Rekursion genannt wird, auf, dieselbe Kontextvariable weiterzuleiten und die Pegelvariable um plus eins zu erhöhen. An diesem Punkt ist die Ebene eins und die maximale Ebene ist zwei, da wir es online definiert haben 19, diese Prüfung wird falsch sein und USA drehen und eine weitere Linie ziehen, um das Niveau um eins zu erhöhen. Diese Schleife wird an sich wiederholt und zieht immer mehr Linien, und zieht immer mehr Linien bis der Level das maximale Niveau erreicht. Jedes Mal, wenn wir eine weitere Linie ziehen, können wir auch nach unten skalieren. Ich skaliere es um 0,9 horizontal und vertikal. Und jetzt hat jede Zeile eine Größe von 90% der vorherigen. Wenn ich eine Zweigform erstellen wollte, wollte ich auch den Punkt verschieben, von dem aus die neue Linie von ihrer Elternlinie wächst. Ich werde es tun, indem ich in unserem Staat übersetzt wird. Wie bereits erläutert, wird dies die Koordinaten 00 um einen Datenwert schieben, und es wird auch die Rotation und Skalierung im Mittelpunkt mit ihm als Nebeneffekt verschieben im Mittelpunkt mit ihm als Nebeneffekt Sehen Sie sich zum Beispiel an, was passiert, wenn zwischen jeder Zeile, die ich horizontal mit 50 Pixel und 0 vertikal übersetzt habe, kann ich mit translate in eine neue Linie entlang ihrer übergeordneten Zeile drücken . Was ist, wenn ich möchte, dass die neue Linie vom Ende ihrer übergeordneten Linie aus wächst , kann ich das tun, indem ich horizontal um die gesamte Länge dieser Linie übersetze . Also hier habe ich diese Lossize-Immobilie aus Linie 17 benutzt. Ich habe eine Art Hakenform geschaffen. Ich kann es ein bisschen verkleinern. Ich kann die Größe einzelner Segmente hier in Zeile 17 ändern . Wenn ich jetzt den MCS-Level erhöhe, erlaube ich DrawLine, sich mehrmals zu erhöhen die Anzahl der Linien zu erhöhen, die unsere endgültige fraktale Form ausmachen. Sie können sehen, dass diese Einstellungen schnell einen Punkt erreichen, an dem neue Linien bis zu einem Punkt verkleinert werden , an dem sie kaum sichtbar werden. Mit mathematischen Fraktalen wird dies unendlich sein und wir werden in der Lage sein, immer näher zu zoomen und immer mehr Zeilen in der kreativen Codierung zu sehen , wir kümmern uns nur um den Teil, den wir sehen können, auch wir haben keine unbegrenzte Rechenleistung um solche Unendlichkeitsformen zu erstellen. Wenn die Shapes zu komplex werden und die Renderzeit auf Ihrem Computer zu lange dauert, ist es am einfachsten, sie schneller zu rendern, hierher zu kommen Wenn die Shapes zu komplex werden und die Renderzeit auf Ihrem Computer zu lange dauert, ist es am einfachsten, sie schneller zu rendern , hierher zu kommen maximale Level-Eigenschaft und setzen Sie sie auf einen niedrigeren Wertabfall in den Tiefen unseres Fraktals. Ich setze es auf fünf und setze die Skala auf 0,7. Wenn ich diesen Winkelwert im Bogenmaß ändere, übergebe ich die Rotate-Methode. Ich habe den Winkel zwischen dem neuen Zweig und der Ausleihe des Zweigs geändert , der wirklich coole Formen und Bewegungen erzeugen wird , die ich im Intro gezeigt habe. Dies ist unsere sehr einfache fraktale Form. Wir haben einen Fraktalhaken gemacht. Ich kann jetzt den Code verwenden, den wir hier alle und 26 geschrieben haben , um ihn in eine Form mit der radialen Symmetrie zu verwandeln. Diese for-Schleife zeichnet einen fraktalen Zweig, jeder Schaden läuft und verteilt diese Zweige gleichmäßig in einem kreisförmigen Bereich. Die Anzahl der Zweige hängt dieser Punktgrößenvariablen ab Zeile 18, erhöhen wir sie auf 23456. Ich hoffe, du siehst, dass wir etwas Interessantem näher kommen. Ich gehe vorerst in einen Zweig zurück, damit wir klar sehen können, was wir tun. Ich setze vorerst auch die maximale Stufe auf eins. 9. Snowflake Fraktal: So wie unser Code gerade funktioniert, zeichnet er eine Linie, dreht sich in eine positive Richtung, neigt dazu, wieder eine weitere Linie zu zeichnen. Auf diese Weise zeichnen wir diese Kurve, die Haken. Was ist, wenn ich mehr Symmetrie will? Sagen wir, ich möchte, dass ein Zweig nach links und einer nach rechts wächst . Ich möchte eine Gabel kreieren , die ihnen interessante Schneeflockenäste oder Kristallformen geben kann . Lass mich es dir zeigen. Wir werden zwei Zweige haben, die aus der Haupt-Mutterzweig herauswachsen. Einer wird nach links gespalten, eins nach rechts. Beide Zweige werden den gleichen Maßstab haben. Also bewege, übersetze und skaliere ich hier außerhalb dieses sicheren Ziels. Und ich wickle diesen ganzen Block in ein weiteres Paar Speichern und Wiederherstellen ein, um sicherzustellen, dass unsere übersetzten Skalen und Drehungen nicht außerhalb dieser DrawLine Schleife überlaufen. Ich hoffe, Sie finden es nicht verwirrend, dass wir hier mehrere sichere Anrufe haben und wiederherstellen. Ich denke an den Safe und Restaurierung in Paris. Sie sind irgendwie ineinander verschachtelt. Jede Wiederherstellung weiß also , welcher der zugehörige sichere Punkt ist. Es weiß also, in welchen Status von Canvas wieder hergestellt werden soll. Diese Wiederherstellung funktioniert mit diesem Speichern. Diese Wiederherstellung ist mit diesem Safe gepaart. Ich hoffe, es ergibt Sinn. Speichern verschiebt den aktuellen Status auf den Stapel, stellt Bobs zuletzt hinzugefügten Status oben im Stapel wieder her. Es wird intuitiver, wenn Sie es eine Weile benutzt haben. Ich kopiere diesen Codeblock noch einmal. Und die einzige Änderung wird sein, dass wir Rotationsmethode und negativen Winkel passieren . Ich habe ein paar Räume hier zur Übersichtlichkeit platziert. Wenn wir Draw Line nennen, ziehen wir eine Linie. Wir übersetzen die Positionsnullen 0 entlang des Zweigs. Also ist es am anderen Ende. Wir drehen irgendwie gefragt einen positiven Winkelwert und rufen Draw Line auf, um diesen Zweig zu zeichnen. Und hier drehen wir es um einen negativen Wert , um diesen zu zeichnen. Jetzt codiere ich den Maßstab 0,7 fest. Machen wir es in eine Klasseneigenschaft. Ich sage, diese Punktskala ist 0,7 und ich ersetze sie hier und hier. Jetzt kann ich die Skalierung unserer Fraktalstufen hier in Zeile 20 ändern . Es wird dasselbe für den Winkelwert tun. Wir gehen zur rotate-Methode über. Es wird beeinflussen, wie verteilt die endgültige fraktale Form ist. Also nenne ich es diese Punktverbreitung. Sie können es auch Winkel nennen oder so, wenn Sie möchten. Anfangs habe ich es auf einen Radian eingestellt , der etwa 57 Grad beträgt. Ich ersetze den fest codierten Winkelwert hier Zeile 46 und Wert 51, ich verwende denselben Wert, aber negativ, um sicherzustellen, dass diese beiden kleineren Zweige in beide Richtungen vom Elternteil entfernt sind Zweig. Wenn ich den Unterwert hier ändere, kannst du genau sehen, wie sich auf die Beziehung zwischen untergeordnetem und übergeordnetem Zweig auswirkt . Ich füge noch mehr Seiten hinzu. Ich kann hier jeden Wert ändern, um zu ändern, wie die endgültige Form aussieht. Hier in Zeile 35 haben wir die Anzahl der DrawLine-Methodenaufrufe selbst begrenzt . In diesem Fall ruft es sich jedes Mal, wenn es ausgeführt wird, zweimal auf, um zwei kleinere Versionen derselben Zeile zu erstellen zwei kleinere Versionen , die aus den Spitzen wachsen. Schau, was passiert, wenn ich das maximale Level um eins erhöhe, werden wir eine weitere Rekursionsebene hinzufügen und jeder kleinere Zweig muss noch kleinere Zweige daraus wachsen. Wenn ich noch einen hinzufüge, müssen die kleinsten Zweige jeweils noch kleinere Zweige haben. Ich hoffe, du kannst sehen , was passiert. Ich werde den Winkelwert ändern und es wird deutlicher, dass wir unsere Basisebene haben und drei weitere fraktale Ebenen davon abzweigen. Wir haben einen Zweig, der sich in zwei kleinere Zweige aufteilt. Und jedes Mal, wenn wir die maximale Stufe hinzufügen, wird dieser Vorgang auf kleinerem und kleinerem Maßstab wiederholt. Grundprinzip der Fraktale. Ich verkleinere die gesamte Form, indem die anfängliche Segmentgröße auf 20% der Canvas-Breite setze. Ich sagte die Linienbreite auf 30 Pixel. Gehen wir noch einen Schritt weiter. Nehmen wir an, dies ist der Hauptzweig und es gibt zwei kleinere Zweige, die hier und hier herauskommen. Was ist, wenn ich mehr Niederlassungen haben wollte? Zum Beispiel möchte ich noch ein Paar von irgendwo hier und hier kommen . Wenden wir uns einer Reihe von Zweigen in eine Klasseneigenschaft zu. Anfangs habe ich es auf eins eingestellt. Ich gehe in unsere private DrawLine-Methode. Und nachdem ich die erste Hauptlinie gezeichnet habe, die ich für die Schleife erstellt habe, ist ich 0, solange ich kleiner bin als dies Zweige um eins erhöhen würde . Jetzt nehme ich den ganzen Code und lege ihn in die for-Schleife. Dieser Code übersetzt die Koordinaten 00 entlang des Elternzweigs bis zu seinem Ende und reduziert Cannabis ein wenig. Dann zieht es diese Linie hier und diese Linie hier. Ich muss diesen Safe außerhalb der for-Schleife verschieben , da zugehörige Wiederherstellung hier auch außerhalb der for-Schleife liegt. Ich möchte eine Reihe von Zweigen irgendwo hier und die andere Seite hier, der Code, der bestimmt, woaus die nächsten Zweige herauswachsen, ist diese Übersetzung. Anstatt bis zum Ende von Balken und Zweig zu übersetzen, übersetze ich diese Punktgröße geteilt durch Zweige und diese ganze Sache in Klammern mal I. übersetze sagen wir zwei Zweigsätze, der erste Satz wird hier durch zwei Mal eine 0 geteilt, und das zweite Paar wird durch zwei Mal eins geteilt. Also hier haben wir jetzt nur einen Satz, weil dieser Punktzweig auf eins gesetzt ist. Wenn ich es auf die andere Seite des Hauptzweigs verschieben wollte , setze ich diesen Wert auf diese Punktgröße minus wie folgt. Ich weiß zu schätzen, dass dieser Code in Zeile 44 zunächst etwas schwer zu verstehen sein könnte. Es wird klarer, wenn wir mit dem Code spielen und sehen, wie die endgültige fraktale Form reagiert. Ich sagte Zweige zu zwei und ich kann sehen, dass es etwas getan hat, was ich nicht erwartet hatte. Mal sehen , wie das in einer komplexeren Form aussieht , indem wir weitere Websites hinzufügen. Das gefällt mir eigentlich. Der Grund, warum die Zweige nicht entlang des Hauptzweigs verteilt sind, sondern irgendwie nach draußen geschoben werden , liegt darin , dass ich diese nur außerhalb der for-Schleife speichere und wiederherstelle. Ich wollte eigentlich jedes Mal speichern und wiederherstellen , wenn wir ein Paar Zweige zeichnen , damit diese übersetzte online 44 korrekt entlang des Elternzweigs klettern kann . Ich bewege, speichere und stelle sie in der for-Schleife wieder her. Und jetzt macht es das, was ich beabsichtigt habe. Wenn ich es verkleinere, siehst du, dass wir zwei Zweige haben. Eine Seite wächst von diesem Punkt und ein anderes Set, das von diesem Punkt aus wächst, passe ich einige dieser Werte an, um eine bessere Größe zu erhalten. Jetzt machen wir wirklich schöne fraktale Schneeflocken. 10. Eine breite Palette oder zufällige Formen erstellen: Ich erstelle eine Klasseneigenschaft, die diese dunkle Farbe genannt wird. Anstelle der RGB-Farbdeklaration verwende ich das HSL-Farbmodell, Farbton, Sättigung, Helligkeit. Hsl-Farbmodell wurde in 19 siebziger Jahren entwickelt , um sich stärker an Wahrnehmung des menschlichen Sehens von Wissenschaftlern auszurichten. Es ist sehr nützlich für die kreative Codierung, da Sie das gesamte Farbspektrum durchlaufen können das gesamte Farbspektrum indem Sie nur den ersten Wert ändern. Dieser erste Wert steht für Hue. Und es repräsentiert einen Grad auf dem Farbrad von 0 bis 360 Grad, ich habe einen Strichstil bekommen und ihn hier in der Zeichnungsmethode basiert. Kontexte Punktstrichstil ist gleich dieser Punktfarbe von Linie 220 Grad stimmt. Ein 120 Grad ist grün, 240 ist blau. Sie können sogar Werte über 360 erreichen, und es wird sich einfach wieder um das Rad drehen. 360 ist also wieder rot, 408 ist grün und so weiter. Sättigung ist ein Prozentwert, 0 bedeutet einen Grauton, 100% ist vollfarbig. Leichtigkeit ist ebenfalls ein Prozentsatz. 0 ist schwarz, 100% ist weiß, 50% sind vollfarbig, überhaupt nicht von hell oder dunkel betroffen. Ich kann den Ansichtsteil durch einen randomisierten Wert wie diesen ersetzen . Sagen wir auf der ersten Seite, die ich geschrieben habe, rolle ich eine Zufallszahl zwischen 0360. Jetzt kann unser Fraktal eine zufällige Farbe haben. Ich könnte ihm auch etwas Schatten geben. Ich nehme die CTX-Variable von Zeile drei und ich sagte, wir schattenfarbeneigenschaft zu schwarz, Schattenversatz y. vertikale Schatten wird also zehn Pixel nach unten sein. Schattenversatz X. Horizontaler Schatten wird fünf Pixel rechts von seiner übergeordneten Form entfernt sein. Schattenunschärfe wird zum Beispiel zehn sein. Wir lassen es richtig gut aussehen. Sie können sehen, wie der Verbreitungswert ist, also ändert der Winkel, den wir zur Rotationsmethode übergeben , die endgültige Form des Fraktals. Ich habe mit 0,1 Bogenmaß angefangen und werde bis zu 2.9 gehen , um den vollen Bereich zu erhalten, den ich will. Ja, ich denke, diese Werte sind gut. Ich mache Spread einen Zufallswert zwischen 0,12,9 wie diesem. Jetzt erhalte ich jedes Mal, wenn ich die Seite aktualisiere, eine zufällige Farbe und zufälligen Winkel zwischen Zweigstufen. Wir bekommen also eine nette zufällige Auswahl an Formen. Ich habe die Linienbreite nicht auf zehn Pixel gesetzt, um mehr Details sehen zu können. Wenn ich Max Level zu eins sage, bekommen wir einfach den Hauptzweig auf jeder Seite , der sich in vier kleinere Zweige aufteilt. Wenn ich es auf zwei setze, hat jeder der kleinen Zweige vier kleinere. Wenn ich die maximale Stufe zwei für jeden dieser kleinen Zweige erhöhe, werden vier noch kleinere Zweige haben. An dieser Stelle bitten wir JavaScript, Cannabis zu drehen, zu skalieren und zu übersetzen und viele, viele Male, um diese Form zu zeichnen. Wenn wir also die maximale Stufe weiter erhöhen, wird die Renderzeit unabhängig von der Leistung unseres Computers erhöht . Es ist nicht unbedingt eine schlechte Sache. Nehmen wir an, wir wollten dies verwenden, um eine komplexe fraktale Form zu rendern. Und wir möchten es als Bild speichern. Es gibt kein Problem, wenn wir ein paar Sekunden Renderzeit bekommen . Es hängt davon ab, wofür Sie diesen Code verwenden möchten. Wenn Sie heute irgendwann die fraktale Form haben möchten , die Sie haben. Wenn Sie einen modernen Browser verwenden, sollten Sie in der Lage sein, mit der rechten Maustaste zu klicken und Bild speichern unter auszuwählen. Das sollte dir deine fraktale Form als PNG-Bild mit transparentem Hintergrund geben. Wenn Ihre Renderzeit dauert es zu lange. Sie bitten JavaScript, zu viele Details in Ihr Fraktal zu zeichnen . Sie können es beheben, indem Sie hier in Zeile 22 gehen und die maximale Level-Eigenschaft auf einen niedrigeren Wert setzen , wenn Sie mit Ihrer Fraktalform spielen und irgendwann über die Ränder von Canvas geht. Sie können es verkleinern, indem diese Punktgrößeneigenschaft online 20 ändern. Dies ist unsere Fraktalklasse. Wir haben es verwendet, um fraktale Formen auf Canvas zu rendern oder zu randomisieren. Ich zeige Ihnen später weitere Sommersprossenformen im Experimentabschnitt. Aber jetzt nehmen wir dieses Fraktal und verwandeln es in ein Partikelsystem. Bei Partikelsystemen haben wir viele einzelne Partikelobjekte , die zusammen verschiedene Effekte erzeugen, wie zum Beispiel Rauch, irgendeine Art Strömungs- oder Regeneffekt. Heute wird jedes unserer Teilchen eines dieser komplexen Fraktale sein und ich werde sie über Canvas regieren lassen. Wie die Beispiele, die ich dir zu Beginn dieses Kurses gezeigt habe . Auf Canvas animieren wir normalerweise etwas, indem wir eine statische Form zeichnen, löschen, ihre Position aktualisieren und an dieser aktualisierten Position zeichnen. Das machen wir sehr schnell, normalerweise 60 Mal pro Sekunde. Und wenn Partikel gezeichnet, gelöscht, aktualisiert und erneut gezeichnet werden , erhalten wir eine Illusion von Bewegung mit einfachen Formen wie Kreisen oder Rechtecken. Es ist einfach, aber mit einer komplexen fraktalen Form wie dieser haben wir ein Problem. Was wäre, wenn ich Formen in meinem Partikelsystem komplex sein möchte ? Zum Beispiel werde ich ein Fraktal zeichnen Das dauert 1 Sekunde, um zu rendern. Es gibt keine Möglichkeit, mehrere dieser Fraktale auf Canvas zu zeichnen , sie zu löschen, zu aktualisieren und sie über 60 Mal pro Sekunde mit einer Form neu zu zeichnen , die 1 Sekunde dauert, um zu rendern. Es ist einfach unmöglich, mehrere 60 Mal pro Sekunde zu zeichnen und zu animieren . Aber wenn du die Beispiele am Anfang des Videos gesehen hast, könntest du sehen, dass ich das gemacht habe. Ich habe viele komplexe randomisierte fraktale Formen gerendert und sie mit 60 Bildern pro Sekunde über Canvas regieren lassen. Wie habe ich das gemacht? Das ist es, was wir gerade lernen werden. 11. Partikel-Systeme und Animation: Unsere benutzerdefinierte Partikelklasse, um einzelne Partikel zu zeichnen und sein Verhalten und seine Bewegung zu definieren. Und wir werden diese Regenklasse haben , die den gesamten Effekt bewältigt, alle Partikel auf einmal. Lassen Sie es uns Zeile für Zeile schreiben und erklären damit wir genau wissen, was los ist. Dieses Glas wird einen Konstruktor benötigen. Es wird Argumente für die Breite und Höhe von Canvas erwarten, hauptsächlich weil eine dieser Klassen darin besteht, unsere fraktalen Teilchen über den verfügbaren Canvas-Bereich zu verteilen . Ich wandle diese Argumente wie gewohnt in Klasseneigenschaften um. Die Canada Swift-Eigenschaft für dieses Regenobjekt, Canada Swift-Eigenschaft das wir gerade erstellen, ist gleich der kanadischen Schweißvariablen, die als Argument an die Klassenkonstruktor. Canvas-Höheneigenschaft für diese Instanz der Regenklasse entspricht der Canvas-Höhenvariablen , die als Argument übergeben wurde. Diese Punktzahl von Partikeln bestimmt die maximale Anzahl aktiver Partikel auf dem Bildschirm. Es gibt diese Partikel, die ein Array sein werden und alle derzeit aktiven Partikelobjekte enthalten alle derzeit aktiven Partikelobjekte mit unserer bestimmten Klasse erstellt wurden. Ich erstelle eine private Hilfsmethode namens initialize. Die Aufgabe dieser privaten Methode wird darin bestehen, Partikelarray aus Linie 79 mit 20 Partikelobjekten zu füllen . Also für Schleife beginnt es bei 0, solange ich weniger als die Anzahl von Partikeln von Linie sieben bis acht bin, ich plus, plus. Jedes Mal, wenn diese for-Schleife läuft, wird es in unserem Fall 20 Mal laufen. Es wird dieses LDL-Partikel-Array von Zeile 70 nehmen und es wird die integrierte Array-Push-Methode verwenden. In der JavaScript-Array-Push-Methode als eines oder mehrere Elemente, die wir an sie übergeben , bis zum Ende des Arrays wird es aufgerufen. Es gibt auch die neue Länge des Arrays zurück, was manchmal nützlich sein könnte, wenn ich ihm ein neues Partikel übergebe. In einer Instanz unserer benutzerdefinierten Partikelklasse aus Land 70 wird das neue Schlüsselwort nach einer Klasse namens Particle suchen und ein neues leeres JavaScript-Objekt erstellen. Es wird dann Code im Konstruktor dieser Partikelklasse ausführen Konstruktor dieser Partikelklasse um ihm Werte und Eigenschaften basierend auf dem darin enthaltenen Blueprint zuzuweisen . Lassen Sie uns unsere spezielle Klasse schreiben und diese Blaupause definieren. Jedes von dieser Klasse erstellte Objekt muss sich auch der verfügbaren Breite und Höhe bewusst sein , da ich möchte, dass diese Objekte zurückgesetzt werden, wenn sie vom Bildschirm fallen. Die anfängliche horizontale Startkoordinate der x-Position eine Zufallszahl zwischen 0 und einem schnellen. vertikale Y-Koordinate ist ein Zufallswert zwischen 0 und Canvas. Höhe Die Breite jedes Partikels beträgt beispielsweise 50 Pixel und die Höhe beträgt ebenfalls 50 Pixel. Jedes von dieser Klasse erstellte Partikelobjekt hat Zugriff auf die Update-Methode. Innerhalb der Update-Methode definieren wir Verhalten und Bewegung. Eine Bit-Methode wird immer und mehr als 60 Mal pro Sekunde aufgerufen. Und jedes Mal, wenn es läuft, schieben wir es ein Pixel auf der horizontalen X-Achse nach rechts und ein Pixel auf der vertikalen Y-Achse. So nach unten werden diese beiden Aktionen kombiniert zu einer Bewegung von unten rechts führen. Jedes Partikel wird auch seine zugehörige Zeichnungsmethode haben , bei der wir einen Code definieren , der dieses Partikel 60 Mal pro Sekunde zeichnet . Nach jeder Ziehmethode für die Positionsaktualisierung benötigen wir ein Argument, um anzugeben, auf welche Art von Frage wir zurückgreifen möchten. Dieser Effekt wird für eine Art von Elementen verwendet . Ich werde es erklären, während wir weitermachen. Beginnen wir einfach mit der integrierten Füllrechteck-Methode des Doppelpunkts . Diese Methode nimmt x, y, Breite und Höhe und zeichnet ein Rechteck an dieser Position dieser Größe. Perfekt, also haben wir einen Blueprint, der verwendet werden kann, um 20 Partikelobjekte online 71 zu erstellen. Ich kann sehen, dass meine spezielle Klasse Argumente für S-Wave und eine Art als Höhe benötigt . Ich musste mich daran erinnern , dass, wenn ich diesen Klassenkonstruktor mit dem neuen Schlüsselwort online 97 auslöse , Desktop-Leinwandbreite von Zeile 90 hoch passiere. Diese Punktleinwandhöhe ab Linie 91. Initialisieren ist eine private Methode. Es kann von außerhalb dieser Klasse aufgerufen werden. Es kann nur von irgendwo innerhalb dieser Klasse aus aufgerufen werden. Klassenkonstruktor in JavaScript hat einen Hauptzweck. Es erstellt ein neues leeres Objekt und weist ihm Werte und Eigenschaften zu, die es enthält, um eine Instanz dieser Klasse zu erstellen. Dabei führt es auch den gesamten Code aus, den es enthält. So können wir das nutzen und unsere initialisierte Methode aus dem Konstruktor ausführen . Ich mache es, indem ich diesen Knoten-Hash initialize aufrufe , wie diese Struktur in unserem Code der dazu führt, dass der Code in der initialisierten Methode automatisch ausgeführt wird , wenn der Konstruktor ausgelöst wird. Wenn wir eine Instanz dieser Regenklasse mit dem Schlüsselwort new erstellen , testen wir sie in einer Minute. Regenklasse führt auch eine öffentliche Methode an, die 60 Mal pro Sekunde läuft. Es wird alle derzeit aktiven Partikelobjekte von 993 durchlaufen alle derzeit aktiven Partikelobjekte und die zugehörige Update-Methode von Zeile 79 aufrufen und auf jedem dieser 20 Partikel eine Methode aus Linie 83 ziehen auf jedem dieser 20 Partikel eine Methode aus Linie 83 eins nach dem anderen. Und es wird es 60 Mal pro Sekunde machen. Alle unsere aktiven Teilchen werden also ständig an den neuen Positionen aktualisiert und neu zeichnen eine Illusion von Bewegung erzeugen. Ich mache das, indem ich dieses Arzneimittelpartikel-Array aus Zeile 93 nehme , das dank der initialisierten Methode, die wir gerade geschrieben haben, 20 Partikelobjekte enthält , und ich habe für jede Array-Methode integriert aufgerufen. Für jede Methode, die ausgeführt Funktion für jedes Array-Element einmal bereitgestellt, ich weise jedem Element einen temporären Variablennamen zu. Nur für die inneren Zwecke dieser for-Schleife nenne ich jedes einzelne, zum Beispiel Partikel, und stelle eine Funktion zur Verfügung, die für jedes der 20 Elemente ausgeführt wird . Wir nehmen dieses Teilchen einfach und rufen seine Draw-Methode aus Zeile 83 auf. Ich kann sehen, dass diese Methode erwartet, dass ein Argument für den Kontext angibt, welche Art von Angeforderter auf Run-Methode öffentlich ist. Es wird also dieses Kontextargument von außen nehmen. Ich werde es Ihnen in einer Minute zeigen, wenn ich es nenne, und es wird diesen Kontext weitergeben, um die Methode für jedes Teilchen zu zeichnen. Für jede Array-Methode rufen wir auch die Update-Methode von Zeile ist 79 für jedes Partikelobjekt auf. Stunde im Unterricht ist fertig. Versuchen wir also, den Code auszuführen, um zu sehen, was wir bekommen. Ich erstelle eine benutzerdefinierte Variable, die ich zum Beispiel Regeneffekt nenne, und ich mache sie mit dem neuen Schlüsselwort zu einer Instanz der Regenklasse aus Zeile 88. Wie gesagt, wird das neue Schlüsselwort nach einer Klasse mit diesem Namen suchen und seinen Konstruktor online ausführen 89. Ich kann sehen, dass die Rain-Klasse die Canvas-Breite und die Canvas-Höhe als Argumente erwartet . Also gebe ich es Canvas-Breite von Zeile vier und irgendwie als Höhe von Zeile fünf. Weil wir diesen Punkt initialize online 94 von innerhalb des Klassenkonstruktors nennen . Dieser Code sollte automatisch ausgelöst werden, indem nur eine Instanz der Regenklasse online 97 erstellt wird. Wir können sehen, dass dieser Code dieses Punktpartikel-Array aus Zeile 93 mit 20 hätte füllen sollen dieses Punktpartikel-Array aus Zeile bestimmte Objekte. Lassen Sie uns prüfen, ob es konsolenweise funktioniert hat. Auch hier Regeneffekt von Linie 108. Ich habe meine Konsole geöffnet und sehe, dass wir eine Instanz der Regenklasse mit Eigenschaften wie Canvas haben , mit Canvas-Höhe und Anzahl der Partikel genau so, wie wir es im Blueprint definiert haben. Und wir können auch sehen, dass Partikel ein Array mit 20 Objekten sind, die mit einer bestimmten Klasse erstellt wurden. Das sieht echt gut aus. Lassen Sie uns testen, ob die Run-Methode funktioniert. Da dies eine öffentliche Methode ist, kann ich sie von außen von der Instanz dieser Klasse aus aufrufen . Also Regeneffekt Dot Run. Ich möchte tatsächlich, dass diese Methode über 60 Mal pro Sekunde läuft und aktualisiert und zeichnet alle 20 Partikel im Partikel-Array aktualisiert und zeichnet. Um das zu tun, muss ich es in die Animationsschleife legen. Ich erstelle eine benutzerdefinierte Funktion. Ich nenne zum Beispiel animate drinnen. Ich nenne sie tatsächlich von Zeile 188 dot run die Methode, die wir online definiert haben 101. Dann rufe ich Request Animation Frame und Methode auf. Diese integrierte Methode teilt dem Browser , dass wir eine Animation durchführen wollten. Und es wird aufgefordert, dass der Browser eine bestimmte Funktion aufruft , um die Animation zwischen den nächsten drei Paint zu aktualisieren , wobei diese Funktion beteiligt sein soll, bevor wir malen als Argument übergeben wird. Und ich werde es übergeben, um den Namen seiner übergeordneten Funktion zu animieren . Ich erstelle eine Endlosschleife. Animate wird gestartet, es ruft die Methode von Zeile 101 auf und fordert dann einen Animationsrahmen wir animate erneut aufrufen. Dies wird sich endlos wiederholen. Wenn wir den Anforderungsanimationsrahmen wie diesen aufrufen, wird normalerweise versucht, sich an die Aktualisierungsrate des Bildschirms anzupassen. In den meisten Fällen läuft es 60 Bildern pro Sekunde für eine reibungslose Animation, hier haben wir animate deklariert. Ich muss es auch zum ersten Mal anrufen , um die Animationsschleife zu starten. Es funktioniert noch nicht, weil ich hier in Zeile 101 sehen kann, dass die run-Methode Kontext als Argument erwartet. Ohne sie weiß JavaScript nicht, welche Art von Uns Element wir von Zeile drei auf die Deckkraft zu CTX zurückgreifen wollen. Und wir animieren, wenn dies Ihre erste Art von Animation ist, möchte ich Glückwünsche sagen, mit dem Wissen, erholen Sie sich heute können Sie Tausende von verschiedenen Effekten machen. Lasst uns das beenden und polieren. 12. Zeichnen von mehreren Leinenelementen: Zunächst möchte ich nicht, dass mein Partikelregen auf den kleinen Karmasbereich in der Mitte der Seite beschränkt ist. Ich wollte das gesamte Browserfenster abdecken. Um das zu tun, gehe ich zurück zum Index-HTML und erstelle ein anderes Canvas-Element. Wir können in unserem Projekt so viele Canvas-Elemente haben , wie wir wollen. Und wir können angeben, welche Formen wir auf welche Art von uns zurückgreifen möchten. Heute wollte ich eine große fraktale Form auf der kleineren Art eines Schwans in der Mitte der Seite rendern . Ich werde es irgendwie in Partikel umwandeln und diese Partikel, um auf eine Art OS2 zu fallen, die das gesamte Browserfenster abdecken. Im Moment werden diese Partikel nur durch blaue Rechtecke dargestellt, aber das werden wir in einer Minute beheben. Wir haben eine andere Art von Element mit einer ID von Cannabis geschaffen , um CSS zu stylen. Ich gebe ihm einen roten Hintergrund, Position, absolute Top 0 und links 0 in script.js hier oben zwischen den Zeilen 35, wir haben einen Code, den wir geschrieben haben. Lasst uns etwas Ähnliches für uns tun eine konstante Variable namens Kanada. Ps2 ist ein Document Dot get Element von ID Canvas , um zu sehen, dass dx2 irgendwie von uns getContext 2D punktet. So wie zwei Punktbreite ist Fenster in der Breite. Die volle Breite des Browserfensters, die Höhe der Leinwand ist also Fenster in Ihrer Höhe. Nett. Es indexiert HTML. Ich habe eine Art Hocker hinter Canvas so positioniert. Jetzt wissen wir, dass diese Art von das gesamte Browserfenster abdeckt damit ich die retikuläre Art von uns entfernen kann. Und wenn ich etwas darauf zeichnen wollte, kann ich diese c2x2-Variablen aus Zeile 17 innerhalb der Animationsschleife verwenden . Ich übergebe es als Argument , um eine Methode wie diese auszuführen. Jetzt werden die Rechtecke auf diese Art von uns gezeichnet. Wie Sie sehen können, wurden sie von blau zu schwarz. Weil das blaue FillStyle auf CTX One eingerichtet wurde, bei den anderen Arten von uns ist der dx2 immer noch auf seine standardmäßige schwarze Füllfarbe eingestellt. Ich muss Regeneffekt Breite und Höhe von Canada C2 passieren, damit es die Partikel korrekt über den neu verfügbaren Bereich ausbreiten kann . Ich versuche schwarze Rechtecke zu zeichnen, aber sie hinterlassen lange Trails. Das liegt daran, dass wir alte Rahmen sehen können, alte Farbe. Ich kann die integrierte Methode für das klare Rechteck verwenden , die einen rechteckigen Bereich auf Canvas löscht , den wir definiert haben, und es wird transparent machen. In diesem Fall wollte ich den gesamten Canvas 60 Mal pro Sekunde zwischen jedem Animationsframe löschen den gesamten Canvas 60 Mal pro . Ich wollte alle Farben auf Art von OS2-Frontkoordinaten löschen , Nullen 0, um nach Breite, bis Höhe zu fragen. So animieren Sie die Bewegung auf Fragen, die Sie alles löschen, alle Elemente aktualisieren und neu zeichnen, und Sie schleifen es. Es ist also das Löschen, Aktualisieren und Neuzeichnen und immer wieder, wir haben eine kleinere Leinwand, auf der wir unsere detaillierte fraktale Form zeichnen und Canvas dahinter positionieren kann, die in animiert Teilchen, die als schwarze Quadrate geformt sind. 13. Konvertieren von canvas in Pixel: Der Effekt, den wir heute aufbauen wollten, ist fraktaler Regen. Also wollte ich diese schwarzen Quadrate tatsächlich durch kleinere Versionen des Hauptfraktals ersetzen , das wir auf Canvas One gezeichnet haben. Wie bereits erwähnt, ist es nicht wirklich möglich, 20 dieser Faktoren auf uns zu ziehen. Löschen Sie sie gleichzeitig weiter, aktualisieren Sie ihre Positionen und zeichnen Sie sie immer mehr als 60 Mal pro Sekunde neu . Es braucht viel weniger Leistung, um dies bei schwarzen Rechtecken mit komplexen Formen wie dieser Fructose zu tun, müssen wir anders machen. Das Zeichnen komplexer randomisierter fraktaler Formen erfordert viel Rechenleistung. Zeichnen einfacher schwarzer Rechtecke ist billig und schnell und sah seine Zeichnungsbilder Canvas ist sehr gut darin, Bilder sehr schnell zu zeichnen. Was ich heute machen werde, nehme ich das komplexe Fraktal, wir generieren es und ich werde JavaScript verwenden, um es als Bild zu speichern. Wir werden dann schwarze Rechtecke, die unsere Partikel darstellen, durch diese Bilder ersetzen . Es ist eigentlich sehr einfach, das zu tun. Hier in Zeile 72 erstellen wir eine Instanz der Fraktalklasse, die wir zuvor geschrieben haben, und wir rufen ihre Draw-Methode um sie auf Canvas zu rendern. Wir haben hier angegeben, ich erstelle eine neue Variable, die zum Beispiel Fraktalbild genannt wird. Ich habe es gesagt, das neue Bild wie dieses. Dies ist eine integrierte JavaScript-Klasse , die einfach ein neues leeres IMG-Element, Bildelement, erstellt. Es ist dasselbe, als ob ich ein IMG-Tag in meiner HTML-Datei erstellt hätte, aber dieses Bild ist noch nirgendwo auf der Webseite enthalten. Wenn wir es nicht mit JavaScript dort ablegen, greife ich dann auf die Quelleigenschaft und setze es auf fraktal. Wir zeichnen auf Canvas als Bildquelle. Wir können dies mit der integrierten zu-Daten-URL-Methode tun. Seien Sie hier vorsichtig, die URL ist mit Großbuchstaben buchstabiert. Wenn Sie nur Großbuchstaben U und Kleinbuchstaben r, l, erhalten Sie einen Fehler bei der Daten-URL-Methode konvertiert den gesamten Inhalt der Leinwand in ein Bild im Basis-64-Format. Es ist ein Format, das jeder Browser verstehen kann und es ist im Grunde eine sehr lange Textzeichenfolge. Wir können es dann als normales Bild behandeln und wir können alles damit machen. Wir können mit Bildern in JavaScript, HTML und CSS. Es hat optionale Argumente , um das Dateiformat anzugeben. Wenn wir es nicht deklarieren, wird es standardmäßig auf B und g gesetzt, was ideal ist, weil ich den transparenten Hintergrund beibehalten wollte . Ich erstelle ein neues leeres Bild JavaScript-Objekt. Und ich mache im Grunde einen Screenshot der ganzen Art von 4s1. Also dieser Bereich und speichern ihn als diese neue Fraktalbildvariable. Wenn ich ein fraktales Bild sehen könnte, können wir die lange Base-64-Datenzeichenfolge sehen, die alle Farb- und Positionswerte von Pixeln darstellt alle Farb- und Positionswerte von , aus denen das Bild besteht. Da wir unserem Bildelement ein Quellattribut gegeben haben, können wir jetzt auf ein Ladeereignis warten. Ich habe all diesen Code und füge ihn hier unten online ein 111 ein. Ich habe das Konsolenprotokoll gelöscht. Das onload-Ereignis wird ausgelöst, wenn ein Objekt vollständig geladen wurde. In diesem Fall, wenn das Bild erstellt wurde und die fraktale Form mit JavaScript generiert oder erfolgreich in das Basis-64-Format konvertiert und als Quelle dieses Bildes zugewiesen wurde. Ich habe all diesen Code in diese Callback-Funktion eingefügt, weil wir diesen nur ausführen möchten, nachdem das Image verfügbar gemacht wurde. Ich übergebe das Bild selbst als drittes Argument an den Regenklassenkonstruktor hier oben 90, ich stelle sicher, dass die Regenklasse dieses Bild tatsächlich erwartet und ich wandle es in eine Klasseneigenschaften um. Dieses Punktbild entspricht also dem Bild. Ich werde dieses Bild lange als drittes Argument an den Partikelklassenkonstruktor übergeben. Online 73 stelle ich sicher, dass es erwartet wird und wandle es in eine Klasseneigenschaft für die Partikelklasse um. Jetzt haben alle unsere Teilchen Zugang zu dem Bild von Fraktal, das wir gerade erzeugt haben. Ich werde die integrierte Draw-Bild-Methode verwenden , um sie auf Canvas zu zeichnen. Wir müssen es mindestens drei Argumente weitergeben. Bild wir wollten dieses Punktbild aus den Linien 76 und x und y zeichnen, wo es auf Canvas gezeichnet werden soll. Also gebe ich es an diesen Punkt x Punkt y. Wir können es auch Breite und Höhe übergeben das Bild zu verkleinern oder zu dehnen. Versuchen wir es 200 mal 200 Pixel. Ich habe das schwarze Rechteck entfernt. Was ist, wenn ich möchte, dass jedes Teilchen eine zufällige Größe hat? Ich erstelle eine Eigenschaft namens Punktgrößenmodifikator. Es wird eine Zufallszahl zwischen 0.10.3 sein. Breite wird auf die tatsächliche Breite des Bildes eingestellt. Also diese Punktbild-Punktbreite, wenn Sie dieses Punktbild von I bin 76 steuern , werden Sie sehen, dass es Breiten- und Höhenattribute hat. Ich multipliziere das mal diesen Punktgrößenmodifikator , der für jedes Partikel zufällig und etwas anders ist. Ich mache das Gleiche für die Höhe. Nett, wir haben Teilchen randomisiert. Ich kann den Größenbereich vergrößern. Ich erstelle eine Eigenschaft namens Punktgeschwindigkeit und setze sie auf eins. Ich ersetze es hier unten in der Update-Methode. Jedes einzelne haben wir eine zufällige Geschwindigkeit zwischen 0,21,2 Pixel pro Frame. Ich wollte, dass diese Formen, die vom Bildschirm fielen, auf der gegenüberliegenden Seite zurückgesetzt werden, damit sie wieder über den Bildschirm animieren können . Wenn dieser Punkt x mehr als ein süßes Plus ist , was bedeutet, dass sie völlig hinter dem rechten Rand versteckt sind, hat gesagt, dass sie direkt hinter der linken Kante Exposition sind. Also 0 minus diese Punktbreite. Ich kann es auch so schreiben. Ja, das funktioniert. Sie werden horizontal zurückgesetzt. Wenn sie vertikal vollständig vom Bildschirm fallen, setzen Sie ihre vertikale Y-Koordinate knapp über dem oberen Rand der Leinwand zurück. Jetzt haben wir einen Pool von 20 Partikeln, die endlos über Canvas fließen werden. Sie können ihre Größen und Geschwindigkeiten hier anpassen. 14. Experimente: Ich kann die Anzahl der Partikel hier erhöhen. Was ist, wenn ich möchte, dass sie sich drehen, wenn sie fallen? Ich erstelle eine Eigenschaft namens angle. Startwinkel beträgt 0 Bogenmaß. Ich erstelle auch die VA-Winkelgeschwindigkeit für jeden Frame, der Winkel wird um 0,01 Bogenmaß erhöht. Wir werden uns drehen und ich würde jedes Teilchen um seinen eigenen Va-Wert drehen. Ich möchte nicht, dass die Zeilendaten in andere Shapes fließen, also wickle ich sie in einen Safe und stelle sie wieder her wie zuvor. Jetzt übersetze ich den Rotationsmittelpunkt über die fraktale Form. Also diesen Punkt x Punkt y, ich wollte drehen und mich um diese Winkeleigenschaft von Linie a, d3 drehen , da wir die Koordinaten 00 von der oberen linken Ecke über die fraktale Form verschoben haben , muss ich ändere diesen Punkt x und y hier, zwei Nullen, 0. Für jeden Animationsframe erhöhen wir den Winkel um diesen Knoten VA Ab Linie 84. Wenn wir Bilder auf Canvas zeichnen, ist es im Grunde ein Rechteck. Und indem ich in diesen Punkt x, diesen Punkt y, übersetzte, habe ich den Rotationsmittelpunkt in die obere linke Ecke oder den rechteckigen Bereich gebracht , der jede Schneeflockenform enthält. Jetzt drehen sich alle Formen um die linke obere Ecke. Wenn ich möchte, dass sie sich um ihr eigenes Zentrum drehen, muss ich sie aus einem Minus der Hälfte ihrer eigenen Breite und minus der Hälfte ihrer eigenen Höhe wie dieser zeichnen einem Minus der Hälfte ihrer eigenen Breite . Dieser Teil mag etwas verwirrend sein, aber wenn Sie für eine Weile übersetzen und drehen, wird es klar und intuitiv. Mach dir jetzt keine Sorgen darüber. Ich habe andere Klassen gemacht , in denen ich dies an verschiedenen Beispielen gezeigt habe . So sehen Sie in den Visuals irgendwann deutlich , wie die Canvas-Rotation funktioniert. Wenn ich VA auf eine negative Zahl setze, drehen sie sich in die entgegengesetzte Richtung. Was ist, wenn ich summieren möchte, um nach links und nach rechts zu drehen , kann ich VA auf eine Zufallszahl zwischen minus 0,005 und plus 0,005 setzen . Nett, das sieht ziemlich organisch aus. Wir können die Reichweite erhöhen, wenn Sie mehr Spinnen möchten. Wir haben also eine Leinwand, in der die fraktale Form regeneriert wird, wir haben mit JavaScript einen Screenshot gemacht und verwenden dieses Bild als Partikel, die auf der zweitgrößeren Säureart dahinter gezeichnet werden. Diese Techniken können verwendet werden, um Assets vorzuschreiben, fragen und außerhalb des Bildschirms zu sein. Es könnte unsichtbarer Canvas sein, und ich kann zum Beispiel 20 dieser Fraktale rendern und jedes einzelne Zufallsprinzip auswählen lassen. Wenn du willst, dass ich einige dieser fortgeschritteneren Techniken zeige , lass es mich wissen. Wenn ich den Rand um Canvas entferne. Und ich sagte, der Hintergrund auf Canvas soll blockiert werden. Jedes Mal, wenn ich die Seite aktualisiere, erhalten wir eine andere Farbe und eine andere Form. Ich behandle mehr darüber, wie man experimentelle fraktale Formen in einer anderen Klasse erzeugt , all diese anderen Formen können in diesem Effekt verwendet werden. Lassen Sie mich jetzt ein paar Experimente ausprobieren , um zu sehen, was wir uns einfallen lassen. A reduzierte die Anzahl der Partikel auf zehn. Um grundlegende Änderungen an der fraktalen Kernform vorzunehmen, müssen wir den Code innerhalb der DrawLine-Methode hier ändern . Im Moment ist unsere fraktale Basislogik das. Wir zeichnen die Hauptlinie, wir skalieren nach unten und wir ziehen eine kleinere Linie nach links und eine weitere kleinere Linie und verzweigen uns nach rechts. Es ist eine Art einfache Fork, die sich immer und immer wieder bis zu feineren und feineren Details wiederholt . So muss es nicht sein. Wir können Kreise verwenden, Rechtecke sind Bezier-Kurven hier und die Formen können wirklich wild werden. Wir können auch Bilder verwenden , um unser Fraktal zu bilden. Schauen Sie sich zum Beispiel an, was passiert, wenn ich außerhalb dieser for-Schleife bewege, speichere und wiederherstelle. Ich werde nicht zurückgesetzt und übersetze und skaliere zwischen jedem Zweig, sondern erst nachdem alle Zweige gezeichnet wurden, erhalten wir sofort einen anderen Satz von Formen. Versuchen Sie, Ihren Browser immer wieder zu aktualisieren um sich eine Vorstellung davon zu machen, was wir hier haben. Jetzt. Wenn ich das abzüglich des Pluspunkts ändere, erhalten wir Leerzeichen zwischen den Zeilen. Die Leitungen verbinden sich nicht mehr direkt. Ich denke, das sieht auch sehr interessant aus. Ich habe versucht, Ihren Browser ein paar Mal zu aktualisieren, um zu sehen, ob Sie andere Formen erhalten als die, die ich bekomme. Ich lege dieses Speichern und Wiederherstellen wieder in die for-Schleife. Jetzt werden wir geteilt, die es abgeschnitten werden, da Canada S1 nur 600-mal 600 Pixel beträgt. Wenn du willst, kannst du es größer machen. Es wird immer noch funktionieren, wenn Sie das gesamte Fenster in der Höhe abdecken, genau wie bei Kanada. So2, ich habe die zweite Verzweigungslinie entfernt. Die Basis unseres Fraktals ist keine Fork mehr. Es ist ein kleiner Haken. Ich kann hier hochgehen und den maximalen Level auf acht erhöhen , um feinere Details zu erhalten. Vielleicht ist Max Level Fünf in Ordnung. Ich kann online weitere Filialen hinzufügen, 30. Wenn meine Form für Canvas zu groß ist, kann ich hier auch die Basisgröße reduzieren, minus hier. Wir machen es, dass ein Zweig wieder verbunden ist, damit ich es vergrößern kann. Mögt jemand anderes großartige Live-Codier-Experimente wie dieses oder bin es nur ich? Ich sagte, zweigt die beiden ab. Was wäre, wenn ich einige Kreise in der Mischung hinzufügen wollte , um einen Kreis auf Canvas zu zeichnen, müssen wir mit dem beginnenden Pfad beginnen. integrierte Bogenmethode benötigt mindestens fünf Argumente, beginnend mit X- und Y-Koordinaten des zentralen Punktes des Kreises, des Radius, des Startwinkels und des Antimykots. Jetzt rufe ich fülle den Kreispfad mit Color Up online 35 auf, ich sagte FillStyle zu sehr den Strichstil. Ich kann auch stark kreisen. Stattdessen. Ich habe die Größe von Canada S1 erhöht, sodass wir mehr Platz zum Rendern unserer Formen haben. Ich ändere die horizontale X-Koordinate des Mittelpunkts des Kreises. Ich mache die Basisgröße kleiner. Versuchen wir es zu scheitern. Wie wäre es, wenn wir ein paar Rechtecke hinzufügen. Ab x wird diese Punktgröße mal 1,5 sein. Y wird 0 in der Höhe 5050 sein, mit einem 150. Passen Sie die X-Koordinate an. Streichle es mit zehn bis 150, mit 30. Ich werde jetzt eine Weile damit spielen. 15. Was kommt als Nächstes?: Nachdem Sie einige Grundlagen verstanden haben, können Sie versuchen, gekrümmte Linien zu verwenden und das Linienwerkzeug zu ersetzen und zwei Methoden mit Bezier-Kurve zwei und quadratischen Kurven zwei Methoden zu verschieben zwei Methoden mit Bezier-Kurve . Sie können Linien auch durch Bilder ersetzen. Dieser Effekt kann mit vielen verschiedenen Canvas-Zeichnungsmethoden und -eigenschaften kombiniert werden vielen verschiedenen Canvas-Zeichnungsmethoden , um eine Vielzahl von Formen zu erhalten , die mit einem Code-basierten experimentiert werden, der immer mein Lieblingsteil ist. Wenn Sie mehr über HTML-Canvas erfahren möchten, können Sie sich meinen YouTube-Kanal ansehen. Ich hoffe, du hast heute einen Wert gefunden. Wir sehen uns später.