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.
1.- Representación de las funciones trigonométricas..
Código de COLORES:
- Función SENO: f(x) = sin(x)
- Función COSENO: f(x) = cos(x)
- Función TANGENTE: f(x) = tg(x)
[No hay truco. Es 100% JavaScript.]
2.- Código JavaScript.
Este es el código de una de las páginas utilizadas en los ejemplos. Las otras dos son similares. Cambian únicamente en la escala (número de píxeles/unidad) utilizada.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Funciones Trigonometricas</title>
<style type="text/css">
body{background-color : black;}
DIV.contenedor {
position : relative;
left : 5px;
top : 5px;
}
DIV.ejeX{
width : 2px;
height : 3px;
clear : left;
position : absolute;
font-size : 0px;
background-color : red;
}
DIV.ejeY{
width : 3px;
height : 2px;
clear : left;
position : absolute;
font-size : 0px;
background-color : red;
}
DIV.ptsin{
width : 2px;
height : 2px;
clear : left;
position : absolute;
font-size : 0px;
background-color : white;
}
DIV.ptcos{
width : 2px;
height : 2px;
clear : left;
position : absolute;
font-size : 0px;
background-color : yellow;
}
DIV.pttg{
width : 2px;
height : 2px;
clear : left;
position : absolute;
font-size : 0px;
background-color : lime;
}
</style>
</head>
<body>
<div id="contenedor" class="contenedor">
</div>
<script type="text/javascript">
if(navigator.appVersion.indexOf("MSIE") != -1) var IE = true;
// ancho y alto del contenedor
var ancho = 500;
var alto = 500;
document.getElementById('contenedor').style.width = ancho;
document.getElementById('contenedor').style.height = alto;
// origenes de coordenadas
var x0 = 0;
var y0 = 250;
// longitud unidades x
var unid_long_x_p =50;
var unid_long_x_n =50;
// longitud unidades y
var unid_long_y_p =50;
var unid_long_y_n =50;
// numero de unidades eje x+
if (unid_long_x_p != 0){
var num_unids_x_p = (ancho-x0)/unid_long_x_p;
}
else num_unids_x_p = 0;
// numero de unidades eje x-
if (unid_long_x_n != 0){
var num_unids_x_n = x0/unid_long_x_n;
}
else num_unids_x_n = 0;
// numero unidades eje y+
if (unid_long_y_p != 0){
var num_unids_y_p = y0/unid_long_y_p;
}
else num_unids_y_p = 0;
// numero unidades eje y-
if (unid_long_y_n != 0){
var num_unids_y_n = (alto-y0)/unid_long_y_n;
}
else num_unids_y_n = 0;
// EJES
// EJE X
// eje x +
for(i=0;i<=num_unids_x_p;i++){
x = x0 + i*unid_long_x_p;
y = y0;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeX");
else punto.setAttribute("class","ejeX");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedor').appendChild(punto);
}
// eje x-
for(i=0;i<=num_unids_x_n;i++){
x = x0 - i*unid_long_x_n;
y = y0;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeX");
else punto.setAttribute("class","ejeX");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedor').appendChild(punto);
}
// EJE Y
// eje y+
for(i=0;i<=num_unids_y_p;i++){
x = x0;
y = y0 - i*unid_long_y_p;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeY");
else punto.setAttribute("class","ejeY");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedor').appendChild(punto);
}
// eje y-
for(i=0;i<=num_unids_y_n;i++){
x = x0;
y = y0 + i*unid_long_y_n;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeY");
else punto.setAttribute("class","ejeY");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedor').appendChild(punto);
}
// puntos función seno
for (i=0;i<num_unids_x_p; i += 0.10){
x = i*unid_long_x_p;
y = y0 - unid_long_y_p*Math.sin(i);
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ptsin");
else punto.setAttribute("class","ptsin");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedor').appendChild(punto);
}
// puntos función cos
for (i=0;i<num_unids_x_p; i += 0.10){
x = i*unid_long_x_p;
y = y0 - unid_long_y_p*Math.cos(i);
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ptcos");
else punto.setAttribute("class","ptcos");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedor').appendChild(punto);
}
// puntos función tg
for (i=0;i<num_unids_x_p; i += 0.10){
x = i*unid_long_x_p;
if(Math.cos(i) != 0){
yadd = Math.sin(i)/Math.cos(i);
y = y0 - unid_long_y_p*yadd;
if (y<= alto){
punto= document.createElement("div");
if(IE) punto.setAttribute("className","pttg");
else punto.setAttribute("class","pttg");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedor').appendChild(punto);
}
}
}
</script>
</body>
</html>
Autor: Jall
http://personal-de-jall.webcindario.com/math/func_trigonometricas.php
Usuarios que han visto este tema también han visto...
- Como ocultar la URL en la barra de estado
- Creador vínculo mailto anti SpamBots con JavaScript
- Reordenar lista mediante mootools con Javascript
- Lincar páginas a archivos JavaScript
- Evitar el Reenvío de Formularios con JavaScript
- Versión imprimible de este documento
- Enviar por e-mail este documento
