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

Ce site au démarrage

begin process at 2010 02 10 04:12:18

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

TRIANGLES EN JAVASCRIPT

Information sur la source

Note :

5,50 / 10

Catégorie :Graphique Classé sous :triangle Niveau :Débutant Date de création :20/04/2006 Vu :3 757

Auteur : biskbart

Ecrire un message privé

Site perso

Commentaire sur cette source (3)

Ajouter un commentaire et/ou une note

Description

Tout est dans le titre. Cela permet de dessiner des triangles. C'est asez rapide pour du Javascript

Source

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<script>
function carre(x,y,l,h,couleur)
// Un rectangle, c'est pour cela qu'on l'appelle carré
{
return '<div style="position:absolute;'+
'border-left:' + l + 'px solid ' + couleur + ';'+
'left:' + x + 'px;'+
'top:' + y + 'px;'+
'width : 0px;' +
'height:' + h + 'px;'+
'clip:rect(0,'+l+'px,'+h+'px,0);'+
'background-color:' + couleur+
';"><\/div>';
}
function sgn(a) {
if(a==0){return 0};
if(a<0){return -1};
if(a>0){return 1};
}
function triangle (x1b,y1b,x2b,y2b,x3b,y3b,couleur) {
var tmp = '';
var x1 = x1b; var y1 = y1b;
var x2 = x2b; var y2 = y2b;
var x3 = x3b; var y3 = y3b;
var i;
var xt, yt; // On echange les valeurs;
if(y1>y2){yt=y1;y1=y2;y2=yt;xt=x1;x1=x2;x2=xt;}
if(y1>y3){yt=y1;y1=y3;y3=yt;xt=x1;x1=x3;x3=xt;}
if(y2>y3){yt=y2;y2=y3;y3=yt;xt=x2;x2=x3;x3=xt;}
Ychg1 = y3 - y1; Xchg1 = x3 - x1; Xincr1 = sgn(x3-x1);
Ychg2 = y2 - y1; Xchg2 = x2 - x1; Xincr2 = sgn(x2-x1);
Ychg3 = y3 - y2; Xchg3 = x3 - x2; Xincr3 = sgn(x3-x2);
Xchg1 = Math.abs(Xchg1); Xchg2 = Math.abs(Xchg2); Xchg3 = Math.abs(Xchg3);
var Erreur1 = 0; var Erreur2 = 0; var Erreur3 = 0;
var largeur = 0;
x1b = x1;
x2b = x1;
if(y1!=y2) {
for(i=y1;i<=y2;i++)
{
x2bb = x2b;
x1bb = x1b;
largeur = Math.abs(x2bb-x1bb)-1;
if(x2bb>x1bb){tmp+=carre(x1bb,i,largeur,1,couleur)}else{tmp+=carre(x2bb,i,largeur,1,couleur)}
Erreur1 = Erreur1 + Xchg1;
while(Erreur1>Ychg1)
{
Erreur1 = Erreur1 - Ychg1;
x1b = x1b + Xincr1;
}
Erreur2 = Erreur2 + Xchg2;
while(Erreur2>Ychg2)
{
Erreur2 = Erreur2 - Ychg2;
x2b = x2b + Xincr2;
}
}
}
x3b = x2;
if(y2!=y3) {
for(i=y2;i<=y3;i++)
{
x3bb = x3b;
x1bb = x1b;
largeur = Math.abs(x3bb-x1bb)-1;
if(x3bb>x1bb){tmp+=carre(x1bb,i,largeur,1,couleur)}else{tmp+=carre(x3bb,i,largeur,1,couleur)}
Erreur1 = Erreur1 + Xchg1;
while(Erreur1>Ychg1)
{
Erreur1 = Erreur1 - Ychg1;
x1b = x1b + Xincr1;
}
Erreur3 = Erreur3 + Xchg3;
while(Erreur3>Ychg3)
{
Erreur3 = Erreur3 - Ychg3;
x3b = x3b + Xincr3;
}
}
}
return tmp;
}
function hasard(nb)
{
return Math.round(nb*Math.random());
}
</script>
</head>
<body>
<script>
var h;
var coul = new Array("black","red","blue","green","purple");
var tmp2='';
var max = 400;
for(h=0;h<5;h++)
{
document.body.innerHTML += triangle(hasard(max),hasard(max),hasard(max),hasard(max),hasard(max),hasard(max),coul[hasard(5)]);
}
//document.body.innerHTML += tmp2;
</script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script>
  function carre(x,y,l,h,couleur)
  // Un rectangle, c'est pour cela qu'on l'appelle carré
  {
  return  '<div style="position:absolute;'+
		'border-left:' + l + 'px solid ' + couleur + ';'+
		'left:' + x + 'px;'+
		'top:' + y + 'px;'+
		'width : 0px;' +
		'height:' + h + 'px;'+
		'clip:rect(0,'+l+'px,'+h+'px,0);'+
		'background-color:' + couleur+
		';"><\/div>';
  }
  
  function sgn(a) {
   if(a==0){return 0};
   if(a<0){return -1};
   if(a>0){return 1};
  }
   
  
  function triangle (x1b,y1b,x2b,y2b,x3b,y3b,couleur) {
  var tmp = '';
  var x1 = x1b; var y1 = y1b;
  var x2 = x2b; var y2 = y2b;
  var x3 = x3b; var y3 = y3b;
  var i;
  var xt, yt; // On echange les valeurs;
  if(y1>y2){yt=y1;y1=y2;y2=yt;xt=x1;x1=x2;x2=xt;}
  if(y1>y3){yt=y1;y1=y3;y3=yt;xt=x1;x1=x3;x3=xt;}
  if(y2>y3){yt=y2;y2=y3;y3=yt;xt=x2;x2=x3;x3=xt;}
  Ychg1 = y3 - y1; Xchg1 = x3 - x1; Xincr1 = sgn(x3-x1);
  Ychg2 = y2 - y1; Xchg2 = x2 - x1; Xincr2 = sgn(x2-x1);
  Ychg3 = y3 - y2; Xchg3 = x3 - x2; Xincr3 = sgn(x3-x2);
  Xchg1 = Math.abs(Xchg1); Xchg2 = Math.abs(Xchg2); Xchg3 = Math.abs(Xchg3);
  var Erreur1 = 0; var Erreur2 = 0; var Erreur3 = 0;  
  var largeur = 0;
  x1b = x1;
  x2b = x1;
  if(y1!=y2) {
   for(i=y1;i<=y2;i++)
   {
    x2bb = x2b;
    x1bb = x1b;
    largeur = Math.abs(x2bb-x1bb)-1;
    if(x2bb>x1bb){tmp+=carre(x1bb,i,largeur,1,couleur)}else{tmp+=carre(x2bb,i,largeur,1,couleur)}
    Erreur1 = Erreur1 + Xchg1;
    while(Erreur1>Ychg1)
    {
     Erreur1 = Erreur1 - Ychg1;
     x1b = x1b + Xincr1; 
    } 
    Erreur2 = Erreur2 + Xchg2;
    while(Erreur2>Ychg2)
    {
     Erreur2 = Erreur2 - Ychg2;
     x2b = x2b + Xincr2; 
    }
   }
  }
  x3b = x2;
  if(y2!=y3) {
  for(i=y2;i<=y3;i++)
   {
    x3bb = x3b;
    x1bb = x1b;
    largeur = Math.abs(x3bb-x1bb)-1;
    if(x3bb>x1bb){tmp+=carre(x1bb,i,largeur,1,couleur)}else{tmp+=carre(x3bb,i,largeur,1,couleur)}
    Erreur1 = Erreur1 + Xchg1;
    while(Erreur1>Ychg1)
    {
     Erreur1 = Erreur1 - Ychg1;
     x1b = x1b + Xincr1; 
    } 
    Erreur3 = Erreur3 + Xchg3;
    while(Erreur3>Ychg3)
    {
     Erreur3 = Erreur3 - Ychg3;
     x3b = x3b + Xincr3; 
    }
   }  
  } 
  return tmp;
  }
  
  function hasard(nb)
   {
    return Math.round(nb*Math.random());
   }
  
  </script>
  </head>
  <body>
    <script>
     var h;
     var coul = new Array("black","red","blue","green","purple");
     var tmp2=''; 
     var max = 400;
      for(h=0;h<5;h++)
     {
      document.body.innerHTML += triangle(hasard(max),hasard(max),hasard(max),hasard(max),hasard(max),hasard(max),coul[hasard(5)]);
     }
      //document.body.innerHTML += tmp2;
      </script>
      
  </body>
</html>

Sources du même auteur

EXPLORATEUR DOM

PETIT EDITEUR D ICONE

SYSTEME DE NOTATION

FENETRE DHTML ( FONCTIONNE AVEC OPERA ET IE )

Toutes les sources de biskbart

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

THÉORÈME DE PYTHAGORE ET SA RÉCIPROQUE par nicomilville

JEU DE TRIANGLE par vbkarraywalid

Commentaires et avis

Commentaire de econs le 20/04/2006 17:34:32 administrateur CS

Fonctionne bien. Et sympatique.
Pas très utile en soit, mais c'est un bon exemple de dessin en général.

Commentaire de kiki2sirom le 21/04/2006 10:45:05

d'accord avec ECONS

juste : j'aime tellement pinailler : <script> n'est pas valide, à remplacer par <script type="text/javascript">

en HTML 4.01, l'attribut 'type' des balises <script> et <style> sont OBLIGATOIRES

c'est pour ton bien ;) tant qu'à faire, bien montrer aux débutants les bases

kiki

Commentaire de Krackoum le 03/06/2006 14:49:33

merci bcp pour ce code;
je cherche à faire une interface de dessin sur une page
à la maniere de mspaint ( je sais pas si c est deja realiser, mais vu k j en trouve pas )
j m y colle :p
donc c est tout sauf inutile pour débuter ... comme moi !
reste plus qu a charger une image sur la page pour colorier et dessiner par dessus, et ensuite l enregistrer ou la poster sur un forum ...
merci .. bcp !

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

constructeurs et "destructeurs" ? [ par nitro120 ] je connais les constructeurs (par exemple var moi=new Triangle(); )MAIS peut on mettre dans la fct Triangle() ceci this.supprimer=delete(this) ?je cro probleme triangle de pascal [ par tofismagic ] 1 - Déterminer l’algorithme permettant de calculer les coefficients du triangle de Pascal<?xml:namespace prefix affichage recursif triangle de pascal [ par djojo80 ]

Nos sponsors

Derniers Blogs

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

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : DéPLOIEMENT DE NOUVELLES TECHNOLOGIES - RETOUR D'EXPéRIENCE PAR L'INFORMATIQUE DE MICROSOFT par ROMELARD Fabrice

Forum

DEFINITION DE LA METHODE SETBORDER par nassim1987

RE : FONCTION RECHERCHE DATE par Eyeron

FONCTION RECHERCHE DATE par Eyeron

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

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

PLATEFORME SUR L ESOTERISME VOYANCE - sans charte graphique
Budget : 3 500€
Joomla 15 module paiement adaptation composant cuisine
Budget : 250€
Integrateur web dans template
Budget : 500€

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