Utilizando o desenvolvemento matemático imos crear unha simulación informática. Imos poder ver como é a forma das clepsidras e o seu baleirado a través da simulación. Teremos, desta maneira, unha visión moi clara de como é a clepsidra por dentro. Para o desenvolvemento da aplicación imos usar HTML5, o que nos permitirá unha fácil difusión e publicación dos resultados a través de Internet. Os tres linguaxes que integran HTML5 son HTML, CSS e JAVASCRIPT. Usaremos tamén o API Canvas de HTML5 para crear a animación do baleirado.
Imos necesitar unha estrutura de cartafoles como a que se mostra na figura. Fai click co rato para examinala ben.
 |
| Eloi. Sitio Web. CC-BY-SA |
Páxina de entrada o sitio index.html
Para crear esta páxina teclearemos o seguinte código nun editor de texto plano, en Ubuntu o mousepad ou o gedit, en Windows o block de notas. Unha vez tecleado gardarémolo co nome index.html. Este arquivo index.html é a páxina de entrada ao noso sitio. Ao facer dobre click no arquivo, co rato, ábrese o navegador e lanza a nosa páxina web.<html>
<head>
<title>Animación</title>
<meta http-equiv='Content-Type' content='text/html;
charset=UTF-8' />
<link rel='stylesheet' type='text/css'
href='css/estilos.css'
media='screen'/>
</head>
<body>
<div>
<h1>ANIMACIÓN DE LAS CLEPSIDRAS</h1>
<p>As clepsidras tendán unha altura de 10cm e
un buraco para <br/>o
vaciado de 1mm na súa parte inferior. O facer click no
<br/> botón preguntarásenos polo tiempo de
vaciado.<br/>
Ao teclear un tempo o ordenador xérase a
clepsidra cuxo<br/>
perfil responda a ese tempo, según noso
modelo matemático,
<br/> e simulará o vaciado.</p>
<a href='animacion/animacion.html'>
<img src='imagen/boton.png' /></a>
</div>
</body>
</html>
Esta páxina enlaza a través da etiqueta:
<link rel=' stylesheet' type=' text/ css' href =' css/estilos. css'
media=' screen'/>
a folla de estilos estilos. css que se atopa no cartafol css gardada na mesma cartafol que contén a index.html; isto conséguese co atributo: href=' css/estilos. css'; é un exemplo do que se chama direccionamiento relativo. Para crear estilos. css escribimos nun editor de texto plano o seguinte código e gardámolo no cartafol css co nome estilos. css.
h1 {background-color:#000060;}
div {position:absolute;top:5%;left:20%; border-color:#64009e;
border-style:solid;border-width:10px;background-color:#00009b;}
h1 {margin:2%;border-color:#64009e; border-style:solid;padding:
5%;border-width:7px;background-color:#8f00e3;}
p {text-align:center;border-color:#64009e; border-style:solid;
margin:5%;padding:5%;border-width:5px;background-color:#8f00e3;}
a {position:relative;bottom:20px;left:40%;padding:20px;}
body {background-color:#000060;}
A animación é enlazada pola páxina index.html a través do atributo href da etiqueta:
<a href='animacion/animacion.html'><img src='imagen/boton.png' /></a>
Ao facer click no botón abrirase a páxina animacion.html que se atopa no cartafol animacion gardada na mesma cartafol que index.html; outro exemplo de direccionamiento relativo. Para escribir a páxina web animacion.html escribimos nun editor de texto plano o seguinte código e gardámolo no cartafol animacion.
<html>
<head>
<title>Animación</title>
<meta http-equiv='Content-Type' content='text/html;
charset=UTF-8' />
<script type='text/javascript' src='javascript/codigo.js'>
</script>
<link rel='stylesheet' type='text/css'
href='css/estilos.css' screen='media'/>
</head>
<body>
<div id='primera'>
<h2>CLEPSIDRA</h2>
<p>A clepsidra ten 10 centímetros de alto e
un radio no buraco de evacuación dun milímetro.
O diseño da clepsidra correspondese co
tiempo introducido.</p>
<div class='capa1'><H4>TEMPO DE DESCENSO:</H4>
<div id='reloj2'></div>
</div>
<div class='capa2'>
<canvas id='canvas1' width='550' height='550'>
</canvas>
</div>
</div>
<div id='segunda'>
<h2>CLEPSIDRA</h2>
<p>A clepsidra tien 10 centímetros de alto e
un radio no buraco de evacuación dun
milímetro. O deseño da
clepsidra correspondese co tempo introducido.</p>
<div class='capa1'><h4>TIEMPO DE DESCENSO:</h4>
<div id='reloj2'></div>
</div>
<div class='capa2'>
<canvas id='canvas2' width='550' height='550'>
</canvas>
</div>
</div>
</body>
</html>
Esta estrucutura en HTML enlaza cos estilos CSS a través da etiqueta:
<link rel='stylesheet' type='text/css' href='css/estilos.css' screen='media'/>
Onde se usa direccionamiento relativo, o procedemento é análogo aos casos anteriores. O código de estilos. css é o seguinte.
body {background-color:#8f00e3;}
#primera {z-index:15; position:absolute; top:1em; left:1em;}
#segunda {z-index:5; position:absolute; top:1em; left:1em;}
.capa1 {float:left;}
.capa2 {position:absolute; top:100px; left:300px;}
A su vez la página animacion.html enlaza el código javascript que realiza la animación, lo hace a través de la etiqueta:
<script type='text/javascript' src='javascript/codigo.js'></script>
Usamos o direccionamiento relativo. O código do arquivo codigo. js móstrase a continuación, e debe estar gardado no cartafol javascript, que está gardada na cartafol animación.
var radio,altura,constante,x1,x2,y1,
y2,rmax,contador,tiempo,bucle;
tiempo=0;
radio=0.001;
contador=0;
altura=0.10;
bucle=true;
while (bucle==true){
tiempo=prompt("Introduce el tiempo,
entre 30 segundos y 180 segundos: ");
if (tiempo<=180 && tiempo>=30)
{bucle=false;}
else
{bucle=true;}}
constante=(Math.pow((altura/tiempo),2)/
(2*9.81*Math.pow(radio,4)));
rmax=Math.round(Math.pow((altura/constante)
,1/4)*1000*5)+10;
window.addEventListener("load",eventWindowLoaded
,false);
function eventWindowLoaded() {
opecanvas();
}
function opecanvas() {
var canvasli=document.getElementById('canvas1');
var contexto=canvasli.getContext('2d');
var canvasli2=document.getElementById('canvas2');
var contexto2=canvasli2.getContext('2d');
setInterval(opedibujar,(tiempo/500)*1000);
function opedibujar(){
contexto.clearRect(0,0,500,500);
contexto.strokeStyle='black';
contexto.lineWidth=5;
contexto.fillStyle='red';
contexto.beginPath();
x1=0;
x2=0.2;
y1=0;
y2=0;
for(var i=0;i<=rmax;i++){
y1=(Math.pow(x1,4)*0.000000001*constante)*5
y2=(Math.pow(x2,4)*0.000000001*constante)*5
if (i==0){
contexto.moveTo(260,500);}
if (i==rmax){
contexto.lineTo(i+260,502);
contexto.lineTo(260,502);}
else
{contexto.lineTo(i+260,500-y2);}
x1=x2;
x2=x2+0.2;
}
x1=0;
x2=-0.2;
y1=0;
y2=0;
for(var i=0;i<=rmax;i++){
y1=(Math.pow(x1,4)*0.000000001*constante)*5
y2=(Math.pow(x2,4)*0.000000001*constante)*5
if (i==0){
contexto.moveTo(260,500);}
if (i==rmax){
contexto.lineTo(-i+260,502);
contexto.lineTo(260,502);
}
else{
contexto.lineTo(-i+260,500-y2);
}
x1=x2;
x2=x2-0.2;
}
contexto.stroke();
contexto.fill();
contexto.closePath();
if (contador==0) {
fechaHora1 = new Date();
horas1 = fechaHora1.getHours();
minutos1 = fechaHora1.getMinutes();
segundos1 = fechaHora1.getSeconds();
tiempo_1=horas1*60*60+minutos1*60
+segundos1;
}
if (contador<=500 && contador>0) {
fechaHora2 = new Date();
horas2 = fechaHora2.getHours();
minutos2 = fechaHora2.getMinutes();
segundos2 = fechaHora2.getSeconds();
tiempo_2=horas2*60*60+minutos2*60+
segundos2;
tiempo_3=tiempo_2-tiempo_1;
if (tiempo_3==1){
document.getElementById('reloj2').
innerHTML = tiempo_3+' segundo';}
else
{if (contador==500)
{document.getElementById
('reloj2').innerHTML = tiempo+' segundos';}
else
{document.getElementById('reloj2')
.innerHTML = tiempo_3+' segundos';}
}
}
if (contador<= 500){
contexto2.strokeStyle='blue';
contexto2.fillStyle='#8f00e3';
contexto2.fillRect(0,0,600,600);
contexto2.fillStyle='blue';
contexto2.beginPath();
contexto2.moveTo(rmax+260,contador);
contexto2.lineTo(rmax+260,500);
contexto2.lineTo(260-rmax,500);
contexto2.lineTo(260-rmax,contador);
contexto2.lineTo(rmax+260,contador);
contexto2.stroke();
contexto2.fill();
contexto2.closePath();}
contador=contador+1;}
}
}
h1 {background-color:#000060;}
div {position:absolute;top:5%;left:20%; border-color:#64009e;
border-style:solid;border-width:10px;background-color:#00009b;}
h1 {margin:2%;border-color:#64009e; border-style:solid;padding:
5%;border-width:7px;background-color:#8f00e3;}
p {text-align:center;border-color:#64009e; border-style:solid;
margin:5%;padding:5%;border-width:5px;background-color:#8f00e3;}
a {position:relative;bottom:20px;left:40%;padding:20px;}
body {background-color:#000060;}
A animación é enlazada pola páxina index.html a través do atributo href da etiqueta:
<a href='animacion/animacion.html'><img src='imagen/boton.png' /></a>
Ao facer click no botón abrirase a páxina animacion.html que se atopa no cartafol animacion gardada na mesma cartafol que index.html; outro exemplo de direccionamiento relativo. Para escribir a páxina web animacion.html escribimos nun editor de texto plano o seguinte código e gardámolo no cartafol animacion.
<html>
<head>
<title>Animación</title>
<meta http-equiv='Content-Type' content='text/html;
charset=UTF-8' />
<script type='text/javascript' src='javascript/codigo.js'>
</script>
<link rel='stylesheet' type='text/css'
href='css/estilos.css' screen='media'/>
</head>
<body>
<div id='primera'>
<h2>CLEPSIDRA</h2>
<p>A clepsidra ten 10 centímetros de alto e
un radio no buraco de evacuación dun milímetro.
O diseño da clepsidra correspondese co
tiempo introducido.</p>
<div class='capa1'><H4>TEMPO DE DESCENSO:</H4>
<div id='reloj2'></div>
</div>
<div class='capa2'>
<canvas id='canvas1' width='550' height='550'>
</canvas>
</div>
</div>
<div id='segunda'>
<h2>CLEPSIDRA</h2>
<p>A clepsidra tien 10 centímetros de alto e
un radio no buraco de evacuación dun
milímetro. O deseño da
clepsidra correspondese co tempo introducido.</p>
<div class='capa1'><h4>TIEMPO DE DESCENSO:</h4>
<div id='reloj2'></div>
</div>
<div class='capa2'>
<canvas id='canvas2' width='550' height='550'>
</canvas>
</div>
</div>
</body>
</html>
Esta estrucutura en HTML enlaza cos estilos CSS a través da etiqueta:
<link rel='stylesheet' type='text/css' href='css/estilos.css' screen='media'/>
Onde se usa direccionamiento relativo, o procedemento é análogo aos casos anteriores. O código de estilos. css é o seguinte.
body {background-color:#8f00e3;}
#primera {z-index:15; position:absolute; top:1em; left:1em;}
#segunda {z-index:5; position:absolute; top:1em; left:1em;}
.capa1 {float:left;}
.capa2 {position:absolute; top:100px; left:300px;}
A su vez la página animacion.html enlaza el código javascript que realiza la animación, lo hace a través de la etiqueta:
<script type='text/javascript' src='javascript/codigo.js'></script>
Usamos o direccionamiento relativo. O código do arquivo codigo. js móstrase a continuación, e debe estar gardado no cartafol javascript, que está gardada na cartafol animación.
var radio,altura,constante,x1,x2,y1,
y2,rmax,contador,tiempo,bucle;
tiempo=0;
radio=0.001;
contador=0;
altura=0.10;
bucle=true;
while (bucle==true){
tiempo=prompt("Introduce el tiempo,
entre 30 segundos y 180 segundos: ");
if (tiempo<=180 && tiempo>=30)
{bucle=false;}
else
{bucle=true;}}
constante=(Math.pow((altura/tiempo),2)/
(2*9.81*Math.pow(radio,4)));
rmax=Math.round(Math.pow((altura/constante)
,1/4)*1000*5)+10;
window.addEventListener("load",eventWindowLoaded
,false);
function eventWindowLoaded() {
opecanvas();
}
function opecanvas() {
var canvasli=document.getElementById('canvas1');
var contexto=canvasli.getContext('2d');
var canvasli2=document.getElementById('canvas2');
var contexto2=canvasli2.getContext('2d');
setInterval(opedibujar,(tiempo/500)*1000);
function opedibujar(){
contexto.clearRect(0,0,500,500);
contexto.strokeStyle='black';
contexto.lineWidth=5;
contexto.fillStyle='red';
contexto.beginPath();
x1=0;
x2=0.2;
y1=0;
y2=0;
for(var i=0;i<=rmax;i++){
y1=(Math.pow(x1,4)*0.000000001*constante)*5
y2=(Math.pow(x2,4)*0.000000001*constante)*5
if (i==0){
contexto.moveTo(260,500);}
if (i==rmax){
contexto.lineTo(i+260,502);
contexto.lineTo(260,502);}
else
{contexto.lineTo(i+260,500-y2);}
x1=x2;
x2=x2+0.2;
}
x1=0;
x2=-0.2;
y1=0;
y2=0;
for(var i=0;i<=rmax;i++){
y1=(Math.pow(x1,4)*0.000000001*constante)*5
y2=(Math.pow(x2,4)*0.000000001*constante)*5
if (i==0){
contexto.moveTo(260,500);}
if (i==rmax){
contexto.lineTo(-i+260,502);
contexto.lineTo(260,502);
}
else{
contexto.lineTo(-i+260,500-y2);
}
x1=x2;
x2=x2-0.2;
}
contexto.stroke();
contexto.fill();
contexto.closePath();
if (contador==0) {
fechaHora1 = new Date();
horas1 = fechaHora1.getHours();
minutos1 = fechaHora1.getMinutes();
segundos1 = fechaHora1.getSeconds();
tiempo_1=horas1*60*60+minutos1*60
+segundos1;
}
if (contador<=500 && contador>0) {
fechaHora2 = new Date();
horas2 = fechaHora2.getHours();
minutos2 = fechaHora2.getMinutes();
segundos2 = fechaHora2.getSeconds();
tiempo_2=horas2*60*60+minutos2*60+
segundos2;
tiempo_3=tiempo_2-tiempo_1;
if (tiempo_3==1){
document.getElementById('reloj2').
innerHTML = tiempo_3+' segundo';}
else
{if (contador==500)
{document.getElementById
('reloj2').innerHTML = tiempo+' segundos';}
else
{document.getElementById('reloj2')
.innerHTML = tiempo_3+' segundos';}
}
}
if (contador<= 500){
contexto2.strokeStyle='blue';
contexto2.fillStyle='#8f00e3';
contexto2.fillRect(0,0,600,600);
contexto2.fillStyle='blue';
contexto2.beginPath();
contexto2.moveTo(rmax+260,contador);
contexto2.lineTo(rmax+260,500);
contexto2.lineTo(260-rmax,500);
contexto2.lineTo(260-rmax,contador);
contexto2.lineTo(rmax+260,contador);
contexto2.stroke();
contexto2.fill();
contexto2.closePath();}
contador=contador+1;}
}
}
