sábado, 2 de novembro de 2019

#6 - Gerador de Cores em JavaScript

No sistema RGB as cores são formadas a partir da combinação de três cores base, são elas R (vermelho), G (verde) e B (azul). Cada uma dessas cores pode receber valores que vão de 0 até 255, quanto maior o valor, maior é a intensidade da cor. Para se obter a cor vermelho, por exemplo, devemos escrever rgb(255,0,0). Aqui o valor referente ao vermelho está no máximo e os valores referentes a verde e azul estão zerados. Podemos obter variações desse vermelho aumentando um pouco a intensidade das outras cores e/ou diminuindo a intensidade do vermelho, e é isso que essa aplicação se propõe a fazer.

Para uma explicação mais detalhada sobre como funciona o sistema RGB, recomendo esse vídeo do canal CFB Cursos no youtube.



Nessa aplicação, o usuário escolhe uma cor através da TAG . Após isso, o script cria variações dessa cor, hora mudando a intensidade de apenas uma cor base, hora mudando a intensidade de duas cores base, e por fim mudando a intensidade das três cores base. Também existe uma área onde o usuário pode fazer alguns testes, mudando as cores e a opacidade do background de alguns elementos.



Foi particularmente difícil para mim bolar uma lógica onde em um momento apenas uma cor base variasse, e em outro duas e em outro as três. Mas no fim a persistência venceu a frustração.


Download Link

E assim esse post colorido chega ao fim, adíos!

sexta-feira, 18 de outubro de 2019

#5 - Gerador de Números Aleatórios em JavaScript

Em JavaScript, números aleatórios são gerados através da função Math.random(), nesse post faremos algumas observações e demonstrações acerca da mesma, para um maior entendimento peço que o leitor sempre copie e teste o código gerado abaixo.

Para começar nossos trabalhos, atribuiremos o número aleatório gerado pela função a uma variável e em seguida a mostraremos no console.

var numeroAleatorio = Math.random();
console.log(numeroAleatorio);

A função Math.random() sempre retorna um número entre 0 e 0.999999999999... (que na prática é 1). O que resulta em muitas casas decimais, e pouca praticidade. Podemos melhorar as coisas utilizando a a função Math.round() que arredonda o número passado como parâmetro. Com o código abaixo exibiremos no console tanto o número "puro" quanto o número arredondado.

var numeroAleatorio = Math.random();
console.log("Numero Original: " + numeroAleatorio + " | Número arredondado: " + Math.round(numeroAleatorio));

Agora, afim de obter vários números colocaremos o código acima dentro de um loop for.

var numeroAleatorio;
for(var x = 0; x < 10; x++){
numeroAleatorio = Math.random();
console.log("Numero Original: " + numeroAleatorio +
" | Número arredondado: " + Math.round(numeroAleatorio));
}

O que temos é um festival de zeros e ums. Isso acontece porque primeiro a função Math.random() gera um número entre 0 e 0.999999999999... e em seguida a função Math.round() o arredonda seguindo a seguinte lógica. Se o número gerado estiver mais próximo de 0 que de 1 ele é arredondado para 0, senão ele é arredondado para 1.

Para obter números em um intervalo maior devemos utilizar a função Math.random() em conjunto com algumas operações aritméticas. No código abaixo multiplicaremos o número gerado por 10.

var numeroAleatorio;
for(var x = 0; x < 100; x++){
numeroAleatorio = Math.random();
console.log("Numero Original: " + numeroAleatorio + "
| Número multiplicado pro 10: " + (numeroAleatorio * 10) + "
| Número multiplicado por 10 e arredondado: " + Math.round(numeroAleatorio * 10));
}

Vou pegar o primeiro número que foi gerado para mim e explicar o resultado do código:

  • Primeiro a função Math.random() gerou o número 0.9140966973810001
  • Este número foi multiplicado por 10 resultando em 9.14096697381
  • Por fim esse número foi arredondado seguindo a lógica de "se está mais perto de 9 que de 10 ele é arredondado para 9 senão ele é arredondado para 10". Nesse caso o resultado foi 9.

Podemos simplificar o código utilizando a função Math.round() e a multiplicação por 10 logo na atribuição da variável

var numeroAleatorio;
for(var x = 0; x < 100; x++){
numeroAleatorio = Math.Round(Math.random() * 10);
console.log(numeroAleatorio);
}

O código acima já retorna o valor final do número, que sempre será um número entre 0 e 10.

Podemos obter números entre 0 e qualquer número positivo utilizando a mesma lógica, apenas mudando o valor pelo qual o Math.random() será multiplicado.

var numeroAleatorio;
for(var x = 0; x < 100; x++){
numeroAleatorio = Math.Round(Math.random() * 5);
console.log(numeroAleatorio);
}

Com o código acima sempre obteremos números entre 0 e 5.

Se quisermos obter números a partir de um intervalo exato, entre 8 e 10 por exemplo. Devemos seguir a foŕmula abaixo

Math.round(numero do limite inferior + Math.random() * (numero do limite superior - numero do limite inferior))

O Código para gerar números entre 8 e 10 seria o seguinte:

var numeroAleatorio;
for(var x = 0; x < 100; x++){
numeroAleatorio = Math.round(8 + Math.random() * (10 - 8));
console.log(numeroAleatorio);
}

No código acima temos a mesma lógica já apresentada anteriormente, de que podemos obter números de um intervalo entre 0 e qualquer número positivo apenas multiplicando o math.random() por esse número. Nesse caso, obteremos sempre números entre 0 e 2, pois Math.random() * 2 sempre irá gerar números dentro desse intervalo, após isso o número gerado será somado com 8, o que garante que o menor número do intervalo sempre seja 8. Por fim, o número é arredondado com a função Math.round().

Seguindo as premissas mostradas acima criei uma aplicação onde o usuário entra com dois números e em seguida gera um número aleatório dentro do intervalo entre esses dois números.



Download Link

A assim esse post aleatório sobres números aleatórios chega ao fim.

quarta-feira, 16 de outubro de 2019

#4 - Programa para Memorizar o Hiragana e o Katakana

Ao se iniciar os estudos em língua japonesa, o primeiro passo deve ser aprender os dois sistemas de escrita mais básicos do idioma, sendo eles o Hiragana e o Katakana. Esse programa tem como objetivo ajudar o estudante nessa tarefa.

A dinâmica do programa é inspirada no Anki.Não por acaso eu o apelidei de Mini Anki.Um outro famoso programa muito utilizado no estudo de idiomas. Primeiro é mostrada a letra e após um determinado tempo é mostrado o som que ela representa. O usuário pode escolher quais colunas de letras estudar e também mudar a velocidade em que o som da letra é revelado.



Para mais detalhes sobre como funciona a escrita da língua japonesa recomendo o vídeo abaixo, do canal do youtube 123 japonês.



Download Link

さいおなら!

sexta-feira, 11 de outubro de 2019

#3 - Timer / Despertador Feito com Javascript | Versão 2.0

Com bastante atraso, afinal é muito fácil se perder e gastar todo o tempo com coisas inúteis enquanto a vida passa, eu trago a versão 2.0 do timer / despertador feito com javascript.

Novidades

  • O código javascipt está muito melhor estruturado e repleto de comentários, o que dá um norte para quem quiser se aventurar por ele.
  • Além do som de alarme padrão, o usuário agora tem a possibilidade de escolher que uma janela no navegador seja aberta, com uma url definida por ele.
  • As preferências do usuário agora são salvas com localStorage.



Download Link

That's all folks!

sábado, 14 de setembro de 2019

#2 - Timer / Despertador Feito com Javascript

Reproduzir determinado arquivo de áudio após um período de tempo estabelecido pelo usuário. A primeira vista parece um projeto simples, e de fato o é. Porém ao mesmo tempo é tão repleto de minúcias - e quanto mais surtada perfeccionista é a pessoa mais minúcias vão aparecer - que pode até acarretar graves dores de cabeça ao programador. Ok, com graves dores de cabeça eu já estou bastante acostumado...

Ter desenvolvido o projeto de forma desorganizada, num sentido de que eu não pré estabeleci todas as suas funcionalidades e fui programando de uma forma "intuitiva" seguindo a ideia de que "conforme forem aparecendo problemas eu os resolvo" e "conforme forem aparecendo novas ideias eu as implemento" certamente aumentou o seu grau de dificuldade. Dito isso, convém aqui compartilhar uma dica que o programador português João Ribeiro deu em seu canal no youtube:



Entre mortos e feridos o script parece estar funcionando sem bugs. Porém como eu sou cheio de bugs, por mais que a máquina sempre dispare o alarme na horário correto, nunca resisto à tentação de parar o despertador e voltar a dormir. Talvez seja o caso mexer mais no código e trocar o som do alarme por algo mais estimulante...



Enfim, para os que quiserem mexer no código ou para aqueles que simplesmente estão precisando de um despertador vou colocar abaixo o link para o download.



Download Link


Por hoje é só.

segunda-feira, 9 de setembro de 2019

#1 - Um Nascimento Prematuro

Assim como eu, esse blog está nascendo de forma muito prematura. Mas diferente de mim, o nascimento desse espaço foi planejado. Há muito eu vislumbrava publicar conteúdo escrito na internet, porém só pretendia fazê-lo quando me sentisse pronto para tal. Bom, eu não estou pronto, muito longe disso... Casado com a dor física e tendo a inercia como amante, essa é minha atual situação. E já estou nessa há bastante tempo. Não sei se já disse mas minha amante é a inerc... Ah, sim! Eu já disse...

O caminho que eu percorri até esse estado foi pavimentado por fatores genéticos e ambientais, - provavelmente ter nascido muito prematuro tenha sido um deles - tendo a achar que o pacote de vícios e virtudes que eu recebi veio meio desregulado... De qualquer forma, tenho vivencia e imaginação o bastante para saber que as coisas poderiam ser muito piores. Uso esse primeiro post como uma forma de quebrar o ciclo infinito de falhas e erros no qual estou inserido. Não vou conseguir mudar as coisas num curto prazo, mas me comprometo que o eu de amanha será melhor que o eu de hoje.