Función coseno y variantes

Este artículo continúa la serie dedicada a la representación geométrica en el plano usando JavaScript. Los otros artículos son:

Representaremos las siguientes funciones:

* f(x)= cos(x)
* f(x)= -cos(x)
* f(x)= 2cos(x)
* f(x)= -3cos(x)
* f(x)= 1/2cos(x)
* f(x)= cos(2x)
* f(x)= cos(-2x)
* f(x)= cos(x+Pi/2)
* f(x)= 1/3cos(x+Pi/2)
* f(x)= cos(x-Pi/4)
* f(x)= 2cos(x+Pi/3)
* f(x)= cos[2(x+Pi/2)]
* f(x)= cos[2(x-Pi/4)]
* f(x)= 2cos(x-Pi/2)+1
* f(x)= -1+cos(x)
* f(x)= 2+cos(x)
* f(x)= 2+cos(x+Pi/2)
* f(x)= -1+cos(x+Pi/3)

Indice.

1.- Representación de 18 funciones coseno.

El contenedor de los ejes es 400x400 (pxs). El origen es el punto (20,200) y cada unidad es de 55 pxs. El diferencial es 0.05, es decir, representamos 20 puntos de las gráficas por unidad.

Todas las funciones están definidas de la siguiente manera: x: [0,2.Pi] --> f(x): R

Haga click en las funcines de la lista.


2.- Código utilizado.

Esta es una página que implementa las funciones dibujaFuncionCoseno(f1, f2, f3, s1, s2), dibujaPunto(m, n,txt) y ejes_cartesianos(origenX, origenY, pixelunid). El código *.css no es trivial y debería modificarse con sumo cuidado.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>
18 funciones coseno
</title>
<style type="text/css">
a{ text-decoration:none;}DIV.contenedorejes { background-color : black; width: 400; height : 400;clear : left; position : relative; left : 0px; top : 0px;} DIV.ejeX{ width : 2px; height : 3px; clear : left; position : absolute; font-size : 0px; background-color : white; } DIV.ejeXcompleto{ clear : left; position : absolute; font-size : 0px; background-color : white; } DIV.ejeY{ width : 3px; height : 2px; clear : left; position : absolute; font-size : 0px; background-color : white; } DIV.ejeYcompleto{ clear : left; position : absolute; font-size : 0px; background-color : white; } DIV.punto{ width : 3px; height : 3px; clear : left; position : absolute; font-size : 0px; background-color : blue; } DIV.texto{ clear : left; position : absolute; font-size : 11px; color :red; }
</style>
<script type="text/javascript">
// ancho y alto del contenedor
var ancho = 400;
var alto = 400;
var x0 = 0;
var y0 = 0;
var unid_long;
var diferencial = 0.05;
if(navigator.appVersion.indexOf("MSIE") != -1) var IE = true;
function ejes_cartesianos(origenX,origenY,pixelunid){
document.getElementById('contenedorejes').innerHTML = "";
// origenes de coordenadas
x0 = origenX;
y0 = origenY;
// longitud unidades
unid_long = pixelunid;
// numero de unidades eje x+
var num_unids_x_p = (ancho-x0)/unid_long;
// numero de unidades eje x-
var num_unids_x_n = x0/unid_long;
// numero unidades eje y+
var num_unids_y_p = y0/unid_long;
// numero unidades eje y-
var num_unids_y_n = (alto-y0)/unid_long;
// EJES
// EJE X completo
x = 0;
y = y0;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeXcompleto");
else punto.setAttribute("class","ejeXcompleto");
punto.style.left = x + "px";
punto.style.top = y + "px";
punto.style.width = ancho + "px";
punto.style.height = 1 + "px";
document.getElementById('contenedorejes').appendChild(punto);
// eje x divisiones
// eje x +
for(i=0;i<=num_unids_x_p;i++){
x = x0 + i*unid_long;
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('contenedorejes').appendChild(punto);
}
// eje x-
for(i=0;i<=num_unids_x_n;i++){
x = x0 - i*unid_long;
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('contenedorejes').appendChild(punto);
}
// EJE Y
// EJE Y completo
x = x0;
y = 0;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeXcompleto");
else punto.setAttribute("class","ejeXcompleto");
punto.style.left = x + "px";
punto.style.top = y + "px";
punto.style.width = 1 + "px";
punto.style.height = alto + "px";
document.getElementById('contenedorejes').appendChild(punto);
// eje y divisiones
// eje y+
for(i=0;i<=num_unids_y_p;i++){
x = x0;
y = y0 - i*unid_long;
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('contenedorejes').appendChild(punto);
}
// eje y-
for(i=0;i<=num_unids_y_n;i++){
x = x0;
y = y0 + i*unid_long;
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('contenedorejes').appendChild(punto);
}
}
function dibujaPunto(m,n,txt){
var xP = parseFloat(m);
var yP = parseFloat(-n);
x = x0 + xP*unid_long;
y = y0 + yP*unid_long;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","punto");
else punto.setAttribute("class","punto");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedorejes').appendChild(punto);
if(txt!= ""){
// el texto que acompaña a los puntos
var texto = txt;
textoPunto = document.createTextNode(texto);
divTexto = document.createElement("div");
if(IE) divTexto.setAttribute("className","texto");
else divTexto.setAttribute("class","texto");
divTexto.style.left = (x+3) + "px";
divTexto.style.top = (y+6) + "px";
divTexto.appendChild(textoPunto);
document.getElementById('contenedorejes').appendChild(divTexto);
}
}
function dibujaFuncionCoseno(f1,f2,f3,s1,s2){// puntos función cos
init();
for (i=0;i<=(2*Math.PI); i += diferencial){
x = i;
y = f1*Math.cos(f2*(f3*i+s1)) + s2;
dibujaPunto(x,y,"");
}
}
function init(){
ejes_cartesianos(20,200,55);
dibujaPunto(Math.PI/2,0,'Pi/2');
dibujaPunto(Math.PI,0,'Pi');
dibujaPunto(3*Math.PI/2,0,'3Pi/2');
dibujaPunto(2*Math.PI,0,'2Pi');
dibujaPunto(0,1,'1');
dibujaPunto(0,0,'O');
}
</script>
</head>
<body onload="init()" style="left:10px;top:0px;">
<table width="100%">
<tr>
<td>
<p style="font-size:11px;">
<a href="javascript:dibujaFuncionCoseno(1,1,1,0,0)">
<i>f(x)= cos(x)</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(-1,1,1,0,0)">
<i>f(x)= -cos(x)</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(2,1,1,0,0)">
<i>f(x)= 2cos(x)</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(-3,1,1,0,0)">
<i>f(x)= -3cos(x)</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(1/2,1,1,0,0)">
<i>f(x)= 1/2cos(x)</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(1,1,2,0,0)">
<i>f(x)= cos(2x)</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(1,1,-2,0,0)">
<i>f(x)= cos(-2x)</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(1,1,1,Math.PI/2,0)">
<i>f(x)= cos(x+Pi/2)</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(1,1/3,1,Math.PI/2,0)">
<i>f(x)= 1/3cos(x+Pi/2)</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(1,1,1,-Math.PI/4,0)">
<i>f(x)= cos(x-Pi/4)</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(1,2,1,Math.PI/3,0)">
<i>f(x)= 2cos(x+Pi/3)</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(1,2,1,Math.PI/2,0)">
<i>f(x)= cos[2(x+Pi/2)]</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(1,-2,1,-Math.PI/4,0)">
<i>f(x)= cos[2(x-Pi/4)]</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(2,1,1,-Math.PI/2,1)">
<i>f(x)= 2cos(x-Pi/2)+1</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(1,1,1,0,-1)">
<i>f(x)= -1+cos(x)</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(1,1,1,0,2)">
<i>f(x)= 2+cos(x)</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(1,1,1,Math.PI/2,2)">
<i>f(x)= 2+cos(x+Pi/2)</i></a>
<br>
<a href="javascript:dibujaFuncionCoseno(1,1,1,Math.PI/3,1)">
<i>f(x)= -1+cos(x+Pi/3)</i></a>
</p>
</td>
<td>
<div id="contenedorejes" class="contenedorejes">
</div>
</td>
</tr>
</table>
</body>
</html>


Menú

Categorías


Lo Último

  Mis programas  Matemáticas  Geometría  Programación WEB  Flash MX  Variados
Dedicado a ANGELES y a RAMON.
Realizado por José Antonio López Lorenzo (JALL)
Vigo - Galicia - España -Europa