Explicação:

• Definimos um elemento onde todas as nossas animações acontecerão.
• O estilos.css será vinculado ao estilo da tela.
• A principal lógica de animação está contida em script.js.

2. Estilizando o Canvas com CSS

Vamos adicionar um estilo simples para dar à nossa tela um fundo preto e garantir que todo o preenchimento e margens sejam removidos.

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

Explicação:

• Definir margem e preenchimento como zero garante que a tela preencha toda a tela.
• O fundo preto fornece um bom contraste para as partículas brancas.

3. Classe de Partículas: Criando a Magia

A classe Particle é onde está o núcleo da animação. Cada partícula se move pela tela, deixando um rastro de suas localizações anteriores, criando o efeito de fluxo.

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;    }}

Explicação:

• Construtor: Cada partícula é inicializada com uma posição e velocidade de movimento aleatórias. A matriz de histórico rastreia posições anteriores para criar trilhas.
• draw(): Esta função desenha o caminho da partícula com base em seu histórico. A partícula deixa um rastro colorido que aumenta o efeito visual.
• update(): Aqui, a posição da partícula é atualizada calculando o ângulo do campo de fluxo. A velocidade e a direção são controladas por funções trigonométricas.
• reset(): Quando a partícula termina sua trilha, ela é redefinida para um novo local aleatório.

4. Classe de Efeitos: Organizando a Animação

A classe Effect cuida da criação de partículas e do próprio campo de fluxo, que controla o movimento das partículas.

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();        });    }}

Explicação:

• Construtor: inicializa as dimensões da tela, o número de partículas e o campo de fluxo.
• init(): Calcula os ângulos para o campo de fluxo combinando funções trigonométricas para cada célula da grade. Este campo influencia como as partículas se movem.
• drawGrid(): Desenha a grade que divide a tela em células, usada na depuração.
• render(): chama os métodos draw e update para cada partícula para animar as partículas na tela.

5. Dando vida ao loop de animação

Para fazer tudo funcionar, precisamos de um loop de animação que limpe continuamente a tela e renderize novamente as partículas:

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

Explicação:

• clearRect(): Limpa a tela em cada quadro para evitar desenhar sobre os quadros anteriores.
• requestAnimationFrame: mantém a animação suave chamando recursivamente a função animate().

Conclusão

Ao dividir as classes Particle e Effect, criamos uma animação de campo de fluxo fluida e dinâmica usando apenas JavaScript vanilla. A simplicidade da tela HTML, combinada com as funções trigonométricas do JavaScript, nos permite construir esses efeitos visuais fascinantes.

Sinta-se à vontade para brincar com a contagem de partículas, as cores ou a fórmula do campo de fluxo para criar seus próprios efeitos exclusivos!

Primeira página > Programação > Tela de campo de fluxo

Tela de campo de fluxo

Publicado em 2024-11-09

Navegar:598

Campos de fluxo dinâmico com Vanilla JS e HTML Canvas

Você já ficou hipnotizado por animações abstratas de partículas? Esses visuais fluidos e dinâmicos podem ser obtidos com técnicas surpreendentemente simples, usando JavaScript simples e o elemento HTML canvas. Neste artigo, detalharemos o processo de criação de um campo de fluxo que anima milhares de partículas, dando-lhes um movimento natural.

1. Configurando o Projeto

Para começar, precisamos de três arquivos: um arquivo HTML para configurar a tela, um arquivo CSS para estilizar e um arquivo JavaScript para lidar com a lógica.

Explicação:

• Definimos um elemento onde todas as nossas animações acontecerão.
• O estilos.css será vinculado ao estilo da tela.
• A principal lógica de animação está contida em script.js.

---

2. Estilizando o Canvas com CSS

Vamos adicionar um estilo simples para dar à nossa tela um fundo preto e garantir que todo o preenchimento e margens sejam removidos.

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

canvas {
    background-color: black;
}

Explicação:

• Definir margem e preenchimento como zero garante que a tela preencha toda a tela.
• O fundo preto fornece um bom contraste para as partículas brancas.

---

3. Classe de Partículas: Criando a Magia

A classe Particle é onde está o núcleo da animação. Cada partícula se move pela tela, deixando um rastro de suas localizações anteriores, criando o efeito de fluxo.

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;
    }
}

Explicação:

• Construtor: Cada partícula é inicializada com uma posição e velocidade de movimento aleatórias. A matriz de histórico rastreia posições anteriores para criar trilhas.
• draw(): Esta função desenha o caminho da partícula com base em seu histórico. A partícula deixa um rastro colorido que aumenta o efeito visual.
• update(): Aqui, a posição da partícula é atualizada calculando o ângulo do campo de fluxo. A velocidade e a direção são controladas por funções trigonométricas.
• reset(): Quando a partícula termina sua trilha, ela é redefinida para um novo local aleatório.

---

4. Classe de Efeitos: Organizando a Animação

A classe Effect cuida da criação de partículas e do próprio campo de fluxo, que controla o movimento das partículas.

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();
        });
    }
}

Explicação:

• Construtor: inicializa as dimensões da tela, o número de partículas e o campo de fluxo.
• init(): Calcula os ângulos para o campo de fluxo combinando funções trigonométricas para cada célula da grade. Este campo influencia como as partículas se movem.
• drawGrid(): Desenha a grade que divide a tela em células, usada na depuração.
• render(): chama os métodos draw e update para cada partícula para animar as partículas na tela.

---

5. Dando vida ao loop de animação

Para fazer tudo funcionar, precisamos de um loop de animação que limpe continuamente a tela e renderize novamente as partículas:

const effect = new Effect(canvas);

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

Explicação:

• clearRect(): Limpa a tela em cada quadro para evitar desenhar sobre os quadros anteriores.
• requestAnimationFrame: mantém a animação suave chamando recursivamente a função animate().

---

Conclusão

Ao dividir as classes Particle e Effect, criamos uma animação de campo de fluxo fluida e dinâmica usando apenas JavaScript vanilla. A simplicidade da tela HTML, combinada com as funções trigonométricas do JavaScript, nos permite construir esses efeitos visuais fascinantes.

Sinta-se à vontade para brincar com a contagem de partículas, as cores ou a fórmula do campo de fluxo para criar seus próprios efeitos exclusivos!

Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/ibra-kdbra/flow-field-screen-567c?1 Se houver alguma violação, entre em contato com [email protected] para excluí-lo

Tutorial mais recente Mais>

• 

  Como posso encontrar usuários com aniversários de hoje usando MySQL?

  Como identificar usuários com aniversários de hoje usando MySQLDeterminar se hoje é o aniversário de um usuário usando MySQL envolve encontrar todas a...

  Programação Publicado em 2024-11-16
• 

  Além das instruções `if`: onde mais um tipo com uma conversão `bool` explícita pode ser usado sem conversão?

  Conversão contextual para bool permitida sem conversãoSua classe define uma conversão explícita para bool, permitindo que você use sua instância '...

  Programação Publicado em 2024-11-16
• 

  Quando você deve usar a opção -F do jmap para Heap Dumps?

  Não é possível abrir o arquivo de soquete durante a operação jmap: a opção -FUm problema foi encontrado ao tentar obter um dump de heap usando jmap , ...

  Programação Publicado em 2024-11-16
• 

  Como posso fazer com que as animações CSS permaneçam no lugar após serem concluídas no Webkit?

  Compreendendo a persistência da animação CSS do WebkitAo usar animações CSS3, é comum encontrar um cenário em que o elemento animado reverte ao seu es...

  Programação Publicado em 2024-11-16
• 

  Como clicar em botões com estruturas HTML complexas usando Selenium?

  Selenium Clique em um botão com estrutura HTML complexaAo tentar clicar em um botão com uma estrutura HTML complexa usando Selenium, você pode encontr...

  Programação Publicado em 2024-11-16
• 

  Como remover tudo após uma substring específica em PHP?

  Como remover uma parte de uma string após uma substring específica em PHPVocê pode remover tudo após uma determinada substring em PHP usando o Função ...

  Programação Publicado em 2024-11-16
• 

  Usando WebSockets no Go para comunicação em tempo real

  Criar aplicativos que exigem atualizações em tempo real, como aplicativos de bate-papo, notificações ao vivo ou ferramentas colaborativas, requer um m...

  Programação Publicado em 2024-11-16
• 

  Como podemos calcular o consumo aproximado de memória de um objeto JavaScript?

  Determinando o consumo de memória de objetos JavaScriptEm JavaScript, compreender o consumo de memória de objetos é crucial para otimizar o desempenho...

  Programação Publicado em 2024-11-16
• 

  Como posso estilizar áreas do mapa de imagens com CSS?

  Você pode passar o mouse sobre um mapa de imagem usando CSS?Mapas de imagem são usados ​​para delinear áreas clicáveis ​​em uma imagem. Estilizar essa...

  Programação Publicado em 2024-11-16
• 

  Variedade

  Métodos são fns que podem ser chamados em objetos Arrays são objetos, portanto também possuem métodos em JS. slice(begin): extrai parte do arr...

  Programação Publicado em 2024-11-16
• 

  Por que não consigo baixar meu mapa de folheto quando ele está dentro de uma guia de alternância de dados?

  A guia de alternância de dados dificulta o download do mapa do folhetoEsta questão surge quando um mapa de folheto dentro de uma guia de alternância d...

  Programação Publicado em 2024-11-16
• 

  Como obter o adiamento do estilo Go em C++ sem sacrificar o desempenho?

  Defer Implementation em C O conceito de adiamento no estilo Go, que permite uma limpeza de recursos limpa e concisa, ganhou popularidade em C . No ent...

  Programação Publicado em 2024-11-16
• 

  Como personalizar o desempacotamento JSON com reflexão no Go?

  Personalizando a desempacotamento de JSON com reflexãoNo Go, desempacotar JSON em uma estrutura é um processo direto. No entanto, ao lidar com campos ...

  Programação Publicado em 2024-11-16
• 

  Como posso transferir facilmente o código para o interpretador Python sem problemas de recuo?

  Transferência conveniente de código: ignorando a sensibilidade dos espaços em branco do PythonCopiar e colar o código diretamente no interpretador Pyt...

  Programação Publicado em 2024-11-16
• 

  O que aconteceu com o deslocamento de coluna no Bootstrap 4 Beta?

  Bootstrap 4 Beta: A remoção e restauração do deslocamento de colunaBootstrap 4, em sua versão Beta 1, introduziu mudanças significativas na forma como...

  Programação Publicado em 2024-11-16

ClassificaçãoMais>

Aprenda japonês Aprender coreano Aprenda chinês Aprender língua estrangeira Jogo Problema comum Periféricos de tecnologia IA Tutorial de software Programação Artigo

Estude chinês

• 1 Como se diz “andar” em chinês? 走路 Pronúncia chinesa, 走路 aprendizagem chinesa
• 2 Como se diz “pegar um avião” em chinês? 坐飞机 Pronúncia chinesa, 坐飞机 aprendizagem chinesa
• 3 Como se diz “pegar um trem” em chinês? 坐火车 Pronúncia chinesa, 坐火车 aprendizagem chinesa
• 4 Como se diz “pegar um ônibus” em chinês? 坐车 Pronúncia chinesa, 坐车 aprendizagem chinesa
• 5 Como se diz dirigir em chinês? 开车 Pronúncia chinesa, 开车 aprendizagem chinesa
• 6 Como se diz nadar em chinês? 游泳 Pronúncia chinesa, 游泳 aprendizagem chinesa
• 7 Como se diz andar de bicicleta em chinês? 骑自行车 Pronúncia chinesa, 骑自行车 aprendizagem chinesa
• 8 Como você diz olá em chinês? 你好Pronúncia chinesa, 你好Aprendizagem chinesa
• 9 Como você agradece em chinês? 谢谢Pronúncia chinesa, 谢谢Aprendizagem chinesa
• 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning

FerramentaMais>

Decodificação de imagem base64

pinyin chinês

Codificação Unicode

Compressão de criptografia de ofuscação JS

Ferramenta de criptografia hexadecimal de URL

Ferramenta de conversão de codificação UTF-8

Ferramentas online de codificação e decodificação Ascii

Ferramenta de criptografia MD5

Ferramenta on-line de criptografia e descriptografia de texto Hash/Hash

Criptografia SHA on-line