Des pixels en DHTML

Pour tracer une ligne, ou un pixel dans votre navigateur, et ensuite l'animer, copier le code suivant dans une page html :
<body> <center> <div id='ecran'></div><!--cette <div> recevra l'image--> <script> var buffer=[] // on cre un tableau qui contiendra tous les points afin de l'afficher en une fois function ma_fonction() { buffer=[]//on vide le buffer //ici le code de votre fonction //on met dans le buffer un pixel de couleur 'color' en (x,y) avec la ligne suivante: buffer.push('<div style="left:',x,'px;top:',y,'px;width:1px;height:1px;background-color:',color,'"></div>') document.getElementById('ecran').innerHTML=buffer.join('') // Affiche le contenu du buffer en entier setTimeout(ma_fonction,60)//on repete en boucle } ma_fonction() </script>
Plus il y a de div l'cran, plus ce sera long afficher. (le mieux est de les compter, et d'optimiser au mieux cette partie)
Votre cran a une rsolution suprieur 800X600 en moyenne. Cela fait plus de 480000 pixels, il n'est donc pas possible de faire du plein cran, juste de petites animations d'environs 10000 pixels (100X100 et encore, avec un bon processeur...).
A moins de ncessiter de trs longs calculs, votre code ne changera pas beaucoup la vitesse d'excution du script, utilisez donc ds que possible, de grands carrs, rectangles ou lignes verticales ou horizontales, cela prend autant de temps qu'afficher un pixel.
Pour tester, vous pouvez remplacer la ligne "//ici le code de votre fonction" par :
var color='#FF0000'
//ici le code de votre fonction
for (var x=0;x<100;x++) for (var y=0;y<100;y++)

Ce qui aura pour effet de tracer un rectangle rouge de 100 pixels sur 100. (ce qui est loin d'tre optimis, cela peut tre fait avec une seule div)
Il est ainsi possible de convertir un code (si il est assez leger) du c, c++, turbo-pascal en js, comme dans cet exemple (d'aprs un code d'Edorul).

Si vous voulez tracer des lignes autres qu'horizontales ou verticales, utilisez cette fonction :
<script> /****************************************************************************/ /* place un pixel ou une ligne verticale/horizontale de couleur col */ /****************************************************************************/ setpx = function(x, y, w, h, col) { buffer.push('<div style="position:absolute;left:',x,'px;top:',y,'px;width:',w,'px;height:',h,'px;overflow:hidden;background-color:',col,';`"><\/div>') } /****************************************************************************/ /* Line Algorithm (trace une ligne en prenant en compte les spec. des <div>)*/ /****************************************************************************/ myline = function(x1, y1, x2, y2, col) { if (x1 > x2) { var _x2 = x2; var _y2 = y2; x2 = x1; y2 = y1; x1 = _x2; y1 = _y2; } var dx = x2-x1, dy = Math.abs(y2-y1), x = x1, y = y1, yIncr = (y1 > y2) ? -1 : 1; if (dx >= dy) { var pr = dy<<1, pru = pr - (dx<<1), p = pr-dx, ox = x; while ((dx--) > 0) { x++; if (p > 0) { setpx(ox, y, x-ox, 1, col); y += yIncr; p += pru; ox = x; } else {p += pr;} } setpx(ox, y, x2-ox+1, 1, col); } else { var pr = dx<<1, pru = pr - (dy<<1), p = pr-dy, oy = y; if (y2 <= y1) { while ((dy--) > 0) { if (p > 0) { setpx(x++, y, 1, oy-y+1, col); y += yIncr; p += pru; oy = y; } else {y += yIncr; p += pr;} } setpx(x2, y2, 1, oy-y2+1, col); } else { while ((dy--) > 0) { y += yIncr; if (p > 0) { setpx(x++, oy, 1, y-oy, col); p += pru; oy = y; } else {p += pr;} } setpx(x2, oy, 1, y2-oy+1, col); } } } </script>

Voila, vous en savez dsormais autant que moi, si vous crer des animations partir de ce script, faites le moi savoir, a me fera plaisir.