Atractores, caos, sistemas complejos y mariposas

Siempre nos sentimos más cómodos con aquello que creemos que conocemos; con aquello que ya sabemos y no puede cambiar. Pero en en realidad, siendo un poco puristas, la estabilidad no existe. Ningún sistema en la naturaleza (sistemas reales, no artefactos matemáticos imaginarios) es estable; en el sentido de que no va a permanecer inalterado para siempre. No existe nada en este universo, que haya detenido su evolución nunca.

En la práctica, cuando hacemos ciencia y estudiamos sistemas “aislados”, rebajamos considerablemente nuestros requisitos de estabilidad; y decimos que un sistema ha alcanzado la estabilidad cuando su evolución cesa durante “un tiempo lo suficientemente largo”.

Sí, es tan poco riguroso como suena…

Pero lo divertido está en la incertidumbre, y una vez perdemos el miedo a lo desconocido podemos empezar a disfrutar de ella. Veamos algunos tipos de sistemas con ejemplos sencillos y clasifiquémoslos:

Sistemas Simples

Un ejemplo de sistema simple es una taza de café caliente suspendida en una atmósfera de aire. Poco a poco la taza irá enfriándose hasta alcanzar la temperatura ambiente del aire (el sistema alcanzará la estabilidad). En sus inicios, el sistema no es estable, pero nos sentimos casi tan cómodos con estos sistemas como con los estables porque es fácil predecir su evolución.

Te-gustaria-una-deliciosa-taza-de-cafe-con-canela-coffee

Sistemas Complejos

Un sistema complejo es un sistema cuya evolución es muy difícil de determinar; ya que existen factores no evidentes que afectan de forma dramática a cómo evoluciona el sistema. Un ejemplo es el campo gravitatorio, cuando hay varios cuerpos en juego y en movimiento; es difícil calcular la evolución de las trayectorias.

Para verlo mejor; he escrito un pequeño script para hacer simulaciones (del que hablaremos después). En la primera simulación tendréis 6 puntos negros que representan cuerpos “fijos” que atraen a otro “móvil” cuya trayectoria queda marcada por una estela azul. La simulación es infinita y no se estabiliza nunca (aunque durante un rato el objeto móvil se salga de la pantalla, tarde o temprano volverá).



comenzar simulación

Para empezar la simulación haced clic en “empezar simulación” (podéis reiniciarla cuando queráis). ¿Podéis calcular mentalmente su trayectoria (la evolución del sistema)? Entonces, es un sistema complejo. Otro ejemplo de sistema complejo es el clima de la tierra.

rainwindow

Sistemas Caóticos

Un sistema caótico es un sistema, que además de complejo, cumple la siguiente propiedad fundamental: un mínimo y casi insignificante cambio en las condiciones iniciales hace que el sistema evolucione de forma radicalmente distinta.

Para ilustrarlo vamos a hacer una simulación como la anterior; pero esta vez, habrá tres objetos móviles (uno rojo, uno verde y uno azul). Los tres objetos estarán en la misma posición, pero con una diferencia de 0.001 píxeles. Esta diferencia, provocará que con el tiempo, los tres objetos sigan trayectorias completamente distintas.

comenzar simulación

La vida es un propio ejemplo de sistema caótico. A veces pensamos que ya hemos vivido situaciones similares a las que estamos viviendo en un momento dado; y creemos que la experiencia pasada nos puede servir, pensando que ya sabemos qué va a ocurrir. Pero en realidad, cualquier mínimo detalle puede ser determinante para que la evolución de sucesos sea completamente distinta.

De los sistemas caóticos como este viene “la teoría del caos”; y la famosa metáfora de la mariposa que bate sus alas y cambia radicalmente los acontecimientos futuros en una suerte de efecto dominó cuyas consecuencias se van amplificando. Es una forma de decir; que el más mínimo detalle es crucial para la evolución del sistema.

NOTA: Los sistemas caóticos, a pesar de su nombre, no son azarosos en absoluto; son completamente deterministas.

4057

Atractores

Los atractores, como mención importante (fuera de los propósitos de esta entrada), son sistemas complejos y o caóticos, pero, en los que las trayectorias próximas permanecen siempre próximas, siento permisivos con ciertas perturbaciones en sus condiciones iniciales y evolución.

A todos os sonará el más famoso de todos: el atractor de Lorenz (prometo dedicar una entrada para hablar exclusivamente de atractores ;))

xz

El código

Propongo como ejercicio escribir un sistema de simulación como el que hemos usado en esta entrada. Lo único un poco más complicado (sigue siendo sencillo) es hacer las estelas que se van difumando.

Si queréis la solución directa, mi código, con una inicialización de ejemplo que ejecuta una simulación con 25 atractores y 150 objetos móviles (todos aleatorios) es:

function Attractor(canvas)
{
	//-[utils]---------------- *********************************************
	function randChannel()  {return Math.floor(Math.random()*255)}
	function randPosition() {return [Math.random()*canvas.width,Math.random()*canvas.height]}
	//-[balls]---------------- *********************************************
	function Ball(x, y, mass, rgb)
	{
		//-{init}
		this.x=x || randPosition()[0];
		this.y=y || randPosition()[1];
		this.mass=mass || 4;
		this.vx=0;
		this.vy=0;
		this.radius=this.mass/2;
		if(rgb)
			this.color="rgb("+rgb[0]+","+rgb[1]+","+rgb[2]+")";
		else
			this.color="rgb("+randChannel()+","+randChannel()+","+randChannel()+")";
		balls.push(this);
		//-{methods}
		this.move=function()
		{
			var tmp_vx=0;
			var tmp_vy=0;
			for(var i=0;i<acelerators.length;i++)
			{
				var dx=acelerators[i].x-this.x;
				var dy=acelerators[i].y-this.y;
				var theta=Math.atan2(dy,dx);
				var mod=Math.sqrt(Math.pow(dx,2)+Math.pow(dy,2));
				var force=Math.min(acelerators[i].force/Math.pow(mod,2),3);
				tmp_vx+=force*Math.cos(theta);
				tmp_vy+=force*Math.sin(theta);
			}
			this.vx+=tmp_vx/this.mass;
			this.vy+=tmp_vy/this.mass;
			this.x+=this.vx;
			this.y+=this.vy;
		}
		this.render=function()
		{
			current_ctx.save();
			current_ctx.fillStyle=this.color;
			current_ctx.beginPath();
			current_ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, false);
			current_ctx.closePath();
			current_ctx.fill();
			current_ctx.restore();
		}
	}
	//-[acelerator]---------------- *********************************************
	function Accelerator(x, y, force)
	{
		//-{init}
		this.x=x || randPosition()[0];
		this.y=y || randPosition()[1];
		this.force=force || 200;
		this.radius=this.force/50;
		acelerators.push(this);
		//-{methods}
		this.render=function()
		{
			ctx.save();
			ctx.fillStyle="#000";
			ctx.beginPath();
			ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, false);
			ctx.closePath();
			ctx.fill();
			ctx.restore();
		}
	}
	//-[attractor]----------- *********************************************
	//-[setup]----------------
	var ctx=canvas.getContext("2d");	//main context
	var balls=[];						//balls array
	var acelerators=[];					//acelerators array
	//-[wake]-----------------
	var wake_resolution=20; //number of canvas for the wake
	var ctx_buffer=[];      //context array for the wake
	var current_ctx=0;		//current context object
	var arrow=0;			//pointer to the current context
	var wake_time=2000/wake_resolution; //5 seconds of wake
	var last_timestamp=0;	//last time of buffer change
	var frames=0;			//frame count
	//-[init]-----------------
	for(var i=0;i<wake_resolution;i++)
	{
		var tmp_canvas=document.createElement("canvas");
		tmp_canvas.width=canvas.width;
		tmp_canvas.height=canvas.height;
		ctx_buffer[i]=tmp_canvas.getContext("2d");
	}
	current_ctx=ctx_buffer[0];
	//-[run]------------------
	this.run=function()
	{
		frames++;
		ctx.clearRect(0,0,canvas.width,canvas.height);
		//chance of change current context
		var now=Date.now();
		if(now-last_timestamp>wake_time)
		{
			last_timestamp=now;
			current_ctx=ctx_buffer[(++arrow%ctx_buffer.length)];
			current_ctx.clearRect(0,0,canvas.width,canvas.height);
		}
		//render balls at current context
		for(var i=0;i<balls.length;i++)
		{
			balls[i].move();
			balls[i].render();
		}
		//composition of the wake at main context
		var step_alpha=1/ctx_buffer.length;
		for(var i=1;i<=ctx_buffer.length;i++)
		{
			var tmp_ctx=ctx_buffer[(arrow+i)%ctx_buffer.length];
			ctx.save();
			ctx.globalAlpha=i*step_alpha;
			ctx.drawImage(tmp_ctx.canvas,0,0);
			ctx.restore();
		}
		//render acelerators at main context
		for(var i=0;i<acelerators.length;i++)
			acelerators[i].render();
	}
	//-[stop]-----------------
	this.stop=function()
	{
		clearInterval(this.id_int); //external setter
	}
	//-[classes]-----------------
	this.Ball=Ball;
	this.Accelerator=Accelerator;
}

//gogogo!
(function gogogo()
{
	var attractor=new Attractor(canvas);
	for(var i=0;i<25;i++)
		new attractor.Accelerator();
	for(var i=0;i<150;i++)
		new attractor.Ball();
	attractor.id_int=setInterval(function(){attractor.run()},60/1000); //run at 60 fps
}());

Más simulaciones

Sistema aleatorio con 10 atractores y 20 objetos móviles:

reiniciar simulación aleatoria

Dedicatoria

Esta entrada está dedicada a Virgy; que me inspiró para escribir el simulador tras una conversación; y que finalmente he aprovechado (al margen de su fin original) para hacer esta entrada 🙂


Si te gusta esta entrada... compártela! 😉
Tweet about this on TwitterShare on Facebook0Share on Google+0Share on Tumblr0Pin on Pinterest0Share on LinkedIn0Share on Reddit0

No hay comentarios :(

Trackbacks/Pingbacks

  1. Lo mejor de la semana sobre desarrollo web en español vol. 43 | ADWE - […] Atractores, caos, sistemas complejos y mariposas […]

Responder

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

Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.