Tag Archives: html5

A jugar con el canvas y create.js

Create.js es una librería MAGNIFICA nos permite trabajar con el canvas al mejor estilo flash (una API muy exitosa, sin ninguna duda) facil de aprender, facil de usar, pero lamentablemente muy mal documentada debido a su rápido crecimiento, es decir avanza tan rápido que seguramente este tutorial ya es viejo :P.

De las muchas maravillas que esta librería tiene para ofrecer la mejor (y más utilizada) sin duda es easel.js .Easel.js es una librería de gráficos vectoriales que nos provee DisplayList (igual que flash) dentro de nuestro canvas, para poder controlar que dibujamos dentro de él. Es muy simple de utilizar así que manos a la obra:

Primero nuestro HTML incluyendo las librerías (todo create.js aunque por ahora solo utilizemos easel.js)

<!DOCTYPE html>
<html>
<head>
<title>First</title>

<style>/* Removes Mobile Highlight */ *{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>

<script src=”../libs/easeljs-0.5.0.min.js”></script>
<script src=”../libs/tweenjs-0.3.0.min.js”></script>
<script src=”../libs/soundjs-0.3.0.min.js”></script>
<script src=”../libs/preloadjs-0.2.0.min.js”></script>
<script src=”../libs/movieclip-0.5.0.min.js”></script>
</head>
<body>
<canvas id=”stage” width=”960″ height=”320″></canvas>
<script>

como verán solo creé un canvas para controlarlo con easel.js
Para controlarlo simplemente lo rodeamos con el objeto Stage de create.js

var canvas = document.getElementById(“stage”);

// create a stage object to work with the canvas. This is the top level node in the display list:
var stage = new createjs.Stage(canvas);

y listo! ahora simplemente podemos empezar a crear objetos meterlos dentro de nuestro Stage y renderizar.

Creemos un Texto

// Create a new Text object:
var text = new createjs.Text(“Hello World!”, “36px Arial”, “#777″);

como se estarán preguntando todos los objetos (métodos, eventos y propiedades) los pueden encontrar en la referencia de easel.js
Ahora simplemente agregamos el objeto al stage

stage.addChild(text);

lo posicionamos vertical y horizontalmente

text.x = 360;
text.y = 200;

y renderizamos!

stage.update();

listo! el código completo lo pueden encontrar en
https://github.com/picanteverde/bucefalo-html5/blob/master/src/public/easeljs/first.html

tambien obvio podemos crear todo tipo de formas vectoriales como en

https://github.com/picanteverde/bucefalo-html5/blob/master/src/public/easeljs/circles.html

una vez más si quieren explorar más los dirijo a la referencia de easel.js

por último les dejo un pequeño ejemplo (en el que estoy aún trabajando) que saqué de un tutorial mucho más completo

https://github.com/picanteverde/bucefalo-html5/blob/master/src/public/easeljs/pong.html

Que se diviertan! y bienvenidos a HTML5!

Referencias:

https://github.com/CreateJS/EaselJS/tree/master/examples

http://active.tutsplus.com/tutorials/games/learn-createjs-by-building-an-html5-pong-game/

Etiquetado , , , ,

Jugando con getUserMedia y canvas

*******************++++++++++++++++++++++++++++++++++lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllliillliiiiiiililiiiiiiiliiiillllllllllil
*******************++++++++++++++++++++++++++++++++++llllllllllllllllllllllllllllllllllllllllllllllllllllllllillllilliililiiliiliiiiiiiiiiiiiiiliilililiilliilll
***************+***+++++++++++++++++++++++++++++++++llllllllllllllllllllllllllllllllllllllllllllllllllllllillllllilliliiiiiiiiiiiiiiiiiiiiiiiiiiiilillllilllllll
****************+++++++++++++++++++++++++++++++++++++lllllllllllllllllllllllllllllllllllllllllllllllllllllllillliiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiillilililillllll
****************++++++++++++++++++++++++++++++++++++lllllllllllllllllllllllllllll+++++***++llllllllllllllllllliiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiillliilllllllll
*****************+++++++++++++++++++++++++++++++++++lllllllllllllllllllllllll++*PBBBB####BBBBP*+llllllllllilliiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiilliililllll
****************+*+++++++++++++++++++++++++++++++++lllllllllllllllllllllll++PB###B######WWW######B*llllllliiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiliiiiilillllll
**************+*++++++++++++++++++++++++++++++++++++lllllllllllllllllll+++*BB###BBB########WWWWWWWW#*llllliiliiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiilillll
**************+*++++++++++++++++++++++++++++++++++llllllllllllllllll+++*B#################WWWWWWWWWWW#*llliiliiiliiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiililiillll
****************+++++++++++++++++++++++++++++++++++llllllllllllllll++*B##W####WWW###B#########WWWWWW@WW*+lllllllllliiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiliiillll
***************+++++++++++++++++++++++++++++++++++llllllllllllllll+*B#WWWWWWWWWWWWW#########WWWWWWWWWWW##*+lllllllllliiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiilll
****************+++++++++++++++++++++++++++++++++l+lllllllllll+++*B##WWWWWWWWWWWWW@W############WWWWWWW#W#B+llllllllllliiiiiiiiiiiiiiiiiiiiiiiiiiiiiililiillliil
***************++++++++++++++++++++++++++++++++++llllllllll++++*B##WW@WWWWWWWWWW##WWWW###########WWWWWWWW###BBPP*++lllllllliiiiiiiiiiiiiiiiiiiiiiiiiiiliililllll
***************+++++++++++++++++++++++++++++++++llllllllllll++P#WWWW@@@@@@@@@@WWWW####BBBB#######WWWWWWWWWWWWW###B****+llllliiiiiiiiiiiiiiiiiiiiiiiiiiilliiiiill
*************++++++++++++++++++++++++++++++++++++llllllllll+*P#WW@@@@@@@@@@@WWWWWWW######WW#WWWW@@@WW@@@WWWWWWWW##P*++l+++llliiiiiiiiiiiiiiiiiiiiiiiiiiiiillllll
**************++++++++++++++++++++++++++++++++++lllllllll++PBW@@@@@@@@@@@@@@@@@@WWW####WWWWWWW#WW@@@@@@@WWWWWW@@W#P*+llll+*llliiiiiiiiiiiiiiiiiiiiiiiiiiliiillll
**************++++++++++++++++++++++++++++++++++lllllllll+B#@@@@@@@@WW@@@WWWWWW####WW######WWWW##WWWWWW@@WWWWWWWWWBP*++liil*lliiiiiiiiiiiiiiiiiiiiiiiiiiiiililll
*************++*+++++++++++++++++++++++++++++l+lllllllll*#W@@@@@@@@@@@@@@WWWW####WWWW########WWWWWWWWWWWWWWWWW@@@W#B**++lll+*liiiiiiiiiiiiiiiiiiiiiiiiiilillilil
************+*+*+++++++++++++++++++++++++++++l++lllllll+B#@@@@@@@@@@@@@@@WWWWW#W########B############WWWW@@@@@@@@WW#B*P***++*+llllliiiiiiiiiiiiiiiiiiiiiiiililll
*************+++++++++++++++++++++++++++++++++l+llllll+##W@@@@W@@@@@@@@@@WWWWWWW#######W###BBB#######WW@@@@@@@@@@WW##P+++++***lliiiliiiiiiiiiiiiiiiiliiilillllll
************+*+++++++++++++++++++++++++++++++lllllll+*B##W@@@@@@@@@@@@@@@WWWWWWW######WWWW####WWW@WW@@@@@@@@@@@@@@WW##**++*P+*liiiiiiiiiiiiiiiiiiiiiiiiiiillllll
**************+++++++++++++++++++++++++++++++llll+ll+P##W@@@@@@@@@@@@@@@@WW##WW#######WWWWWWWWWWWWWW@@@@@@@@@@@@@WWW##BP**+**+liiiiiiiiiiiiiiiiiiiiiiiiiililllll
*************++++++++++++++++++++++++++++++++++ll++l+BWWW@@@@@@@@@@@@@@@@@@W########WWWWWWWWW@@@@@WW@@@@@@@@@@@@@@@WWW##B+l+*lllliiiiiiiiiiiiiiiiiliiiliillllill
**************++++++++++++++++++++++++++++++++llllll+#W@@@@@@@@@@@@@@@@@@@@@W######WWWWWWW@@@@@@@W#@@@@@@@@@@@@@@@W@WW###B+P+lllillliiiiiiiiiiiiiiiliiiillilllll
****************++++++++++++++++++++++++++++++llllll+WW@@@@@@@@@@@@@@@@@@@@@WW#####WWWW@W@@@@@WW#W@@@@@@@@@@@@@@WWWWWWW##BB*+llliiiiiiiiiiiiiiiiiiiiliiillllllll
*************++++++++++++++++++++++++++++++++++llll+BW@@@@@@@@@@@@@@@@@@@@@WWWWW#WWWW#WW@@@@@W##WWWW@@@@@@@@@@@@WWWWWWWW#PB*+llliiiiiiiiiiiiiiiiiillllilllllllll
**************++++++++++++++++++++++++++++++++++++++#W@@@@@@@@@@@@@@@@@@@@@WWWWWWWWWWW#########WWWWWWW@@@@W@@@@WWWWWWWWW#B+P+lllliiiiiiiiiiiiiiiiillllllllllllll
**************+++++++++++++++++++++++++++++++l+ll++P#WW@@@@@@@@@@@@@@@@@@@WWWWWWWWWWWWW##############WWWWW@@W@W@WWWWWWWW##**+liiiiiiiiiiiiiiiiiiiillllllllllllll
***************++++++++++++++++++++++++++++++l+++l+B#W@@@@@@@@@@@@@@@@@@WWWWW########WWW#################WWWW@@@@WWWWWWWWW#P*liiiiiiiiiiiiiiiiiiiiilllllllllllll
*************+++++++++++++++++++++++++++++++lllll+PB#W@@@@@@@@@@@@@@@@@WWW######################BB##########WW@@@@@@WW@WWWWB*lliiiiiiiiiiiiiiiiiilllilllllllllll
***************++++++++++++++++++++++++++++++llll+P##W@@@@@@@@@@@@@@@@WW########################BB#BBB#######W@@@@@@W@WWW#W#Plliiiiiiiiiiiiiiiiillilllllllllllll
**************++++++++++++++++++++++++++++++lllll+*B#W@@@@@@@@@@@@@@@W##############BBBBBBBBB##BBBBBBBBBBBBB##W@@@@@@@@W@#W##+liiiiiiiiiiiiiiiiliillllllllllllll
**************+*++++++++++++++++++++++++++lllllll++P#@@@@@@@@@@@@@@@W############BBBBBPPPPPPPBBPPBPPPPPBPBPPB#W@@@W@@@@@@W@##*liiiiiiiiiiiiiiiiiiillllllllllllll
*************++++++++++++++++++++++++++++++++lll+++P#@@@@@@@@@@@@@@W##BBBBBBBBBBBBPPPP*******P****PPPPPPPPPPP##W@@@@@@@@@W@W#*lliiiiiiiiiiiiiiillillllllllllllll
**************++++++++++++++++++++++++++++++++ll+++B@@@@@@@@@@@@@@@##BBPPPPPBBBBPPP*P***++++**+++*******+***PB##@@@@@@@@@W@W#+lliiiiiiiiiiiiiiiiilllllllllllllll
***************+++++++++++++++++++++++++++++++++++BW@@@@@@@@@@@@@@W#BPP****PPP******+++l++ll+++l++**++++++***PB#W@@@@@@@@@W##+liiiiiiiiiiiiiiiiillllllllllllllll
**************+++++++++++++++++++++++++++++++++l+##@@@@@@@@@@@@@@W#BP*+++++***+++++++ll+llil+llll+++l+++++++*PP#WW@@@@@@@@W#Blliiiiiiiiiiliiiilillllllllllllllll
**************++++++++++++++++++++++++++++++++++P##@@@@@@@@@@@@@W#BP*++++++++++ll+l+++lliiillllll++lll++++++*PPB#W@@@@@@@@W#+lliiiiiiiiiiiiililillllllllllllllll
***************+++++++++++++++++++++++++++++++++B#W@@@@@@@@@@@@W#BBP*++++lllliiiiiiiiliiiiiiiiiilllllll+++++**PB#W@@@@@@@#Pllliiiiiiiiiiiiiilillllllllllllllllll
***************+++++++++++++++++++++++++++++++++P#@@@@@@@@@@@@@##BP***++lllii:::::::::iiiiiiiiiiilllllll++++**PB##W@@@@@WB+liliiiiiiiiiliiililllllllllllllllllll
***************++++++++++++++++++++++++++++++++*P#@@@@@@@@@@@@W#BPP***++lliii::::::::::iiiii::::iiiiiilll+++**PP#WWW@@@WWB+lliiiiiiiiiililllllllllllllllllllllll
*****************++++++++++++++++++++++++++++++*B#@@@@@@@@@@@@WBP*P***+*llii:::::::::::::::::::i:ii:iiillll++*PP#WWW@@@@WB*lliiiiiiiiillliilllllllllllllllllllll
****************++++++++++++++++++++++++++++++++*B@@@@@@@@@@@W#BP****+++llii:::::::::::::::::::ii:::iiiillll+*PP#WW@@@@@WB*llliiiiiiilllllllllllllllllllllllllll
*****************+++++++++++++++++++++++++++++++*PW@@@@@@@@@@W#PP***++++lllii::::::::::::::i::iiiiiiiiilllll+*PP#WW@@@@@WP+llliiiiiilliillllllllllllllllllllllll
***************+*+++++++++++++++++++++++++++++++**W@@@@@@@@@@W#PP**++lllllliiiiiii::::::i:iiiiiiiiliiilllllll+PPBWW@@W@@#**lllliiiiiiillllllllllllllllllllllllll
*******************++++++++++++++++++++++++++++++P@@@@@@@@@@@W#BP*++lllllllllllllliiiiiiiiiiiilllllllllllllll+*PBW@@@W@@W+*lllliliililllllllllllllllllllllllllll
******************+++++++++++++++++++++++++++++++B@@@@@@@@@@@W#BP*+llllllllllllllllllllllllllllll++++++ll++lll+PBW@@@@@@#++lllllllllllllllllllllllllllllllllllll
******************+++++++++++++++++++++++++++++++B@@@@@@@@@@@#BPP*++l++++++++++++++++lllllll+++++***PPPPP*****+PBW@@@@@@B++lllllllilllllllllllllllllllllllllllll
*******************++++++++++++++++++++++++++++++B@@@@@@@@@@@#BPP****PPPPPPBBBBPPP***++++++++***PPBB#####BBBBBBB#@@@@@@WB+llllllllllllllllllllllllllllllllllllll
*******************++++++++++++++++++++++++++++++#@@@@@@@@@@W#BB####B#############BBP**+++++**PPB################W@@@@@WP+llllllllllllllllllllllllllllllllllllll
********************++++++++++++++++++++++++++++*#@@@@@@@@@@#BB##W#########W#W######BP***++**PB##################W@@@@@@Plllllllllllllllllllllllllllllllllllllll
*********************+++++++++++++++++++++++++++*WW@@@@@@@@@#B##WW###################BPP*++*PB###################W@@@@@@*lllllllllllllllllllllllllllllllllllllll
*********************+++++++++++++++++++++++++++*#W@@@@@@@@@##W@WWWW###W#############BBP*+++PB######WWWWWWWWW##WWW@@@@@@*lllllllllllllllllllllllllllllllllllllll
*********************+++++++++++++++++++++++++++*#@@@@@@@@@@@@@@#######BPBPPPPB#######B*+ll+P####B####BPPPPPBBPPPB#@@@@@Plllllllllllllllllllllllllllllllllllllll
**********************++++++++++++++++++++++++++*W@@@@@@@@@@@@@@####WWWWW@WWW##########*liilP#W######WWW##BB#####@#@@@@@#lllllllllllllllllllllllllllllllllllllll
**********************++++++++++++++++++++++++++B@@@@@@@@@@@@@@@###WWWW#W@WWWB#######B##B++P#W######WW#@W########@#@@@@@Wlllllllllllllllllllllllllllllllllllllll
***********************+*+++++++++++++++++++++*BW@@W@W@@@@@#W@@W####WW#BWWWWW*P#####BB###B###W#####PWWWWWP##W####@#@@@@@W*llllllllllllllllllllllllllllllllllllll
*************************++++++++++++++++++*PPP#WW##WW@@@@@#BB########BPBW##P+*B##BBBP#P*++*PWBP##P+###W#*P######WB@@@@W#Bllllllllllllllllllllllllllllllllllllll
*************************++*++++++++++++++++*P*B#BPB#WW@@@@#BBBBBBBBBBP**PB*l++P****BB#Bl::l#WB*+*+l+B##**PPBBBB#WB@@@@#BB+lllllllllllllllllllllllllllllllllllll
***************************++++++++++++++++**++PP**P##W@@@@#BPPPPPPPBPPPPP*++**+++++*##*i:.:*##++++++l+***PPPPPPB##@@@@#PB+lllllllllllllllllllllllllllllllllllll
***************************++++++++++++++++*+++P***PB#W@@@@#BPP*P**PPBBPPPP**P**++++P##+i:.:l##+ll+***PBBBBBP***B*#@@@W#PB+lllllllllllllllllllllllllllllllllllll
**************************+*+++++++++++++++++++****PB#W@@W@##P***i+*PPBBBBBBBP*++l**P#P+i:.:l##+lll+PPBB###BP*+*lP#@@WW#P*+lllllllllllllllllllllllllllllllllllll
****************************+*+++++++++++++++++*+**PBB@@@@@##B*++++ll+PBB#BBPP****+*PP++l:.:i*PP+ll+**PBB#BB*++**P#@@W##**+lllllllllllllllllllllllllllllllllllll
*******************************++++++++++++++++****PP#@@@@@##B*+++++*PBBPP*****+*****+++l:..i+****+l++PBBBBBP*+++*#@@WW#**+lllllllllllllllllllllllllllllllllllll
******************************++*+++++++++++++++***P#@@W@W@##B*++***PPPPPP**+lll+**P+l+ll:..:l+P**+++*********PP**#@@@W#P*++llllllllllllllllllllllllllllllllllll
**********************************+++++++++++++++*P#@@@W@@@##B**PP****+++++lll+++*P++l+li:..:l++PP*++*********PPP*#@@WW#**++lllllllllllllllllllllllllllllllllll+
*********************************+*++++++++++++++PB@@@@W@@@##BPPPP***++++++++l++**++lllli:``:l+++*PPPPPPPPPPPPPPBB#@@###P++lllllllllllllllllllllllllllllllllllll
************************************++++++++++**+PW@W@@W@@@W#BBBPPP****+++++l+++llll+llli:` :il+llliiiiiiiiill+*PB#@@#BP*++llllllllllllllllllllllllllllllllll+++
***********************************++*++++++*+***#W#@@@W@@@W#BBBPPP*++llli:::::iill+++lli:. :ill+++liii::iiiilll*P#@@#PP*+lllllllllllllllllllllllllllllllll+++++
***************************************++++*++**B##W@@@@@@@W##BBP*+llliiii::::iil+lllllii::.:iilll+*liiiiiiiilll+PW@@WBP*+llllllllllllllllllllllllll++l+++++++++
*****************************************++*+***####@@@@@@@@##BP*++llllii:iiiiil+lliillii::::iillil**+lliilllll++*W@@WB**+llllllllllllllllllllllllllll++++++++++
************************************************#BP#@@@@@@@@##BP*+++lllliiiiill++liiillii:::iiillii****+llllll+++PW@WWP**+lllllllllllllllllllllll+l+++++++++++++
*********************************************+**BBP#@@@@@W@@##BP**+++llllllll+++*lliillliiiiiiillll+*PP*++l+++++*PW@@@P*++lllllllllllllllllll++l++++++++++++++++
************************************************BBB#@@@@@@@@W#BPP**++++lllll++++P++ll++llilllll++++***PP*++++++**B@@@WP+++++llllllllllllll+l++++++++++++++++++++
********************************************+***PBBB@@@@@@@@W#BBPP***++++l++++++PBPP*PP++lllll+*PPP***PBPP******PBW@W#P+++lllllllllllllllll+++++++++++++++++++++
*******************************************+****PPBB@@@@@@@@@##BBPP***+++++****+P#BB##BBP*++++*B###P**PBBPPP*PPPBB@@##*++++++l++l+ll+l++++++++++++++++++++++++++
**************************************+***********P#@W@@W@@@@###BBPP***+********P#######BPP**PB####*++*B#BBPPPPPB#@@##++++++++++++++++++++++++++++++++++++++++++
**************************************************P#W#W@@@@@@###BBBPP*****PPP+++*########BBBB######*++**##BPPPPBB#@##*++++++++++++++++++++++++++++++++++++++++++
**************************************************B####WW@@@@W###BBPPPP**PBP**+++B################B*+*+*P#PPPPPB###B*+++++++++++++++++++++++++++++++++++++++++++
*************************************************PB####W@@@@@W###BBPPPPPPBBPP**++*B###############P*++**PBB**PPB#WP*++++++++++++++++++++++++++++++++++++++++++++
*PPPP*******************************************P*BB####@@@@@@####BBPP**PBPPP**++++*B############P++++*PPBP**PP###*+++++++++++++++++++++++++++++++++++++++++++++
P**PP*PPP*****************************************PB#B###@@@@@####BPP***PBBBP*++llll*PB#########P*+**PBBBPP**PB##P++++++++++++++++++++++++++++++++++++++++++++++
PPPPPPPP*******************************************P#B#B#W@@@@####BPP***PPBBBP*****++*BBB######BPBB####PPP***PB##*++++++++++++++++++++++++++++++++++++++++++++++
PPPPPPPPP*******************************************PB###W@@@@W###BBPP***PPB####BBBBPPBBBBB#######W@@WP++****B##B**+++++++++++++++++++++++++++++++++++++++++++++
PPPPPPPPPP*P*****************************************P####W@@@@###BBPP***P**#@W###################W@WP+++++*P####P****++++++++++++++++++++++++++++++++++++++++++
PPPPPPPPPPPP*****************************************PP####@@@@####BBP****+++#@W#BB####BB##BB#B#B#WWP*+++++*B###WWWW##P**+++++++++++++++++++++++++++++++++++++++
PPPPPPPPPPPPP*****************************************PBB##@@@@W#####BP***++++B###PBPBB**BP**BPBP##P*+++++*P###W@@@@@@@@WW#*++++++++++++++++++++++++++++++++++++
PPPPPPPPPPPPPPPPP*************************************PPBBP#@@@@#####BPP*+++++**PBP#**+l+P***PPB*B*P*+++***B###@@@@@@@@@@@W***++++++++++++++++++++++++++++++++++
PPPPPPPPPPPPPPPPPPP*P***********************************BPBBW@@@W#####PP***++++**++#P++l*BPPPBBP**P**+++**P###W@@@@@@@@@@@W******+++++++++++++++++++++++++++++++
PPPPPPPPPPPPPPPPPPPPPPP*********************************PBBBB#@@W#####BP***++++***+**i**P##B#B***PP*++++**B###@@@@@@@@@@@@#********+*+*++++*++*++++++++*+++++++*
PPPPPPPPPPPPPPPPPPPPPPP*****P*****************************PBBB#WW######BP***++++****++++ll++*+++**P*+++*PP####@@@@@@@@@@@@#*************+*+***+*+*+++++********+
PPPPPPPPPPPPPPPPPPPPPPPPPPP***P****************************PPB#@W######BPP****++**PP*llllllllii+*P******PB###@@@@@@@@@@@@@B*************************************
PPPPPPPPPPPPPPPPPPPPPPPPPPP*PPPPP************************PP##W@@@#######BPPP********P*+lllllll+*PP*****PPB#B#@@@@@@@@@@@@@B*************************************
PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP***************PPPP##WWW@@@@@##W##B#BPPPP**********++++l++**PP****PBPBB##@@@@@@@@@@@@WB*************************************
PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP***P********PP#WWWWWWW@@@@@@#####BBBPPPPPPP********+++++**PPP*P*PPPPBB###@W#W@@@@@@@#P*************************************
PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPB#WWWWWW@@W@@@@@@W######BBPPPPPPPPPPP*********PPPPPPP*PP*PBB#WW@W######@@@#P*************************************
PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPBBB#####WW@@@W@@@@@@@@@@@W######BBPPPPP*PPPPPPPPPPPPPPPPPPPPPPPP*PB###@WW######@@W#PP************************************
PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPB#############WW@@W@@W@W@@@@@@@W#######BBPPPP*PPPPPPPPPPPPPPPPPPPPPP***P#####@W######@@##PP************************************
PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPB##############WWWWWW@WWW@@@@@@@@######W##BP*P**P**PPPPPPPBPP************B#####WWW####W@@#BPPP***********************************
PPPPPPPPPPPPPPPPPPPPPPPPPPPPPB################WWWWWWWWWWW@@@@@@@##########BP********P***PP*********+***P#######@WW###W@@#PPPPPP*********************************
PPPPPPPPPPPPPPPPPPPPPPPPPPPPB#############W####WWWWWWWWW@@@@@@@@##########BPP**+******++++++++++++++***B#######@@W###WWW#BPPPPPPPP******************************
PPPPPPPPPPPPPPPPPPPPPPPPPPB#########W#####W####WWWWWWWW@@@@@@@@@###########BPP*++++++++++++++++++++++*P########@WWW####BWWW###BPPPPP*P**************************
PPPPPPPPPPPPPPPPPPPPPPPPPB############W###WWW##WWWWWWWWWW@@@@@@@############BP**+l++++++++++llllll++**P#######WWWWW####W@@@@@@WWW##BPPPP*P**********************
PPPPPPPPPPPPPPPPPPPPPPPPB###W#######WWW###WWW###WWWWWWWW@@@@@@@@##########W##BP*+llllll+llllllll+l++*P########WWWWW######@@@@@@@@@@@WW###BPPP*******************
PPPPPPPPPPPPPPPPPPPPPPPP####W#####WWWWW###WWW#WWWWWWWWWWW@@@@@@@###########W##BP*llllllllllllllll++**B#######W@WWWW#######@@@@@@@@@@@@@@@@WW#B******************
PPPPBPBPBPPBPPPPPPPPPPP####WW###W###WWWWW#WWWWWWWWW##WWWWW@@@@@@W###########W##PP++lllllllllll++l++*P#######W@WWWWW#########@@@@@@@@@@@@@@@@@@PPPPP*P*P*********
PPBPBBBBBBBBBBPBPPBPPPB####WWWWW###WWWW###W#WW#######WWWWW@@@@@@W###############PP*++++++++++++++**PB#######@@WWWW###########W@@@@@@@@@@@@@@@@PPPPP*****PP******
PBBBBBBBBBBBBBPBBBBBBB###WWWWWWW###WWWW##W###W########WWWWW@@@@@@############WW##BPP**+**+**+**+*PB########W@@WWWW#############@@@@@@@@@@@@@@@PPPPP****PP*******
BBBBBBBBBBBBBBBBBBBBBB##WWWWWWW###WWWW###W############WWWWW@@@@@@@#############W##BBBPPPPPPP*P**PB########W@@WWWWW##############@@@@@@@@@@@@@@PPPPPP************
BBBBBBBBBBBBBBBBBBBBB#WW##WWWW#W##WWWW################WWWWWW@@@@@@##############W###BBBBBBBPPBBB##########@@@WWWW#################@@@@@@@@@@@@PPPPPPP***********
BBBBBBBBBBBBBBBBBBBB#WWW#WWWWWW#W#WWWW##W############WWWWWWWW@@@@@W##############WW########B#############@@@WWWWWW#################@@@@@@@@@@WPPPPPPPP**********
BBBBBBBBBBBBBBBBBBB##WWWWWWWWWWW##WWWW#WW###########WWWWWWWWW@@@@@@W###############WW##################W@@@@WWWWWWWW#################@@@@@@@@#PPPPPPPPP*P**P*P**
BBBBBBBBBBBBBBB#####WWWWWWWWWWWW#WWWWWWWW###WW####WWWWWWWWWWWW@@@@@@W#################################W@@@@@WWW###WW##################W@@@@@@BPPPPPPPPPPPPPP**P*
BBBBBBBBBBBB##@@@@#WWWWWWWWWWWW##WWWWWW#######W###WWWW#WWWWWWW@@@@@@@###############################WW@@@@@WWW###W######################@@@@@BPPPPPPPPPPPPPPPPPP
BBBBBBBBBBB#W@@@@W#WWWWWWWWWWWW##WWWWWW###########W####WWWWWWWW@@@@@@@#############################W@@@@@@WWWW#WW####W####################@@@BPPPPPPPPPPPPPPPPPP
BBBBBBBBB##@@@@@@##WWWWWWWWWWWW#WWWWWWW####WW###WWWWW#WWWWWWWWWW@@@@@@@###########################W@@@@@@@WWWWW######WW#####################@BBBPPPPPPPPPPPPPPPP
BBBBBBBB#WW@@@@@WWWWWWWWWWWWWWW#WWWWWWW########WWWWWWWWWW#WWWWWW@@@@@@@@@W#W#WWWW###############W@@@@@@@@@@WW##W######WW#####################BBBBBBPPPPPPPPPPPPP
BBBBBBB#WW@@@@@@#WWWWWWWWWWWWWW#WWWWWW##W######WWWWWWWWWWWWWWWWWW@@@@@@@@@@@@@@WWWWWWW########W@@@@@@@@@@@WWWWW########WWW#####################BBBBBBPPPPPPPPPPP
BBBBBB#@@@@@@@@WWWWWWWWWWWWWWWWWWWWWWWWWWW#########WWW###WWWWWWWWWW@@@@@@@@@@@@@@@@@@@WWWWWWW@@@@@@@@@@@@WWWWWWWW########WWW#####################BBBBBBBBPPPPPPP

Yo en HTML5!

Quieres hacerlo tú?

http://picanteverde.github.com/bucefalo-html5/ascii.html

Hace años que espero interactuar con la web cam desde JavaScript por suerte los muchachos de WebRTC escucharon mis plegarias y ya podemos ver las primeras implementaciones de esta API.
Gracias a esto podemos tener alcance a la webcam con algunas simples lineas de código

<video autoplay></video>
<script>
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;

var onFailSoHard = function(e) {
console.log(‘Reeeejected!’, e);
};
var video = document.querySelector(‘video’);
var localMediaStream = null;
navigator.getUserMedia({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, onFailSoHard);
</script>

Además tambien podemos copiar lo que vemos en nuestro video a un canvas para post procesamiento (ufff todas las cosas que podemos hacer en un canvas)

document.querySelector(“span#shot”).onclick = function(){
ctx.drawImage(video, 0, 0, 320, 240);
};

Ya con esta información tenemos suficiente como para embarcarnos en la ardua tarea de tomar nuestra web cam y convertirla en ascii.

Voy a explicarles paso a paso porque tuve algunos problemas durante la creación

Primero que nada creamos los tres componentes

<video autoplay height=”240″ width=”320″></video>
<canvas height=”120″ width=”160″></canvas>
<pre id=”ascii”></pre>

Aqui ya hay algo para decir: el tag video puede recibir cualquier height an width pero internamente nuestro imagen de video tendrá el tamaño que venga desde nuestra webcam (en mi caso 640×480, mbp 17 mid 2009). cuando hacemos

var video = document.querySelector(‘video’);

podemos encontrar dentro de video.videoHeight y video.videoWidth el verdadero tamaño del video recibido.
luego el canvas lo podemos definir del tamaño que queramos pero este será el tamaño verdadero de nuestra imagen en el canvas, (como veremos luego) por css podemos redimencionarlo, pero solo sería escalarlo, nuestra verdadera imagen dentro del canvas tiene el tamaño definido en el tag (o en el HTMLElement para ser preciso). Fijense que para no crear un mapa de caracteres GIGANTE estoy creando un canvas de 160×120, de forma que nuestra matriz de caracteres resultantes será de 160×120, luego por css haré que se vea (escalado) del mismo tamaño que el video. finalmente agrego un pre para poner nuestra imagen final ascii.

En cuanto al código vemos que primero hago lo necesario para trabajar  crossbrowser (aunque WebRTC solamente lo probé en chrome 21)

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;

y luego defino una callback en caso de que no nos permitan acceso al recurso (webcam)

var onFailSoHard = function(e) {
console.log(‘Reeeejected!’, e);
};

obtengo la referencia a los elementos (y al contexto 2d del canvas) (y defino algunas variables)

var video = document.querySelector(‘video’);
var canvas = document.querySelector(‘canvas’);
var ctx = canvas.getContext(’2d’);
var localMediaStream = null;
var interval;

defino una función para comenzar a obtener los datos de la webcam (y setear el interval) y para parar

function start (){
navigator.getUserMedia({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, onFailSoHard);
interval = setInterval(snapshot, 100);
}

function stop(){
clearInterval(interval);
localMediaStream.stop();
}

bindeo las funciones al span switch

var playing =false;
var sw = document.querySelector(“span#switch”);
sw.onclick = function(){
if(playing){
stop();
playing=false;
sw.innerHTML = “play”;
}else{
start();
playing = true;
sw.innerHTML = “stop”;
}
}

y ahora la parte realmente complicada copiar la imagen del video al canvas y convertir la imagen del canvas en ascii.
Para esto usamos la función “snapshot” donde primero voy a copiar la imagen al canvas REDIMENSIONANDOLA al tamaño del canvas, recuerden que nuestro video puede ser más grande

ctx.drawImage(video, 0, 0, 160, 120);

luego obtengo información sobre cada pixel con getImageData
y obtengo una referencia a nuestro tag pre

var pixels = ctx.getImageData(0,0,160,120);
var colordata = pixels.data;
var ascii = document.getElementById(“ascii”);
ascii.innerHTML= ”;
var line =””;

y luego por cada pixel en colordata, recuerden que cada pixel esta compuesto por cuatro numeros RGBA red green blue y alpha

obtengo los colores y los convierto a escala de gris (vaya a saber uno quien inventó esa formula)

r = colordata[i];
g = colordata[i+1];
b = colordata[i+2];
//converting the pixel into grayscale
gray = r*0.2126 + g*0.7152 + b*0.0722;

luego, dependiendo del color del pixel uso un caracter más claro o más oscuro

//text for ascii art.
//blackish = dense characters like “W”, “@”
//whitish = light characters like “`”, “.”
if(gray > 250) character = ” “; //almost white
else if(gray > 240) character = “`”;
else if(gray > 220) character = “.”;
else if(gray > 200) character = “:”;
else if(gray > 180) character = “i”;
else if(gray > 160) character = “l”;
else if(gray > 140) character = “+”;
else if(gray > 120) character = “*”;
else if(gray > 100) character = “P”;
else if(gray > 80) character = “B”;
else if(gray > 40) character = “#”;
else if(gray > 20) character = “W”;
else character = “@”; //almost black

finalmente voy construyendo linea a linea, cuando llego al final del ancho de la imagen (canvas) comienzo una nueva linea

//newlines and injection into dom
if(i != 0 && (i/4)%160 == 0) //if the pointer reaches end of pixel-line
{
ascii.appendChild(document.createTextNode(line));
//newline
ascii.appendChild(document.createElement(“br”));
//emptying line for the next row of pixels.
line = “”;
}

line += character;

y voilá webcam to ascii en html5!!!!

Para ver el código completo (omití muchas partes)

pueden visitar mi nuevo repo

https://github.com/picanteverde/bucefalo-html5

donde podrán encontrar un pequeño servidor node.js que les permita servir los archivos (levantando desde file:/// chrome no nos dá acceso a la webcam)

y no quiero dejarlos sin decirle que nada de esto hubiese sido posible sin la guia de los siguientes tutoriales

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

http://thecodeplayer.com/walkthrough/cool-ascii-animation-using-an-image-sprite-canvas-and-javascript

lo único que hice fué combinar ambos (y hacerlos divertidos)

Saludos

Etiquetado , , ,
Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.