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.

Aucun commentaire: