Textos com gradientes "esbabacantes" com BBCode 👌🏻

[Guira]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Como fazer Gradientes com BBCode

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Pois bem, eu costumo usar nos meus tópicos uns gradientes muito loucos usando BBCode, e por preguiça (e por não ser louco, claro), eu uso um site(esse site aqui ó) que faz isso para mim, porém, a fins de aprendizado, vou deixar um código JavaScript bolado por aqui

​

Bom, vamos lá, primeiramente, o que é um gradiente? Um gradiente é a mistura gradual de uma cor para outra, podemos definir assim de forma simples, o problema mesmo era fazer isso em BBCode, o segredo é que, um gradiente não é formado apenas de duas cores, é formado de várias de cores que ficam entre as duas (ou mais) cores selecionadas, por exemplo, podemos analisar o caso a seguir:​

Olá, como você está?
​

Certo, analisando dá a impressão que a cor está variando de #ED213A até #93291E e na verdade, é porque todas as outras letras estão com cores intermediárias entre elas, como exemplo, perceba o que acontece se nós fizermos isso com 3 letras usando as mesmas cores, vamos fazer com umas cores mais fortes:​

Olá

Perceba, que agora ficou muito claro que na verdade, são três letras com três cores diferentes, então é um mistério a menos

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Após deixar isso claro, podemos colocar a mão na massa e fazer um código bolado para deixar para as próximas gerações

Primeiro, vamos criar um método para fazer nosso código, ele vai precisar de três parâmetros, a cor de início e a cor de fim, que é uma Array com 3 números RGB, e obviamente, o nosso texto, uma String

Beleza!, temos um começo, o que precisamos agora?​

Declarar uma constante "steps", o que seria essa constante? bom, é a quantidade de caracteres do nosso texto, logo a quantidade de cores, além disso precisamos de duas variáveis, o alpha (Um double), que vou explicar mais para frente e o nosso output (Uma string), ou seja, nosso texto de saída e depois retornamos ele.​

​

Logo em seguida, vamos começar a brincadeira, sabemos que é uma cor para cada caractere do texto, então vamos criar um for que vá de 0, até a quantidade de caracteres do texto, esse é um momento crucial, é super importante que a cada iteração dessa, adicionemos 1 dividido pela quantidade de caracteres do texto ao alpha, pois é isso que vai dar a progressão para as nossas cores, ou seja, o efeitinho louco.​

​

Certo, agora esse meu amigo, é o momento da matemágica, vamos usar uma fórmula bolada que eu vou tentar explicar do jeito que entendi aqui no spoiler para quem queira saber, se não é só pular essa parte.​

Spoiler: Eduardo Guiraldelli, el mago de la matemágica en su explicación

Pois bem, vamos a fórmula, primeiro, vamos ter que usar a cabeça, essa parte é difícil, a fórmula é a seguinte:

z = x * alpha + (1 - alpha) * y
​

[TABLE=noborder,collapse,centered]
[TR]
[TD]

Variável​

[/TD]
[TD]

Significado​

[/TD]
[/TR]
[TR]
[TD]

X​

[/TD]
[TD]

A cor de início​

[/TD]
[/TR]
[TR]
[TD]

Y​

[/TD]
[TD]A cor de fim[/TD]
[/TR]
[TR]
[TD]

alpha​

[/TD]
[TD]A porcentagem da progressão das cores[/TD]
[/TR]
[/TABLE]

Beleza, explicando, pense comigo, essa fórmula basicamente diz que toda vez que uma cor se faz mais presente, a outra se faz menos presente, sendo assim, se tivermos 60% de X, teremos 40% de Y (1 - alpha), e após, ambos são somados, é bem simples na verdade e eu só sei explicar assim, perdão.​

Voltando ao foco por aqui galera, lembra que nossas cores na verdade são Arrays? Pois bem, teremos que utilizar a fórmula nos três valores delas, para isso vamos criar uma nova Array "color" que vai receber 3 valores, o R, o G, e o B, formando assim um padrão RGB, eu coloquei uns parênteses a mais para facilitar a nossa compreensão.​

Recomendo dar uma pausa nesse momento para pensar um pouquinho, talvez eu tenha feito rápido de mais, só que é básico, para cada um dos valores eu usei a fórmula e passei para uma Array.​

​

Nessa ponto, caso a gente use essa constante color para algo, ela vai estar com uns valores muito loucos por causa do Javascript, tipo uns "1.067777777", então vamos fazer uma cópia dela utilizando o método Map() . Depois só dar um .toFixed() em todas​

notem que eu utilizei destructuring para facilitar o próximo processo, basicamente temos que para cada iteração, adicionar ao output o nosso código BBCode, mas é fácil, basta olhar.​

Pois bem meu consagrado, terminamos a luta!, agora basta utilizar a função, dar um console.log(), copiar o BBCode que ela gerou e simplesmente colar no seu tópico, aqui vai um exemplo teste da função

Droga, quebrou a linha, Bom agora só rodar o código, copiar o BBCode e usar aqui, ficaria tipo assim:

Um homem sem chifres é um homem desarmado


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Certo meus lindos, essa foi a brincadeira de hoje, espero ter ajudado alguém, qualquer dúvida / sugestão podem deixar aí, valeu falouw!!!!

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━​

 

[Douglas12ds]

Guira, eu...
Minha nossa, que tópico interessantíssimo! Uma mistura de tutorial com tópico informativo. Uma verdadeira mão na roda mesmo! Além disso, é muito interessante a construção estética do seu tópico. Acho bem legal quando o autor do tópico preza pela identidade visual.

Parabéns!

 

[Eliyud]

MEEEEEEEEEEEEEEEU AMIIIIGO!! Eu sei que a Academia Tecnológica tava precisando de uma movimentada, mas... assim tu ganha o meu coração! <3 Que talento de tópico, meu amigo!!

Meus parabéns e obrigado pelo tutorial!!

 

[Brandt]

Nice! É bem legal fazer códigos de utilidade imediata assim pra ensinar o pessoal, especialmente com explicações detalhadas \o

Vou deixar aqui minha versão, por fins de curiosidade:

function lerp(step, start, stop) {
  return start * step + (1 - step) * stop;
}

function generateBBCodeGradient(text, startColor, endColor) {
  const len = text.length;
 
  function gradient(index) {
    const color = startColor
      .map((c, i) => lerp(index / len, c, endColor[i]))
      .map(c => c.toFixed());

    return `rgb(${color.join(',')})`;
  }

  return [...text]
    .map((chr, index) => `[color=${gradient(index)}]${chr}[/color]`)
    .join('');
}

Particularmente, curto mais o estilo funcional, acaba gerando códigos mais concisos e declarativos. A melhoria mais significativa aí é não ter que escrever um for auehaue. Outra é fazer a interpolação na cor usando um loop, ao invés de copiar o código na mão pra cada componente.

Btw, a fórmula bolada aí é um Lerp, ou Interpolação Linear. Dá pra dar uma elaborada nisso aí definindo funções de interpolação mais complexas, igual você vê nos gradientes em programas de edição de imagem.

 

[Guira]

@Brandt opa cara, valeu pelo nome da fórmula, eu queria estudar ela de novo mas tinha esquecido o nome e.e. Eu pensei em usar um map ali na parte da constante "color" mas queria deixar bem claro que a gente estava usando a fórmula para os três casos (RGB).

A parte mais legal de códigos assim é que eles são simples e quando você compara com o de outras pessoas você percebe que tem várias formas de chegar ao mesmo caso, satisfazendo todos os gostos =p

Valeu a contribuição, tmj.

@Eliyud Que isso cara só queria compartilhar um código, valeu o apoio mano

@Douglas12ds Muito obrigado meu caro, valeu o apoio, tmj

 

[Alkemarra]

Eu não entendi nada '-'

Mas seguindo o passo a passo deu certo \o\

 

[Guira]

@Alkemarra KKKKKKK que isso meu bom, qualquer coisa você pode usar o SITE HYPER MEGA SECRETO AQUI

Mas recomendo mais pra frente dar uma olhada de novo