Rendu les fonctions de rotation standard

code/index.html

@@ -1,11 +1,11 @@
 
-<canvas id="canvas" style="border:1px solid #000"></canvas>
+<canvas id="canvas1" style="border:1px solid #000"></canvas>
-<button onclick="swap(tab1,canvas,ctx,'H')">Swap H</button>
-<button onclick="swap(tab1,canvas,ctx,'V')">Swap V</button>
 
 <canvas id="canvas2" style="border:1px solid #000"></canvas>
-<button onclick="tourneG(tab2,canvas2,ctx2)">Tourner G2</button>
+
-<button onclick="tourneD(tab2,canvas2,ctx2)">Tourner D2</button>
+<canvas id="canvas3" style="border:1px solid #000"></canvas>
+
+<canvas id="canvas4" style="border:1px solid #000"></canvas>
 
 <canvas id="canvasTotal" style="border:1px solid #000"></canvas>
 
@@ -13,212 +13,230 @@
 <button onclick="generateEasy()">gen easy</button>
 
 <script>
-    var canvas = document.getElementById('canvas');
+    var canvas1 = document.getElementById('canvas1');
-    var ctx = canvas.getContext('2d');
+    var ctx = canvas1.getContext('2d');
-
+    
     var canvas2 = document.getElementById('canvas2');
     var ctx2 = canvas2.getContext('2d');
 
+    var canvas3 = document.getElementById('canvas3');
+    var ctx3 = canvas3.getContext('2d');
+    
+    var canvas4 = document.getElementById('canvas4');
+    var ctx4 = canvas4.getContext('2d');
+    
     var canvasT = document.getElementById('canvasTotal');
     var ctxT = canvasT.getContext('2d');
-
+    
     var canvasO = document.getElementById('canvasObj');
     var ctxO = canvasO.getContext('2d');
-
+    
-tab1=[];
+    tab1=[];
-tab2=[];
+    tab2=[];
-tabTotal=[];
+    tabTotal=[];
-mousePos=[];
+    mousePos=[];
-
+    
-width=300; // 6 lignes de 50px
+    width=300; // 6 lignes de 50px
-height=300; // 6 colonnes de 50px
+    height=300; // 6 colonnes de 50px
-canvas.width=width;
+    canvas1.width=width;
-canvas2.width=width;
+    canvas2.width=width;
-canvasT.width=width;
+    canvas3.width=width;
-canvasO.width=width;
+    canvas4.width=width;
-
+    canvasT.width=width;
-canvas.height=height;
+    canvasO.width=width;
-canvas2.height=height;
+    
-canvasT.height=height;
+    canvas1.height=height;
-canvasO.height=height;
+    canvas2.height=height;
-
+    canvas3.height=height;
-function faireCercle(x,y,color,lectx){
+    canvas4.height=height;
-    var cercle = new Path2D();
+    canvasT.height=height;
-
+    canvasO.height=height;
-    nx=50*(x>0 ? x+2 : x+3);
+    
-    ny=50*(y>0 ? y+2 : y+3);
+    function faireCercle(x,y,color,lectx){
-
+        var cercle = new Path2D();
-    cercle.moveTo(nx, ny);
+        
-    cercle.arc(nx+25, ny+25, 25, 0, 2 * Math.PI);
+        nx=50*(x>0 ? x+2 : x+3);
-
+        ny=50*(y>0 ? y+2 : y+3);
-    lectx.fillStyle = color;
+        
-    lectx.fill(cercle);
+        cercle.moveTo(nx, ny);
-}
+        cercle.arc(nx+25, ny+25, 25, 0, 2 * Math.PI);
-
+        
-function tourneG(letab,lecanvas,lectx)
+        lectx.fillStyle = color;
-{
+        lectx.fill(cercle);
-    letab.forEach(element => {
-        tmp=element[0];
-        element[0]=element[1];
-        element[1]=-tmp;
-    });
-    toutDessiner(letab,lecanvas,lectx);
-    empiler();
-}
-
-function tourneD(letab,lecanvas,lectx,sselem=null)
-{
-    if(sselem==null){
-        letab.forEach(element => {
-        tmp=element[1];
-        element[1]=element[0];
-        element[0]=-tmp;
-    });
-    }
-    else {
-        letab[sselem].forEach(element => {
-        tmp=element[1];
-        element[1]=element[0];
-        element[0]=-tmp;
-    });
     }
-    toutDessiner(letab,lecanvas,lectx);
+    
-    if(sselem==null)
+    function tourneG(letab,lecanvas,lectx)
+    {
+        letab.forEach(element => {
+            tmp=element[0];
+            element[0]=element[1];
+            element[1]=-tmp;
+        });
+        toutDessiner(letab,lecanvas,lectx);
         empiler();
-}
+    }
-
+    
-function toutDessiner(pts,lecanvas,lectx)
+    function tourneD(letab,lecanvas,lectx,sselem=null)
-{
+    {
-    lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
+        if(sselem==null){
-    pts.forEach(element=> {
+            letab.forEach(element => {
-        if(Array.isArray(element[0])){
+                tmp=element[1];
-            element.forEach(element2 => {
+                element[1]=element[0];
-                faireCercle(element2[0],element2[1],element2[2],lectx);
+                element[0]=-tmp;
-            })
+            });
         }
-        else
+        else {
+            letab[sselem].forEach(element => {
+                tmp=element[1];
+                element[1]=element[0];
+                element[0]=-tmp;
+            });
+        }
+        toutDessiner(letab,lecanvas,lectx);
+        if(sselem==null)
+        empiler();
+    }
+    
+    function toutDessiner(pts,lecanvas,lectx)
+    {
+        lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
+        pts.forEach(element=> {
+            if(Array.isArray(element[0])){
+                element.forEach(element2 => {
+                    faireCercle(element2[0],element2[1],element2[2],lectx);
+                })
+            }
+            else
             faireCercle(element[0],element[1],element[2],lectx);
-    })
-}
-
-function empiler()
-{
-    tabTotal=[];
-    tab1.forEach(element => {
-        tabTotal.push(element);
-    })
-    tab2.forEach(element => {
-        tabTotal.push(element);
-    })
-
-    toutDessiner(tabTotal,canvasT,ctxT);
-}
-
-function swap(letab, lecanvas, lectx,ladir){
-    if(ladir=="H"){
-        letab.forEach(element=> {
-            element[1]=-element[1];
         })
     }
-    else {
+    
-        letab.forEach(element=> {
+    function empiler()
-            element[0]=-element[0];
+    {
+        tabTotal=[];
+        tab1.forEach(element => {
+            tabTotal.push(element);
         })
+        tab2.forEach(element => {
+            tabTotal.push(element);
+        })
+        
+        toutDessiner(tabTotal,canvasT,ctxT);
     }
-
-    toutDessiner(letab,lecanvas,lectx);
-    empiler();
-}
-
-function getRandomInt(max) {
-  return Math.floor(Math.random() * Math.floor(max))+1;
-}
-
-function generateEasy(){
-    tabObj=[[],[]];
-    tabObj[0]=Array.from(tab1);
-    tabObj[1]=Array.from(tab2);
-    console.log(tabObj);
-    actions=getRandomInt(5);
-    
-    while(actions>0){
-        tourneD(tabObj,canvasO,ctxO,getRandomInt(2)-1);
-        console.log(tabObj);
-        actions--;
-    }
-    console.log("sec",tabObj);
-    toutDessiner(tabObj,canvasO,ctxO);
     
-}
+    function swap(letab, lecanvas, lectx,ladir){
-
+        if(ladir=="H"){
-function getMousePosition(lecanvas, event, lectx, letab) { 
+            letab.forEach(element=> {
-            let rect = lecanvas.getBoundingClientRect(); 
+                element[1]=-element[1];
-            let x = event.clientX - rect.left; 
-            let y = event.clientY - rect.top; 
-            let dir = compas(x,y,lecanvas);
-
-            if(x<canvas.width/2)
-                tourneG(letab,lecanvas,lectx);
-            else
-                tourneD(letab,lecanvas,lectx);
-        } 
-
-/// renvoie le point cardianl où se trouve le point
-
-function compas(x,y,lecanvas)
-{
-    ne = x>y;
-    se = x>lecanvas.height-y;
-
-    if(ne && se ) return "E";
-    if(ne && !se ) return "N";
-    if(!ne && se ) return "S";
-    if(!ne && !se ) return "O";
-}
-
-/*canvas.addEventListener("click",function(e) 
-        { 
-            //getMousePosition(canvas, e,ctx, tab1); 
-            compas(e.clientX,e.clientY,canvas);
-        }); */
-
-        canvas2.addEventListener("click",function(e) 
-        { 
-            getMousePosition(canvas2, e, ctx2, tab2); 
-        }); 
-
-        canvas.addEventListener("mousedown",function(e){
-            //console.log(e);
-            mousePos = [1,compas(e.clientX,e.clientY,e.currentTarget)];
-            //mousePos=["obj",e.clientX-canvas.getBoundingClientRect().left<canvas.width/2,e.clientY-canvas.getBoundingClientRect().top<canvas.height/2];
-            console.log(mousePos);
             })
-        canvas.addEventListener("mouseup",function(e){
+        }
-            dir = compas(e.clientX,e.clientY,e.currentTarget);
+        else {
-            if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
+            letab.forEach(element=> {
-            {
+                element[0]=-element[0];
-                tourneG(tab1,canvas,ctx);
-            }
-            else if((mousePos[1] == "N" && dir == "E") || (mousePos[1] == "S" && dir == "O") || (mousePos[1] == "E" && dir == "S") || (mousePos[1] == "O" && dir == "N"))
-            {
-                tourneD(tab1,canvas,ctx);
-            }
-            else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
-            {
-                swap(tab1,canvas,ctx,"V");
-            }
-            else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
-            {
-                swap(tab1,canvas,ctx,"H");
-            }
             })
+        }
+        
+        toutDessiner(letab,lecanvas,lectx);
+        empiler();
+    }
+    
+    function getRandomInt(max) {
+        return Math.floor(Math.random() * Math.floor(max))+1;
+    }
+    
+    function generateEasy(){
+        tabObj=[[],[]];
+        tabObj[0]=Array.from(tab1);
+        tabObj[1]=Array.from(tab2);
+        console.log(tabObj);
+        actions=getRandomInt(5);
+        
+        while(actions>0){
+            tourneD(tabObj,canvasO,ctxO,getRandomInt(2)-1);
+            console.log(tabObj);
+            actions--;
+        }
+        console.log("sec",tabObj);
+        toutDessiner(tabObj,canvasO,ctxO);
+        
+    }
+    
+    function getMousePosition(lecanvas, event, lectx, letab) { 
+        let rect = lecanvas.getBoundingClientRect(); 
+        let x = event.clientX - rect.left; 
+        let y = event.clientY - rect.top; 
+        let dir = compas(x,y,lecanvas);
+        
+        if(x<lecanvas.width/2)
+        tourneG(letab,lecanvas,lectx);
+        else
+        tourneD(letab,lecanvas,lectx);
+    } 
+    
+    /// renvoie le point cardianl où se trouve le point
+    
+    function compas(x,y,lecanvas)
+    {
+        rect = lecanvas.getBoundingClientRect(); 
+        x = event.clientX - rect.left; 
+        y = event.clientY - rect.top; 
+        ne = x>y;
+        se = x>lecanvas.height-y;
+        
+        if(ne && se ) return "E";
+        if(ne && !se ) return "N";
+        if(!ne && se ) return "S";
+        if(!ne && !se ) return "O";
+    }
+    
+    function rotationManager(e)
+    {
+        canvasNumber=e.currentTarget.id.substring(6);
+        lecanvas=eval("canvas"+canvasNumber);
+        letab=eval("tab"+canvasNumber);
+        lectx=lecanvas.getContext('2d');
+        dir = compas(e.clientX,e.clientY,e.currentTarget);
+        if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
+        {
+            tourneG(letab,lecanvas,lectx);
+        }
+        else if((mousePos[1] == "N" && dir == "E") || (mousePos[1] == "S" && dir == "O") || (mousePos[1] == "E" && dir == "S") || (mousePos[1] == "O" && dir == "N"))
+        {
+            tourneD(letab,lecanvas,lectx);
+        }
+        else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
+        {
+            swap(letab,lecanvas,lectx,"V");
+        }
+        else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
+        {
+            swap(letab,lecanvas,lectx,"H");
+        }
+    }
+    
+    canvas1.addEventListener("mousedown",function(e){
+        mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+    })
 
-tab1.push([-3,-3,"green"],[-3,2,"red"],[1,2,"orange"]);
+    canvas1.addEventListener("mouseup",function(e){
-tab2.push([-2,-3,"green"],[-3,1,"blue"],[-1,2,"purple"]);
+        rotationManager(e);
-toutDessiner(tab1,canvas,ctx);
+    })
-toutDessiner(tab2,canvas2,ctx2);
-
-faireCercle(1,1,"violet",ctxO);
 
+    canvas2.addEventListener("mousedown",function(e){
+        mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+        //console.log("md =",e.clientX,":",e.clientY);
+    })
 
+    canvas2.addEventListener("mouseup",function(e){
+        rotationManager(e);
+    })
+    
+    tab1.push([-3,-3,"green"],[-3,2,"red"],[1,2,"orange"]);
+    tab2.push([-2,-3,"green"],[-3,1,"blue"],[-1,2,"purple"]);
+    toutDessiner(tab1,canvas1,ctx);
+    toutDessiner(tab2,canvas2,ctx2);
+    
+    faireCercle(1,1,"violet",ctxO);
+    
+    
 </script>