vendredi, juillet 14, 2017

Construction du MOOC Lecjoa 3

Le MOOC Lecjoa 3 version Montpel'libre a pour but de montrer comment construire son propre instrument de musique vidéo

C'est une vidéo interactive qui a la propriété d'être aussi un instrument de musique

Sa logique appliquée est construite sur des briques visuelles et des briques acoustiques générées par l'imagination (une technique sans algèbre, sans géométrie, sans les concepts acoustiques du moment, ce ne sont que plusieurs dimensions que nous mettons en équilibre à l'aide de dimensions aux lois différentes). Puis selon comment nous associons les briques nous obtenons toutes les vidéo instrumentales imaginables.

Sa logique pure est d'apporter un langage multidirectionnel afin d'avoir un outil adapté entre le monde qui nous entoure qui est multidirectionnel et notre entendement qui est multidirectionnel. En d'autres mots, apprendre à comprendre pour pouvoir apprendre à apprendre sans tromper la raison.

Dans les entrailles du MOOC

Nous prenons comme outil de départ l'Add-on Lecjoa, plus précisément le générateur de vidéo multidirectionnel auquel nous ajoutons une vitesse de variation sans laquelle il ne peut pas y avoir de vidéo. Cela nous donne le fichier HTML.
Dans ce fichier HTML, nous allons ajouter un lien vers le générateur de briques visuelles que nous allons nommer image.js.
Ce qui nous donne le code à placer dans le fichier index.html :
Ce fichier se copie en 2 temps, il faut le placer dans un premier fichier, ensuite ouvrir ce fichier avec le navigateur, et copier le fichier dans le navigateur avant de le placer dans index.html


<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>multidirectional-talk</title> <style> .indique{ cursor:pointer; } .cachemoi { display: none; } .sortdutrou { display: inline; } .action{ position:fixed; height:4%; width:1.4%; margin-top:1%; background:blue; border-right:1px solid #BBB; cursor:pointer; } .action5mn{ position:fixed; height:4%; width:1.4%; margin-top:1%; background:red; border-right:1px solid #BBB; cursor:pointer; } .actionvitesse{ position:fixed; height:4%; width:1.4%; margin-top:1%; background:green; border-right:1px solid #BBB; cursor:pointer; } .actionunivers{ position:fixed; height:4%; width:1.4%; margin-top:1%; background:black; border-right:1px solid #BBB; cursor:pointer; } .actionunivers{ position:fixed; height:4%; width:1.4%; margin-top:2%; border-right:1px solid #BBB; cursor:pointer; } </style> </head> <body> <div id="basewave1"> </div> <div id="basewave2"> </div> <div id="basewave3"> </div> <div id="basewave4"> </div> <div id="basewave5"> </div> <div id="basewave6"> </div> <div id="basewave7"> </div> <div id="basewave8"> </div> <div id="basewave9"> </div> <div id="basewave10"> </div> <div id="basewave11"> </div> <div id="basewave12"> </div> <div id="basewave13"> </div> <div id="basewave14"> </div> <div id="basewave15"> </div> <div id="basewave16"> </div> <div id="fleur1" class="cachemoi" > </div> <!--bis--> <div id="bisfleur1" class="cachemoi" > </div> <!--fin bis--> <div id="fleur2" class="cachemoi" > </div> <!--bis--> <div id="bisfleur2" class="cachemoi" > </div> <!--fin bis--> <div id="fleur3" class="cachemoi"> </div> <!--bis--> <div id="bisfleur3" class="cachemoi" > </div> <!--fin bis--> <div id="fleur4" class="cachemoi"> </div> <!--bis--> <div id="bisfleur4" class="cachemoi" > </div> <!--fin bis--> <div id="fleur5" class="cachemoi"> </div> <!--bis--> <div id="bisfleur5" class="cachemoi" > </div> <!--fin bis--> <div id="fleur6" class="cachemoi" > </div> <!--bis--> <div id="bisfleur6" class="cachemoi" > </div> <!--fin bis--> <div id="fleur7" class="cachemoi"> </div> <!--bis--> <div id="bisfleur7" class="cachemoi" > </div> <!--fin bis--> <div id="fleur8" class="cachemoi"> </div> <!--bis--> <div id="bisfleur8" class="cachemoi" > </div> <!--fin bis--> <div id="fleur9" class="cachemoi" > </div> <!--bis--> <div id="bisfleur9" class="cachemoi" > </div> <!--fin bis--> <div id="fleur10" class="cachemoi" > </div> <!--bis--> <div id="bisfleur10" class="cachemoi" > </div> <!--fin bis--> <div id="fleur11" class="cachemoi"> </div> <!--bis--> <div id="bisfleur11" class="cachemoi" > </div> <!--fin bis--> <div id="fleur12" class="cachemoi"> </div> <!--bis--> <div id="bisfleur12" class="cachemoi" > </div> <!--fin bis--> <div id="fleur13" class="cachemoi"> </div> <!--bis--> <div id="bisfleur13" class="cachemoi" > </div> <!--fin bis--> <div id="fleur14" class="cachemoi" > </div> <!--bis--> <div id="bisfleur14" class="cachemoi" > </div> <!--fin bis--> <div id="fleur15" class="cachemoi"> </div> <!--bis--> <div id="bisfleur15" class="cachemoi" > </div> <!--fin bis--> <div id="fleur16" class="cachemoi"> </div> <!--bis--> <div id="bisfleur16" class="cachemoi" > </div> <!--fin bis--> <!-- bare de temps --> <div class="action" id="actionx1aPress" style="margin-left:1%;"></div> <div class="action" id="actionx2aPress" style="margin-left:3%;"></div> <div class="action" id="actionx3aPress" style="margin-left:5%;"></div> <div class="action" id="actionx4aPress" style="margin-left:7%;"></div> <div class="action" id="actionx5aPress" style="margin-left:9%;"></div> <div class="action" id="actionx6aPress" style="margin-left:11%;"></div> <div class="action" id="actionx7aPress" style="margin-left:13%;"></div> <div class="action" id="actionx8aPress" style="margin-left:15%;"></div> <div class="action" id="actionx9aPress" style="margin-left:17%;"></div> <div class="action" id="actionx10aPress" style="margin-left:19%;"></div> <div class="action" id="actionx11aPress" style="margin-left:21%;"></div> <div class="action" id="actionx12aPress" style="margin-left:23%;"></div> <div class="action" id="actionx13aPress" style="margin-left:25%;"></div> <div class="action" id="actionx14aPress" style="margin-left:27%;"></div> <div class="action" id="actionx15aPress" style="margin-left:29%;"></div> <div class="action" id="actionx16aPress" style="margin-left:31%;"></div> <div class="action5mn" id="actionstopa" style="margin-left:61%;"></div> <div class="action5mn" id="actionrestarta" style="margin-left:63%;"></div> <div class="actionvitesse" id="diminuLeVenta" style="margin-left:67%;">-</div> <div class="actionvitesse" id="acelereLeVenta" style="margin-left:69%;">+</div> <div class="actionunivers" id="action1Pressa" style="margin-left:75%;"></div> <div class="actiontexte" style="margin-left:15%;"><p>time line</p></div> <div class="actiontexte" style="margin-left:61%;"><p>pause</p></div> <div class="actiontexte" style="margin-left:67%;"><p>speed</p></div> <div class="actiontexte" style="margin-left:75%;"><p>multidirectional talk</p></div> <script type="text/javascript" src="image.js"></script> <script type="text/javascript" src="example.js"> </script> <script type="text/javascript" src="tab.js"></script> <script type="text/javascript" src="adapt.js"></script> <script type="text/javascript" src="jom.js"></script> </body> </html> 

Ensuite, nous créons un fichier javascript nommé  example.js dans lequel nous plaçons le code en dessous. Ce code est modifié en supprimant le son, car nous introduiront les briques acoustiques plus tard:


    var persistanceretinienne = 15;
    var nbimg = null;
    var nbboucle = 70;
        var mua1 = 0;
    var vitesseDuVent = 200;

    var ouioui;
    var joueur = 'fleur';
    var joueur1;
    var joueur2;
    var version = 1;
    var joueur3 = 'bisfleur';
    var joueur4;
    var joueur5 = 'bis';
    var joueur7;
    var joueur8;
    var arretimage5mn = 300000;
    var souvenirvitesse = 1000;
    var soud1 = [

];
    var soud2 = [

];
    var soud3 = [

];
    var soud4 = [

];
    var soud5 = [

];
    var soud6 = [

];
    var soud7 = [

];
    var soud8 = [

];
    var soud9 = [

];
    var soud10 = [

];
    var soud11 = [

];
    var soud12 = [

];
    var soud13 = [

];
    var soud14 = [

];
    var soud15 = [

];
    var soud16 = [

];


function acelereLeVent(){

  if(vitesseDuVent>123){
  clearInterval(nbimg);
vitesseDuVent = vitesseDuVent -40;
nbboucle = 70;
lancertout();
  }

}
document.getElementById("acelereLeVenta").addEventListener("click", acelereLeVent);

function diminuLeVent(){
  clearInterval(nbimg);
vitesseDuVent = vitesseDuVent + 300;
nbboucle = 70;
lancertout();
}
document.getElementById("diminuLeVenta").addEventListener("click", diminuLeVent);

function actionstop(){
  clearInterval(nbimg);
vitesseDuVent = arretimage5mn;
nbboucle = 7;
vitesseDuVent = vitesseDuVent +1;
lancertout();
}
document.getElementById("actionstopa").addEventListener("click", actionstop);

function actionrestart(){
  clearInterval(nbimg);
vitesseDuVent = souvenirvitesse;
nbboucle = 7;
vitesseDuVent = vitesseDuVent +1;
lancertout();
}
document.getElementById("actionrestarta").addEventListener("click", actionrestart);

function decoupe2(joueur4){//1
  document.getElementById(joueur4).className = 'cachemoi';
}//3

function decoupe1(joueur2){//1
  document.getElementById(joueur2).className = 'cachemoi';
}//3

function decoupe3(joueur1){//1
  document.getElementById(joueur1).className = 'sortdutrou';
}//3

function restecalme(joueur1,joueur8,ouioui){//1



  if(version == 1){//2

for (var placier = 1; placier < ouioui; placier++) {//3


    joueur2 = joueur + placier;
  document.getElementById(joueur2).className = 'cachemoi';

}//3

for (var placier = ouioui+1; placier < 17; placier++) {//3


    joueur2 = joueur + placier;
  document.getElementById(joueur2).className = 'cachemoi';

}//3

for (var placier = 1; placier < ouioui; placier++) {//3


    joueur4 = joueur3 + placier;
  document.getElementById(joueur4).className = 'cachemoi';

}//3

for (var placier = ouioui+1; placier < 17; placier++) {//3

    joueur4 = joueur3 + placier;
  document.getElementById(joueur4).className = 'cachemoi';


}//3


  document.getElementById(joueur1).className = 'sortdutrou';
  document.getElementById(joueur8).className = 'cachemoi';

}//2



  if(version == 2){//2



for (var placier = 1; placier < ouioui; placier++) {//3


    joueur4 = joueur3 + placier;
  document.getElementById(joueur4).className = 'cachemoi';

}//3

for (var placier = ouioui+1; placier < 17; placier++) {//3

    joueur4 = joueur3 + placier;
  document.getElementById(joueur4).className = 'cachemoi';


}//3

for (var placier = 1; placier < ouioui; placier++) {//3


    joueur2 = joueur + placier;
  document.getElementById(joueur2).className = 'cachemoi';

}//3

for (var placier = ouioui+1; placier < 17; placier++) {//3


    joueur2 = joueur + placier;
  document.getElementById(joueur2).className = 'cachemoi';

}//3


  document.getElementById(joueur8).className = 'sortdutrou';

  document.getElementById(joueur1).className = 'cachemoi';


}

}



function change(persistanceretinienne)
{

  switch (persistanceretinienne) {

        case 0:
    ouioui = persistanceretinienne + 1;
    joueur1 = joueur + ouioui;
    joueur8 = joueur3 + ouioui;
    restecalme(joueur1,joueur8,ouioui);

       break;
        case 1:
    ouioui = persistanceretinienne + 1;
    joueur1 = joueur + ouioui;
    joueur8 = joueur3 + ouioui;
    restecalme(joueur1,joueur8,ouioui);

       break;
        case 2:
    ouioui = persistanceretinienne + 1;
    joueur1 = joueur + ouioui;
    joueur8 = joueur3 + ouioui;
    restecalme(joueur1,joueur8,ouioui);

       break;
        case 3:
    ouioui = persistanceretinienne + 1;
    joueur1 = joueur + ouioui;
    joueur8 = joueur3 + ouioui;
    restecalme(joueur1,joueur8,ouioui);

       break;
        case 4:
    ouioui = persistanceretinienne + 1;
    joueur1 = joueur + ouioui;
    joueur8 = joueur3 + ouioui;
    restecalme(joueur1,joueur8,ouioui);

       break;
        case 5:
    ouioui = persistanceretinienne + 1;
    joueur1 = joueur + ouioui;
    joueur8 = joueur3 + ouioui;
    restecalme(joueur1,joueur8,ouioui);

       break;
        case 6:
    ouioui = persistanceretinienne + 1;
    joueur1 = joueur + ouioui;
    joueur8 = joueur3 + ouioui;
    restecalme(joueur1,joueur8,ouioui);

       break;
        case 7:
    ouioui = persistanceretinienne + 1;
    joueur1 = joueur + ouioui;
    joueur8 = joueur3 + ouioui;
    restecalme(joueur1,joueur8,ouioui);

       break;
        case 8:
    ouioui = persistanceretinienne + 1;
    joueur1 = joueur + ouioui;
    joueur8 = joueur3 + ouioui;
    restecalme(joueur1,joueur8,ouioui);

       break;
        case 9:
    ouioui = persistanceretinienne + 1;
    joueur1 = joueur + ouioui;
    joueur8 = joueur3 + ouioui;
    restecalme(joueur1,joueur8,ouioui);

       break;
        case 10:
    ouioui = persistanceretinienne + 1;
    joueur1 = joueur + ouioui;
    joueur8 = joueur3 + ouioui;
    restecalme(joueur1,joueur8,ouioui);

       break;
        case 11:
    ouioui = persistanceretinienne + 1;
    joueur1 = joueur + ouioui;
    joueur8 = joueur3 + ouioui;
    restecalme(joueur1,joueur8,ouioui);

       break;
        case 12:
    ouioui = persistanceretinienne + 1;
    joueur1 = joueur + ouioui;
    joueur8 = joueur3 + ouioui;
    restecalme(joueur1,joueur8,ouioui);

       break;
        case 13:
    ouioui = persistanceretinienne + 1;
    joueur1 = joueur + ouioui;
    joueur8 = joueur3 + ouioui;
    restecalme(joueur1,joueur8,ouioui);

       break;
        case 14:
    ouioui = persistanceretinienne + 1;
    joueur1 = joueur + ouioui;
    joueur8 = joueur3 + ouioui;
    restecalme(joueur1,joueur8,ouioui);

       break;
        case 15:
    ouioui = persistanceretinienne + 1;
    joueur1 = joueur + ouioui;
    joueur8 = joueur3 + ouioui;
    restecalme(joueur1,joueur8,ouioui);

       break;

  }

}



function durermax()
{
  clearInterval(nbimg);
/*   lancerChange4();    */
}
function seance()
{



change(persistanceretinienne);
  persistanceretinienne--;
if ((nbboucle>1)&&(persistanceretinienne<0 br="">{
/* selection du nombre d'image*/
/* persistanceretinienne = 3;*/
persistanceretinienne = 15;
nbboucle = nbboucle-1;
}


}

function lancertout()
{
  nbimg = setInterval(seance, vitesseDuVent);
  setTimeout(durermax, persistanceretinienne * 81000);
change(persistanceretinienne);
}

function lancertout1()
{
lecjo(soud1);
lecjo(soud2);
lecjo(soud3);
lecjo(soud4);
lecjo(soud5);
lecjo(soud6);
lecjo(soud7);
lecjo(soud8);
lecjo(soud9);
lecjo(soud10);
lecjo(soud11);
lecjo(soud12);
lecjo(soud13);
lecjo(soud14);
lecjo(soud15);
lecjo(soud16);

lancertout();
}   

  function JoueLeSon(mua1){

  if(mua1==0){

  var multia1 = document.getElementById("1awav");
  multia1.play();
  }
  else if(mua1==1){

  var multia2 = document.getElementById("2awav");
  multia2.play();
  }
  else if(mua1==2){

  var multia3 = document.getElementById("3awav");
  multia3.play();
  }
  else if(mua1==3){

  var multia4 = document.getElementById("4awav");
  multia4.play();
  }
  }

  function JoueLeSon1(){
  var multib1 = document.getElementById("1awav");
  multib1.play();
  }
  function JoueLeSon2(){
  var multic1 = document.getElementById("2awav");
  multic1.play();
  }
  function JoueLeSon3(){
  var multid1 = document.getElementById("3awav");
  multid1.play();
  }
  function JoueLeSon4(){
  var multie1 = document.getElementById("4awav");
  multie1.play();
  }
  function JoueLeSon5(){
  var multif1 = document.getElementById("5awav");
  multif1.play();
  }
  function JoueLeSon6(){
  var multig1 = document.getElementById("6awav");
  multig1.play();
  }
  function JoueLeSon7(){
  var multih1 = document.getElementById("7awav");
  multih1.play();
  }
  function JoueLeSon8(){
  var multii1 = document.getElementById("8awav");
  multii1.play();
  }
  function JoueLeSon9(){
  var multij1 = document.getElementById("9awav");
  multij1.play();
  }
  function JoueLeSon10(){
  var multik1 = document.getElementById("10awav");
  multik1.play();
  }
  function JoueLeSon11(){
  var multil1 = document.getElementById("11awav");
  multil1.play();
  }
  function JoueLeSon12(){
  var multic1 = document.getElementById("12awav");
  multic1.play();
  }
  function JoueLeSon13(){
  var multim1 = document.getElementById("13awav");
  multim1.play();
  }
  function JoueLeSon14(){
  var multin1 = document.getElementById("14awav");
  multin1.play();
  }
  function JoueLeSon15(){
  var multio1 = document.getElementById("15awav");
  multio1.play();
  }
  function JoueLeSon16(){
  var multip1 = document.getElementById("16awav");
  multip1.play();
  }



function action1Press(){
    version = version + 1;
    if(version>2){
        version = 1;
      }
  }
document.getElementById("action1Pressa").addEventListener("click", action1Press);

function actionx1Press(){
    persistanceretinienne = 15;
  }
document.getElementById("actionx1aPress").addEventListener("click", actionx1Press);

function actionx2Press(){
    persistanceretinienne = 14;
  }
document.getElementById("actionx2aPress").addEventListener("click", actionx2Press);

function actionx3Press(){
    persistanceretinienne = 13;
  }
document.getElementById("actionx3aPress").addEventListener("click", actionx3Press);

function actionx4Press(){
    persistanceretinienne = 12;
  }
document.getElementById("actionx4aPress").addEventListener("click", actionx4Press);

function actionx5Press(){
    persistanceretinienne = 11;
  }
document.getElementById("actionx5aPress").addEventListener("click", actionx5Press);

function actionx6Press(){
    persistanceretinienne = 10;
  }
document.getElementById("actionx6aPress").addEventListener("click", actionx6Press);

function actionx7Press(){
    persistanceretinienne = 9;
  }
document.getElementById("actionx7aPress").addEventListener("click", actionx7Press);

function actionx8Press(){
    persistanceretinienne = 8;
  }
document.getElementById("actionx8aPress").addEventListener("click", actionx8Press);

function actionx9Press(){
    persistanceretinienne = 7;
  }
document.getElementById("actionx9aPress").addEventListener("click", actionx9Press);

function actionx10Press(){
    persistanceretinienne = 6;
  }
document.getElementById("actionx10aPress").addEventListener("click", actionx10Press);

function actionx11Press(){
    persistanceretinienne = 5;
  }
document.getElementById("actionx11aPress").addEventListener("click", actionx11Press);

function actionx12Press(){
    persistanceretinienne = 4;
  }
document.getElementById("actionx12aPress").addEventListener("click", actionx12Press);

function actionx13Press(){
    persistanceretinienne = 3;
  }
document.getElementById("actionx13aPress").addEventListener("click", actionx13Press);

function actionx14Press(){
    persistanceretinienne = 2;
  }
document.getElementById("actionx14aPress").addEventListener("click", actionx14Press);

function actionx15Press(){
    persistanceretinienne = 1;
  }
document.getElementById("actionx15aPress").addEventListener("click", actionx15Press);

function actionx16Press(){
    persistanceretinienne = 0;
  }
document.getElementById("actionx16aPress").addEventListener("click", actionx16Press);


/**passerelle firefox 48 pour remplacer le bouton d'appel java**/
   function load() {
//lancertout1();
lancertout();
   }


 document.addEventListener("DOMContentLoaded", function(event) {
    load();
  });
/**fin passerelle firefox 48**/
Et enfin nous créons le générateur de briques visuelle sur la base que j'ai déjà présenté, en ajoutant un switch de manière à générer plusieurs images pour la vidéo. Nous nommons fichier générateur de briques visuelles image.js

var largeurecran = screen.width * 0.01;
var hauteurecran = screen.height * 0.01;

for(var limage= 16; limage > 0; limage--)
{

var l={0:[],1:[],2:[],3:[],4:[],5:[],6:[],7:[],8:[],9:[],10:[],11:[],12:[],13:[],14:[],15:[],16:[],17:[]
,18:[],19:[],20:[],21:[],22:[],23:[],24:[],25:[],26:[],27:[],28:[],29:[],30:[],31:[],32:[]
,33:[],34:[],35:[],36:[],37:[],38:[],39:[],40:[],41:[],42:[],43:[],44:[],45:[],46:[],47:[],48:[],
49:[],50:[],51:[],52:[],53:[],54:[],55:[],56:[],57:[],58:[]};






var vam = [3.8, 30, "black", 3, 13, "2px", "absolute", 0.99, "rotate(0deg)", "height 1s", 1, "10px 10px 5px lightblue"];

var vam1 = [3, 7.7, 17.1, 21.8, 26.5, 35.9, 40.6, 50, 54.7, 59.4, 68.8, 73.5,
82.9, 87.6, 92.3, 0.6, 5.3, 10, 14.7, 19.4, 24.1, 28.8, 33.5, 38.2, 42.9,
 47.6, 52.3, 57, 61.7, 66.4, 71.1, 75.8, 80.5, 85.2, 89.9, 94.6, 0.6,
 6.8, 11.5, 14.7, 20.9, 25.6, 30.3, 33.5, 39.7, 44.4, 47.6, 53.8, 58.5,
 63.2, 66.4, 72.6, 77.3, 80.5, 86.7, 91.4, 96.1, 0];
var vam2 = ["white", "#975401", "lightblue", "blue"];
var vam3 = [2.3, 0.8, 2.9, 2.3, 0.8, 0.8, 2.9, 2.3, 0.8, 2.9, 2.3, 0.8, 0.8, 2.9, 2.3, 0.8, 2.9, 2.3, 0.8, 0.8, 2.9];



switch(limage) {
    case 16:
for(var b1= 0; b1 < 57; b1++)
{
for(var b2= 0; b2 < 12; b2++)
{
l[b1][b2]=vam[b2];
}
l[b1][3]=vam1[b1];
}
for(var b3= 15; b3 < 57; b3++)
{
l[b3][2]=vam2[0];
}
l[57][2]=vam2[1];
for(var b4= 15; b4 < 36; b4++)
{
l[b4][0]=4.4;
l[b4][4]=43;
l[b4][1]=l[b4][1]-20;
}
for(var b5= 36; b5 < 58; b5++)
{
l[b5][0]=vam3[b5-36];
l[b5][1]++;
}
        break;
    case 15:
for(var b1= 0; b1 < 57; b1++)
{
for(var b2= 0; b2 < 12; b2++)
{
l[b1][b2]=vam[b2];
}
l[b1][3]=vam1[b1];
}
for(var b3= 15; b3 < 57; b3++)
{
l[b3][2]=vam2[2];
}
l[57][2]=vam2[1];
for(var b4= 15; b4 < 36; b4++)
{
l[b4][0]=4.4;
l[b4][4]=43;
l[b4][1]=l[b4][1]-20;
}
for(var b5= 36; b5 < 58; b5++)
{
l[b5][0]=vam3[b5-36];
l[b5][1]++;
}
        break;
    default:
for(var b1= 0; b1 < 57; b1++)
{
for(var b2= 0; b2 < 12; b2++)
{
l[b1][b2]=vam[b2];
}
l[b1][3]=vam1[b1];
}
for(var b3= 15; b3 < 57; b3++)
{
l[b3][2]=vam2[3];
}
l[57][2]=vam2[1];
for(var b4= 15; b4 < 36; b4++)
{
l[b4][0]=4.4;
l[b4][4]=43;
l[b4][1]=l[b4][1]-20;
}
for(var b5= 36; b5 < 58; b5++)
{
l[b5][0]=vam3[b5-36];
l[b5][1]++;
}
}




l[57] = [100, 60, "#975401", 0, 10, 2 * largeurecran +"px", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];


l= {
  1: l[0], 2: l[1], 3: l[2], 4: l[3], 5: l[4], 6: l[5], 7: l[6], 8: l[7], 9: l[8], 10: l[9], 11: l[10],
12: l[11],13: l[12], 14: l[13], 15: l[14], 16: l[15], 17: l[16], 18: l[17], 19: l[18], 20: l[19], 21: l[20],
22: l[21], 23: l[22], 24: l[23],25: l[24], 26: l[25], 27: l[26], 28: l[27], 29: l[28], 30: l[29], 31: l[30],
32: l[31], 33: l[32], 34: l[33], 35: l[34], 36: l[35], 37: l[36], 38: l[37], 39: l[38], 40: l[39], 41: l[40],
42: l[41], 43: l[42], 44: l[43], 45: l[44], 46: l[45], 47: l[46], 48: l[47], 49: l[48], 50: l[49], 51: l[50],
42: l[41], 43: l[42], 44: l[43], 45: l[44], 46: l[45], 47: l[46], 48: l[47], 49: l[48], 50: l[49], 51: l[50],
52: l[51], 53: l[52], 54: l[53], 55: l[54], 56: l[55], 57: l[56], 58: l[57], 59: l[58]
}




for(var uui= 1; uui < 59; uui++)
{
var nouveauin;
function rajouteElemen() {
var boday   = document.boday || document.getElementById('fleur'+limage),
nouveauin  = document.createElement("div");
nouveauin.setAttribute("id", "b"+uui+"v");
nouveauin.style.width = (l[uui][0]) * largeurecran +"px";
nouveauin.style.height = (l[uui][1]) * hauteurecran +"px";
nouveauin.style.background = l[uui][2];
nouveauin.style.marginLeft=(l[uui][3]) * largeurecran +"px";
nouveauin.style.marginTop=(l[uui][4]) * hauteurecran +"px";
nouveauin.style.borderRadius=l[uui][5];
nouveauin.style.position =l[uui][6];
nouveauin.style.opacity =l[uui][7];
nouveauin.style.transform =l[uui][8];
nouveauin.style.transition =l[uui][9];
//if(l[uui][10] == 1){
//nouveauin.setAttribute("active", "background: #B8B6B6");
//}
//nouveauin.style.boxShadow =l[uui][11];
boday.insertBefore(nouveauin,boday.childNodes[0]);
}
rajouteElemen();
}
}


 En entrant ces trois fichiers dans votre répertoire de travail, et en cliquant sur index.html, votre navigateur internet doit créer votre vidéo contenant le début de votre instrument de musique.

Cinq minutes de rire pour un adulte, durent une éternité pour un enfant.

jeudi, juillet 13, 2017

Ajuster l'image en css avec px

Bonjour,
Pour ajuster l'image d'une brique visuelle à l'écran en utilisant les px, il faut en premier identifier et mettre en pourcentage la taille de l'écran ou va être affiché l'image.
Nous faisons cela avec le code :

 var largeurecran = screen.width * 0.01;
var hauteurecran = screen.height * 0.01;


Ensuite nous indiquons, les valeurs en px mais en faisant comme si celles-ci étaient prévues pour un écran de 100px de haut et de large, dans nos briques visuelles
En exemple pour le fond d'écran du piano
l[57] = [100, 60, "#975401", 0, 10, 2 * largeurecran +"px", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];

Enfin, nous modifions le générateur de briques visuelles pour que celui-ci redimensionne toutes les briques à la taille de l'écran en ajoutant les facteurs de l'écran récupérés dans largeurecran et hauteurecran
En exemple pour la largeur :
nouveauin.style.width = (l[uui][0]) * largeurecran +"px";

Ce qui nous donne le code complet pour dessiner un piano en générant des briques visuelles :

var largeurecran = screen.width * 0.01;
var hauteurecran = screen.height * 0.01;

var l={0:[],1:[],2:[],3:[],4:[],5:[],6:[],7:[],8:[],9:[],10:[],11:[],12:[],13:[],14:[],15:[],16:[],17:[]
,18:[],19:[],20:[],21:[],22:[],23:[],24:[],25:[],26:[],27:[],28:[],29:[],30:[],31:[],32:[]
,33:[],34:[],35:[],36:[],37:[],38:[],39:[],40:[],41:[],42:[],43:[],44:[],45:[],46:[],47:[],48:[],
49:[],50:[],51:[],52:[],53:[],54:[],55:[],56:[],57:[],58:[]};

var vam = [3.8, 30, "black", 3, 13, "2px", "absolute", 0.99, "rotate(0deg)", "height 1s", 85, 10];

var vam1 = [3, 7.7, 17.1, 21.8, 26.5, 35.9, 40.6, 50, 54.7, 59.4, 68.8, 73.5,
82.9, 87.6, 92.3, 0.6, 5.3, 10, 14.7, 19.4, 24.1, 28.8, 33.5, 38.2, 42.9,
 47.6, 52.3, 57, 61.7, 66.4, 71.1, 75.8, 80.5, 85.2, 89.9, 94.6, 0.6,
 6.8, 11.5, 14.7, 20.9, 25.6, 30.3, 33.5, 39.7, 44.4, 47.6, 53.8, 58.5,
 63.2, 66.4, 72.6, 77.3, 80.5, 86.7, 91.4, 96.1, 0];
var vam2 = ["white", "#975401"];
var vam3 = [2.3, 0.8, 2.9, 2.3, 0.8, 0.8, 2.9, 2.3, 0.8, 2.9, 2.3, 0.8, 0.8, 2.9, 2.3, 0.8, 2.9, 2.3, 0.8, 0.8, 2.9];

for(var b1= 0; b1 < 57; b1++)
{
for(var b2= 0; b2 < 12; b2++)
{
l[b1][b2]=vam[b2];
}
l[b1][3]=vam1[b1];
}
for(var b3= 15; b3 < 57; b3++)
{
l[b3][2]=vam2[0];
}
l[57][2]=vam2[1];
for(var b4= 15; b4 < 36; b4++)
{
l[b4][0]=4.4;
l[b4][4]=43;
l[b4][1]=l[b4][1]-20;
}
for(var b5= 36; b5 < 58; b5++)
{
l[b5][0]=vam3[b5-36];
l[b5][1]++;
}



l[57] = [100, 60, "#975401", 0, 10, 2 * largeurecran +"px", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];





l= {
  1: l[0], 2: l[1], 3: l[2], 4: l[3], 5: l[4], 6: l[5], 7: l[6], 8: l[7], 9: l[8], 10: l[9], 11: l[10],
12: l[11],13: l[12], 14: l[13], 15: l[14], 16: l[15], 17: l[16], 18: l[17], 19: l[18], 20: l[19], 21: l[20],
22: l[21], 23: l[22], 24: l[23],25: l[24], 26: l[25], 27: l[26], 28: l[27], 29: l[28], 30: l[29], 31: l[30],
32: l[31], 33: l[32], 34: l[33], 35: l[34], 36: l[35], 37: l[36], 38: l[37], 39: l[38], 40: l[39], 41: l[40],
42: l[41], 43: l[42], 44: l[43], 45: l[44], 46: l[45], 47: l[46], 48: l[47], 49: l[48], 50: l[49], 51: l[50],
42: l[41], 43: l[42], 44: l[43], 45: l[44], 46: l[45], 47: l[46], 48: l[47], 49: l[48], 50: l[49], 51: l[50],
52: l[51], 53: l[52], 54: l[53], 55: l[54], 56: l[55], 57: l[56], 58: l[57], 59: l[58]
}

for(var uui= 1; uui < 59; uui++)
{
var nouveauin;
function rajouteElemen() {
var boday   = document.boday || document.getElementsByTagName('body')[0],
nouveauin  = document.createElement("div");
nouveauin.setAttribute("id", "b"+uui+"v");
nouveauin.style.width = (l[uui][0]) * largeurecran +"px";
nouveauin.style.height = (l[uui][1]) * hauteurecran +"px";
nouveauin.style.background = l[uui][2];
nouveauin.style.marginLeft=(l[uui][3]) * largeurecran +"px";
nouveauin.style.marginTop=(l[uui][4]) * hauteurecran +"px";
nouveauin.style.borderRadius=l[uui][5];
nouveauin.style.position =l[uui][6];
nouveauin.style.opacity =l[uui][7];
nouveauin.style.transform =l[uui][8];
nouveauin.style.transition =l[uui][9];
//nouveauin.style.boxShadow =l[uui][10]+"px";
boday.insertBefore(nouveauin,boday.childNodes[0]);
}
rajouteElemen();
}




Cinq minutes de rire pour un adulte, durent une éternité pour un enfant.

mardi, juillet 11, 2017

Ajuster l'image en css

Pour ajuster l'image en css, nous pouvons prendre tous les cas les plus rencontré et fixer les valeurs. En exemple pour le piano du poste précédent :

 var largeurecran = screen.width;
var hauteurecran = screen.height;

if ( largeurecran == 480 && hauteurecran == 320 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=33;
}
}

if ( largeurecran == 320 && hauteurecran == 480 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=59;
}
}

if ( largeurecran == 360 && hauteurecran == 640 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=67;
}
}

if ( largeurecran == 640 && hauteurecran == 360 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=30;
}
}

if ( largeurecran == 768 && hauteurecran == 1024 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=53;
}
}

if ( largeurecran == 1024 && hauteurecran == 768 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=35.5;
}
}


if ( largeurecran == 800 && hauteurecran == 1280 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=61;
}
}
if ( largeurecran == 1280 && hauteurecran == 800 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=32;
}
}

if ( largeurecran == 980 && hauteurecran == 1280 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=52.5;
}
}
if ( largeurecran == 1280 && hauteurecran == 980 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=36;
}
}

if ( largeurecran == 1280 && hauteurecran == 600 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=27.3;
}
}
if ( largeurecran == 600 && hauteurecran == 1280 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=75;
}
}


if ( largeurecran == 1920 && hauteurecran == 900 )
{
for(var b4= 15; b4 < 34; b4++)
{
l[b4][4]=27.3;
}
}
if ( largeurecran == 900 && hauteurecran == 1920 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=75;
}
}

if ( largeurecran == 1280 && hauteurecran == 1024 )
{
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=36.1;
}
}

 Mais nous pouvons faire plus simple en identifiant en premier si la largeur est plus grande que la hauteur et placer une règle par rapport à la première valeur définie qui représente l'égalité de dimension

if ( largeurecran < hauteurecran  )
... 

if ( largeurecran > hauteurecran  )

... 

Comme  la référence de hauteur de base est 13%, nous allons prendre un repère légèrement au dessus à 14%

Ce qui taillé à la louche donne :

var largeurecran = screen.width;
var hauteurecran = screen.height;


if ( largeurecran > hauteurecran )
{
var rapportecran = largeurecran / hauteurecran;
var deltaecran = 43.2 - (( rapportecran - 0.8) *14);
console.log(deltaecran);
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=deltaecran;
}
}

if ( largeurecran < hauteurecran )
{
var rapportecran =  hauteurecran / largeurecran;
var deltaecran = 43.2 + (( rapportecran - 0.8) *14);
console.log(deltaecran);
for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=deltaecran;
}


 Ces valeurs sont à ajuster pour chaque cas, plus la valeur ôtée à rapportecran est proche de 1, plus le résultat est correcte


https://addons.mozilla.org/en-US/firefox/addon/lecjoa/


Cinq minutes de rire pour un adulte, durent une éternité pour un enfant.

jeudi, juillet 06, 2017

Utilisation d'une brique visuelle

Reprenons notre dernier poste sur comment dessiner un piano.

Nous avions dans le dernier poste, écrit les briques visuelles une à une pour bien montrer la construction.
En prenant la technique des boucles pour éviter les répétitions d'écriture, comme il a été déjà montré dans les briques acoustique cela donne le code

 var l={0:[],1:[],2:[],3:[],4:[],5:[],6:[],7:[],8:[],9:[],10:[],11:[],12:[],13:[],14:[],15:[],16:[],17:[]
,18:[],19:[],20:[],21:[],22:[],23:[],24:[],25:[],26:[],27:[],28:[],29:[],30:[],31:[],32:[]
,33:[],34:[],35:[],36:[],37:[],38:[],39:[],40:[],41:[],42:[],43:[],44:[],45:[],46:[],47:[],48:[],
49:[],50:[],51:[],52:[],53:[],54:[],55:[],56:[],57:[],58:[]};

var vam = [3.8, 30, "black", 3, 13, "1%", "absolute", 0.99, "rotate(0deg)", "height 1s", 85, 10];

var vam1 = [3, 7.7, 17.1, 21.8, 26.5, 35.9, 40.6, 50, 54.7, 59.4, 68.8, 73.5,
82.9, 87.6, 92.3, 0.6, 5.3, 10, 14.7, 19.4, 24.1, 28.8, 33.5, 38.2, 42.9,
 47.6, 52.3, 57, 61.7, 66.4, 71.1, 75.8, 80.5, 85.2, 89.9, 94.6, 0.6,
 6.8, 11.5, 14.7, 20.9, 25.6, 30.3, 33.5, 39.7, 44.4, 47.6, 53.8, 58.5,
 63.2, 66.4, 72.6, 77.3, 80.5, 86.7, 91.4, 96.1, 0];
var vam2 = ["white", "#975401"];
var vam3 = [2.3, 0.8, 2.9, 2.3, 0.8, 0.8, 2.9, 2.3, 0.8, 2.9, 2.3, 0.8, 0.8, 2.9, 2.3, 0.8, 2.9, 2.3, 0.8, 0.8, 2.9];

for(var b1= 0; b1 < 57; b1++)
{
for(var b2= 0; b2 < 12; b2++)
{
l[b1][b2]=vam[b2];
}
l[b1][3]=vam1[b1];
}
for(var b3= 15; b3 < 57; b3++)
{
l[b3][2]=vam2[0];
}
l[57][2]=vam2[1];
for(var b4= 15; b4 < 36; b4++)
{
l[b4][0]=4.4;
l[b4][4]=34;
l[b4][1]=l[b4][1]-20;
}
for(var b5= 36; b5 < 58; b5++)
{
l[b5][0]=vam3[b5-36];
l[b5][1]++;
}
l[57] = [100, 60, "#975401", 0, 10, "2%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];


l= {
  1: l[0], 2: l[1], 3: l[2], 4: l[3], 5: l[4], 6: l[5], 7: l[6], 8: l[7], 9: l[8], 10: l[9], 11: l[10],
12: l[11],13: l[12], 14: l[13], 15: l[14], 16: l[15], 17: l[16], 18: l[17], 19: l[18], 20: l[19], 21: l[20],
22: l[21], 23: l[22], 24: l[23],25: l[24], 26: l[25], 27: l[26], 28: l[27], 29: l[28], 30: l[29], 31: l[30],
32: l[31], 33: l[32], 34: l[33], 35: l[34], 36: l[35], 37: l[36], 38: l[37], 39: l[38], 40: l[39], 41: l[40],
42: l[41], 43: l[42], 44: l[43], 45: l[44], 46: l[45], 47: l[46], 48: l[47], 49: l[48], 50: l[49], 51: l[50],
42: l[41], 43: l[42], 44: l[43], 45: l[44], 46: l[45], 47: l[46], 48: l[47], 49: l[48], 50: l[49], 51: l[50],
52: l[51], 53: l[52], 54: l[53], 55: l[54], 56: l[55], 57: l[56], 58: l[57], 59: l[58]
}

for(var uui= 1; uui < 59; uui++)
{
var nouveauin;
function rajouteElemen() {
var boday   = document.boday || document.getElementsByTagName('body')[0],
nouveauin  = document.createElement("div");
nouveauin.setAttribute("id", "b"+uui+"v");
nouveauin.style.width = l[uui][0]+"%";
nouveauin.style.height = l[uui][1]+"%";
nouveauin.style.background = l[uui][2];
nouveauin.style.marginLeft=l[uui][3]+"%";
nouveauin.style.marginTop=l[uui][4]+"%";
nouveauin.style.borderRadius=l[uui][5];
nouveauin.style.position =l[uui][6];
nouveauin.style.opacity =l[uui][7];
nouveauin.style.transform =l[uui][8];
nouveauin.style.transition =l[uui][9];
//nouveauin.style.boxShadow =l[uui][10]+"%";
boday.insertBefore(nouveauin,boday.childNodes[0]);
}
rajouteElemen();
}


L'avantage d'utiliser des boucles, ne se trouve pas seulement dans la facilité d'écriture, mais aussi dans le fait de pouvoir modifier les paramètres de la hauteur en fonction des propriétés d'affichage de l'écran.

En exemple :
var largeurecran = screen.width;
if ( largeurecran < 800 )


for(var b4= 15; b4 < 36; b4++)
{
l[b4][4]=40;
}

}

Cinq minutes de rire pour un adulte, durent une éternité pour un enfant.

mercredi, juillet 05, 2017

Comment dessiner un piano

Le principe est que nous associons nos idées avec le langage.
Nous sommes dans un monde multidirectionnel, plusieurs dimensions aux lois différentes.
Notre raison se construit en analysant plusieurs éléments aux lois différentes.
Pour lier les deux, pour dessiner, nous allons donc utiliser une technique multidirectionnelle, pour que le langage soit adapté. Car toutes autres propositions semble incohérente

Pour créer notre dessin en multidirectionnel, nous créons en premier un générateur de briques contenant toutes les dimensions utilisées :

var boday   = document.boday || document.getElementsByTagName('body')[0],
nouveauin  = document.createElement("div");
nouveauin.setAttribute("id", "b"+uui+"v");

nouveauin.style.width = l[uui][0]+"%";
nouveauin.style.height = l[uui][1]+"%";
nouveauin.style.background = l[uui][2];
nouveauin.style.marginLeft=l[uui][3]+"%";
nouveauin.style.marginTop=l[uui][4]+"%";
nouveauin.style.borderRadius=l[uui][5];
nouveauin.style.position =l[uui][6];
nouveauin.style.opacity =l[uui][7];
nouveauin.style.transform =l[uui][8];
nouveauin.style.transition =l[uui][9];
//nouveauin.style.boxShadow =l[uui][8]+"%";

boday.insertBefore(nouveauin,boday.childNodes[0]);


Puis nous indiquons le nombre de briques utiles, dans une boucle qui reprend le générateur de briques

 for(var uui= 1; uui < 59; uui++)
{
var nouveauin;
function rajouteElemen() {
var boday   = document.boday || document.getElementsByTagName('body')[0],
nouveauin  = document.createElement("div");
nouveauin.setAttribute("id", "b"+uui+"v");

nouveauin.style.width = l[uui][0]+"%";
nouveauin.style.height = l[uui][1]+"%";
nouveauin.style.background = l[uui][2];
nouveauin.style.marginLeft=l[uui][3]+"%";
nouveauin.style.marginTop=l[uui][4]+"%";
nouveauin.style.borderRadius=l[uui][5];
nouveauin.style.position =l[uui][6];
nouveauin.style.opacity =l[uui][7];
nouveauin.style.transform =l[uui][8];
nouveauin.style.transition =l[uui][9];
//nouveauin.style.boxShadow =l[uui][8]+"%";

boday.insertBefore(nouveauin,boday.childNodes[0]);
}
rajouteElemen();

}



 Puis nous créons un tableau contenant la brique la plus rencontrée, et nous créons des boucles qui ne changent que les valeurs utiles pour modifier les briques.

En vue d'ensemble, sans créer les boucles dans la brique standat, afin de mieux voir, le dessin d'un piano donne :

var l={0:[],1:[],2:[],3:[],4:[],5:[],6:[],7:[],8:[],9:[],10:[],11:[],12:[],13:[],14:[],15:[],16:[],17:[]
,18:[],19:[],20:[],21:[],22:[],23:[],24:[],25:[],26:[],27:[],28:[],29:[],30:[],31:[],32:[]
,33:[],34:[],35:[],36:[],37:[],38:[],39:[],40:[],41:[],42:[],43:[],44:[],45:[],46:[],47:[],48:[]};

var l1 = [3.8, 30, "black", 3, 13, "1%", "absolute", 0.95, "rotate(0deg)", "height 1s", 85, 10];//2
var l2 = [3.8, 30, "black", 7.7, 13, "1%", "absolute", 0.95, "skew(0deg)", "height 1s", 85, 10];//4
var l3 = [3.8, 30, "black", 17.1, 13, "1%", "absolute", 0.95, "skewX(0deg)", "height 1s", 85, 10];//7
var l4 = [3.8, 30, "black", 21.8, 13, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//9
var l5 = [3.8, 30, "black", 26.5, 13, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//11
var l6 = [3.8, 30, "black", 35.9, 13, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//14
var l7 = [3.8, 30, "black", 40.6, 13, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//16
var l8 = [3.8, 30, "black", 50, 13, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//19
var l9 = [3.8, 30, "black", 54.7, 13, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//21
var l10 = [3.8, 30, "black", 59.4, 13, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//23
var l11 = [3.8, 30, "black", 68.8, 13, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//26
var l12 = [3.8, 30, "black", 73.5, 13, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//28
var l13 = [3.8, 30, "black", 82.9, 13, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//31
var l14 = [3.8, 30, "black", 87.6, 13, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//33
var l15 = [3.8, 30, "black", 92.3, 13, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//35

var l37 = [4.4, 20, "white", 0.6, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//1
var l17 = [4.4, 20, "white", 5.3, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//3
var l18 = [4.4, 20, "white", 10, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//5
var l19 = [4.4, 20, "white", 14.7, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//6
var l20 = [4.4, 20, "white", 19.4, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//8
var l21 = [4.4, 20, "white", 24.1, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//10
var l22 = [4.4, 20, "white", 28.8, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//12
var l23 = [4.4, 20, "white", 33.5, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//13
var l24 = [4.4, 20, "white", 38.2, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//15
var l25 = [4.4, 20, "white", 42.9, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//17
var l26 = [4.4, 20, "white", 47.6, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//18
var l27 = [4.4, 20, "white", 52.3, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//20
var l28 = [4.4, 20, "white", 57, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//22
var l29 = [4.4, 20, "white", 61.7, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//24
var l30 = [4.4, 20, "white", 66.4, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//25
var l31 = [4.4, 20, "white", 71.1, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//27
var l32 = [4.4, 20, "white", 75.8, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//29
var l33 = [4.4, 20, "white", 80.5, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//30
var l34 = [4.4, 20, "white", 85.2, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//32
var l35 = [4.4, 20, "white", 89.9, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//34
var l36 = [4.4, 20, "white", 94.6, 34, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//36

var l16 = [2.3, 31, "white", 0.6, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//1-
var l38 = [0.8, 31, "white", 6.8, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//3-
var l39 = [2.9, 31, "white", 11.5, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//5
var l40 = [2.3, 31, "white", 14.7, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//6-
var l41 = [0.8, 31, "white", 20.9, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//8-
var l42 = [0.8, 31, "white", 25.6, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//10-
var l43 = [2.9, 31, "white", 30.3, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//12
var l44 = [2.3, 31, "white", 33.5, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//13-
var l45 = [0.8, 31, "white", 39.7, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//15-
var l46 = [2.9, 31, "white", 44.4, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//17
var l47 = [2.3, 31, "white", 47.6, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//18-
var l48 = [0.8, 31, "white", 53.8, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//20-
var l49 = [0.8, 31, "white", 58.5, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//22-
var l50 = [2.9, 31, "white", 63.2, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//24
var l51 = [2.3, 31, "white", 66.4, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//25-
var l52 = [0.8, 31, "white", 72.6, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//27-
var l53 = [2.9, 31, "white", 77.3, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//29
var l54 = [2.3, 31, "white", 80.5, 13.1, "1%", "absolute", 0.95, "matrix(1, -0.3, 0, 1, 0, 0)", "height 1s", 85, 10];//30
var l55 = [0.8, 31, "white", 86.7, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//32-
var l56 = [0.8, 31, "white", 91.4, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//34-
var l57 = [2.9, 31, "white", 96.1, 13.1, "1%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];//36


var l58 = [100, 60, "#975401", 0, 10, "2%", "absolute", 0.95, "scale(1, 1)", "height 1s", 85, 10];


l= {
  1: l1, 2: l2 ,3: l3 , 4: l4 ,5: l5, 6: l6, 7: l7,
  8: l8, 9: l9,10: l10, 11: l11,12: l12, 13: l13, 14: l14,
  15: l15, 16: l16,17: l17, 18: l18,19: l19, 20: l20, 21: l21,
  22: l22, 23: l23,24: l24, 25: l25,26: l26, 27: l27, 28: l28,
  29: l29, 30: l30,31: l31, 32: l32,33: l33, 34: l34, 35: l35,
  36: l36 , 37: l37, 38: l38, 39: l39, 40: l40, 41: l41, 42: l42,
  43: l43, 44: l44, 45: l45, 46: l46, 47: l47, 48: l48, 49: l49,
  50: l50, 51: l51, 52: l52, 53: l53, 54: l54, 55: l55, 56: l56,
  57: l57, 58: l58
}


for(var uui= 1; uui < 59; uui++)
{
var nouveauin;
function rajouteElemen() {
var boday   = document.boday || document.getElementsByTagName('body')[0],
nouveauin  = document.createElement("div");
nouveauin.setAttribute("id", "b"+uui+"v");

nouveauin.style.width = l[uui][0]+"%";
nouveauin.style.height = l[uui][1]+"%";
nouveauin.style.background = l[uui][2];
nouveauin.style.marginLeft=l[uui][3]+"%";
nouveauin.style.marginTop=l[uui][4]+"%";
nouveauin.style.borderRadius=l[uui][5];
nouveauin.style.position =l[uui][6];
nouveauin.style.opacity =l[uui][7];
nouveauin.style.transform =l[uui][8];
nouveauin.style.transition =l[uui][9];
//nouveauin.style.boxShadow =l[uui][8]+"%";

boday.insertBefore(nouveauin,boday.childNodes[0]);
}
rajouteElemen();

}


En exemple appliqué , ici image et sons, sont entièrement générés avec des briques (visuelles et acoustiques), c'est entièrement en langage multidirectionnel

Cinq minutes de rire pour un adulte, durent une éternité pour un enfant.