Okashini

Un fractal, como muchos sabréis, es una estructura que se repite a diferentes escalas. El fractal más conocido es el de Mandelbrot, estudiado por el matemático polaco, ya fallecido, Benoît Mandelbrot, recientemente fallecido, en la década de los 70 del siglo pasado. Mandelbrot pensaba que lo que él estaba estudiando no interesaba a nadie, ya que todos los demás matemáticos se centraban en estructuras "suaves y regulares". Para definir estas nuevas estructuras acudió a un diccionario de latín, hasta encontrar un adjetivo que describía las piezas irregulares de una piedra que ha sido lanzada: «fractus, fracta, fractum».

Los fractales no son sólo cosa de las matemáticas, sino que aparecen en muchos lugares de la naturaleza, como en las hojas de los helechos, en las ramas de los árboles, en el brécol, etc. Un caso extraordinario de fractal lo podemos encontrar en el Romanescu, una mezcla de brécol y coliflor.

[latexpage] Matemáticamente, el conjunto de Mandelbrot se define como:

• Tenemos c, un número complejo cualquiera.
• Tenemos la sucesión por inducción siguiente $\left \{ \begin{matrix} z_0 & = & 0 \qquad \ & \qquad \\ z_{n+1} & = & z_n^2 + c & \end{matrix} \right.$

Si la sucesión queda acotada, podemos decir que el punto c es parte del conjunto.

Pero dejemos las matemáticas y vamos a ver como se ve el conjunto gráficamente. Lo he generado utilizando jQuery y HTML5. Podéis aumentarlo para ver la autosimilitud haciendo clic encima. Es probable que no lo podáis leer desde el lector RSS o utilizando un navegador antiguo.

Tu navegador no es compatible con Canvas, deberías utilizar uno más moderno.

Para acabar, la entrevista de Benoît en el programa Redes

Como siempre, dejo el código para los programadores curiosos

[cc lang="js"] // Clase timer para contar el tiempo de ejecucion var timer = { time: 0, now: function(){ return (new Date()).getTime(); }, start: function(){ this.time = this.now(); }, since: function(){ return this.now()-this.time; } } // Variables globales // Variables del tamaño de Canvas var width = 500; var height = 500; // Precisión de los pixels (1 es lo más preciso) var pixels = 1; // Coordenadas iniciales var xmin = -2; var xmax = 1; var ymin = -1.5; var ymax = 1.5; // Stride var stridex = ((xmax - xmin) / height) * pixels; var stridey = ((ymax - ymin) / width) * pixels; // Aumentos var zoom = 4; var aumentos = 0; // Iteraciones var maxIt = 200; function render() { timer.start(); // Cargamos canvas // Obtenemos el objeto Canvas var canvas = document.getElementById('canvas'); var context = false; // Obtenemos el contexto 2d if(canvas && canvas.getContext('2d')) { context = canvas.getContext('2d'); } if(context){ // Si existe empezamos a dibujar // Cambiamos el tamaño, por si este ha cambiado canvas.width = width; canvas.height = height; for(var x0 = xmin, i = 0; i < height; i += pixels, x0 += stridex){ for(var y0 = ymin, j = 0; j < width; j += pixels, y0 += stridey) { var x = 0; var y = 0; var it; for(it = 0; x*x + y*y < 4 && it < maxIt; ++it) { var xtemp = x*x - y*y + x0; y = 2*x*y + y0; x = xtemp; } if(it >= maxIt) { context.fillStyle = "rgba(0,0,0,1)"; context.fillRect(i,j,pixels,pixels); } else { context.fillStyle = "rgba(0,0,0," + it / maxIt + ")"; context.fillRect(i,j,pixels,pixels); } } } } return timer.since(); } $(document).ready(function() { var since = render(); $("#mandInfo").append("Renderizado en " + since + " ms
"); $("#canvas").click(function(e){ // Obtengo las coordenadas del clic dentro de canvas var x = Math.floor((e.pageX-$("#canvas").offset().left)); var y = Math.floor((e.pageY-$("#canvas").offset().top)); // Las transformo a las coordenadas actuales var realx = xmin + x * stridex; var realy = ymin + y * stridey; // Pongo los nuevos límites de las coordenadas var temp_xmin = xmin; var temp_xmax = xmax; var temp_ymin = ymin; var temp_ymax = ymax; xmin = realx - (temp_xmax - temp_xmin) / zoom; xmax = realx + (temp_xmax - temp_xmin) / zoom; ymin = realy - (temp_ymax - temp_ymin) / zoom; ymax = realy + (temp_ymax - temp_ymin) / zoom; // Recalculo los Strides stridex = ((xmax - xmin) / height) * pixels; stridey = ((ymax - ymin) / width) * pixels; ++aumentos; since = render(); $("#mandInfo").append("Aumentado en " + since + " ms
"); }); }); [/cc] Para que funcione, en el HTML hay que importar la librería jQuery. Después necesitamos el canvas de HTML5: [cci lang="html"][/cci] (tiene que tener identificador canvas). Por último y opcionalmente, un div donde se muestra el tiempo de renderizado: [cci lang="html"][/cci].