Replacing A String 2000 Times Per Minute... Creates An Amazing Visual Effect
Summary
TLDRDas Video beschreibt die Entwicklung eines faszinierenden Feuereffekts in einer Webanwendung. Der Effekt wird durch Textzeichen erzeugt, die sich ständig ändern, um eine visuelle Darstellung von Flammen zu erzeugen. Zunächst wird ein einzelner Rahmen des Effekts analysiert und erklärt, wie das Gittersystem funktioniert. Danach wird die Implementierung Schritt für Schritt gezeigt, einschließlich der Initialisierung eines ein-dimensionalen Arrays, der Berechnung von Zeichenindizes und der Anwendung eines Zufallselements für realistische Flammenbewegungen. Der Effekt wird dynamisch aktualisiert, um ein lebendiges Feuer darzustellen. Ein Tutorial für Entwickler, die visuelle Effekte mit Text kreieren möchten.
Takeaways
- 🔥 Das Feuer-Effekt wird aus Text generiert, wobei sich die Zeichen ständig ändern, um den visuellen Effekt zu erzeugen.
- 📏 Das Raster wird als Container für die Zeichen und Leerzeichen verwendet, wobei jedes Rasterzelle entweder ein Zeichen oder ein Leerzeichen enthält.
- 📜 Ein String namens 'fireCares' enthält die Zeichen für das Feuer, wobei das erste Zeichen als Leerzeichen festgelegt wird.
- ⬛ Das 'firePixelsArray' speichert die Indexwerte der Zeichen, nicht die Zeichen selbst, und wird als eindimensionales Array betrachtet.
- ⚙️ Um das Feuer zu aktualisieren, wird eine Schleife verwendet, um das 'firePixelsArray' zu durchlaufen und Zeichen anhand des Array-Wertes zuzuweisen.
- ⏳ Ein 'setTimeout' sorgt dafür, dass das Feuer ständig aktualisiert wird und sich die Zeichen dynamisch ändern.
- 🎲 Zufällige Zeichen werden für die letzte Zeile des Feuereffekts ausgewählt und füllen diese Zeile.
- 📉 Um das Feuer von unten nach oben wachsen zu lassen, wird das Array der letzten Zeile nach oben hin erweitert.
- ➗ Der Durchschnittswert von benachbarten Zellen wird verwendet, um die Zellen der darüber liegenden Reihen zu füllen.
- ⚡ Um Lücken im Feuer-Effekt zu erzeugen, werden zufällige Zellen in der letzten Zeile als Leerzeichen festgelegt.
Q & A
Wie funktioniert der visuelle Effekt der Feueranimation im Text?
-Der visuelle Effekt wird durch die ständige Änderung von Textzeichen erzeugt. Leere Stellen werden als Leerzeichen dargestellt, und die Zeichen werden in einem Raster organisiert.
Welche Rolle spielt der vorformatierte Textelement-Container?
-Der vorformatierte Textelement-Container wird verwendet, um die Zeichen ordnungsgemäß anzuzeigen und die Struktur der Animation beizubehalten.
Wie wird das Feuer als String dargestellt?
-Das Feuer wird als eindimensionales Array, das sogenannte 'fire pixels array', dargestellt, das die Zeichen für jede Rasterzelle enthält. Die Werte werden durch Kombination mit einem Zeilenumbruch zwischen den Reihen zu einem vollständigen Feuerstring.
Wie wird die Größe des Arrays bestimmt?
-Die Größe des Arrays wird als das Produkt aus der Breite und Höhe des Rasters definiert.
Wie wird das Feuer im unteren Bereich des Rasters erzeugt?
-Das Feuer beginnt im unteren Bereich des Rasters, indem eine zufällige Zelle ausgewählt und mit einem Zeichen aus dem 'fire cares'-String gefüllt wird. Dieser Vorgang wird für die gesamte unterste Reihe wiederholt.
Wie breitet sich das Feuer nach oben aus?
-Das Feuer breitet sich nach oben aus, indem die Zeichen der darüber liegenden Zellen mit dem Durchschnittswert von vier benachbarten Zellen berechnet werden.
Wie wird das 'Feuer'-Aussehen durch Lücken realistischer gemacht?
-Um Lücken zu schaffen, die das Feuer realistischer aussehen lassen, werden zufällig Leerzeichen in der untersten Reihe platziert, wodurch auch Lücken in den darüberliegenden Reihen entstehen.
Warum wird die Höhe des Rasters um eins reduziert?
-Die Höhe wird um eins reduziert, damit das Feuer nicht über die letzte Reihe hinausgeht und korrekt dargestellt wird.
Welche Zeichen werden im 'fire cares'-String verwendet?
-Der 'fire cares'-String enthält Zeichen, die das Feuer visuell darstellen, wobei das Leerzeichen an erster Stelle steht, um leere Bereiche zu definieren.
Wie wird das Feuer-Array aktualisiert, damit das Feuer animiert aussieht?
-Das Feuer-Array wird regelmäßig aktualisiert, indem die Zeichen basierend auf den Werten im 'fire pixels array' geändert werden. Dies erfolgt mit Hilfe von 'setTimeout', um die Bewegung des Feuers zu simulieren.
Outlines
🔥 Einführung in den Effekt
Mr. Floron Galon ist ein talentierter Front-End-Entwickler, und in seinem Portfolio wird ein beeindruckender Effekt gezeigt, der aus Text erzeugt wird. Das Video beschreibt, wie man diesen Feuereffekt nachbilden kann. Der erste Schritt besteht darin, einen einzelnen Frame des Effekts zu analysieren, in dem Textzeichen ständig verändert werden, um den visuellen Effekt zu erzeugen. Leere Stellen werden als Leerzeichen interpretiert. Für die richtige Formatierung wird das 'pre'-Element als Container verwendet.
🧩 Aufbau des Gitters
Der Effekt basiert auf einem Gitter, bei dem jede Zelle entweder ein Leerzeichen oder ein Textzeichen enthalten kann. Ein String namens 'fire cares' wird initialisiert, wobei das erste Zeichen als Leerzeichen festgelegt wird. Das Gitter hat eine Breite und Höhe, die als Anzahl der horizontalen und vertikalen Zellen definiert werden. Anstatt ein 2D-Gitter zu verwenden, wird das Feuer als eindimensionales Array (fire pixels array) betrachtet.
📜 Erzeugung des Feuerstrings
Um den Feuerstring zu erstellen, werden die Werte des fire pixels arrays kombiniert und nach jeder Zeilenbreite ein Zeilenumbruch hinzugefügt. Die Größe des Arrays entspricht dem Produkt aus Breite und Höhe des Gitters. Das Array speichert die Indizes der Zeichen aus dem 'fire cares'-String, wobei das Leerzeichen der Standardwert ist.
🔥 Feuer erstellen und animieren
Der nächste Schritt ist die Erzeugung des Feuers. Eine leere Zeichenfolge wird initialisiert, und eine Schleife durchläuft das fire pixels array, um die Zeichen aus dem 'fire cares'-String basierend auf den Arraywerten zuzuweisen. Zeilenumbrüche werden hinzugefügt, um die Enden der Zeilen zu kennzeichnen. Ein Timeout wird eingerichtet, um den Feuerstring kontinuierlich zu aktualisieren.
🌀 Anpassen der Darstellung
Da der anfängliche Feuerstring nur Leerzeichen enthält, werden die Werte des Arrays auf das zweite Zeichen des 'fire cares'-Strings (Kommas) gesetzt. Um den Effekt zu verbessern, wird der letzte Zellenbereich des Gitters gefüllt. Dieser Bereich repräsentiert die Basis des Feuers, von der das Feuer nach oben wächst.
🎲 Zufällige Befüllung des letzten Reihenabschnitts
Ein Zufallsalgorithmus wird verwendet, um den letzten Reihenabschnitt des Gitters mit Zeichen zu füllen. Eine zufällige Zelle in der letzten Reihe wird ausgewählt, und ihr Wert wird mit einem zufälligen Zeichen aus dem 'fire cares'-String gefüllt. Dieser Prozess wird wiederholt, um die gesamte letzte Reihe zu füllen.
⬆️ Feuer wächst nach oben
Sobald die letzte Reihe gefüllt ist, wächst das Feuer nach oben. Die Zellen der darüber liegenden Reihen werden durch die Berechnung des Durchschnitts der vier umliegenden Zellen gefüllt. In einem eindimensionalen Array entspricht dies der Betrachtung der aktuellen Zelle, der Zelle rechts daneben, der Zelle darunter und der Zelle darunter rechts.
✨ Lücken für realistischeren Feuereffekt
Um dem Feuer ein realistischeres Aussehen zu verleihen, werden Lücken in die unteren Reihen eingefügt. Dies geschieht, indem zufällige Zellen in der letzten Reihe mit Leerzeichen gefüllt werden, was auch Lücken in den darüber liegenden Reihen erzeugt. Dieser Vorgang wird für jede Zelle der letzten Reihe wiederholt, bis der Feuereffekt vollständig ist.
👍 Abschließende Schritte
Nachdem alle notwendigen Schritte durchgeführt wurden, ist der Feuereffekt bereit. Das Video schließt mit einem Hinweis, den Kanal zu abonnieren, wenn der Zuschauer den Inhalt nützlich findet.
Mindmap
Keywords
💡Front-End-Entwickler
💡Textgenerierter Feuereffekt
💡Feuer-Zeichenkette ('fire cares')
💡Gitter ('Grid')
💡Einzelne Zeichenrahmen
💡1D-Array
💡Zufällige Zellen
💡Wachsendes Feuer
💡Lücken und Leerzeichen
💡SetTimeout-Funktion
Highlights
Analyzing a single frame of fire effect generated from text characters.
Empty spaces are considered as space characters in the effect.
Use the pre-formatted text element as a container for proper formatting.
Each cell in the grid contains either a space or a text character to create the fire effect.
Fire effect generated from a string called 'fire cares' where the first character is a space.
Grid width is the number of horizontal cells, height is the number of vertical cells.
Fire pixels array is a one-dimensional array instead of a 2D grid.
The size of the fire pixels array is the product of the width and height of the grid.
Each index in the fire pixels array stores the index of a fire character rather than the character itself.
Logic to generate fire involves updating the fire string with values from the fire pixels array.
Set a timeout function so the fire effect keeps changing continuously.
The fire starts from the bottom, and a random cell is selected to fill the last row with characters.
To make the fire grow upwards, calculate the average of adjacent cells in the fire pixels array.
Introduce gaps randomly in the fire string to make it look more like fire by adding space characters.
The final fire effect includes random generation of characters in the last row and growth upwards with gaps for a realistic look.
Transcripts
Mr floron galon is an amazing front-end
developer while going through his
portfolio I found this stunning
effect this is fire that is generated
from text which we can try to
recreate first let us make it simple and
analyze one single frame of this effect
we can see that this is all text where
characters are being constantly changed
to create the visual effect so we can
consider all the empty places as space
characters now to have proper formatting
we can use the pre-formatted text
element as the
container if we apply a grid on this we
can see that each cell can contain
either a space or a text character and
for those characters initialize a string
called fire cares as shown and make sure
to mention the first character as
space now coming to the grid width is
the number of horizontal cells and
height is the number of vertical cells
which we will initialize at the start as
the tire fire is just a string instead
of a 2d grid we can consider it as a
one-dimension array which we can call as
fire pixels array by combining the
values of this fire pixels array and
adding a new line character after every
row width we can get the final fire
string so the size of the fire pixels
array will be the product of the width
and height of the grid we will be
storing the index of the fire cares
instead of the character itself and by
default we will mention the space
character which is is the first one in
the fire
cares next we will generate the
fire for that start by initializing an
empty fire string now the primary logic
is to update the fire string with the
values of the fire pixels array so
initialize a for Loop to iterate over
the fire pixels array and assign the
character from the fire Cas based the
array value and as mentioned previously
add a new line character when the array
reaches the end of the row then assign
the final fire string to the fire
container and finally add a set timeout
function so that the fire keeps on
changing but we cannot see any output
here as we are just setting the fire
string with default fire pixels array
the container is filled with spaces if
you initially set the fire pixels array
values to the second index of the fire
Cas then the container is filled with
commas so to make this appear as the
fire we will make some changes as the
fire starts from the bottom we will
first try to fill the last row to make
it simple I am reducing the size of this
grid we need to fill the last row but
that is in a one-dimensional array now
we will select a random Cell between
zero cell and the Cell at width minus
one value index and assign it to a
variable called random call let's assume
we have selected the third cell now we
will add the product of width and height
to the random Call Value to calculate an
index within the last row finally assign
a random character from the fire cares
to this cell
this process is done for one single cell
only but it has to be repeated for the
entire last row for that initialize for
Loop starting from zero to width of the
row and repeat this logic which will
randomly populate the last row we can
see the last row is being generated and
constantly
changed now that we have filled the last
row the fire has to grow upwards so we
need to fill row by Row for filling the
cells in the above rows we can take the
average of these four cells and use that
value
but in a one-dimensional array this
average can be calculated by considering
the I element I + one element i+ width
element and i+ width plus one
element inside the main for Loop
calculate this average value and assign
it to the fire pixels array as we need
to iterate till the last second row only
change height to height minus one as
shown we can see the characters being
Filled from the bottom and they being
left like that we need to add some gaps
to make it look like fire for that we
will add the space character randomly in
the last row which in turn creates gaps
in the upper
rows we need to do that in the
one-dimensional array by selecting a
random Cell between 0 to width minus one
index and using that value find out the
index in the last row then set the cell
value to zero which is a space character
in the fire Cas repeat this process for
the entire row for that start for loop
from zero to width of the row and repeat
the
logic with that you will have your fire
effect ready if you find this tutorial
valuable then subscribe to the channel
Browse More Related Video
Magnetfeld einer Spule, rechte Faust Regel | Gleichstromtechnik #15
Neues Bestellformular anlegen und gestalten | Digistore24 Bestellformular anlegen
Redoxtitration - Manganometrie I Kaliumpermanganat
#5 OOM - Vorlage für Sortieralgorithmus erstellen (Lazarus)
Unit 9 Lesson planning
Photometer Erklärung - Konzentrationsbestimmung || Physik für Mediziner || Physik Grundlagen
5.0 / 5 (0 votes)