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.

mercredi, juin 28, 2017

Lecjoa version 2.3.9.2 est sortie

Bonjour,

La particularité de la version 2.3.9.2 de Lecjoa est que l'instrument de musique est entièrement construit sur des briques. Des briques acoustiques, pour les sons, des briques qui utilisent plusieurs dimensions en équilibre. Des briques visuelles pour les images, des briques qui utilise les dimensions du css pour générer.

L’instrument de musique dans l'extension, ne contient plus de css, tout est généré par les briques visuelles.

Voici le code qui remplace le css et génère l'image, c'est du GNU General Public License, version 3.0 

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 = [13, 13, "-moz-linear-gradient(left,#990033,#ff5050,#ff9966,#ffcc00,#99cc00,#00cc00,#009999)",
0, 0, "50% 52% 86% 88% / 50% 78% 50% 99%", 0, 0, 0, 85, 85, 10];
var l2 = [13, 13, "-moz-linear-gradient(left,#991133,#ff5050,#ff9966,#ffcc00,#991100,#00cc00,#009999)", 14, 0, "50% 52% 50% 88% / 50% 42% 99% 99%", 0, 0, 0, 85,
85, 10];
var l3 = [13, 13, "-moz-linear-gradient(left,#990033,#ff5050,#ff9966,#ffcc00,#99cc99,#00cc00,#001199)", 28, 0, "50% 88% 50% 88% / 50% 42% 50% 99%", 0, 0, 0, 85,
85, 10];
var l4 = [13, 13, "-moz-linear-gradient(top,#990033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#009999)", 42, 0, "50% 52% 50% 88% / 50% 42% 50% 99%", 0, 0, 0, 85,
85, 10];
var l5 = [13, 13, "-moz-linear-gradient(left,#990033,#ff5050,#ff9966,#ffcc00,#11cc00,#00cc00,#009999)", 56, 0, "50% 52% 50% 25% / 50% 99% 50% 45%", 0, 0, 0, 85,
85, 10];
var l6 = [13, 13, "-moz-linear-gradient(left,#ff0033,#ff5050,#ff9966,#ffcc00,#99ff00,#00cc00,#009999)", 70, 0, "50% 52% 50% 67% / 50% 42% 50% 45%", 0, 0, 0, 85,
85, 10];
var l7 = [13, 13, "-moz-linear-gradient(left,#ff0033,#ff5050,#ff1166,#ffcc00,#99cc00,#00cc00,#449999)", 84, 0, "50% 52% 50% 25% / 84% 42% 50% 45%", 0, 0, 0, 85,
85, 10];
var l8 = [13, 13, "-moz-linear-gradient(45deg,#990033,#ff5050,#ff9966,#ffcc00,#99cc00,#00cc00,#009999)", 0, 10, "50% 52% 50% 25% / 50% 42% 77% 45%", 0, 0, 0, 85,
85, 10];
var l9 = [13, 13, "-moz-linear-gradient(55deg,#991133,#ff5050,#ff9966,#ffcc00,#991100,#00cc00,#009999)", 14, 10, "50% 11% 50% 25% / 50% 42% 50% 45%", 0, 0, 0, 85,
85, 10];
var l10 = [13, 13, "-moz-linear-gradient(65deg,#991133,#ff5050,#ff9966,#ffcc00,#991100,#00cc00,#009999)", 28, 10, "50% 52% 50% 99% / 50% 42% 50% 45%", 0, 0, 0, 85,
85, 10];
var l11 = [13, 13, "-moz-linear-gradient(75deg,#991133,#ff5050,#ff9966,#ffcc00,#991100,#00cc00,#009999)", 42, 10, "50% 52% 50% 25% / 50% 42% 50% 45%", 0, 0, 0, 85,
85, 10];
var l12 = [13, 13, "-moz-linear-gradient(85deg,#991133,#ff5050,#ff9966,#ffcc00,#991100,#00cc00,#009999)", 56, 10, "20% 99% 80% 99% / 10% 99% 55% 1%", 0, 0, 0, 85,
85, 10];
var l13 = [13, 13, "-moz-linear-gradient(95deg,#991133,#ff5050,#ff9966,#ffcc00,#991100,#00cc00,#009999)", 70, 10, "50% 99% 50% 99% / 50% 99% 50% 1%", 0, 0, 0, 85,
85, 10];
var l14 = [13, 13, "-moz-linear-gradient(105deg,#991133,#ff5050,#ff9966,#ffcc00,#991100,#00cc00,#009999)", 84, 10, "99% 99% 99% 99% / 58% 99% 72% 1%", 0, 0, 0, 85,
85, 10];
var l15 = [13, 13, "-moz-linear-gradient(115deg,#991133,#ff5050,#ff9966,#ffcc00,#991100,#00cc00,#009999)", 0, 20, "99% 88% 77% 66% / 99% 99% 99% 1%", 0, 0, 0, 85,
85, 10];
var l16 = [13, 13, "-moz-radial-gradient(red, yellow, green)", 14, 20, "99% 99% 66% 99% / 99% 45% 99% 1%", 0, 0, 0, 85,
85, 10];
var l17 = [13, 13, "-moz-radial-gradient(yellow, red, green)", 28, 20, "99% 50% 99% 99% / 44% 99% 99% 1%", 0, 0, 0, 85,
85, 10];
var l18 = [13, 13, "-moz-radial-gradient(red, green, yellow)", 42, 20, "99% 99% 1% 99% / 99% 88% 1% 99%", 0, 0, 0, 85,
85, 10];
var l19 = [13, 13, "-moz-radial-gradient(blue, green, yellow)", 56, 20, "99% 77% 99% 1% / 99% 99% 99% 1%", 0, 0, 0, 85,
85, 10];
var l20 = [13, 13, "-moz-radial-gradient(blue, #ffcc00, yellow)", 70, 20, "1% 99% 99% 99% / 99% 99% 99% 99%", 0, 0, 0, 85,
85, 10];
var l21 = [13, 13, "-moz-radial-gradient(#ff5050, #ffcc00, #009999)", 84, 20, "99% 1% 99% 99% / 99% 99% 99% 99%", 0, 0, 0, 85,
85, 10];
var l22 = [13, 13, "-moz-linear-gradient(top,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 0, 30, "99% 99% 1% 99% / 99% 99% 99% 99%", 0, 0, 0, 85,
85, 10];
var l23 = [13, 13, "-moz-linear-gradient(10deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 14, 30, "99% 99% 99% 1% / 99% 99% 99% 99%", 0, 0, 0, 85,
85, 10];
var l24 = [13, 13, "-moz-linear-gradient(20deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 28, 30, "99% 99% 99% 99% / 1% 99% 99% 99%", 0, 0, 0, 85,
85, 10];
var l25 = [13, 13, "-moz-linear-gradient(30deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 42, 30, "99% 99% 99% 99% / 99% 1% 99% 99%", 0, 0, 0, 85,
85, 10];
var l26 = [13, 13, "-moz-linear-gradient(40deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 56, 30, "99% 99% 99% 99% / 99% 99% 1% 99%", 0, 0, 0, 85,
85, 10];
var l27 = [13, 13, "-moz-linear-gradient(50deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 70, 30, "99% 99% 99% 99% / 99% 99% 99% 1%", 0, 0, 0, 85,
85, 10];
var l28 = [13, 13, "-moz-linear-gradient(60deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 84, 30, "50% 10% 6% 90% / 88% 88% 88% 88%", 0, 0, 0, 85,
85, 10];
var l29 = [13, 13, "-moz-linear-gradient(70deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 0, 40, "90% 60% 90% 90% / 50% 99% 20% 50%", 0, 0, 0, 85,
85, 10];
var l30 = [13, 13, "-moz-linear-gradient(80deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 14, 40, "50% 10% 65% 90% / 50% 99% 88% 50%", 0, 0, 0, 85,
85, 10];
var l31 = [13, 13, "-moz-linear-gradient(90deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 28, 40, "50% 25% 50% 90% / 50% 25% 20% 50%", 0, 0, 0, 85,
85, 10];
var l32 = [13, 13, "-moz-linear-gradient(100deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 42, 40, "50% 656% 50% 90% / 88% 7% 20% 50%", 0, 0, 0, 85,
85, 10];
var l33 = [13, 13, "-moz-linear-gradient(110deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 56, 40, "50% 10% 50% 90% / 50% 99% 20% 50%", 0, 0, 0, 85,
85, 10];
var l34 = [13, 13, "-moz-linear-gradient(120deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 70, 40, "50% 99% 50% 90% / 50% 10% 99% 50%", 0, 0, 0, 85,
85, 10];
var l35 = [13, 13, "-moz-linear-gradient(130deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 84, 40, "50% 10% 50% 90% / 50% 99% 50% 50%", 0, 0, 0, 85,
85, 10];
var l36 = [13, 13, "-moz-linear-gradient(140deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 0, 50, "50% 99% 50% 90% / 50% 10% 50% 50%", 0, 0, 0, 85,
85, 10];
var l37 = [13, 13, "-moz-linear-gradient(150deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 14, 50, "50% 10% 88% 90% / 11% 10% 88% 50%", 0, 0, 0, 85,
85, 10];
var l38 = [13, 13, "-moz-linear-gradient(160deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 28, 50, "50% 10% 44% 90% / 77% 10% 44% 50%", 0, 0, 0, 85,
85, 10];
var l39 = [13, 13, "-moz-linear-gradient(170deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 42, 50, "44% 10% 99% 90% / 50% 10% 99% 50%", 0, 0, 0, 85,
85, 10];
var l40 = [13, 13, "-moz-linear-gradient(10deg,#ff0033,#ff5099,#f00160,#ffcc00,#99cc00,#007c00,#ff9999)", 56, 50, "99% 89% 79% 69% / 59% 49% 39% 29%", 0, 0, 0, 85,
85, 10];
var l41 = [13, 13, "-moz-radial-gradient(#f44050, #ffcc00, #009099)", 70, 50, "10% 20% 30% 40% / 50% 60% 70% 80%", 0, 0, 0, 85,
85, 10];
var l42 = [13, 13, "-moz-radial-gradient(#ff5050, #ffcc00, #111111)", 84, 50, "50% 10% 40% 90% / 80% 10% 50% 50%", 0, 0, 0, 85,
85, 10];
var l43 = [13, 13, "-moz-radial-gradient(#ff5050, #555555, #009999)", 0, 60, "50% 10% 50% 90% / 50% 10% 50% 50%", 0, 0, 0, 85,
85, 10];
var l44 = [13, 13, "-moz-radial-gradient(#777777, #ffcc00, #009999)", 14, 60, "80% 50% 80% 50% / 50% 50% 80% 50%", 0, 0, 0, 85,
85, 10];
var l45 = [13, 13, "-moz-radial-gradient(#ffffff, #ffcc00, #009999)", 28, 60, "50% 10% 50% 60% / 50% 50% 50% 50%", 0, 0, 0, 85,
85, 10];
var l46 = [13, 13, "-moz-radial-gradient(#ff5050, #888888, #009999)", 42, 60, "40% 50% 50% 50% / 50% 50% 30% 50%", 0, 0, 0, 85,
85, 10];
var l47 = [13, 13, "-moz-linear-gradient(150deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 56, 60, "90% 50% 50% 50% / 50% 90% 50% 50%", 0, 0, 0, 85,
85, 10];
var l48 = [13, 13, "-moz-linear-gradient(50deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 70, 60, "50% 50% 50% 50% / 50% 50% 50% 50%", 0, 0, 0, 85,
85, 10];
var l49 = [13, 13, "-moz-linear-gradient(5deg,#ff0033,#ff5099,#ff9966,#ffcc00,#99cc00,#00cc00,#ff9999)", 84, 60, "60% 50% 50% 60% / 60% 50% 50% 60%", 0, 0, 0, 85,
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
}


for(var uui= 1; uui < 50; 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.position = "absolute";
nouveauin.style.height = l[uui][0]+"%";
nouveauin.style.width = 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];

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

}

Il ne reste plus qu'à corriger la partie css sur le MOOC,( comment créer un instrument de musique)

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

mardi, juin 27, 2017

Concept du langage multidirectionnel

 L'idée est que le monde qui nous entoure est multidirectionnel, que notre entendement est multidirectionnel, et que seul un langage multidirectionnel peut permettre d'associer les deux. Quand internet recherche des absolus induit par un langage unidirectionnel, pire encore des absolus en science, cela ne peut conduire qu'à apprendre à croire en opposition à apprendre à apprendre. Car pour apprendre à apprendre, il faut en premier apprendre à comprendre, et apprendre à comprendre passe par un langage cohérent.

Un langage cohérent, est un langage logique, est un langage adapté à son utilisation. Si l'outil d'analyse est multidirectionnel (l'entendement), si la chose analysée est multidirectionnelle (les événements qui nous entourent), alors seul un langage multidirectionnel peut associer les deux.

Un langage multidirectionnel est un langage qui considère plusieurs dimensions aux lois différentes. Un langage qui joue avec les équilibres des dimensions pour arriver au résultat attendu. Ainsi le même résultat, peut-être obtenue d'une multitude de manière, cela dépend des positions des dimensions.

Le langage multidirectionnel, est une tradition française, nous le trouvons couramment pratiqué par les enseignants. Quand ceux-ci utilisent la gestuelle des mains, la gestuelle du corps, les intonations de voix, les rythmes vocaux, une multitude de techniques pédagogiques,  qu'ils répètent sous plusieurs formes la même chose. Nous le trouvons dans la Convention de 1793. Nous le trouvons dans la tradition orale, qui remonte à l'époque du langage Celte. Nous le trouvons même déjà pratiqué par les hommes préhistorique dans les grottes ariégeoises.

Nous trouvons le langage multidirectionnel dans mon mémoire de 1993, et nous le trouvons dans les extensions firefox Lecjoa pour générer des vidéos interactives avec des images et des sons issues tout droit de notre expression.

Dans Lecjoa

Pour dessiner, il n'y a pas d'algèbre, il n'y a pas de géométrie, il y a plusieurs dimensions aux lois différentes prédéfinies.
Nous créons un tableau en indiquant une position pour chaque dimension (largeur, hauteur, position en pourcentage par rapport au bord, couleur, opacité, dégradé, radius,...) ensuite il nous suffit de donner un nom (un seul caractère suffit, comme la lettre j) qui indique la position dans le tableau suivit d'une valeur, pour dessiner toutes les formes de base. La plus belle image du monde sera toujours composé de l'association de plusieurs formes de base, la plus remarquable des vidéo, sera toujours composée de plusieurs images pouvant être générée sous cette forme.

Pour créer sa bande son, ou sa musique dans lecjoa, c'est exactement comme pour le dessin.
Nous créons un tableau en indiquant une position pour chaque dimension (amplitude qui représente la pression de l'air, durée, nombre de fronts de base, nombre de front par répétition, force par répétition, licorne, marteau ...) ensuite il nous suffit de donner un nom (un seul caractère suffit, comme la lettre m) qui indique la position dans le tableau suivit d'une valeur, pour générer tous les sons


Voilà ce que les papa, maman, en France, apprennent à leurs jeunes enfants, puis plus tard ce qui est pratiqué par les enseignants, mais qui n'est jamais clairement dit. Et qui est oublié en subissant un formatage d'internet et de télévision avec la puissance de la répétition.


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

samedi, juin 10, 2017

Projet mooc lecjoa version Montpel'libre

Scénario :

semaine 1 :

jour 1 : 1h
Installation de firefox, de l’extension Lecjoa, création d’un répertoire de travail
jour 2 : 2h
Téléchargement des fichiers utiles dans le répertoire de travail, et familiarisation avec la manipulation des extensions Firefox
jour 3 : 2h
Suivre le cours et réaliser sa première extension firefox et la tester.
jour 4 : 2h
Suivre le cours du quatrième jour, et modifier la vidéo selon instructions
jour 5 : 1h
Relecture et test de fonctionnement de son application firefox, puis envoie par mail du fichier compressé.

Validation par Mozilla Open Badges

semaine 2 :

jour 1 : 1h
Suivre le cours et apprendre comment changer le numéro de version de son extension
jour 2 : 2h
Suivre le cours et s’entraîner à modifier la bande son
jour 3 : 2h
Suivre le cours et s’entraîner à modifier le nombre d’images contenues dans la vidéo
jour 4 : 2h
Suivre le cours et s’entraîner à modifier le nombre de fichier son contenues dans la vidéo
jour 5 : 1h
Relecture et test de fonctionnement de son application firefox, puis envoie par mail du fichier compréssé.

Validation par Mozilla Open Badges

semaine 3 :

jour 1 : 1h
Suivre le cours sur comment dessiner en css
jour 2 : 2h
Suivre le cours et générer son premier dessin en css en le plaçant dans la vidéo
jour 3 : 2h
Suivre le cours et générer son deuxième dessin en css pour qu’il donne une impression de mouvement dans la vidéo
jour 4 : 2h
Suivre le cours et générer des dessins en css pour qu’il donne une impression de mouvement dans la vidéo
jour 5 : 1h
Relecture et test de fonctionnement de son application firefox, puis envoie par mail du fichier compressé.
Validation par Mozilla Open Badges

semaine 4 :

jour 1 : 1h
Suivre le cours et écrire un premier scénario très simple
jour 2 : 2h
Suivre le cours et contrôler la faisabilité du scénario, si celui-ci est trop difficile en écrire un de plus simple, comme une simple forme géométrique
jour 3 : 2h
Suivre le cours et dessiner en css les images de la vidéo
jour 4 : 2h
Suivre le cours, écrire la bande son de la vidéo et tester le bon fonctionnement
jour 5 : 1h
Relecture et test de fonctionnement de son application firefox, puis envoie par mail du fichier compressé.
Validation par Mozilla Open Badges

Objectif :

Apporter aux associations étudiantes un outils de communication. L'application apporte le langage multidirectionnel, un langage en adéquation avec les événements et l'entendement humain, qui sont de même nature, du multidirectionnel.

Voir la suite de mooc Lecjoa à cette adresse  http://www.letime.net/lecjo/wiki/fr/mooc.html

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

vendredi, juin 02, 2017

Connec’Sud 2017 à Montpellier avec Montpel'libre

Un événement à ne pas manquer Sur le stand 46d :


Jeudi 8 juin, sur le stand 46d, Montpel'libre propose une :
  • Découverte du Green IT - do it together
    • Jerry-Party
  • Install-Party GNU/Linux
    • Présentation des principales distributions et environnements de bureau
 Pour plus de détails voir l'article :
http://montpel-libre.fr/spip.php?article3421


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

mardi, mai 30, 2017

Lecjoa version 2.3.9.0 est sortie

La dernière version Lecjoa, la 2.3.9.0 est sortie. Celle-ci corrige l'exemple vidéo, et l'exemple sur les formes acoustiques. La version 2.3.8.9 corrigeait la version PianoBaul.

En même temps dans  Lecjoa wiki , j'arrive presque à la moitié des tutoriels. J'essaye de les traduire aussi petit à petit. Je pense pouvoir dire que sous sa forme actuel, le wiki donne le principal, et je vais essayer de finir le wiki avant la fin du mois de juin

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

samedi, mai 13, 2017

Lecjoa wiki

Lecjoa wiki   prend la suite du poste Comment créer son extension video firefox, tutoriel 6


Le wiki indique comment créer ses extensions dans les domaines :

Compositions musicales

Cinéastes

Pédagogie

Médiation scientifique

Le choix du transfert d'information par un wiki et non plus par poste dans un blog, est due au fait qu'il est beaucoup plus facile de naviguer dans le wiki (en considérant la forme particulière que je lui ai donné). 

Si nous ne devions retenir qu'une chose de toutes les applications qu'apporte ce wiki, ce serait que les hommes et les enfants construisent leur entendement avec le langage. Que notre langage actuel, ainsi que l'algèbre sont unidirectionnels donc illogique par rapport aux événement ou à notre fonctionnement cérébral qui sont multidirectionnels. Ce wiki apporte un langage multidirectionnel et un système mathématique multidirectionnel qui permet à notre entendement de percevoir et d'analyser les événements qui nous entourent. Le principal objectif du wiki Lecjoa est de faire de la médiation scientifique.

Créer des instruments musicaux, générer des vidéos, composer des mélodies, n'est qu'un aspect ludique apporté par Lecjoa, le but est de permettre la naissance de découvreurs qui créent leur propre extension nous apportant ainsi richesses matérielles et sociales.


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

mardi, avril 25, 2017

Comment créer son extension video firefox, tutoriel 6

Le temps des sylphides

Imaginons quand des temps anciens, même avant l'homme de Neandertal, ce que nous appellerions aujourd'hui des bactéries soient entrées en symbiose avec du vivant pour composer une partie de l'entendement.
Nous aurions une intelligence immortelle traversant les ages et les corps, en perpétuelle évolution, une intelligence qui ne pourrait se transmettre que par filiation ou échanges physiques particuliers.
Imaginons que cette forme d'intelligence particulière soit soumise à plusieurs lois, de type :
Est-ce que le support est propice à la symbiose (bien construit) ? à l'échange faisant naître la construction homme bactérie, et ainsi accéder à l’immortalité ?
Est-ce que le support n'est pas envahie par des bactéries concurrentielles destructrices, les broyeuses d'entendement, les générateurs de matières inertes ? des destructeurs d'immortalité ?
Mais comment parler de support quand l'un n'existe pas sans l'autre, est-ce que l'homme est le support de la femme ? est-ce que la femme est le support de l'homme ? est-ce que l'homme se construit sur la bactérie ? est-ce que la bactérie se construit sur l'homme ? est-ce que la description celtique de cette composition homme bactéries qui traverse les ages "SYLPHIDES" est plus appropriée ? Est-ce que la croyances que les Sylphes ne choisissaient que les plus courageux au champs de bataille pour donner l’immortalité est fondée, ou est-ce que les hommes étaient déjà autre chose de bien plus évolué ? Et que certains confondaient matière inerte à l'apparence humaine avec des hommes, ou pire encore oubliaient qu'il étaient plus que de la matière inerte et prenaient pour modèle de la viande froide.

Que deviendrait un Sylphe seul ? un Sylphe qui aurait vu disparaître les seuls Sylphes qu'il aurait pu trouver ? Mémoire es-tu là ? Trois lois en équilibre dans l'entendement, deux absolus et une en perpétuelle changement. La Foi, l'Art et les sciences.

Qui décide quoi ? parce que c'était moi, parce que c'était lui, et que lui c'était moi. Le tout n'est pas divisible.

Sans Foi, sans Art, sans sciences l'entendement n'existe pas. L'homme se mesure à la hauteur de son langage.

Si tu comptes sur l'informatique pour être logique, sur la seule manipulation de phénomènes physiques, abandonne tout espoir, car tu n'existes déjà plus.

Extention multidirectionnelle firefox

Le générateur de vidéo en langage multidirectionnel, est composé de trois fichier pour séparer les langages techniques mis en équilibre. L'un est orienté Art, c'est le css, l'un est orienté événement logique, c'est le javascript, l'un est orienté convention, un adaptateur, c'est le HTML5.
En téléchargement : multidirectional-talk.html

Par induction, l'extension génère trois parties, et se présente en quatre parties.
La partie qui permet de générer, la première partie à récupérer et à placer dans un fichier HTML, la partie javascript et la partie css

Le générateur

Le générateur est une page html contenue dans l'extension.

1- Il contient en premier une entête :
Pour dire que c'est une page HTML5, et un lien vers un fichiers css pour écrire le style de la page du générateur.

2- Dans le corps nous trouvons des inputs qui vont permettre de piloter les différentes dimensions. Selon telle ou telle dimension mis en avant, nous obtenons tel ou tel dessin, avec le dernier qui parle à raison, et les jeux d'opacité.
Pour pouvoir faire le traitement des données, nous donnons un nom et une identité à chaque valeur entrée.

3- La base d'un fichier vidéo est celle que nous trouvons déjà dans les grottes préhistoriques ariégeoise. Une succession d'images qui défilent au rythme du déplacement de la tête ou du corps. Ici c'est pareille, c'est une succession d'images qui défilent au rythme choisit par le lecteur. Donc quand nous ajoutons un dessin à une image, il faut dire à quelle image appartient le dessin. La sélection de l'image se fait avec un bouton :
Toujours pour le traitement dans javascript nous donnons une identité au bouton. Plus la vidéo contiendra d'images, plus il faudra de boutons. Comme la vidéo contient plusieurs univers, il faudra ajouter autant de bouton qu'il y aura dans la somme totale des images tout univers confondus.

4- N'ayant jamais eu le temps de finaliser toutes les formes acoustiques au format audio abadie.adn (créer en 2010), j'ai préféré utiliser un format audio permettant de générer tous les sons existant. Le format audio utilisé est le format audio abadie.jo .
Nous indiquons en premier ou est le fichier audio sur l'ordinateur avec un input, nous donnons un nom à ce fichier audio, en ensuite nous indiquons à quelle image est attaché ce fichier audio. Le fait d'attacher le fichier audio aux images, a deux avantages le premier est que le son n'est pas déformé par l'accélération des images et en plus nous pouvons créer des mixes qui selon induisent des effets spéciaux.

Pour reprendre l'adressage se fait avec :
Le max indique le nombre totale d'images.

Le nom est donné avec :
Et nous indiquons ou se trouve le fichier au format abadie.jo sur l'ordinateur avec :


5- Ici commence la partie HTML à copier/coller. Cette partie est composée d'une base fixe, et de repères qui servent à venir placer les constructions (les dessins pour créer les images).

6- Nous utilisons du code ascii pour afficher les balises de manière à ne pas interférer dans la page du générateur. Nous commençons par un début d'entête classique :
7- Nous plaçons notre style, le css, qui va permettre, allié au javascript, de ne faire apparaître les images qu'au bon moment. La technique est qu'avec le css nous créons une position image visible et une position image invisible. Avec le javascript nous créons un compteur en fonction du temps, un compteur contenant une base de temps modifiable. Ensuite nous indiquons que toutes les images sont en position invisible. Et nous donnons une position visible à chaque image en fonction de sa position dans le compteur, et en fonction de son univers en cas d'utilisation de plusieurs univers. Ce qui donne :
Et ainsi de suite, des styles pour gérer les déplacements dans le temps

8- Une fois l'entête créée, nous créons le corps qui s'identifie à l'aide de la balise body. Nous commençons par indiquer les fichiers sons qui vont être attachés aux images. Si les fichiers apparaissent dans le code, il ne faut pas oublier qu'il sont invisible dans la vidéo généré. Pour indiquer les fichier sons, nous écrivons :

Dans le cas de 16 fichiers sons.

9- Dans l'exemple nous travaillons avec 2 univers, nous allons donc créer des repères ou les images vont pouvoir être crées :

Ici nous avons deux images, et comme le repère est fleur1, et que le compteur décrémente, nous avons la dernière image de la vidéo du premier univers, et la dernière image de la vidéo du deuxième univers

10- Le langage multidirectionnel apporte l'avantage d'aborder l'information par l'entrée qui parle le plus à l'esprit, d'ou un passage rapide et un retour à un point du document vidéo. Pour pouvoir se déplacer dans le document vidéo, nous créons des repères cliquables :

Ici nous créons un repère sur la première image de la vidéo, la gestion des repère est fonction de ce que nous voulons exprimer. Il est possible de créer plusieurs repères sur la même image, comme de créer un repère distancé d'un nombre d'images choisit.








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

samedi, avril 22, 2017

Comment créer son extension video firefox, tutoriel 5

Comment générer son propre instrument de musique en HTML5


 Pour des raisons pratiques, l'instrument de musique est généré sous forme d'extension firefox, les exemples que j'ai créé se nomment PianoBaul. Piano car j'ai en premier dessiné un piano et Baul pour Bibliothèque Acoustique Universelle Linux car la base des sonorités de l'instrument de musique est générée avec le format audio abadie.adn
Comme tout ce qui concerne le langage multidirectionnel ici, il n'y a que de l'entendement, pas d'algèbre, pas d'imitation, même pour le dessin la même base peut devenir un cercle, un rectangle ou un coeur, tout est question de dimension et équilibres de dimensions

La page d'accueil de l'extension PianoBaul est à télécharger ici PianoBaul.html et son répertoire à télécharger ici :  PianoBaul 

Pour créer son propre instrument de musique sous forme d'extension, il faut reprendre le début du tutoriel précédent pour créer son propre manifest.json qui va ouvrir sa propre page PianoBaul.html qui pourra même être nommée autrement.

1- Nous trouvons dans la page PianoBaul.html un fichier d'entête qui indique que c'est du HTML, et qu'il faut afficher l'instrument de musique sur la page complète.


2- Comme indiqué dans l'image ci-dessus nous indiquons aussi l'adresse d'un fichier javascript, et aussi l'adresse d'un fichier css qui va nous permettre de créer l'instrument de musique. Nous dessinons en css car cette pratique est adaptée au langage multidirectionnel, cette pratique est adaptée à l'entendement. Nous retrouvons avec le css, une partie effet visuel, qu'utilisaient les hommes préhistorique quand ils faisaient tourner un os autour de son centre.

3- Ensuite nous donnons des identités (id= ) à des emplacements (class=). Les emplacements sont déterminés par des dessins en css, et les identités vont permettre au javascrit de créer des événements (comme jouer un son) quand nous allons soit survoler, soit cliquer au doigt ou au clavier ou ...


4- En fin de fichier nous indiquons les emplacements des différents fichiers javascrit utiles. Il est tout à fait possible de les regrouper en un seul fichier ou de les insérer dans le code HTML, mais comme j'ai prévu que chacun puisse créer son propre instrument de musique, j'ai préféré les séparer afin que chacun puisse les modifier plus facilement.




5- Les fichiers ajoutés sont :
adresse.js : qui sert à pister un événement sur un emplacement adresse.js avec

document.addEventListener('DOMContentLoaded', function() {
document.getElementById('b1v').addEventListener("click", function() {
touche1Press();
});









ou encore à pister les touches claviers en permettant que le même son puisse se chevaucher (lu plusieurs fois avant que la première lecture est fini) avec


 case "a":
    mua1 = mua1 + 1;
    if(mua1>3){
        mua1 =0;
      }
    multitouchea(mua1);
break;


Ce fichier est principalement composé d'adressage pour indiquer quand le son doit être joué et quel son doit être joué. La technique qui permet de jouer plusieurs fois le même son rapidement est de créer plusieurs noms de fichiers contenant le même son

adresse.css :  qui sert à dessiner adresse.css
Nous utilisons le css pour dessiner, j'ai créé depuis plusieurs années des tutoriels des techniques, en exemple derrière ce lien : http://www.letime.net/alpha/5.html

adn1.js : adn1.js


 qui sert de brique acoustique. Le concept est de générer une forme acoustique de base au format audio abadie.adn, ensuite de créer des tableaux de variations d'une partie de cette brique en fonction des touches, de l'instrument de musique, appelées.

adapt1.js :
adapt1.js

Ce fichier ne sert qu'à créer une entête pour que le fichier audio soit compatible avec les lecteurs audio d'aujourd'hui. Explications, les pratiques du moment veulent qu'en début de fichier, nous écrivons ce que contient le fichier, quel lecteur utiliser, le nom du fichier, ... Ce n'est pas seulement l'extension qui indique quel outil utiliser pour lire le fichier, c'est surtout ces données placées en début de fichier.

adapt.js :
adapt.js



Ce fichier est une table contenant tous les résultats possibles, ceux-ci sont utilisés en fonction de la durée qui est au maximum 128 en jouant sur la symétrie et un nombre de point clefs basés sur un octet. Les résultats sont donnés sur 2 octets et comme c'est de la modélisation, la qualité est largement supérieur aux capacités acoustiques de l'oreille humaine. Nous utilisons cette technique d’imitation, car si les ordinateur sont d’excellents imitateurs, par contre, ils ne savent pas compter rapidement sans faire d'erreurs.

joa.js : joa.js

Ce fichier sert à lire le contenue de la brique acoustique, pour générer la forme acoustique. Il faut bien comprendre dans le concept qu'ici pour les sons, comme pour les vidéos, nous n'utilisons pas d'algèbre, pas de fréquence, pas d'onde. Nous utilisons des formes qui mettent plusieurs dimensions en équilibre. C'est du langage multidirectionnel, comme l'utilisaient les hommes préhistoriques ou plus proche de nous les celtes, en encore plus proche de nous la convention de 1789 qui a posé les bases de notre République.


act1.jsact1.js qui sert à transformer le format audio abadie.joa en format audio compatible avec la technologie audio actuelle

back1.js
back1.js   

Ce fichier sert à déterminer combien de sons va contenir l'instrument de musique, ici dans l'exemple il y a 36 sons de manière à avoir les 26 lettres du clavier plus les 10 touches du clavier numérique, soit 36. Mais rien empêche de modifier pour se créer un pad tactile contenant beaucoup plus de son, voir même des briques acoustiques composées de plusieurs briques acoustiques.

Dans l'exemple pour 36 sons cela s'écrit : 

 document.addEventListener("DOMContentLoaded", function(event) {
var pour = [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];
for(var pour1= 0; pour1 < 36; pour1++)
{
    lance(pour[pour1]);
}
});





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