Explication:

2. Styliser le canevas avec CSS

Ajoutons un style simple pour donner à notre toile un fond noir et assurez-vous que tous les remplissages et marges sont supprimés.

* {    margin: 0;    padding: 0;    box-sizing: border-box;}canvas {    background-color: black;}

Explication:

3. Classe de particules : créer la magie

La classe Particle est l'endroit où se trouve le cœur de l'animation. Chaque particule se déplace sur la toile, laissant une trace de ses emplacements passés, créant un effet fluide.

class Particle {    constructor(effect) {        this.effect = effect;        this.x = Math.floor(Math.random() * this.effect.width);        this.y = Math.floor(Math.random() * this.effect.height);        this.speedModifier = Math.floor(Math.random() * 5   1);        this.history = [{ x: this.x, y: this.y }];        this.maxLength = Math.floor(Math.random() * 200   10);        this.timer = this.maxLength * 2;        this.colors = [\\'#4C026B\\', \\'#8E0E00\\', \\'#9D0208\\', \\'#BA1A1A\\', \\'#730D9E\\'];        this.color = this.colors[Math.floor(Math.random() * this.colors.length)];    }    draw(context) {        context.beginPath();        context.moveTo(this.history[0].x, this.history[0].y);        for (let i = 1; i < this.history.length; i  ) {            context.lineTo(this.history[i].x, this.history[i].y);        }        context.strokeStyle = this.color;        context.stroke();    }    update() {        this.timer--;        if (this.timer >= 1) {            let x = Math.floor(this.x / this.effect.cellSize);            let y = Math.floor(this.y / this.effect.cellSize);            let index = y * this.effect.cols   x;            let angle = this.effect.flowField[index];            this.speedX = Math.cos(angle);            this.speedY = Math.sin(angle);            this.x  = this.speedX * this.speedModifier;            this.y  = this.speedY * this.speedModifier;            this.history.push({ x: this.x, y: this.y });            if (this.history.length > this.maxLength) {                this.history.shift();            }        } else if (this.history.length > 1) {            this.history.shift();        } else {            this.reset();        }    }    reset() {        this.x = Math.floor(Math.random() * this.effect.width);        this.y = Math.floor(Math.random() * this.effect.height);        this.history = [{ x: this.x, y: this.y }];        this.timer = this.maxLength * 2;    }}

Explication:

4. Classe d'effet : organiser l'animation

La classe Effect gère la création de particules et le champ de flux lui-même, qui contrôle le mouvement des particules.

class Effect {    constructor(canvas) {        this.canvas = canvas;        this.width = this.canvas.width;        this.height = this.canvas.height;        this.particles = [];        this.numberOfParticles = 3000;        this.cellSize = 20;        this.flowField = [];        this.curve = 5;        this.zoom = 0.12;        this.debug = true;        this.init();    }    init() {        this.rows = Math.floor(this.height / this.cellSize);        this.cols = Math.floor(this.width / this.cellSize);        for (let y = 0; y < this.rows; y  ) {            for (let x = 0; x < this.cols; x  ) {                let angle = (Math.cos(x * this.zoom)   Math.sin(y * this.zoom)) * this.curve;                this.flowField.push(angle);            }        }        for (let i = 0; i < this.numberOfParticles; i  ) {            this.particles.push(new Particle(this));        }    }    drawGrid(context) {        context.save();        context.strokeStyle = \\'white\\';        context.lineWidth = 0.3;        for (let c = 0; c < this.cols; c  ) {            context.beginPath();            context.moveTo(c * this.cellSize, 0);            context.lineTo(c * this.cellSize, this.height);            context.stroke();        }        for (let r = 0; r < this.rows; r  ) {            context.beginPath();            context.moveTo(0, r * this.cellSize);            context.lineTo(this.width, r * this.cellSize);            context.stroke();        }        context.restore();    }    render(context) {        if (this.debug) this.drawGrid(context);        this.particles.forEach(particle => {            particle.draw(context);            particle.update();        });    }}

Explication:

5. Donner vie à la boucle d'animation

Pour que tout fonctionne, nous avons besoin d'une boucle d'animation qui efface continuellement le canevas et restitue les particules :

const effect = new Effect(canvas);function animate() {    ctx.clearRect(0, 0, canvas.width, canvas.height);    effect.render(ctx);    requestAnimationFrame(animate);}animate();

Explication:

Conclusion

En décomposant les classes Particle et Effect, nous avons créé une animation de champ de flux fluide et dynamique en utilisant uniquement du JavaScript Vanilla. La simplicité du canevas HTML, combinée aux fonctions trigonométriques de JavaScript, nous permet de créer ces effets visuels fascinants.

N'hésitez pas à jouer avec le nombre de particules, les couleurs ou la formule du champ d'écoulement pour créer vos propres effets uniques !

","image":"http://www.luping.net/uploads/20241022/17296041676717aa472ee02.jpg","datePublished":"2024-11-09T01:12:23+08:00","dateModified":"2024-11-09T01:12:23+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Outils en ligne
Tutoriel logiciel
Navigation sur les sites
La programmation
Page de garde > La programmation > Écran de champ d'écoulement

Écran de champ d'écoulement

Publié le 2024-11-09
Parcourir:932

Flow Field Screen

Champs de flux dynamiques avec Vanilla JS et HTML Canvas

Avez-vous déjà été fasciné par les animations de particules abstraites ? Ces visuels fluides et dynamiques peuvent être obtenus avec des techniques étonnamment simples utilisant du JavaScript simple et l'élément HTML canvas. Dans cet article, nous allons détailler le processus de création d'un champ d'écoulement qui anime des milliers de particules, leur donnant un mouvement naturel.

1. Mise en place du projet

Pour commencer, nous avons besoin de trois fichiers : un fichier HTML pour configurer le canevas, un fichier CSS pour le style et un fichier JavaScript pour gérer la logique.



    Flow Fields

Explication:

  • Nous définissons un élément où toutes nos animations auront lieu.
  • Le styles.css sera lié pour styliser le canevas.
  • La logique d'animation principale est contenue dans script.js.

2. Styliser le canevas avec CSS

Ajoutons un style simple pour donner à notre toile un fond noir et assurez-vous que tous les remplissages et marges sont supprimés.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

canvas {
    background-color: black;
}

Explication:

  • La définition de la marge et du remplissage sur zéro garantit que le canevas remplit tout l'écran.
  • Le fond noir offre un joli contraste pour les particules blanches.

3. Classe de particules : créer la magie

La classe Particle est l'endroit où se trouve le cœur de l'animation. Chaque particule se déplace sur la toile, laissant une trace de ses emplacements passés, créant un effet fluide.

class Particle {
    constructor(effect) {
        this.effect = effect;
        this.x = Math.floor(Math.random() * this.effect.width);
        this.y = Math.floor(Math.random() * this.effect.height);
        this.speedModifier = Math.floor(Math.random() * 5   1);
        this.history = [{ x: this.x, y: this.y }];
        this.maxLength = Math.floor(Math.random() * 200   10);
        this.timer = this.maxLength * 2;
        this.colors = ['#4C026B', '#8E0E00', '#9D0208', '#BA1A1A', '#730D9E'];
        this.color = this.colors[Math.floor(Math.random() * this.colors.length)];
    }

    draw(context) {
        context.beginPath();
        context.moveTo(this.history[0].x, this.history[0].y);
        for (let i = 1; i = 1) {
            let x = Math.floor(this.x / this.effect.cellSize);
            let y = Math.floor(this.y / this.effect.cellSize);
            let index = y * this.effect.cols   x;
            let angle = this.effect.flowField[index];

            this.speedX = Math.cos(angle);
            this.speedY = Math.sin(angle);
            this.x  = this.speedX * this.speedModifier;
            this.y  = this.speedY * this.speedModifier;

            this.history.push({ x: this.x, y: this.y });
            if (this.history.length > this.maxLength) {
                this.history.shift();
            }
        } else if (this.history.length > 1) {
            this.history.shift();
        } else {
            this.reset();
        }
    }

    reset() {
        this.x = Math.floor(Math.random() * this.effect.width);
        this.y = Math.floor(Math.random() * this.effect.height);
        this.history = [{ x: this.x, y: this.y }];
        this.timer = this.maxLength * 2;
    }
}

Explication:

  • Constructeur : Chaque particule est initialisée avec une position et une vitesse de déplacement aléatoires. Le tableau d'historique suit les positions passées pour créer des pistes.
  • draw() : Cette fonction dessine le chemin de la particule en fonction de son historique. La particule laisse une traînée colorée qui ajoute à l'effet visuel.
  • update() : Ici, la position de la particule est mise à jour en calculant l'angle à partir du champ d'écoulement. La vitesse et la direction sont contrôlées par des fonctions trigonométriques.
  • reset() : lorsque la particule termine son parcours, elle est réinitialisée à un nouvel emplacement aléatoire.

4. Classe d'effet : organiser l'animation

La classe Effect gère la création de particules et le champ de flux lui-même, qui contrôle le mouvement des particules.

class Effect {
    constructor(canvas) {
        this.canvas = canvas;
        this.width = this.canvas.width;
        this.height = this.canvas.height;
        this.particles = [];
        this.numberOfParticles = 3000;
        this.cellSize = 20;
        this.flowField = [];
        this.curve = 5;
        this.zoom = 0.12;
        this.debug = true;
        this.init();
    }

    init() {
        this.rows = Math.floor(this.height / this.cellSize);
        this.cols = Math.floor(this.width / this.cellSize);
        for (let y = 0; y  {
            particle.draw(context);
            particle.update();
        });
    }
}

Explication:

  • Constructeur : initialise les dimensions du canevas, le nombre de particules et le champ de flux.
  • init() : calcule les angles du champ de flux en combinant des fonctions trigonométriques pour chaque cellule de la grille. Ce champ influence la façon dont les particules se déplacent.
  • drawGrid() : dessine la grille qui divise le canevas en cellules, utilisée lors du débogage.
  • render() : appelle les méthodes de dessin et de mise à jour pour chaque particule afin d'animer les particules sur le canevas.

5. Donner vie à la boucle d'animation

Pour que tout fonctionne, nous avons besoin d'une boucle d'animation qui efface continuellement le canevas et restitue les particules :

const effect = new Effect(canvas);

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    effect.render(ctx);
    requestAnimationFrame(animate);
}
animate();

Explication:

  • clearRect() : efface le canevas sur chaque image pour éviter de dessiner sur les images précédentes.
  • requestAnimationFrame : maintient l'animation fluide en appelant de manière récursive la fonction animate().

Conclusion

En décomposant les classes Particle et Effect, nous avons créé une animation de champ de flux fluide et dynamique en utilisant uniquement du JavaScript Vanilla. La simplicité du canevas HTML, combinée aux fonctions trigonométriques de JavaScript, nous permet de créer ces effets visuels fascinants.

N'hésitez pas à jouer avec le nombre de particules, les couleurs ou la formule du champ d'écoulement pour créer vos propres effets uniques !

Déclaration de sortie Cet article est reproduit sur : https://dev.to/ibra-kdbra/flow-field-screen-567c?1 En cas de violation, veuillez contacter [email protected] pour le supprimer.
Dernier tutoriel Plus>
ClassificationPlus>
Apprendre le japonais Apprendre le coréen Apprendre le chinois Apprendre une langue étrangère Jeu Problème commun Périphériques technologiques IA Tutoriel logiciel La programmation Article

Étudier le chinois

OutilPlus>
Décodage d'images en base64
Pinyin chinois
Encodage Unicode
Compression de chiffrement d'obscurcissement JS
Outil de chiffrement hexadécimal d'URL
Outil de conversion d'encodage UTF-8
Outils d'encodage et de décodage Ascii en ligne
Outil de cryptage MD5
Outil de cryptage et de décryptage en ligne de texte de hachage/hachage
Cryptage SHA en ligne

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3