Dibujo efímero

Experimentos con HTML5 Canvas

Todos, en algún momento, deberíamos trabajar en algún proyecto paralelo. Artículos como A Guide To Personal Side Projects (publicado en Smashing Magazine) nos recuerdan sus beneficios, tanto personales como para nuestra carrera profesional. En el caso de un programador web, estos proyectos representan una oportunidad para estudiar y practicar con nuevas tecnologías, oportunidades que no suelen presentarse en nuestro trabajo diario.

En mi caso decidí experimentar con Canvas 2D. El resultado final se puede ver en http://raohmaru.com/lab/js/erdt/.

El elemento Canvas es una zona dentro de nuestra página HTML que renderiza en un mapa de bits, y que con APIs de JavaScript podemos dibujar en él (como las APIs Canvas 2D o WebGL). El objetivo original del experimento era aprender la API de Canvas 2D y empezar a dibujar cuadrados, círculos e imágenes, y finalmente acabó en un proyecto de arte efímero donde el usuario puede crear dibujos únicos que jamás podrá volver a repetir con exactitud.

Chromatic Big Bang
Un colorido Big Bang creado con ERDT.

No voy a poner mucho detalle en cómo he desarrollado el proyecto; hay multitud de tutoriales sobre como trabajar con Canvas 2D, baste decir que todos empiezan con

var canvas = document.getElementById('mycanvas'),
    ctx;
if(canvas.getContext){
    ctx = canvas.getContext('2d');
    // Let the magic begin
} else {
    // canvas-unsupported code here
}

(Para los curiosos el código de la aplicación se encuentra en mi repositorio público de GitHub.)

Objetivos adicionales

O escrito de otra manera, ¿qué me ha permitido poner en práctica el proyecto?

Gulp

Soy bastante fan de Grunt como automatizador de tareas (concatenar archivos, comprimir, analizar código, etc.), pero esta vez quería dar una oportunidad a Gulp. Las dos diferencias principales con Grunt son que Gulp utiliza streams de Node.js, con lo que el flujo de datos se manipula en memoria y solo se guarda en disco una vez (con lo que se consigue más velocidad de proceso).

La segunda diferencia es que se escribe más código (frente al objeto de configuración de Grunt).

var gulp   = require('gulp'),
    jshint = require('gulp-jshint');
    
gulp.task('jshint', function() {
    gulp.src('js/**/*.js')
        .pipe(jshint());
});

gulp.task('default', ['jshint']);
module.exports = function(grunt) {

grunt.initConfig({
    jshint: {
        all: ['js/**/*.js']
    }
});

grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['jshint']);

};

Sin querer empezar un debate, me siento mucho más cómodo con la sencillez y claridad del archivo de configuración de Grunt que con las funciones enlazadas de Gulp.

No frameworks JavaScript

Una de las restricciones auto-impuestas fue la de no poder utililizar ninguna librería o framework JavaScript. No jQuery, no Angular, Backbone, Ember, XYZ.js…

Lo anterior enumerado ha supuesto un gran avance para el desarrollo web en cuestión, y para JavaScript en particular. Pero también nos hacen olvidar las bases de JavaScript y como resolver problemas de manera «nativa» (en contraposición al uso de librerías y frameworks). Si sirve de comparación, es como ir a una casa rural perdida en el monte, sin cobertura móvil, conexión a internet o TV. ¿Eso de allá con cubiertas y hojas se llama libro?

Compatibilidad

Cuando se empieza un proyecto web (ya sea un website o una webapp), la primera pregunta que debemos hacernos es: ¿qué navegadores queremos dar soporte?. Aunque en realidad la pregunta subyacente es: ¿a qué versiones de Internet Explorer queremos dar soporte?

A principios de 2016 vimos como Microsoft cesaba el soporte a Internet Explorer 8, 9 y 10. Pero esto no quiso decir que los clientes y usuarios dejarán de utilizarlos de súbito. Y menos los clientes de proyecto.

Por ese motivo, siendo un proyecto personal, me he dado el gustazo de preocuparme sólo de IE11 y siguientes (bienvenidos flexbox, @keyframes, strict mode…).
(La compatibilidad con Firefox, Chrome, Safari, Opera va implícita.)

Conclusiones

Empezar un proyecto personal requiere esfuerzo y tiempo, pero la experiencia merece la pena. Espero que este sea el primero de muchos proyectos o experimentos personales que consiga llevar a cabo

Por otra parte animo al que esté leyendo estas líneas a que empiece ese proyecto que le ronda por la cabeza, que en el proceso intente cosas nuevas y se ponga objetivos asumibles.

Happy coding!

Enlaces

Publicado por

Raúl Parralejo

Raúl Parralejo

Frontend developer, especializado en el desarrollo de aplicaciones web y juegos para móvil y escritorio.

2 comentarios sobre “Experimentos con HTML5 Canvas”

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *