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.

Aucun commentaire: