OpenBoard/resources/library/interactive/Graphme.wgt/JavaScript/Affichage3D.js

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()
}