var ctx var centreX, centreY var echelle3D = 50 var precisionDroite3D = 0.02 var precisionFonction3D = 0.2 var fonction3D = false var angle = Math.PI/8 var valeurZoom3D = 1 var gauche3D = -6.5 var droite3D = 6.5 var outilPrecedent = "" var rouge3D = 0 var vert3D = 1 var bleu3D = 2 var couleurGenerale = 0 function activer3D(){ if(fonction3D){ // Si activé alors on le désative fonction3D = false choixOutil(outilPrecedent) document.getElementById('onglet3D').innerHTML = "3D" largeur = 500 document.getElementById("affichage").style.width = largeur+"px" document.getElementById("affichage").style.left = "129px" document.getElementById("flecheGauche").style.left = "137px" document.getElementById("flecheHaut").style.left = "345px" document.getElementById("flecheBas").style.left = "345px" document.getElementById("gauche").style.display = "block" document.getElementById("gauche3D").style.display = "none" var elements = document.getElementsByClassName("menu") for(var i=0; i<elements.length; i++){ elements[i].style.left = "121px" } reinitialiserZoom(5) } else{ // Sinon on l'active fonction3D = true outilPrecedent = outil choixOutil("deplacement") document.getElementById('onglet3D').innerHTML = "2D" largeur = 570 document.getElementById("affichage").style.width = largeur+"px" document.getElementById("affichage").style.left = "59px" document.getElementById("flecheGauche").style.left = "67px" document.getElementById("flecheHaut").style.left = "290px" document.getElementById("flecheBas").style.left = "290px" document.getElementById("gauche").style.display = "none" document.getElementById("gauche3D").style.display = "block" var elements = document.getElementsByClassName("menu") for(var i=0; i<elements.length; i++){ elements[i].style.left = "61px" } initialise3D() } } function initialise3D() { centreX = largeur / 2 centreY = hauteur / 2 document.getElementById("affichage").innerHTML = '<canvas id="canvas" width="'+largeur+'" height="'+hauteur+'"></canvas>' ctx = document.getElementById('canvas').getContext('2d') ctx.clearRect(0, 0, 640, 480) ctx.fillStyle = "rgba(0, 0, 0, 0.5)" ctx.fillRect(0,0,640,480) axes() } function dessiner3D(eq){ initialise3D() if(document.getElementById("selectAffichage3D").value == "points"){ var coordX, coordY, coordZ for(var x=gauche3D; x<droite3D; x+=precisionFonction3D){ for(var y=gauche3D; y<droite3D; y+=precisionFonction3D){ coordX = x coordY = y coordZ = eval(eq) if(isNaN(coordZ)){ continue } point3D(coordX, coordY, coordZ) } } } else{ var x1, y1, z1, x2, y2, z2, x3, y3, z3 var x, y for(var x1=gauche3D; x1<droite3D; x1+=precisionFonction3D){ for(var y1=gauche3D; y1<droite3D; y1+=precisionFonction3D){ x = x1 y = y1 z1 = eval(eq) x2 = x1 + precisionFonction3D y2 = y1 x = x2 //y = y2 z2 = eval(eq) x3 = x2 y3 = y2 + precisionFonction3D //x = x3 y = y3 z3 = eval(eq) x4 = x3 - precisionFonction3D y4 = y3 x = x4 //y = y4 z4 = eval(eq) if(isNaN(z1)||isNaN(z2)||isNaN(z3)||isNaN(z4)){ continue } polygone3D(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4) } } } } // Dessine un point à la position (x, y, z) function point3D(x, y, z){ var posX = (Math.sin(angle)*x + Math.cos(angle)*y)*echelle3D var posZ = -(z - Math.cos(angle)*x/2.6 + Math.sin(angle)*y/2.6)*echelle3D var opacity = Math.round((1-((5+y*Math.sin(angle)-x*Math.cos(angle)) / 450)*echelle3D)*1000)/1000 var couleur = new Array() couleur[0] = Math.round((5+z)*echelle3D) couleur[1] = Math.round(510 - (5+z)*echelle3D) couleur[2] = couleurGenerale if(opacity > 1){ opacity = 1 } if(opacity < 0){ opacity = 0 } if(couleur[0] > 255){ couleur[0] = 255 } if(couleur[0] < 0){ couleur[0] = 0 } if(couleur[1] > 255){ couleur[1] = 255 } if(couleur[1] < 0){ couleur[1] = 0 } ctx.save() ctx.translate(centreX, centreY) ctx.scale(valeurZoom3D, valeurZoom3D) ctx.fillStyle = "rgba("+couleur[rouge3D]+","+couleur[vert3D]+", "+couleur[bleu3D]+", "+opacity+")" ctx.fillRect(posX-1, posZ-1, 2, 2) ctx.restore() } // Dessine un polygone qui a comme sommets : (x1, y1, z1) , (x2, y2, z2), (x3, y3, z3) et (x4, y4, z4) function polygone3D(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4){ ctx.save() ctx.translate(centreX, centreY) ctx.scale(valeurZoom3D, valeurZoom3D) ctx.beginPath() ctx.moveTo((Math.sin(angle)*x1 + Math.cos(angle)*y1)*echelle3D , -(z1 - Math.cos(angle)*x1/2.6 + Math.sin(angle)*y1/2.6)*echelle3D) ctx.lineTo((Math.sin(angle)*x2 + Math.cos(angle)*y2)*echelle3D , -(z2 - Math.cos(angle)*x2/2.6 + Math.sin(angle)*y2/2.6)*echelle3D) ctx.lineTo((Math.sin(angle)*x3 + Math.cos(angle)*y3)*echelle3D , -(z3 - Math.cos(angle)*x3/2.6 + Math.sin(angle)*y3/2.6)*echelle3D) ctx.lineTo((Math.sin(angle)*x4 + Math.cos(angle)*y4)*echelle3D , -(z4 - Math.cos(angle)*x4/2.6 + Math.sin(angle)*y4/2.6)*echelle3D) var opacity = Math.round((1-((5+y1*Math.sin(angle)-x1*Math.cos(angle)) / 450)*echelle3D)*1000)/1000 var couleur = new Array() couleur[0] = Math.round((5+z1)*echelle3D) couleur[1] = Math.round(510 - (5+z1)*echelle3D) couleur[2] = couleurGenerale if(opacity > 1){ opacity = 1 } if(opacity < 0){ opacity = 0 } if(couleur[0] > 255){ couleur[0] = 255 } if(couleur[0] < 0){ couleur[0] = 0 } if(couleur[1] > 255){ couleur[1] = 255 } if(couleur[1] < 0){ couleur[1] = 0 } ctx.fillStyle = "rgba("+couleur[rouge3D]+","+couleur[vert3D]+", "+couleur[bleu3D]+", "+opacity+")" ctx.closePath() ctx.fill() ctx.restore() } // Dessine les axes function axes(){ for(var i=-5; i<5; i+=precisionDroite3D){ point3D(0, 0, i) } for(var i=-5.5; i<5.5; i+=precisionDroite3D){ point3D(i, 0, 0) } for(var i=-5.5; i<5.5; i+=precisionDroite3D){ point3D(0, i, 0) } } function cube(x, y, z, r){ // Face de devant for(var i=0; i<r; i+=precisionDroite3D){ point3D(x+i, y, z) } for(var i=0; i<r; i+=precisionDroite3D){ point3D(x+r, y+i, z) } for(var i=0; i<r; i+=precisionDroite3D){ point3D(x+r-i, y+r, z) } for(var i=0; i<r; i+=precisionDroite3D){ point3D(x, y+r-i, z) } // Face de derrière for(var i=0; i<r; i+=precisionDroite3D){ point3D(x+i, y, z+r) } for(var i=0; i<r; i+=precisionDroite3D){ point3D(x+r, y+i, z+r) } for(var i=0; i<r; i+=precisionDroite3D){ point3D(x+r-i, y+r, z+r) } for(var i=0; i<r; i+=precisionDroite3D){ point3D(x, y+r-i, z+r) } // Arrêtes for(var i=0; i<r; i+=precisionDroite3D){ point3D(x, y, z+i) } for(var i=0; i<r; i+=precisionDroite3D){ point3D(x, y+r, z+i) } for(var i=0; i<r; i+=precisionDroite3D){ point3D(x+r, y, z+i) } for(var i=0; i<r; i+=precisionDroite3D){ point3D(x+r, y+r, z+i) } } // Change les couleurs de l'affichage 3D et affiche l'aperçu de celles-ci. function checkCouleurs3D(){ var rouge, vert, bleu var sensRouge, sensVert, sensBleu var precisionApercu = 64 couleurGenerale = parseInt(document.getElementById("couleur3Dgenerale").value) if(!couleurGenerale){ couleurGenerale = 0 } if(couleurGenerale < 0){ couleurGenerale = 0 } if(couleurGenerale > 255){ couleurGenerale = 255 } switch(document.getElementById("selectRouge3D").value){ case "plus": rouge3D = 0 rouge = 255 sensRouge = -1 break case "moins": rouge3D = 1 rouge = 0 sensRouge = 1 break case "tout": rouge3D = 2 rouge = couleurGenerale sensRouge = 0 break } switch(document.getElementById("selectVert3D").value){ case "plus": vert3D = 0 vert = 255 sensVert = -1 break case "moins": vert3D = 1 vert = 0 sensVert = 1 break case "tout": vert3D = 2 vert = couleurGenerale sensVert = 0 break } switch(document.getElementById("selectBleu3D").value){ case "plus": bleu3D = 0 bleu = 255 sensBleu = -1 break case "moins": bleu3D = 1 bleu = 0 sensBleu = 1 break case "tout": bleu3D = 2 bleu = couleurGenerale sensBleu = 0 break } document.getElementById("apercuCouleur3D").innerHTML = "<span style='background-color:rgba("+rouge+","+vert+","+bleu+",1);color:rgba(0,0,0,0);'>.</span>" for(var i=0; i<precisionApercu; i++){ rouge = rouge + sensRouge*(256/precisionApercu) vert = vert + sensVert*(256/precisionApercu) bleu = bleu + sensBleu*(256/precisionApercu) document.getElementById("apercuCouleur3D").innerHTML = document.getElementById("apercuCouleur3D").innerHTML + "<span style='background-color:rgba("+rouge+","+vert+","+bleu+",1);color:rgba(0,0,0,0);'>.</span>" } } function zoom3D(valeur){ valeurZoom3D *= valeur gauche3D /= valeur droite3D /= valeur precisionFonction3D /= valeur precisionDroite3D /= valeur //alert(valeurZoom3D+" ; "+gauche3D+" ; "+droite3D+" ; "+precisionFonction3D+" ; "+precisionDroite3D) actualiserGraph() }