17/02/09 (Hace 564 días)

0 Comentarios

Movimiento Ondulatorio con JavaScript

Hace ya unas semanas mi compañero de fatigas y uno de mis grandes comentaristas del blog XD Alberto, me metió en la cabeza la fricada de representar el movimiento ondulatorio con JavaScript. En un principio pensé que estaría jodidillo el asunto pero como veréis a continuación es bastante sencillo.

Onda vaaaaaaaaaaaaaaaa!:

Lanzar la onda!

Para conseguir pintar nuestra onda simplemente nos servimos de la ecuación del movimiento ondulatorio:

y(x, t) = A * cos(wt - kx)

donde:

A =
Amplitud
w =
frecuencia angular
t =
tiempo
k =
Número de onda
x =
Posición sobre el eje x

A continuación os pongo el codiguillo JavaScript que utilizo para pintar la onda por si os sirve de ayuda

Código JS

var movimiento = "";
var n_posicion = 0;
var j = 0;
var longitud = 36;

/* CONFIGURACION DE LA ONDA */
var caracter = "*"; //caracter con el que se representa la onda
var xo = 0 // valor inicial de la posición de la onda sobre el eje x
var yo = 80; // valor inicial de la posición de la onda sobre el eje y
var v = 400; // velocidad de la onda
var A = 60; // Amplitud
var T = 18; // Periodo
var longitud_onda = 10; // Longitud de onda
/* FIN CONFIGURACION DE LA ONDA */


var w = ( 2 * 3.14 ) / T;
var k = ( 2 * 3.14 ) / longitud_onda;
$("li#pos0").css({ left: yo + "px" });

function movimiento_armonico(){
	$(document).ready(function(){
		movimiento = movimiento + "<li id='pos"+ n_posicion + "'>" + caracter + "</li>";
		$("#onda").html(movimiento);		
		
		for (i=0; i < n_posicion; i++)
		{
			x = xo + i
			t = i;
			y = yo + (A * Math.cos((k * x) - (w * t)))			
	
			$("li#pos" + i).css({ top: y + "px" });
			$("li#pos" + i).css({ left: x + "px" });
		}
		n_posicion++;
		j++;
		if(j == longitud + 1)
			clearInterval(onda);
		});
		$("#onda li:last").hide();	
}

onda = setInterval("movimiento_armonico()", v);
Validaciones con jQuery
Errores CSS : wiki-css

¿Tienes alguna duda, crítica o sugerencia?

Envía tu comentario