Representacion de funciones trigonométricas
Nos ocupamos en este artículo de la representación gráfica de las funciones trigonométricas básicas (seno, coseno y tangente) en puro y duro JavaScript. Según la costumbre de la casa, presentamos algunos ejemplos (para que se vea el script en funcionamiento) y el código correspondiente.
A mi parecer, los aspectos más destacables son:
* Las gráficas se calculan en tiempo real, es decir, al cargarse la pagina en el navegador.
* El script es válido para los navegadores de última generación ( IE 5.5+, Mozilla/Firefox, Opera 7+).
* En los ejemplos se utilizan tres escalas (1 unidad = 50px; 1 unidad = 100px; 1 unidad = 150px). Pero usted podría elegir cualquier otra con una única limitación: si elige una escala muy pequeña (por ejemplo, 1 unidad = 30px) es muy posible que las prestaciones de su navegador se resientan notablemente. En el caso de Mozilla/Firefox es seguro que se cuelge. La explicación está en el número de puntos a representar, que es inversamente proporcional a la escala elegida. Y ese número parece estar limitado superiormente para cada navegador. El límite para Mozilla/Firefox es más pequeño que el de los otros dos navegadores mencionados.
* Se calculan los valores de las funciones para 10 valores de la variable independiente por unidad, en otras palabras, con un diferencial de x de 0,1 (dx = 0.1). La modificación de este valor puede afectar del mismo modo que en el anterior punto. Si usted decide calcular 20 valores por unidad, por ejemplo, compruebe que su navegador es capaz de hacerlo. Para modificar el diferencial busque los bucles for finales. Por ejemplo, i += 0.2 calcularía 5 valores/unidad o i += 0.5 calcularía 2 valores/unidad
* En el códico de estilo, *.css, no modifique los valores position : absolute; font-size : 0px; porque los resultados son imprevisibles. Por lo demás se puede experimentar con los otros parámetros. Mencionar de pasada que establecer font-size : 0px; es la manera de conseguir que IE sea capaz de representar capas (div) de alturas (height) con valores de 1 píxel en adelante.
* Los valores configurables del script están situados al comienzo del mismo. Son: alto y ancho del contenedor del la gráfica; la posición en píxeles del origen de coordenadas (tenga en cuenta que para JavaScript, el origen de coordenadas es el extremo superior izquierdo del contenedor de la gráfica); el número de píxeles por unidad se establecen en las cuatro variables siguientes unid_long_x_p, unid_long_x_n, unid_long_y_p, unid_long_y_n que generalmente valen lo mismo. Usted puede darles valores diferentes si busca efectos más artísticos que científicos.
* La rutina que dibuja los ejes de coordenadas puede ser reutilizada para otras posibles representaciones gráficas geométricas.
* Representar las restantes funciones (cosencante, secante y cotangente) es relativamente fácil además de un ejercicio recomendable y entretenido. Pero queda para el lector. En cualquier caso, tenga en cuenta el problema de la divisibilidad por cero.
Indice.
1. Representación de las funciones trigonométricas.
2. Código utilizado.
LEER EL ARTICULO
salu2
A mi parecer, los aspectos más destacables son:
* Las gráficas se calculan en tiempo real, es decir, al cargarse la pagina en el navegador.
* El script es válido para los navegadores de última generación ( IE 5.5+, Mozilla/Firefox, Opera 7+).
* En los ejemplos se utilizan tres escalas (1 unidad = 50px; 1 unidad = 100px; 1 unidad = 150px). Pero usted podría elegir cualquier otra con una única limitación: si elige una escala muy pequeña (por ejemplo, 1 unidad = 30px) es muy posible que las prestaciones de su navegador se resientan notablemente. En el caso de Mozilla/Firefox es seguro que se cuelge. La explicación está en el número de puntos a representar, que es inversamente proporcional a la escala elegida. Y ese número parece estar limitado superiormente para cada navegador. El límite para Mozilla/Firefox es más pequeño que el de los otros dos navegadores mencionados.
* Se calculan los valores de las funciones para 10 valores de la variable independiente por unidad, en otras palabras, con un diferencial de x de 0,1 (dx = 0.1). La modificación de este valor puede afectar del mismo modo que en el anterior punto. Si usted decide calcular 20 valores por unidad, por ejemplo, compruebe que su navegador es capaz de hacerlo. Para modificar el diferencial busque los bucles for finales. Por ejemplo, i += 0.2 calcularía 5 valores/unidad o i += 0.5 calcularía 2 valores/unidad
* En el códico de estilo, *.css, no modifique los valores position : absolute; font-size : 0px; porque los resultados son imprevisibles. Por lo demás se puede experimentar con los otros parámetros. Mencionar de pasada que establecer font-size : 0px; es la manera de conseguir que IE sea capaz de representar capas (div) de alturas (height) con valores de 1 píxel en adelante.
* Los valores configurables del script están situados al comienzo del mismo. Son: alto y ancho del contenedor del la gráfica; la posición en píxeles del origen de coordenadas (tenga en cuenta que para JavaScript, el origen de coordenadas es el extremo superior izquierdo del contenedor de la gráfica); el número de píxeles por unidad se establecen en las cuatro variables siguientes unid_long_x_p, unid_long_x_n, unid_long_y_p, unid_long_y_n que generalmente valen lo mismo. Usted puede darles valores diferentes si busca efectos más artísticos que científicos.
* La rutina que dibuja los ejes de coordenadas puede ser reutilizada para otras posibles representaciones gráficas geométricas.
* Representar las restantes funciones (cosencante, secante y cotangente) es relativamente fácil además de un ejercicio recomendable y entretenido. Pero queda para el lector. En cualquier caso, tenga en cuenta el problema de la divisibilidad por cero.
Indice.
1. Representación de las funciones trigonométricas.
2. Código utilizado.
LEER EL ARTICULO
salu2
Publicado por ja.lopez a las 9:19 | Matemáticas
| 
