O clipe de Bad Apple!! tocando inteiro em arte ASCII, direto no navegador.
Uma página que toca o vídeo de Bad Apple!! e redesenha cada frame como texto. O vídeo fica escondido e o que aparece na tela é só um grid de caracteres, atualizado a cada frame.
-
Lê o vídeo frame a frame com o
createVideodo p5.js. -
Reduz o frame num canvas fora da tela com 120 colunas. A altura sai da proporção do vídeo, com um ajuste porque os caracteres são mais altos do que largos.
-
Calcula o brilho de cada pixel pela média de R, G e B.
-
Troca o brilho por um caractere da rampa abaixo. Quanto mais claro o pixel, mais "cheio" o caractere:
Ñ@#W$9876543210?!abc;:+=-,._ -
Pinta cada caractere com a cor original do pixel e monta o frame em HTML.
Quando a janela muda de tamanho, o grid é recalculado.
O navegador bloqueia a leitura de pixels de vídeo aberto direto pelo file://, então sirva a pasta com um servidor local:
git clone https://github.com/LeandroCustodio2002/Bad-Apple-ASCII.git
cd Bad-Apple-ASCII
npx serve .Depois abra o endereço que aparecer no terminal e clique em ▶ Play Bad Apple.
Bad Apple!! é uma música da série Touhou Project (ZUN), na versão do Alstroemeria Records com vocal de nomico. O vídeo de sombras é um projeto de fãs. Este repositório é só um estudo de creative coding.