Replacing A String 2000 Times Per Minute... Creates An Amazing Visual Effect

Summary

Das 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

00:00

🔥 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.

Keywords

💡Front-End-Entwickler

Ein Front-End-Entwickler ist jemand, der für die Entwicklung der Benutzeroberfläche einer Website oder Anwendung verantwortlich ist. Im Video wird 'Mr. Floron Galon' als Front-End-Entwickler hervorgehoben, der beeindruckende Effekte in seinem Portfolio zeigt, wie z.B. das Erstellen eines 'Feuer'-Effekts aus Text. Diese Effekte sind für das visuelle und interaktive Erlebnis des Nutzers entscheidend.

💡Textgenerierter Feuereffekt

Der Feuereffekt wird vollständig aus Text generiert, wobei die Zeichen ständig verändert werden, um den visuellen Effekt von Flammen zu simulieren. Im Video wird gezeigt, wie diese Technik verwendet wird, um den Eindruck eines lodernden Feuers zu erzeugen, indem Buchstaben und Leerzeichen in einem Gittermuster manipuliert werden.

💡Feuer-Zeichenkette ('fire cares')

Die 'fire cares' ist eine Zeichenkette, die die Zeichen enthält, aus denen das Feuer besteht, einschließlich Leerzeichen. Diese Zeichen werden verwendet, um die visuellen Elemente des Feuereffekts darzustellen, wobei das erste Zeichen der Kette ein Leerzeichen ist. Diese Zeichenkette wird kontinuierlich aktualisiert, um das Erscheinungsbild des Feuers zu erzeugen.

💡Gitter ('Grid')

Das Gitter ist eine zentrale Struktur im Feuereffekt. Es besteht aus horizontalen und vertikalen Zellen, die entweder Leerzeichen oder Textzeichen enthalten können. Das Video beschreibt, wie jede Zelle des Gitters durch verschiedene Zeichen aus der 'fire cares' Zeichenkette gefüllt wird, um den Feuereffekt zu erzeugen.

💡Einzelne Zeichenrahmen

Der Effekt wird als eine Abfolge von Einzelbildern beschrieben, in denen die Zeichen des Feuers aktualisiert werden. Jedes dieser 'Frames' ist ein einzelnes Bild, das einen Moment des sich bewegenden Feuers darstellt. Das Konzept eines einzelnen Rahmens wird verwendet, um die Funktionsweise der Animation zu erläutern.

💡1D-Array

Das Feuergitter wird als eindimensionales Array ('1D-Array') betrachtet, obwohl es in einem zweidimensionalen Raster dargestellt wird. Dieses Array enthält die Indizes der Zeichenkette 'fire cares'. Durch die Konvertierung des Gitters in ein eindimensionales Array wird die Verarbeitung des Feuers vereinfacht.

💡Zufällige Zellen

Die Auswahl zufälliger Zellen in der letzten Zeile des Gitters ist ein zentraler Bestandteil des Feuereffekts. Diese zufälligen Zellen werden mit Zeichen aus der 'fire cares'-Zeichenkette gefüllt, um den sich ständig ändernden und lodernden Effekt zu simulieren. Das Video beschreibt diesen Prozess als Grundlage für den Feuereffekt.

💡Wachsendes Feuer

Das Feuer beginnt in der unteren Reihe des Gitters und 'wächst' nach oben, indem die darüber liegenden Reihen nach einem bestimmten Algorithmus gefüllt werden. Das Video erklärt, wie das Feuer nach oben 'wächst', indem der Durchschnittswert von vier Zellen verwendet wird, um die darüberliegenden Reihen zu füllen.

💡Lücken und Leerzeichen

Um das Feuer realistischer zu gestalten, werden zufällig Lücken durch Leerzeichen in den unteren Reihen eingefügt. Diese Lücken erzeugen Pausen im Flammenmuster und verleihen dem Effekt mehr Dynamik. Das Video zeigt, wie diese Leerzeichen absichtlich gesetzt werden, um den visuellen Effekt zu verbessern.

💡SetTimeout-Funktion

Die setTimeout-Funktion wird verwendet, um sicherzustellen, dass sich der Feuereffekt kontinuierlich ändert und animiert bleibt. Diese Funktion sorgt dafür, dass der Feuereffekt in regelmäßigen Abständen aktualisiert wird und eine animierte Flammenbewegung erzeugt. Sie ist ein wichtiger Bestandteil des dynamischen Charakters der Feueranimation.

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