canvas archivos -

Un poco de canvas en este 2018

A lo largo de mi vida profesional he conocido pocos programadores que se involucran realmente en el desarrollo de videojuegos, con la llegada de HTML5 se nos facilitó el desarrollo de juegos gracias a canvas (algo inventado por Apple en el 2004), pero hoy ya más de 10 años después pocos lo conocen realmente, un propósito que tengo el siguiente año es dominarlo a la perfección, no tanto por aspectos laborales sino por un hobby que viene desde mi niñez, crear videojuegos.

Ya he realizado algunas cosas con canvas, pero como todo no por hacer unos cuantos gráficos o animaciones quiere decir que sea un experto (muchos por hacer algo ya ponen en su CV que son expertos), y no es para que todos los desarrolladores se involucren en esta tecnología ni hacer una revolución de ella la cual ya lo fue hace algunos años, sino simplemente dejar este escrito aquí para ser leído por mí un año después.

Por lo pronto abajo dejo un código que hice ahorita en 10 min para que los acompañe cuando tomen hongos o alguna otra droga psicodélica.

Código HTML

 <canvas width="500" height="500" id="myCanvas" > </canvas>

Código JAVASCRIPT


var context = document.querySelector("#myCanvas").getContext('2d');
context.beginPath();
context.arc(250,250,200,0,2*Math.PI,false)
context.fill();
context.stroke();
context.closePath();


    var i=0;
    setInterval(function(){

        DibujaPoligono("#myCanvas",3,i);
       
        if(i==360)
            i=0;  
        i++;

   },10);
    

    function DibujaPoligono(canvas,sides,iTurn){

        var context = document.querySelector(canvas).getContext('2d');
       
        context.beginPath();
        context.fillStyle = "white";
        context.strokeStyle="black";
        
        //pentagono
        var numberOfSides = sides,
            size = 200,
            Xcenter = 250,
            Ycenter = 250,
            step  = 2 * Math.PI / numberOfSides,//para pintar la figura calculamos la posicion
            shift = (Math.PI / 180.0) + iTurn; //giro


        for (var i = 0; i <= numberOfSides;i++) {
            var curStep = i * step + shift;
            
            context.lineTo (Xcenter + size * Math.cos(curStep), Ycenter + size * Math.sin(curStep));
        }


      
        context.fill();
        context.stroke();
        context.closePath();

}

Clonar una imagen a un conjunto de divs utilizando #jquery, #javascript y #canvas.

Esta entrada veremos cómo podemos clonar una imagen (jpg, png) a código html, es decir, pintar por medio de divs una imagen deseada.

Recalco que no es muy útil hacer esto, la utilidad de esta entrada es que vean como por medio de canvas, se puede recorrer una imagen y a su vez obtener pixel a pixel de esta.

A continuación pongo el ejemplo corriendo, solo den clic en el botón “dibuja en HTML” y esperen ya que tarda algunos segundos en realizar la acción.

Y podemos ver en esta imagen que son divs sin duda:

Ahora lo interesante, el código que nos ayuda a crear la magia, y como siempre con sus respectivos comentarios:

CSS

 
.pixel{			
float:left;			
width:1px;			
height:1px;		  
}

HTML

 <img id="imagen" width="200" height="200"  src="../img/images/galaxia.jpg" />
    <br />

<input type="button" value="dibuja en HTML" onclick="dibuja()" />
<div id="mensaje" style="font-weight:bold"></div>

<div id="imagenHTML"></div>

Javascript

//función que ejecuta el botón
function dibuja(){
	$("#mensaje").html("Espere un momentos, se esta dibujando la imagen!");

	//comienza a dibujar despues de 1 segundo, para mostrar el mensaje anterior.
	setTimeout(dibujar,1000)

}

//Esta es la función que realiza la acción principal
//funcion que realiza la clonacion de la imagen a divs
function dibujar(){
	//guardamos la imagen en una variable
	var img = $('#imagen')[0];

	//creamos un canvas y le definimos el mismo tamaño a la imagen
	var canvas = $('<canvas/>')[0];
	canvas.width = img.width;
	canvas.height = img.height;
	//Le asignamos la imagen al canvas, ya que nos ayudara el canvas para poder obtener los pixeles de la imagen real
	canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

	//definimos el tamaño del div para que sea el mismo ancho de la imagen
	//de esta manera al pintar los divs hijos que representaran los pixeles
	//formen la imagen y den el salto automatico cuando corresponda
	$("#imagenHTML").html("")
	$("#imagenHTML").css({"width":canvas.width+"px"})

	//realizamos el recorrido de los pixeles del canvas tomando el ALTO como maximo valor a recorrer
	for(y=0;y<canvas.height;y++){

		//realizamos el recorrido de los pixeles del canvas tomando el ANCHO como maximo valor a recorrer
		for(x=0;x<canvas.width;x++){
			//obtenemos el color en rgb del pixel actual
			var rgb = canvas.getContext('2d').getImageData(x,y,x+1,y+1).data;
			//obtenemos el rojo verde y azul del rgb anterior
			 var red = quitaCero(rgb[0].toString(16), 2);
             var green = quitaCero(rgb[1].toString(16), 2);
             var blue = quitaCero(rgb[2].toString(16), 2);

			 //obtenemos el hexadecimal con lso colores anteriores
             var hex = red + green + blue;

			 //y por ultimo creamos un div con la clase pixel que tiene el color hexadecimal
			$("#imagenHTML").append("<div class='pixel' style='background:#"+hex+"'></div>");
		}

	}

	//se termino de pintar y borramos el mensaje de texto que se puso al inicio
	$("#mensaje").html("");
}

//Función que nos ayuda a agregar al arreglo un 0 a una cadena cuando la longitud recibida no se cumple
var quitaCero = function(num, longitud) {
    return Array(longitud + 1 - (num + '').length).join('0') + num;
}

Quizá no sirva de mucho hacer esto ya que es lento, pero les servirá para algo el saber que pueden recorrer una imagen por sus pixeles por medio de javascript y el grandioso elemento agregado en html5 de nombre canvas.
Igual les anexo la liga directa al script para que puedan ver el código directamente: clic aquí.

Caracol Fibonacci en javascript. #fibonacci #canvas #javascript

Como vimos en un articulo que publique anteriormente (función fibonacci en javascript), la secuencia fibonacci es una curiosidad de la naturaleza y una de las cuales vemos en carreras afines a ingeniería, y en esta entrada compartiré el código fuente de la representación mas conocida de dicha secuencia, el caracol.

Esta figura es la mas conocida cuando buscamos información sobre la secuencia fibonacci, y pueden ver el algoritmo en ejecución dando clic AQUÍ.

El siguiente código de javascript la muestra en un navegador que soporte HTML5 (por la utilización de canvas):

Código HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fibonacci cuadros</title>
<style>
* { margin:0; padding:0; }
html, body { width:100%; height:100%; }
#miCanvas {
position: absolute;
top: 0px;
left: 0px;

margin: 0px;
border:1px solid #333
}
</style>
</head>

<body>
<canvas id="miCanvas"    ></canvas>
</body>
</html>

Código Javascript

/*
Código realizado por: Héctor de León Guevara.
Fecha: 06/04/2014
Figura caracol con secuencia fibonacci
www.hdeleon.net
*/

var context //contexto del canvas global
//variables para el acomodo
var x=700;
var y=300;
var opcion=0 //variable que indica cual es la posicion ue sigue para dibujar el cuadro
var opcionCurva=0; //variable de opcion para la curva

//variables de curva
var x1_curva;
var y1_curva;
var x2_curva;
var y2_curva;
var x3_curva;
var y3_curva;

//inicia el script
window.onload = function() {
//creamos canvas
var canvas = document.getElementById('miCanvas');
context = canvas.getContext('2d');

//agrega event de resize
window.addEventListener('resize', resizeCanvas, false);

//redimensiona canvas al tamaño de ventana
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
//redimencionamos canvas
resizeCanvas();

//algoritmos fibonacci, se ejecuta 40 veces
fibonacci(40)

};

function fibonacci(n){
var a=0;
var b=1;
var numeroTemporal=a

//plasmaCuadro(x,y,b,b);
for(i=0; i<n;i++){

acomodaCuadro(a,b);

numeroTemporal=a;
a=b;
b=numeroTemporal+b;

acomodaCurva(a,b);
//dibujamos cuadro
plasmaCuadro(x,y,b,b);
plasmaCurva();
}
}
function plasmaCurva(){
//curva
context.moveTo(x1_curva,y1_curva); //mover el cursor de canvas a punto inicial
context.quadraticCurveTo(x2_curva,y2_curva,x3_curva,y3_curva);	//punto de cuadricula y punto final
context.strokeStyle = '#555';
context.stroke();
}

function plasmaCuadro(x,y,w,h){
context.beginPath();
context.rect(x, y,w, h);

context.lineWidth = 1;
context.strokeStyle = 'black';

context.stroke();
}

//funcion que permite ir acomodando el cuadro para que figure el espiral
function acomodaCuadro(a,b){
switch(opcion){
//inicio
case 0:
opcion++;
break;
//derecha
case 1:
x+=b;

opcion++;
break;
//abajo
case 2:
x-=a;
y+=b;
opcion++;
break;
//izquierda
case 3:
x-=(parseInt(a)+parseInt(b));
y-=a;
opcion++;
break;
//arriba
case 4:

y-=(parseInt(a)+parseInt(b));
opcion++;
break;
}

if(opcion==5)
opcion=1;
}

function acomodaCurva(a,b){
switch(opcionCurva){

//derecha
case 1:
x1_curva=x;
y1_curva=y;
x2_curva=x+b;
y2_curva=y;
x3_curva=x+b;
y3_curva=y+b;
break;
//abajo
case 2:
x1_curva=x+b;
y1_curva=y;
x2_curva=x+b;
y2_curva=y+b;
x3_curva=x;
y3_curva=y+b;
break;
//izquierda
case 3:
x1_curva=x+b;
y1_curva=y+b;
x2_curva=x;
y2_curva=y+b;
x3_curva=x;
y3_curva=y;
break;
//arriba
case 4:
x1_curva=x;
y1_curva=y+b;
x2_curva=x;
y2_curva=y;
x3_curva=x+b;
y3_curva=y;
break;
}
opcionCurva++;

if(opcionCurva==5)
opcionCurva=1;
}