CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 02 10 15:27:47

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Graphique

> DESSINER DES CERCLES/DISQUES/LIGNES EN JAVASCRIPT

DESSINER DES CERCLES/DISQUES/LIGNES EN JAVASCRIPT

Information sur la source

Note :

8,00 / 10

Catégorie :Graphique Classé sous :dessiner, cercle, disque, ligne Niveau :Initié Date de création :24/05/2008 Date de mise à jour :27/05/2008 11:14:02 Vu / téléchargé :7 588 / 233

Auteur : macsou01

Ecrire un message privé

Site perso

Commentaire sur cette source (32)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Cette source permet de dessiner des cercles, des disques et des lignes en javascript sans utiliser des outils tels que SVG ou Canvas, cela permet d'être utilisable sous la plupart des navigateurs, mais il n'y a pas vraiment de lissage et c'est un peu lent.

Astuces :

Pour faire un cercle lissé et flou mettez par exemple ceci comme paramètres :
- Rayon : 150
- Epaisseur du cercle : 50
- Opacité du cercle : très basse ( entre 1 et 20 )

Pour faire une ligne lissée :
- Epaisseur de la ligne : plus grande que 3 de préférence
- Opacité de la ligne: faible ( entre 1 et 20 )

D'autres possibilités existent, il suffit de tester.

Et n'hésitez pas à me dire si vous avez des bugs !

:)

Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript">
<!--
function drawCircle(a, b, r, w, c, o) {
if (document.getElementById('full').checked) {
var h = 1;
}
else {
var h = w;
}
var y = 0;
for (x = 0; x <= Math.round(r / Math.sqrt(2)); x++) {
y = Math.sqrt(Math.pow(r, 2) - (Math.pow(x, 2)));
if (!document.getElementById('full').checked) {
setPx(x + a, y + b, w, h, c, o);
setPx(a - x, y + b, w, h, c, o);
setPx(a - x, b - y, w, h, c, o);
setPx(x + a, b - y, w, h, c, o);
setPx(y + a, b - x, w, h, c, o);
setPx(a - y, b - x, w, h, c, o);
setPx(y + a, x + b, w, h, c, o);
setPx(a - y, x + b, w, h, c, o);
}
else {
setPx(a - x, y + b, 2 * x, h, c, o);
setPx(a - x, b - y, 2 * x, h, c, o);
setPx(a - y, b - x, 2 * y, h, c, o);
setPx(a - y, x + b, 2 * y, h, c, o);
}
}
}
function drawLine(x1, y1, x2, y2, w, c, o) {
var y = x = 0;
var signX = (x1 - x2) / Math.abs(x1 - x2) * -1;
var signY = (y1 - y2) / Math.abs(y1 - y2) * -1;
if (x2 == x1) {
setPx(Math.min(x1, x2), Math.min(y1, y2), w, Math.abs(y2 - y1), c, o);
} else if (y1 == y2) {
setPx(Math.min(x1, x2), Math.min(y1, y2), Math.abs(x2 - x1), w, c, o);
} else {
if (Math.abs((y2 - y1) / (x2 - x1)) <= 1) {
while (x <= Math.abs(x2 - x1)) {
y = (y2 - y1) / Math.abs(x2 - x1) * x;
setPx(signX * x + x1, y + y1, w, w, c, o);
x++;
}
} else {
while (y <= Math.abs(y2 - y1)) {
x = (x2 - x1) / Math.abs(y2 - y1) * y;
setPx(x + x1, signY * y + y1, w, w, c, o);
y++;
}
}
}
}
function setPx(x, y, w, h, c, o) {
var px = document.createElement('div');
px.id = 'px';
px.style.cssText = 'position:absolute; top:' + y + 'px; left:' + x + 'px; background-color:' + c + '; width:' + w + 'px; height:' + h + 'px; opacity:' + o / 100 + '; filter:alpha(opacity=' + o + ');';
document.body.appendChild(px);
}
function clearPx() {
while (document.getElementById('px')) {
document.body.removeChild(document.getElementById('px'));
}
}
// -->
</script>
<style type="text/css">
body {
font-family:verdana, arial;
font-size:11px;
color:#333333;
cursor:default;
margin:0px;
}
p {
margin:0px;
font-weight:normal;
}
form {
margin:0px;
}
#main {
border:solid 5px #CCCCCC;
background-color:#F0F0F0;
text-align:center;
padding:5px;
width:500px;
margin:5px auto 5px auto;
}
</style>
<title>Dessiner en Javascript</title>
</head>
<body>
<div id="main">
<form method="post" action="javascript:;" style="float:left;">
<p>
<span style="font-weight:bold">Cercle</span><br/><br/>
Abcisse du centre du cercle<br/>
<input type="text" id="x" value="100"/><br/>
Ordonnée du centre du cercle<br/>
<input type="text" id="y" value="100"/><br/>
Rayon du cercle<br/>
<input type="text" id="r" value="50"/><br/>
Epaisseur du cercle<br/>
<input type="text" id="w" value="1"/><br/>
Couleur du cercle<br/>
<input type="text" id="c" value="red"/><br/>
Opacité du cercle<br/>
<input type="text" id="o" value="100"/><br/><br/>
<input type="checkbox" id="full"/><label for="full"> Dessiner plein (disque)</label><br/><br/>
<input type="submit" value="Afficher"
onclick="drawCircle(parseInt(document.getElementById('x').value), parseInt(document.getElementById('y').value),
parseInt(document.getElementById('r').value), parseInt(document.getElementById('w').value),
document.getElementById('c').value, parseInt(document.getElementById('o').value));"/>
</p>
</form>
<form method="post" action="javascript:;" style="float:right;">
<p>
<span style="font-weight:bold">Ligne</span><br/><br/>
Abcisse du premier point<br/>
<input type="text" id="x1" value="80"/><br/>
Ordonnée du premier point<br/>
<input type="text" id="y1" value="200"/><br/>
Abcisse du second point<br/>
<input type="text" id="x2" value="100"/><br/>
Ordonnée du second point<br/>
<input type="text" id="y2" value="100"/><br/>
Epaisseur de la ligne<br/>
<input type="text" id="w2" value="1"/><br/>
Couleur de la ligne<br/>
<input type="text" id="c2" value="red"/><br/>
Opacité de la ligne<br/>
<input type="text" id="o2" value="100"/><br/><br/>
<input type="submit" value="Afficher"
onclick="drawLine(parseInt(document.getElementById('x1').value), parseInt(document.getElementById('y1').value),
parseInt(document.getElementById('x2').value), parseInt(document.getElementById('y2').value),
parseInt(document.getElementById('w2').value), document.getElementById('c2').value, parseInt(document.getElementById('o2').value));"/>
</p>
</form>
<div style="clear:both;"></div>
<form method="post" action="javascript:;" style="border-top:solid 1px #CCCCCC; margin-top:5px; padding-top:5px;">
<p>
<input type="submit" value="Effacer" onclick="clearPx();"/>
<input type="submit" value="Infos" onclick="alert('Attention, cette application Javascript est très lente sous IE (surtout la version 8).\n' +
'Elle a été testée avec succes sous:\n -Firefox 2\n -Firefox 3.0 RC1\n -IE7\n -IE8 Beta 1\n -Opera 9.26\n -Safari 3.1.1')"/>
</p>
</form>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
		<script type="text/javascript">
		<!--
			function drawCircle(a, b, r, w, c, o) {
				if (document.getElementById('full').checked) {
					var h = 1;
				}
				else {
					var h = w;
				}
				var y = 0;
				for (x = 0; x <= Math.round(r / Math.sqrt(2)); x++) {
					y = Math.sqrt(Math.pow(r, 2) - (Math.pow(x, 2)));
					if (!document.getElementById('full').checked) {
						setPx(x + a, y + b, w, h, c, o);
						setPx(a - x, y + b, w, h, c, o);
						setPx(a - x, b - y, w, h, c, o);
						setPx(x + a, b - y, w, h, c, o);
						setPx(y + a, b - x, w, h, c, o);
						setPx(a - y, b - x, w, h, c, o);
						setPx(y + a, x + b, w, h, c, o);
						setPx(a - y, x + b, w, h, c, o);
					}
					else {
						setPx(a - x, y + b, 2 * x, h, c, o);
						setPx(a - x, b - y, 2 * x, h, c, o);
						setPx(a - y, b - x, 2 * y, h, c, o);
						setPx(a - y, x + b, 2 * y, h, c, o);
					}
				}
			}

			function drawLine(x1, y1, x2, y2, w, c, o) {
				var y = x = 0;
				var signX = (x1 - x2) / Math.abs(x1 - x2) * -1;
				var signY = (y1 - y2) / Math.abs(y1 - y2) * -1;
				if (x2 == x1) {
					setPx(Math.min(x1, x2), Math.min(y1, y2), w, Math.abs(y2 - y1), c, o);
				} else if (y1 == y2) {
					setPx(Math.min(x1, x2), Math.min(y1, y2), Math.abs(x2 - x1), w, c, o);
				} else {
					if (Math.abs((y2 - y1) / (x2 - x1)) <= 1) {
						while (x <= Math.abs(x2 - x1)) {
							y = (y2 - y1) / Math.abs(x2 - x1) * x;
							setPx(signX * x + x1, y + y1, w, w, c, o);
							x++;
						}
					} else {
						while (y <= Math.abs(y2 - y1)) {
							x = (x2 - x1) / Math.abs(y2 - y1) * y;
							setPx(x + x1, signY * y + y1, w, w, c, o);
							y++;
						}
					}
				}
			}
			
			function setPx(x, y, w, h, c, o) {
				var px = document.createElement('div');
				px.id = 'px';
				px.style.cssText = 'position:absolute; top:' + y + 'px; left:' + x + 'px; background-color:' + c + '; width:' + w + 'px; height:' + h + 'px; opacity:' + o / 100 + '; filter:alpha(opacity=' + o + ');';
				document.body.appendChild(px);
			}

			function clearPx() {
				while (document.getElementById('px')) {
					document.body.removeChild(document.getElementById('px'));
				}
			}
		// -->
		</script>
		<style type="text/css">
			body {
				font-family:verdana, arial;
				font-size:11px;
				color:#333333;
				cursor:default;
				margin:0px;
			}

				p {
					margin:0px;
					font-weight:normal;
				}
				
				form {
					margin:0px;
				}
				
				#main {
					border:solid 5px #CCCCCC;
					background-color:#F0F0F0;
					text-align:center;
					padding:5px;
					width:500px;
					margin:5px auto 5px auto;
				}
		</style>
		<title>Dessiner en Javascript</title>
	</head>
	<body>
		<div id="main">
			<form method="post" action="javascript:;" style="float:left;">
				<p>
					<span style="font-weight:bold">Cercle</span><br/><br/>
					Abcisse du centre du cercle<br/>
					<input type="text" id="x" value="100"/><br/>
					Ordonnée du centre du cercle<br/>
					<input type="text" id="y" value="100"/><br/>
					Rayon du cercle<br/>
					<input type="text" id="r" value="50"/><br/>
					Epaisseur du cercle<br/>
					<input type="text" id="w" value="1"/><br/>
					Couleur du cercle<br/>
					<input type="text" id="c" value="red"/><br/>
					Opacité du cercle<br/>
					<input type="text" id="o" value="100"/><br/><br/>
					<input type="checkbox" id="full"/><label for="full"> Dessiner plein (disque)</label><br/><br/>
					<input type="submit" value="Afficher"
					onclick="drawCircle(parseInt(document.getElementById('x').value), parseInt(document.getElementById('y').value),
					parseInt(document.getElementById('r').value), parseInt(document.getElementById('w').value),
					document.getElementById('c').value, parseInt(document.getElementById('o').value));"/>
				</p>
			</form>
			<form method="post"  action="javascript:;" style="float:right;">
				<p>
					<span style="font-weight:bold">Ligne</span><br/><br/>
					Abcisse du premier point<br/>
					<input type="text" id="x1" value="80"/><br/>
					Ordonnée du premier point<br/>
					<input type="text" id="y1" value="200"/><br/>
					Abcisse du second point<br/>
					<input type="text" id="x2" value="100"/><br/>
					Ordonnée du second point<br/>
					<input type="text" id="y2" value="100"/><br/>
					Epaisseur de la ligne<br/>
					<input type="text" id="w2" value="1"/><br/>
					Couleur de la ligne<br/>
					<input type="text" id="c2" value="red"/><br/>
					Opacité de la ligne<br/>
					<input type="text" id="o2" value="100"/><br/><br/>
					<input type="submit" value="Afficher"
					onclick="drawLine(parseInt(document.getElementById('x1').value), parseInt(document.getElementById('y1').value),
					parseInt(document.getElementById('x2').value), parseInt(document.getElementById('y2').value),
					parseInt(document.getElementById('w2').value), document.getElementById('c2').value, parseInt(document.getElementById('o2').value));"/>
				</p>
			</form>
			<div style="clear:both;"></div>
			<form method="post"  action="javascript:;" style="border-top:solid 1px #CCCCCC; margin-top:5px; padding-top:5px;">
				<p>
					<input type="submit" value="Effacer" onclick="clearPx();"/>
					<input type="submit" value="Infos" onclick="alert('Attention, cette application Javascript est très lente sous IE (surtout la version 8).\n' +
					'Elle a été testée avec succes sous:\n -Firefox 2\n -Firefox 3.0 RC1\n -IE7\n -IE8 Beta 1\n -Opera 9.26\n -Safari 3.1.1')"/>
				</p>
			</form>
		</div>
	</body>
</html>

Conclusion

Ce code permet de faire quelques dessins mais est assez ( voire très ) lent sous IE, préférez donc un navigateur comme Opera, Safari ou Firefox pour le tester. (les plus rapides sont Opera et Safari pour ce code).

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

index.html 5 885 octets

Télécharger le zip

Historique

25 mai 2008 08:53:27 :: Ajout d'un Zip.
25 mai 2008 11:34:20 :: Ajout dune petite astuce dans la description du code... Ajout d'une capture d'écran.
27 mai 2008 11:10:58 :: Ajout de la fonction de dessin de lignes. Modification de la capture, du titre, de la source et des descriptions.
27 mai 2008 11:14:02 :: Modification du titre, des descriptions, et de la source. Modification de la capture. Ajout de la fonction de dessin de lignes.

Sources du même auteur

FRACTALE DE MANDELBROT

CRÉER UN REFLET D'UNE IMAGE

GÉNÉRATEUR DE DÉGRADÉS

Toutes les sources de macsou01

Sources de la même categorie

STOCK/FOREX CANDLE CHART USING CANVAS API par BlackWizzard

MODIFIER SES FEUILLES DE STYLES .CSS À LA VOLÉE AVEC JAVASCR... par Phildepantin

FARMVILLE - HEURE ET COMBO LIST IMAGES par ym_trainz

[-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47

OGG MEDIA PLAYER par kazma

Toutes les sources de la catégorie Graphique

Sources en rapport avec celle ci

CONSOLE DOS par djebbipgm

CALCULER LE PÉRIMÈTRE D'UN CERCLE AVEC LE DIAMÈTRE par gnix

ENLEVER LA LIGNE POINTILLÉE QUI ENTOURE LE SWF par Sylouric

INVITE DE COMMANDE par stfou

DESSINER DES LIGNES SUR VOTRE PAGE WEB par MaX3315

Commentaires et avis

Commentaire de kazma le 24/05/2008 20:52:37

je vient de l'essayer sous ie et ff en faisant un copie coller du texte
vue qu'il n'y a pas de zip et sa ne marche pas

Commentaire de kazma le 24/05/2008 21:39:49 8/10

finalement en recopiant le texte avec la touche "copier dans le presse papier" le script marche

Commentaire de macsou01 le 25/05/2008 08:51:36

Oui car en copiant directement il y a des # devant chaque ligne. ;)
Je vais mettre un zip, pour ceux qui pr?f?rent t?l?charger.

Commentaire de nicomilville le 25/05/2008 12:22:26 10/10

Pas mal du tout, tu ne serais pas par hasard comment dessiner des triangle en javascript sans utiliser SVG...

a++

Commentaire de macsou01 le 25/05/2008 12:25:04

Alors ?a doit ?tre faisable mais pas forcement facile... Mais il faudrait dessiner les triangles en les d?coupant en 3 lignes d'apr?s les coordonn?es des trois sommets si tu vois ce que je veux dire... ;)

Commentaire de nicomilville le 25/05/2008 12:30:43

oui, a peut près...
En fait c'est pour ma source sur le théorème de pythagore, j'aimerai rajouter un peut de piquant !
A tu un tuto vers lequel m'orienté ?
Quel librairie dois je utiliser pour dessiner ?

a++

Commentaire de macsou01 le 25/05/2008 13:02:39

Alors moi comme tu vois je n'utilise pas de librairie pour les cercles car chaque pixel est un div cr?e dynamiquement. Mais c'est pas des plus simple...
Donc je te proposerais plut?t d'utiliser par exemple SVG ( manipulable par Javascript je crois mais j'ai jamais essay? ) ou Canvas ( ne marche pas sous tous les navigateurs... ) qui est un ?l?ment du HTML 5.
Avec Canvas il est tr?s simple de dessiner toute sortes de choses et ceci tr?s rapidement.
Pour la doc voir ici : http://developer.mozilla.org/fr/docs/Tutoriel_canvas ( et plus particuli?rement la partie 'Formes g?om?triques' ).
Voil? j'esp?re t'avoir aid?.

Commentaire de nicomilville le 25/05/2008 13:21:14

Merci, je vais essayé avec les pixel, j'adore les défi !

a++

Commentaire de lakichemole le 26/05/2008 08:22:57 8/10

Jolie cercle :) tu peux rajouter IE6 pour ta compatibilité.
Par contre impossible de faire une "vrai" cercle quand je met épaisseur 1 j'ai quand même le haut du cercle et le bas qui sont élargie.

Commentaire de macsou01 le 26/05/2008 17:49:22

Comment ?a ? Moi quand je mets 1 j'ai un vrai cercle... Peux tu me donner tes param?tres ?

Commentaire de macsou01 le 26/05/2008 19:58:01

Ah je viens de comprendre je crois ( ^^' ) si c'est que le haut et le bas du cercle sont aplatis c'est ? cause de la methode pour faire le cercle, et sans lissage on ne peut pas faire mieux. ( essaye par exemple de faire un cercle sous paint ).

Commentaire de adelami le 26/05/2008 20:15:03

Salut,
Je viens de tester sous IE6 et ton script fait des ellipses aux lieux de faire des cercles.A l'épaisseur 1, ca trace un cercle avec des bords bizarres:
On dirait qu'on fait tourner un "pipe" ("|") autour d'un centre si tu vois ce que je veux dire.
Par contre sous FF, ca marche nickel, je suis fan!
Je mets 9/10
@+++

Commentaire de adelami le 26/05/2008 20:16:38 9/10

Juste pour mettre la note : 9/10 (J'avais pas compris le nouveau système de CS) ;-)

Commentaire de macsou01 le 26/05/2008 21:33:58

Ok, c'est bizarre, mais en m?me temps, le moteur de rendu de IE6 se fait vraiment tres vieux... ;)
Et juste pour dire que bient?t je vais modifier la source pour qu'on puisse aussi dessiner des lignes ( et donc des triangles ). Je pense que ?a fera plaisir ? nicomilville !

Commentaire de nicomilville le 27/05/2008 06:39:58

ok, merci, je vais suivre ta source de très près !

a++

Commentaire de lakichemole le 27/05/2008 09:24:42

tant qua faire fait un paint :) avec des formes et tout^^

Commentaire de macsou01 le 27/05/2008 10:21:35

En fait je peux pas vraiment faire un Paint ( avec dessin a la souris donc ) car chaque forme represente beaucoup de div et c'est tres lent, donc si on doit redessiner la forme des qu'on bouge la souris je vous dis pas ! :P Mais dans un autre langage comme le C ?a doit etre beaucoup plus rapide.

Commentaire de lakichemole le 27/05/2008 10:24:25

Oui rien de comparable :)

Commentaire de rogo le 27/05/2008 20:33:08

Pour info, en utilisant le même principe (div) :
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

Commentaire de macsou01 le 27/05/2008 20:38:30

En effet c'est tres bien fait ! et rapide en plus.

Commentaire de foxz le 06/06/2008 22:52:45 8/10

pas con.. bravo

Commentaire de Hatchepsut le 09/07/2008 20:02:19 5/10

Le DOM est très lent, la méthode innerHTML permet d'améliorer la rapidité, tout en restant aux normes, contrairement au DOM, dont seul le navigateur est maître de la norme qu'il utilise, même si la page se présente aux normes XHTML 1.0 strict.

L'algorithme aussi est lent, beaucoup trop d'opérations. L'épaisseur n'est pas une épaisseur, c'est un simple étalage de ligne.

Merci d'avoir posté...

Commentaire de lakichemole le 10/07/2008 09:35:15

Quand tu dis que l'algorithme est lent sur quel autre algorithme te base tu? tu en connais d'autre ?ça m'interresse!

Commentaire de Hatchepsut le 10/07/2008 09:51:42

Je me base sur le fait que dans une équation d'une droite, on a quand même des constantes. Dans cet algorithme le coefficient directeur est recalculé dans chaque boucle, ce qui prend trop de multiplications.

Moi je ne te cache pas que j'utilise ta source pour l'instant, je suis pressé sur le temps, et je n'ai pas le temps d'implémenter toutes les choses les plus élémentaires. Bien sûr par la suite, je referais la méthode qui permet de tracer des lignes. De toute façon dans l'état des choses on ne peut l'utiliser que pour une épaisseur de trait égale à 1.

Si tu veux savoir mes références, en Delphi j'avais implémenté le dessin de n'importe quel polygone, dont les sommets sont pondérées par une couleur, et un poids, et ceci pour le meilleur des rendus, non pas comme openGL ou d'autres rendus 3D que je connais.

Puis j'ai aussi réécris pas mal de chose de la librairie GD, librairie standard en PHP, qui permet de créer / dessiner sur des images, notamment le tracé de portions d'ellipses.

Commentaire de macsou01 le 10/07/2008 11:20:41

C'est vrai que c'est pas super optimisé, c'était surtout pour essayer.
Si tu veux plus de performances, va ici : http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm ;)

Commentaire de lakichemole le 10/07/2008 11:23:49

A dommage :/ quand tu auras fait le nouveau algo préviens moi jte le piquerais :) Et pour les références je voulais pas forcément savoir mais tu as l'air d'être content de me les dire donc content de t'avoir rendu content :) Sinon tu parles du meilleur des rendu en le comparant avec openGL, j'y connais pas grand chose en rendu et autre imagerie, tu peux m'expliquer vite fait ou c'est trop compliqué trop long? Ou taa une démo de ton truc peut être?

Commentaire de lakichemole le 10/07/2008 11:26:16

A cool mascou01 ça ma l'air super rapide :)j'achète!

Commentaire de nicomilville le 10/07/2008 11:28:50

c'est pas payant je crois !

a++

Commentaire de Hatchepsut le 10/07/2008 11:33:50

Merci MACSOU pour le lien :)

Pour en revenir sur OpenGL, il suffit de dessiner un carré de sommet rouge, vert, bleu, et blanc par exemple. On voit une belle diagonale en plein milieu du carré, inversée si on le regarde de l'autre côté. Ca montre tout simplement la façon de découper les polygones.

Pour dessiner un polygone, on le découpe en triangles, parce que ça on aime bien, et on sait faire. Et OpenGl minimise certes le nombre de triangles, ce que je précise n'a aucun avantage, à part se préserver d'une multiplication par polygone. Au final, si on prend un bon découpage, pour un polygone convexe à n côtés, on devrait avoir n+2 triangles avec la méthode du barycentre. Le nombre de pixels atteints est le même, sauf que le rendu est meilleur. OpenGL n'est pas le seul à faire ça, je pourrais citer VRML par exemple, même si ce n'est pas forcément une référence.

Commentaire de lakichemole le 10/07/2008 11:39:50

Ok merci pour ton explication :) Mais j'imagine que les gars d'openGL on fait ça pour les perf? Car en séssion des million de polygon la multiplication en moins peut faire la différence? Après c'est une question de priorité rendu/performance?

Commentaire de Hatchepsut le 10/07/2008 11:44:47

Je ne pense pas que une multiplication en moins par polygone soit avantageuse. Parce que on ne parle pas de polygones 3D, qui eux peuvent être très nombreux, il s'agit de polygones 2D, en fait la projection des polygones de l'espace dans le plan écran. Et au final, ce nombre de polygones 2D, même si la scène est complexe, n'est pas très grand. Et se préserver d'une multiplication, au regard de toutes celles qui sont nécessaires pour les calculer, pour moi n'a aucun intérêt. Ca reviendrait à faire du 40.003 fps contre 40.0029 ^^

Commentaire de lakichemole le 10/07/2008 11:59:26

oki, donc il sont nul chez oenGL ou c'est juste que y a que la 3D qui les interresse?

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Dessiner et redimensionner un cercle ou disque à la souris... :s [ par Tyra3l ] Bonjour à tous, Tout d'abord joyeux noël :p Je bloque sur un problème en javascript : en effet je dois pouvoir créer un cercle de diamètre x (x étan Agrandir et diminuer rayon cercle avec la souris [ par Tyra3l ] Bonjour à tous, Tout d'abord joyeux noël :p Je bloque sur un problème en javascript : en effet je dois pouvoir créer un cercle de diamètre x (x étan [RECRUTEMENT] OFLUXIA, jeu en ligne multijoueur de conquête spatiale [ par oilla ] Bonjour, Je dirige la création d'un jeu en ligne et je recherche un programmeur JavaScript. J'ai pensé qu'il y a peut-être des personnes intéressé Problème de script [ par pedrito57 ] Bonjour, j'ai un petit problème avec mon script. Le début marche sans le php mais dès que j'y intègre la partie php, ca ne marche plus. Je débute, si Merci pour votre aide... [ par 32dens ] Bonjour, Dans la page index du site http://mcarmagnac.free.fr/index.html se trouve un script javascript (ligne 192) qui permet d'afficher le contenu Comment inserer dynamiquement un champ input [ par aholigans ] salut à vs ts, en faite j'ai le meme probleme que jarod1980, j'ai un tableau contenant 7 champs tewte (textfields), lorsque je clique sur un boutton u Ligne d'un tableau cliquable [ par KasPe ] Bonjour, Désolé si ma question n'est pas au bon endroit, mais comme j'ai l'intention de rajouter à ce code du javascript, je me suis dis ... Je cherc Transformer une chaine en ligne de code [ par AlexP ] Bonjour,J'ai écris un programme qui me génére des lignes de code. Or javascript ne les execute pas.Ex : var i=5var chaine ="formulaire.checkbox"+i+"ch annuler le dbclick [ par Stephane ] salutvoila je fais un genre d'explorateur avec des lignes représentant des fichiers, donc je voudrai que quand je clique sur une ligne ca me sélection Figer une ligne de tableau ?? [ par mickelo ] Y a t-il moyen de figer une ligne de tableau pour que lorsqu'on défile la page grace a l'ascenseur cette ligne reste en haut de page, une sorte de rec

Nos sponsors

Derniers Blogs

[DESIGN PATTERNS] PARTIE 2: DIP: DEPENDENCY INVERSION PRINCIPLE par tja

TECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURS par ROMELARD Fabrice

TECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOUR par ROMELARD Fabrice

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

Forum

RE : COUPER UNE PARTIE DE CHAINE par nhervagault

COUPER UNE PARTIE DE CHAINE par bydouille

JE VEUX LE CODE D'ANNIMATION AVEC JAVASCRIPT par dalinda

J'AI TROUVéE UN CODE SOURCE SUR INTERNET ET J'AI PAS LE COMPRIS par dalinda

RE : RéCUPERER LA TAILLE D'UN DIV par bumbo

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Cherche formation complete en GIMP
Budget : 750€
Module sur Prestashop
Budget : 700€
Redaction d-une page de vente pour un ebook
Budget : 300€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5