Filme em ASCII no navegador.


Pra quem não conhece, vale a pena dar uma olhada no link abaixo:
http://www.justbewise.net/matrix2.html

animascii.gif

Daí eu fiquei pensando “Como será que o kra fez isso heim?” E daí comecei a juntar os conhecimentos (Javascript + ASCII + Ajax) e…. tcharam!!! Fiz um igual..srsr

Para fazer a sua própria animação, você vai precisar do convertor de imagens em ASCII, que pode ser encontrado aqui.
A dinâmica do filme é simplesmente inserir o conteúdo deste ASCII em uma div. No meu caso, eu deixei os arquivos externos e fiz uma função em javascript para ler arquivo por arquivo a cada meio segundo e exibir o conteúdo em uma div.

Se você tem um filme em .wma ou .mpg, o conselho é importá-lo no flash e depois exportar como sequencia de .jpgs. Após isso, para converter todas as imagens em ASCII, vá no menu File > Batch Conversion.

Após isso, insira uma div no seu documento com id=”exibe”.
A função javascript na página é essa:

var n = 1;
function exibe(){
var div = document.getElementById(’exibe’);
aa=n.toString();
if(aa.length==1){
aa=”000″+n.toString();
}else if(aa.length==2){
aa=”00″+n.toString();
}else if(aa.length==3){
aa=”0″+n.toString();
}else{
aa=n.toString();
}
ajaxGet(’ASCII-video’+aa+’.txt’,div,false);
//div.innerHTML = replace(div.innerHTML,’n',’<br>’);
if(n==220){
clearInterval(intId)
}else{
n++;
}
}
intId = setInterval(exibe,90);

Agora, existe só um segredinho no carregamento do ajax para que o conteúdo apareça formatado da maneira correta, no nosso caso, texto é a variável que recebe o responseText do Ajax, devemos fazer um tratamento dele antes de jogá-lo na div, da seguinte maneira:

texto= ‘<pre><font face=”Courier New, Courier, mono” color=#000000 size=1>’+texto+’</font></pre></div>’;

É isso aí, vale a pena fazer um filminho desses pra mostrar pra galera.

Baixe um exemplo aqui.

* A função ajax foi desenvolvida por micoX (http://elmicox.blogspot.com/)

, ,

  1. Nenhum comentário.
(não será publicado)
  1. Nenhum trackback.