RANDOM MUSIC | composicion-eddie

Programa de partituras aleatorias

Este programa fue realizado en Javascript para la 3ra sección de la obra "Tres lecturas de la vida". A continuacion se dispone del código y del enslace donde pueden ver su funcionamiento (a veces el host se cae).

http://eddie.tuars.com/Violin/Violin.html

http://eddie.tuars.com/Piano/Piano.html

Código

<!DOCTYPE html>
<head>
<title>Sección III</title>
<script type= "text/javascript">

var cont = 0;

/**
* Array con las imagenes que se iran mostrando en la web
*/
var imagenes10=new Array(
'0.jpg'
);

var imagenes1=new Array(
   '1 (1).png',
   '1 (2).png',
   '1 (3).png',
   '1 (4).png',
   '1 (5).png',
   '1 (6).png'
   );
var imagenes2=new Array(
   '2 (1).png',
   '2 (2).png',
   '2 (3).png',
   '2 (4).png',
   '2 (5).png',
   '2 (6).png'
);
var imagenes3=new Array(
   '3 (1).png',
   '3 (2).png',
   '3 (3).png',
   '3 (4).png',
   '3 (5).png',
   '3 (6).png'
);
var imagenes4=new Array(
   '4 (1).png',
   '4 (2).png',
   '4 (3).png',
   '4 (4).png',
   '4 (5).png',
   '4 (6).png'
);
var imagenes5=new Array(
   '5 (1).png',
   '5 (2).png',
   '5 (3).png',
   '5 (4).png',
   '5 (5).png',
   '5 (6).png'
);
var imagenes6=new Array(
   '6 (1).png',
   '6 (2).png',
   '6 (3).png',
   '6 (4).png',
   '6 (5).png',
   '6 (6).png'
);
var imagenes7=new Array(
   '7 (1).png',
   '7 (2).png',
   '7 (3).png',
   '7 (4).png',
   '7 (5).png',
   '7 (6).png'
);
var imagenes8=new Array(
   '8 (1).png',
   '8 (2).png',
   '8 (3).png',
   '8 (4).png',
   '8 (5).png',
   '8 (6).png'
);
var imagenes9=new Array(
   '9 (1).png',
   '9 (2).png',
   '9 (3).png',
   '9 (4).png',
   '9 (5).png',
   '9 (6).png'
);

/**
* Numero aleatorio para tiempo
*/

var t_img = Math.random()*7000+3000;

function contador(){
var contador = document.getElementById("contador");
contador.value = cont;
cont++;
}

/**
* Funcion para cambiar la imagen
*/
function rotarImagenes()
{if(cont <= 20){
   var index1=Math.floor((Math.random()*imagenes1.length));
    document.getElementById("imagen").src=imagenes1[index1];
}else{if(cont <= 40){
       var index2=Math.floor((Math.random()*imagenes2.length));
        document.getElementById("imagen").src=imagenes2[index2];
   }else{if(cont <= 60){
       var index3=Math.floor((Math.random()*imagenes3.length));
        document.getElementById("imagen").src=imagenes3[index3];
      }else{if(cont <= 80){
       var index4=Math.floor((Math.random()*imagenes4.length));
        document.getElementById("imagen").src=imagenes4[index4];
    }else{if(cont <= 100){
          var index5=Math.floor((Math.random()*imagenes5.length));
        document.getElementById("imagen").src=imagenes5[index5];
    }else{if(cont <= 120){
          var index6=Math.floor((Math.random()*imagenes6.length));
        document.getElementById("imagen").src=imagenes6[index6];
    }else{if(cont <= 140){
          var index7=Math.floor((Math.random()*imagenes7.length));
        document.getElementById("imagen").src=imagenes7[index7];
               }else{if(cont <= 160){
               var index8=Math.floor((Math.random()*imagenes8.length));
        document.getElementById("imagen").src=imagenes8[index8];
               }else{if(cont <= 180){
                   var index9=Math.floor((Math.random()*imagenes9.length));
        document.getElementById("imagen").src=imagenes9[index9];
                   }else{
                   var index10=Math.floor((Math.random()*imagenes10.length));
        document.getElementById("imagen").src=imagenes10[index10];
}}}}}}}}}}

/**
* Función que se ejecuta una vez cargada la página
*/
onload=function()
{

// Cargamos una imagen aleatoria
rotarImagenes();
// Indicamos que cada 5 segundos cambie la imagen
setInterval(rotarImagenes, t_img);
}

</script>
</head>

<body bgcolor="black">
<center>
<h1>
<font color="#ffffff">
Tres Lecturas de la Vida <br>Sección III
<DIV ALIGN=right> <i> Piano </i> </DIV>

</h1>
<img src="Piano" id="imagen" style="margin-top:100px;margin-left:100px">

<form>
<label for="contador">Contador:</label><input type="text" id="contador">
<p> El Dasein esta arrojado a sus posibilidades</p>
<p> En todas las posibilidades está morir </p>

</form>

</body>
</html>

<!DOCTYPE html>
<head>
<title>Sección III</title>
<script type= "text/javascript">

var cont = 0;

/**
* Array con las imagenes que se iran mostrando en la web
*/
var imagenes10=new Array(
'0.jpg'
);

var imagenes1=new Array(
   '1 (1).png',
   '1 (2).png',
   '1 (3).png',
   '1 (4).png',
   '1 (5).png',
   '1 (6).png',
   '1 (7).png',
   '1 (8).png',
   '1 (9).png',
   '1 (10).png',
   '1 (11).png',
   '1 (11).png',
   '1 (12).png',
   '1 (13).png',
   '1 (14).png',
   '1 (15).png',
   '1 (16).png',
   '1 (17).png',
   '1 (18).png',
   '1 (19).png',
   '1 (20).png',
   '1 (21).png'
   );
var imagenes2=new Array(
   '2 (1).png',
   '2 (2).png',
   '2 (3).png',
   '2 (4).png',
   '2 (5).png',
   '2 (6).png',
   '2 (7).png',
   '2 (8).png',
   '2 (9).png',
   '2 (10).png',
   '2 (11).png',
   '2 (11).png',
   '2 (12).png',
   '2 (13).png',
   '2 (14).png',
   '2 (15).png',
   '2 (16).png',
   '2 (17).png',
   '2 (18).png',
   '2 (19).png',
   '2 (20).png',
   '2 (21).png'
   );
var imagenes3=new Array(
   '3 (1).png',
   '3 (2).png',
   '3 (3).png',
   '3 (4).png',
   '3 (5).png',
   '3 (6).png',
   '3 (7).png',
   '3 (8).png',
   '3 (9).png',
   '3 (10).png',
   '3 (11).png',
   '3 (11).png',
   '3 (12).png',
   '3 (13).png',
   '3 (14).png',
   '3 (15).png',
   '3 (16).png',
   '3 (17).png',
   '3 (18).png',
   '3 (19).png',
   '3 (20).png',
   '3 (21).png'
   );
var imagenes4=new Array(
   '4 (1).png',
   '4 (2).png',
   '4 (3).png',
   '4 (4).png',
   '4 (5).png',
   '4 (6).png',
   '4 (7).png',
   '4 (8).png',
   '4 (9).png',
   '4 (10).png',
   '4 (11).png',
   '4 (11).png',
   '4 (12).png',
   '4 (13).png',
   '4 (14).png',
   '4 (15).png',
   '4 (16).png',
   '4 (17).png',
   '4 (18).png',
   '4 (19).png',
   '4 (20).png'
   );
var imagenes5=new Array(
   '5 (1).png',
   '5 (2).png',
   '5 (3).png',
   '5 (4).png',
   '5 (5).png',
   '5 (6).png',
   '5 (7).png',
   '5 (8).png',
   '5 (9).png',
   '5 (10).png',
   '5 (11).png',
   '5 (11).png',
   '5 (12).png',
   '5 (13).png',
   '5 (14).png',
   '5 (15).png',
   '5 (16).png',
   '5 (17).png',
   '5 (18).png',
   '5 (19).png'
   );
var imagenes6=new Array(
   '6 (1).png',
   '6 (2).png',
   '6 (3).png',
   '6 (4).png',
   '6 (5).png',
   '6 (6).png',
   '6 (7).png',
   '6 (8).png',
   '6 (9).png',
   '6 (10).png',
   '6 (11).png',
   '6 (11).png',
   '6 (12).png',
   '6 (13).png',
   '6 (14).png',
   '6 (15).png',
   '6 (16).png',
   '6 (17).png',
   '6 (18).png',
   '6 (19).png',
   '6 (20).png'
   );
var imagenes7=new Array(
   '7 (1).png',
   '7 (2).png',
   '7 (3).png',
   '7 (4).png',
   '7 (5).png',
   '7 (6).png',
   '7 (7).png',
   '7 (8).png',
   '7 (9).png',
   '7 (10).png',
   '7 (11).png',
   '7 (11).png',
   '7 (12).png',
   '7 (13).png',
   '7 (14).png',
   '7 (15).png',
   '7 (16).png',
   '7 (17).png',
   '7 (18).png',
   '7 (19).png',
   '7 (20).png'
   );
var imagenes8=new Array(
   '8 (1).png',
   '8 (2).png',
   '8 (3).png',
   '8 (4).png',
   '8 (5).png',
   '8 (6).png',
   '8 (7).png',
   '8 (8).png',
   '8 (9).png',
   '8 (10).png',
   '8 (11).png',
   '8 (11).png',
   '8 (12).png',
   '8 (13).png',
   '8 (14).png',
   '8 (15).png',
   '8 (16).png',
   '8 (17).png',
   '8 (18).png'
   );
var imagenes9=new Array(
   '9 (1).png',
   '9 (2).png',
   '9 (3).png',
   '9 (4).png',
   '9 (5).png',
   '9 (6).png',
   '9 (7).png',
   '9 (8).png',
   '9 (9).png',
   '9 (10).png',
   '9 (11).png',
   '9 (11).png',
   '9 (12).png',
   '9 (13).png',
   '9 (14).png',
   '9 (15).png',
   '9 (16).png',
   '9 (17).png',
   '9 (18).png'
);

/**
* Numero aleatorio para tiempo
*/

var t_img = Math.random()*7000+3000;

function contador(){
var contador = document.getElementById("contador");
contador.value = cont;
cont++;
}

</script>
</head>

<body bgcolor="black">
<center>
<h1>
<font color="#ffffff">
Tres Lecturas de la Vida <br>Sección III
<DIV ALIGN=right> <i> Violin </i> </DIV>

</h1>
<img src="Violin" id="imagen" style="margin-top:100px;margin-left:100px">

<form>
<label for="contador">Contador:</label><input type="text" id="contador">
<p> El Dasein esta arrojado a sus posibilidades</p>
<p> En todas las posibilidades está morir </p>

</form>

</body>
</html>