10
Feb
aNieto2k hace 38 días en: Programacion, estandares, javascript, web, webdev
Hace unos días descubrí via delicious, Sketchpad, un paint enriquecido completamente online que se aprovecha de las nuevas herramientas que HTML5 pone a nuestra disposición.
(Ver Imagen)
El resultado, como se puede ver, es realmente sorprendente. No solo por lo elegante del diseño, sinó por la soltura con la que se mueve y las posibilidades que ofrece:
- Uso de degradados
- Uso de patrones
- Paleta de colores
- Historial de modificaciones
- Posibilidad de salvar el dibujo con Data URI
Sin duda una muestra lo que nos vamos a ir encontrando por Internet en un futuro no muy lejano.
3
Ene
aNieto2k hace 76 días en: Programacion, javascript, webdev
Hace unos meses, Andrés Fernandez nos deleitó con una implementación que nos permitía aplicarle un filtro de escala de grises a imágenes desde Javascript. La idea, era crear un objeto <canvas /> al que le añadimos la imagen a su contexto para después ir procesándola. El resultado era eficaz, pero como el mismo comenta, lento para un uso práctico.
(Ver Imagen)
Con el cambio de año, el script también ha sufrido un cambio, y menudo cambio. Se trata de un cambio que nos permite aplicar el efecto en porciones de segundo, haciendo que su uso a nivel práctico sea factible.
(Ver Imagen)
Como curiosidad decir que, con este experimento no solo podremos convertir imágenes en imágenes en blanco y negro, sinó que como veremos en el post, podemos aplicarle diferentes colores e incluso podemos convertir imágenes en “asciart” 
(Ver Imagen)
¿Conocéis a este personaje?
10
Sep
aNieto2k hace 191 días en: Curiosidades, Programacion, estandares, javascript, web, webdev
En Carsonified.com nos muestran un interesante tutorial con el que iniciarnos en el uso de <canvas /> mediante Javascript.
// Comprobamos que <canvas /> esté disponible
if(drawingCanvas && drawingCanvas.getContext) {
// Inicializamos el lienzo 2D
var context = drawingCanvas.getContext('2d');
// Creamos la cara amarilla
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF00";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
// Añadimos 2 ojos verdes
context.strokeStyle = "#000000";
context.fillStyle = "#FFFFFF";
context.beginPath();
context.arc(80,80,8,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
context.fillStyle = "#009966";
context.beginPath();
context.arc(80,80,5,0,Math.PI*2,true);
context.closePath();
context.fill();
context.strokeStyle = "#000000";
context.fillStyle = "#FFFFFF";
context.beginPath();
context.arc(120,80,8,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
context.fillStyle = "#009966";
context.beginPath();
context.arc(120,80,5,0,Math.PI*2,true);
context.closePath();
context.fill();
// Creamos una nariz con firma de diamante
context.fillStyle = "#000000";
context.beginPath();
context.moveTo(93,100);
context.lineTo(100,93);
context.lineTo(107,100);
context.lineTo(100,107);
context.closePath();
context.fill();
// Añadimos la sonrisa
context.strokeStyle = "#000000";
context.beginPath();
context.moveTo(70,110);
context.quadraticCurveTo(100,150,130,110);
context.quadraticCurveTo(100,150,70,110);
context.closePath();
context.stroke();
}
Este código, nos permite generar la cara amarilla que vemos en el “Hello World” que vemos debajo:
(Ver Imagen)
Mucho código pero muchas posibilidades.
17
Jun
aNieto2k hace 276 días en: Programacion, estandares, javascript, web, webdev
Doodle.js es una librería que nos permite trabajar fácilmente con el elemento <canvas /> y todo lo que ello conlleva. Con una estética similar a jQuery, dibujar sobre el lienzo que es <canvas /> es tan sencillo como esto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- CANVAS PARA IE -->
<!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->
<!-- SCRIPT DOODLE -->
<script src="./doodle-0.1.js" type="text/javascript"></script>
<!-- JAVASCRIPT -->
<script type="text/javascript">
function init() {
(function(oo) {
oo.canvas('#my_canvas');
var box = oo.rect({x:25, y:25,width:50, height:50, fill:"#ff0000"});
box.draw(); //draw a red box with initial parameters
box.modify({fill:'rgb(0,255,0)'}).translate(50,0).draw();
box.modify({fill:'purple'}).rotate(-45).draw();
box.modify({fill:'yellow'}).translate(50,0).scale(1.5).draw();
box.modify({fill:'blue'}).transform(1.5,0,0,1.5,50,0).draw();
})($doodle);
};
</script>
</head>
<body onload="javascript:init();">
<!-- ELEMENTO CONTENEDOR CANVAS -->
<canvas id="my_canvas" width="600" height="400">
<p>Error: El elemento canvas no está disponible para este navegador.</p>
</canvas>
</body>
</html>
Ejemplos
No os perdais algunos de los ejemplos disponibles en la página de la librería:
13
Jun
aNieto2k hace 280 días en: Asides, Programacion, estandares, javascript, web, webdev
Interesante artículo de Andrés Fernández en el que nos muestra la forma de optimizar y disfrutar de gradientes mediante Javascript. Para ello hace uso de <canvas />, un elemento bastante bien adoptado por todos los navegadores modernos y fácil de parchear para Internet Explorer. Áltamente recomendable. Gracias Jose Antonio.
11
Mar
aNieto2k hace 374 días en: Programacion, javascript, webdev
Detectar caras ya no es solo cosa de Google Images. Ahora tu mismo puedes implementarlo en tu sitio web usando Javascript y las propiedades de canvas.
¿Como funciona?
Para hacerlo funcionar únicamente necesitamos definir 2 ficheros en nuestro <head />.
<script type="text/javascript" src="dat.js"></script>
<script type="text/javascript" src="detector.js"></script>
El fichero dat.js indica la forma a detectar y el fichero detector.js es el que tiene la lógica del script capaz de detectar caras en cualquier foto.
Podemos detectar 1 o varias caras en las fotos, el proceso se convierte más lento dependiendo de cual elegimos (lógico).
1 cara
face_detect_one( document.getElementById("my_canvas") );
Multiples Caras
face_detect_multi( document.getElementById("my_canvas") , progress_callback, result_callback );
function progress_callback( steps_completed, total_steps){
....
}
Respuesta
En la respuesta que las funciones nos devuelve obtenemos los valores de un rectángulo en el que contendremos la cara de la persona.
var my_canvas = document.getElementById("my_canvas");
var result = face_detect_one( my_canvas );
if (result) draw_rect(result, my_canvas);
function draw_rect(r, my_canvas){
var canvas_context = my_canvas.getContext("2d");
canvas_context.strokeRect( r.x, r.y, r.w, r.w );
}
18
Dic
aNieto2k hace 457 días en: Programacion, estandares, javascript, web, webdev
Pixastic es una librería desarrollada en Javascript con la que será posible hacer un Photoshop Online en tu propia web. Usando las propiedades del elemento <canvas /> que únicamente tienen disponible los navegadores como Firefox 2+, Opera 9.5+ y Safari/WebKit con la ultima versión disponible.
Esta librería nos permite aplicarle efectos a nuestras imagenes en tiempo real con una velocidad similar a la que nos ofrecen las herramientas de escritorio. Nos han montado un ejemplo para que podamos verlo funcionando y la verdad es que me ha sorprendido la velocidad con la que se aplicaban los efectos.
var img = document.getElement("myImage"); // get the image element
if (img.complete) { // make sure the image is fully loaded
Pixastic.process(
img,
"brightness", // brightness/contrast adjustment
{ // options object
"brightness" : 60, // set brightness option value to 60
"contrast" : 0.5, // set contrast option value to 0.5,
"rect" : { // apply the effect to this region only
"left" : 100,
"right" : 100,
"width" : 200,
"height" : 150
}
}
)
}
Documentación / Descargar
5
Dic
aNieto2k hace 470 días en: Programacion, javascript, webdev
Técnicamente no es LOGO, pero se le parece. CanvasTurtle es un desarrollado basado en Javascript para manipular elementos canvas y así simular un sistema que inicialmente recuerda el antiguo lenguaje LOGO.
Los tiempos cambian y el pequeño triangulo de LOGO a conseguido mejorar su resolución dejando ver las patitas de la tortuga
