новые иконки в OpenBoard
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
OpenBoard/resources/library/applications/Graphme.wgt/JavaScript/Affichage3D.js

332 lines
10 KiB

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