var tab = new Array('',
'var canvas = document.getElementById("papier");\ncanvas.width = 300\ncanvas.height = 300\n if (canvas.getContext){\n var ctx = canvas.getContext("2d");\n // le code graphique ci-dessous\n ctx.fillStyle = "rgb(1000,1000,1000)";\n ctx.fillRect (0, 0, 300, 300);\n ctx.fillStyle = "rgb(0,500,0)";\n ctx.fillRect (50, 50, 200, 200); \n } else {\n // tracé non supporté\n }\n',
'// le graphisme dans une fonction draw()\nfunction draw(){\n  var canvas = document.getElementById("papier");\n  if (canvas.getContext){\n    var ctx = canvas.getContext("2d");\n    ctx.fillStyle = "rgb(1000,0,0)"; // fond de couleur rouge\n    ctx.fillRect(25,25,250,250); // remplissage d un carré 200x200\n    ctx.clearRect(50,50,100,100); // effacement d un carré\n    ctx.strokeStyle = "rgb(0,0,1000)"; // contour de couleur bleue\n    ctx.strokeRect(100,100,20,20); // contour d un carré\n  }\n}\ndocument.getElementById("papier").width=300; // astuce\n// Exécution de la fonction\ndraw()\n',
'// Dessin de chemins linéaires\nfunction draw(){\n  var canvas = document.getElementById("papier");\n  if (canvas.getContext){\n    var ctx = canvas.getContext("2d");\n    ctx.fillStyle = "rgb(1000,1000,1000)";\n    ctx.fillRect (0, 0, 300, 300);\n    // Triangle plein sans bordure\n    ctx.fillStyle = "rgb(1000,0,0)";   \n    ctx.beginPath();\n    ctx.moveTo(100,100);\n    ctx.lineTo(150,30);\n    ctx.lineTo(230,150);\n    ctx.closePath();\n    ctx.fill();\n    // Triangle plein avec bordure\n    ctx.fillStyle = "rgb(0,1000,0)";\n    ctx.strokeStyle = "rgb(0,0,1000)";\n    ctx.beginPath();\n    ctx.moveTo(50,100);\n    ctx.lineTo(50,220);\n    ctx.lineTo(210,200);\n    ctx.closePath();\n    ctx.fill();\n    ctx.stroke();\n    // Triangle plein avec bordure\n  }\n}\ndocument.getElementById("papier").width=300; // astuce\n// Exécution de la fonction\ndraw()\n',
'// Dessin de chemins circulaires\nfunction draw(){\n  var canvas = document.getElementById("papier");\n  if (canvas.getContext){\n    var ctx = canvas.getContext("2d");\n    ctx.fillStyle = "rgb(800,800,800)";\n    ctx.fillRect (0, 0, 300, 300);\n    ctx.beginPath();\n    // coord. centre 150,150  rayon : 50 angle départ 0 fin 2Pi, sens \n    ctx.arc(150,150,50,0,Math.PI*2,true); // Cercle\n    ctx.moveTo(100,150); // aller au pt de départ de l arc\n    ctx.arc(100,100,50,Math.PI/2,Math.PI,false); // Arc sens aig. montre\n    ctx.moveTo(150,150); // aller au pt de départ de l arc\n    ctx.arc(200,150,50,2*Math.PI/2,0,false);  // Autre ercle\n    ctx.stroke();\n  }\n}\ndocument.getElementById("papier").width=300; // astuce\n// Exécution de la fonction\ndraw()\n',
'// Dessin de chemins \nfunction draw(){\n  var canvas = document.getElementById("papier");\n  if (canvas.getContext){\n    var ctx = canvas.getContext("2d");\n    ctx.fillStyle = "rgb(1000,1000,1000)";\n    ctx.fillRect (0, 0, 300, 300);\n// Exemple de courbes quadratriques\n    ctx.fillStyle = "rgb(1000,0,0)";  \n    ctx.strokeStyle = "rgb(0,0,1000)";\n    ctx.beginPath();\n    ctx.moveTo(100,100);\n    ctx.quadraticCurveTo(150,150,200,200);\n    ctx.quadraticCurveTo(250,250,200,150);\n    ctx.quadraticCurveTo(150,150,100,100);\n    ctx.fill();\n    ctx.stroke();\n  }\n}\ndocument.getElementById("papier").width=300; // astuce\n// Exécution de la fonction\ndraw()\n',
'// Dessin de chemins \nfunction draw(){\n  var canvas = document.getElementById("papier");\n  if (canvas.getContext){\n    var ctx = canvas.getContext("2d");\n    ctx.fillStyle = "rgb(1000,1000,1000)";\n    ctx.fillRect (0, 0, 300, 300);\n// Exemple de courbes de Bézier\n    ctx.fillStyle = "yellow"; \n    ctx.lineWidth = 15;\n    ctx.lineCap = "round"; // round butt square\n    ctx.lineJoin = "miter"; // round miter bevel\n    ctx.strokeStyle = "rgb(200,200,1000)";\n    ctx.beginPath();\n    ctx.moveTo(50,150);\n    ctx.bezierCurveTo(50,80,100,60,130,60);\n    ctx.bezierCurveTo(180,60,250,50,260,130);\n    ctx.bezierCurveTo(150,150,150,150,120,280);\n    ctx.bezierCurveTo(50,250,100,200,50,150);\n    ctx.fill();\n    ctx.stroke();\n  }\n}\ndocument.getElementById("papier").width=300; // astuce\n// Exécution de la fonction\ndraw()\n',
'function draw() {\n  var ctx = document.getElementById("papier").getContext("2d");\n  ctx.fillStyle = "black";\n  ctx.fillRect(0, 0, 300, 300);\n  // Dessin du fond\n  ctx.fillStyle = "red";\n  ctx.fillRect(0, 0, 150, 150);\n  ctx.fillStyle = "blue";\n  ctx.fillRect(150, 0, 150, 150);\n  ctx.fillStyle = "yellow";\n  ctx.fillRect(0, 150, 150, 150);\n  ctx.fillStyle = "green";\n  ctx.fillRect(150, 150, 150, 150);\n  ctx.fillStyle = "#FFF";\n  // Définition de la valeur de transparence\n  ctx.globalAlpha = 0.1;\n  // Dessin de carrés semi transparents\n  for (i = 0; i < 10; i++) {\n      ctx.beginPath();\n      ctx.fillRect(10*i, 10*i, 300-20*i, 300-20*i);\n      ctx.fill();\n  }\n}\ndocument.getElementById("papier").width=300; // astuce\ndraw()\n',
'// Image: Pointe du Raz le 29 septembre 2009\n// La plage de la baie des Trépassés est au premier plan\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\n  function draw() {\n    var canvas = document.getElementById("papier")\n    canvas.width=600;\n    canvas.height=300;\n    var ctx = canvas.getContext("2d"); // jpg ou png\n    var img = new Image();\n    img.src = url+"pteRaz.jpg";\n    img.onload = function(){ // attendre le chargement de l image\n      ctx.drawImage(img, 0, 0);\n      // autres tracés graphiques\n      //ctx.drawImage(img, 100, 50, 400, 200);\n    }\n  }\ndraw()\n',
'var url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nfunction draw() {\n  var canvas = document.getElementById("papier")\n  canvas.width=300;\n  canvas.height=300;\n  var ctx = canvas.getContext("2d");\n  ctx.strokeStyle = "#000"\n  ctx.lineWidth=4\n  for (i = 0; i < 15; i++) {\n    for (j = 0; j < 15; j++){\n      ctx.fillStyle = "rgb(" + Math.floor(255-18*i) + "," + \n                       Math.floor(255-18*j) + ",0)";\n      ctx.strokeStyle = "rgb(" + Math.floor(20+10*j) + "," + \n                       Math.floor(20+8*i) + ",0)";\n      ctx.fillRect(j*20, i*20, 20, 20);\n      ctx.strokeRect(j*20, i*20, 20, 20)     \n    }\n  }\n}\ndraw()\n',
'// Image cachée dans un span non affiché de la page\n// <span style="display:none"><img id="cachee" src="vagues.jpg" alt=""></span>\n// l image est lue et affichée dans l élément canvas\n// deux coins de l image découpés et intervertis\n// image mise à l échelle 1/2 au centre du canvas\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\n  function draw() {\n    var canvas = document.getElementById("papier")\n    canvas.width=800;\n    canvas.height=400;\n    var ctx = canvas.getContext("2d"); // jpg ou png\n    var img = new Image();\n    img.src = url+"vagues.jpg";\n    img.onload = function(){ // attendre le chargement de l image\n      //ctx.drawImage(img, 0, 0);\n      // autres tracés graphiques\n      //ctx.drawImage(img, 100, 50, 400, 200);\n    \n      // un rectangle 0, 0, 150, 150 est découpé et placé en 650, 250, 150, 150\n      ctx.drawImage(document.getElementById("cachee"), 0, 0, 150, 150, 650, 250, 150, 150)\n      // un rectangle 650, 250, 150, 150 est placé en 0, 0, 150, 150\n      ctx.drawImage(document.getElementById("cachee"), 650, 250, 150, 150, 0, 0, 150, 150)\n      ctx.drawImage(document.getElementById("cachee"), 0, 0, 800, 400, 200, 100, 400, 200)\n      // le texte n est lisible que dans Mozilla\n      var texte = "Plage de la baie des Trépassés"\n      var font = "Times new roman"\n      ctx.translate(180,40)\n      ctx.mozTextStyle = 30 + "pt " + font ;\n      ctx.fillStyle="#000000"\n      ctx.mozDrawText(texte);\n     }\n  }\ndraw()\n',
'\nfunction draw() {\n  canvas = document.getElementById("papier")\n  canvas.width=300;\n  canvas.height = 300;\n  var ctx = canvas.getContext("2d");\n  ctx.translate(150, 150);  // centre 0 0 maintenant en position centrale\n  for (i = 1; i < 10; i++) { // 10 anneaux de l intérieur vers l extérieur\n    ctx.save(); // contrebalancé par un restore\n    ctx.fillStyle = "rgb(" + (25*i) + "," + (255-25*i) + ",255)";\n    for (j = 0; j < 1+i*5; j++) { // dessine les j = 1+i*5 points\n      ctx.rotate(Math.PI*2/(1+i*5)); //   \n      ctx.beginPath();\n      ctx.arc(0, i*16, 6, 0, Math.PI*2, true);\n      ctx.fill();\n    }\n    ctx.restore();\n  }\n}\ndraw()\n',
'// fonction pour dessiner\nfunction draw(f) { \n  // Largeur et hauteur en pixels\n  var W=600, H=300\n  var canvas = document.getElementById("papier");\n  canvas.width=W; canvas.height=H;\n  var ctx = canvas.getContext("2d");\n  // nb de pixels pour une unité\n  var sc=20\n  // tracé du quadrillage\n  ctx.strokeStyle = "#666";\n  ctx.beginPath();\n  ctx.lineWidth=0.5;\n  // lignes horizontales\n  for(var i=0; i<=H/sc; i++) {\n    ctx.moveTo(0, H-sc*i)\n    ctx.lineTo(W, H-sc*i)\n  }\n  // lignes verticales\n  for(var i=0; i<=W/sc; i++) {\n    ctx.moveTo(sc*i,H-0)\n    ctx.lineTo(sc*i, H-H)\n  }\n  ctx.stroke();\n  // tracé de la fonction\n  var x;\n  with(Math) { \n    ctx.strokeStyle = "#ff0000";\n    ctx.lineWidth=1.5;\n    ctx.beginPath();\n    x=0\n    var u=eval(f)\n    ctx.moveTo(0, H-u*sc)\n    for(x=0; x<=W/sc; x+=1/sc) {\n      u=eval(f)\n      ctx.lineTo(x*sc, H-u*sc)\n    }\n  }\n  //ctx.closePath();\n  ctx.stroke();\n}\n// fonction à tracer\n// =================\n  var f = "5+3*sin(x)*(cos(x)+1/2*cos(x/2)+1/3*cos(x/3)+1/4*cos(x/4))"\n\n// Dessin\n// ======\ndraw(f)\n',
'// Triangle de PASCAL modulo N = 7 (vous pouvez modifier N de 2 à 7)\n// avec N=2 on a le triangle de Sierpinski\nfunction draw() { \n  var wi = 3; // largeur des petits carrés\n  var N = 7;  // modulo N \n  // Largeur et hauteur en pixels\n  var W=600, H=600\n  var canvas = document.getElementById("papier");\n  if(! canvas) {\n     alert("Votre navigateur ne supporte pas CANVAS")\n     return;\n  }\n  canvas.width=W; canvas.height=H;\n  var ctx = canvas.getContext("2d");\n  var tb = new Array()\n  tb[0]=new Array(); tb[1]= new Array()\n  tb[0][-1]=0; tb[1][-1]=0;\n  tb[0][0]=1; tb[1][0]=1;\n  // couleurs (au moins N)\n  var cols= ["#000","#f00","#0f0","#00f","#990","#909","#099","#fff","#fff","#fff"]  \n  var a = 1, b;\n  for(var i=0; i<H/wi; i++) {\n     b=a; a=1-b;\n     for(var j=0; j<=i; j++) {\n        tb[a][j] = (tb[b][j-1]+tb[b][j]) %N\n        ctx.fillStyle=cols[tb[a][j]]\n        ctx.fillRect(wi*j,wi*i,wi,wi)\n     }\n     tb[a][i+1] = 0\n  }\n}\n\ndraw()\n',
'// Translations du centre du dessin (d après exemple Mozilla)\n// Spirographe\nfunction draw() {\n  var canvas = document.getElementById("papier")\n  var W=600, H=380;\n  canvas.width=W; canvas.height=H;\n  var ctx = canvas.getContext("2d");\n  ctx.fillRect(0, 0, W, H);\n  for (var i = 0; i < 2; i++) {\n    for (var j = 0; j < 3; j++) {\n      ctx.save();\n      ctx.strokeStyle = color();\n      ctx.translate(110+j*200, 100+i*160);\n      drawSpirograph(ctx, 40*(j+2)/(j+1), -(3+alea(11))*(i+3)/(i+1), 35);\n      ctx.restore();\n    }\n  }\n  nn++\n  \n  idAnim = setTimeout(draw, 3000)\n  \n}\nfunction alea(k){return Math.floor(k*Math.random())}\nfunction color(){return "rgb("+alea(600)+","+alea(600)+","+alea(600)+")"}\nfunction drawSpirograph(ctx, R, r, O){\n  var x1 = R-O;\n  var y1 = 0;\n  var i  = 1;\n  var c1 = Math.PI * Math.random(), c2=Math.PI * Math.random();\n  ctx.beginPath();\n  ctx.moveTo(x1, y1);\n  do {\n    if (i > 20000) break;\n    var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))\n    var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))\n    ctx.lineTo(x2, y2);\n    x1 = x2;\n    y1 = y2;\n    i++;\n  } while (x2 != R-O && y2 != 0 );\n  ctx.stroke();\n}\nvar nn=0;\ndraw()\n',
'//Attracteurs étranges\nfunction draw(){\n  n++\n  if(n>50000) {\n      return;\n  }\n  color();\n  ctx.fillRect (400+x*100, 300+y*100, 1, 1);\n  var tx = Math.sin(a*y) + c*Math.cos(a*x);\n  var ty = Math.sin(b*x) + d*Math.cos(b*y);\n  x = tx; y = ty;\n  idAnim = setTimeout(draw, 1);\n}\nfunction alea(k){return Math.floor(k*Math.random());}\nfunction color() {\n  if(n%600==0) {\n    u = alea(400); v = alea(300); w = alea(550);\n    ctx.fillStyle = "rgb("+u+","+v+","+w+")";\n  }\n}\nvar canvas = document.getElementById("papier");\ncanvas.width=800;canvas.height=600;\nvar ctx = canvas.getContext("2d");\nctx.fillStyle = "#000000";\nctx.fillRect(0,0,800,600);\n\nvar n=0, x = 100*Math.random(), y = 100*Math.random(), \na = 1+Math.random(), b = -1-Math.random(), \nc = 1+Math.random(), d = 1-0.2*Math.random();\nvar u=0, v=0, w=0;\ncolor();\ndraw()\n',
'// Matrice de transformation\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nvar nn=0\nvar i =0;\nvar img = new Image();\nimg.src = url+"vagues.jpg";\nfunction draw() {\n   var canvas = document.getElementById("papier");\n   canvas.width = 800\n   canvas.height = 400\n   if (canvas.getContext) {\n      ctx = canvas.getContext("2d");\n      ctx.fillStyle = "#000"\n      ctx.fillRect (0, 0, 800, 400);\n      img.onload = function() {\n      loop()\n      }\n   }\n   function loop(){\n      var vitese=1\n      ctx.save()\n      ctx.clearRect(0, 0, 800, 400); \n      ctx.fillRect (0, 0, 800, 400);\n      ctx.setTransform(-0.55, 0.85, -1, 0.10, 100, 50+img.width*.5)\n      ctx.rotate(Math.PI*2*(i/360)*vitese )\n      ctx.drawImage(img, img.width*(-0.5)-200, img.height*(-0.8));\n      ctx.restore();\n      i+=1;\n      if (i==360)\n	i=i%360\n      if(nn++<1000) {\n        idAnim = setTimeout(loop,60);\n      }\n   }\n}\ndraw()\n',
'// Pavages   17\n// Rotations et translations uniquement (pas de réflexions)\n// dessin d un pavé triangulaire\nvar canvas, ctx;\nfunction pave() {\n  ctx.save();\n  ctx.fillStyle = "rgb(130,100,800)";\n  ctx.strokeStyle = "rgb(0,0,300)";\n  ctx.beginPath();\n  ctx.lineWidth=2;\n  ctx.moveTo(5,5);ctx.lineTo(20,10);ctx.lineTo(55,5);ctx.lineTo(45,18);ctx.lineTo(30,50);\n  ctx.closePath();\n  ctx.stroke()\n  ctx.fill()\n  ctx.fillStyle = "rgb(300,300,100)";\n  ctx.lineWidth=5;\n  ctx.strokeStyle = "rgb(0,300,0)";\n  ctx.beginPath();\n  ctx.moveTo(20,18);ctx.lineTo(40,16);ctx.lineTo(35,26); ctx.lineTo(25,30);\n  ctx.closePath();\n  ctx.stroke()\n  ctx.fill()\n  ctx.restore()\n}\n// dessins d un hexagone à partir de six pavés par rotation\nfunction six() {\n   ctx.save();\n   for(var i=0; i<6; i++) {\n      ctx.rotate(2*Math.PI/6)\n      pave()\n   }\n   ctx.restore()\n}\n// pavage utilisant des translations selon deux vecteurs non colinéaires\n// 0,60*Math.sqrt(3)     et     60*3/2, 60*Math.sqrt(3)/2\nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width=600\n  canvas.height=600\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = "rgb(800,100,50)";\n    ctx.fillRect (0, 0, 600, 600);\n    ctx.translate(-60,-330)\n    for(var i=0; i<9; i++) {\n       ctx.save()\n       for(j=0; j<=6; j++) {\n          ctx.translate(90, Math.sqrt(3)*60/2) \n          six()\n       }\n       ctx.restore()\n       ctx.translate(0,60*Math.sqrt(3))\n    }\n  }\n}\n\ndraw()\n',
'// Pavages   18\n// Rotations, translations et réflexions\n// dessin d un pavé triangulaire\nvar canvas, ctx;\nfunction pave() { \n  ctx.fillStyle = "#66aa00";\n  ctx.lineWidth=5;\n  ctx.strokeStyle = "#ffff66";\n  ctx.beginPath();\n  ctx.lineWidth=5;\n  ctx.moveTo(7,4);ctx.lineTo(20,10);ctx.lineTo(52,6);ctx.lineTo(45,18);ctx.lineTo(29,43);\n  ctx.closePath();\n  ctx.stroke()\n  ctx.fill()\n  ctx.fillStyle = "#888822";\n  ctx.lineWidth=5;\n  ctx.strokeStyle = "#00dd33";\n  ctx.beginPath();\n  ctx.moveTo(20,18);ctx.lineTo(40,19);ctx.lineTo(35,26); ctx.lineTo(25,30);\n  ctx.closePath();\n  ctx.stroke()\n  ctx.fill()\n}\nfunction refl() {\n   ctx.save();\n      pave()\n      ctx.transform(1,0,0,-1, 0, 0)\n      pave()\n   ctx.restore()\n}\n\n// dessins d un hexagone à partir de six pavés par rotation\nfunction trois() {\n   ctx.save();\n   for(var i=0; i<3; i++) {\n      ctx.rotate(4*Math.PI/6)\n      refl()\n   }\n   ctx.restore()\n}\n// pavage utilisant des translations selon deux vecteurs non colinéaires\n// 0,60*Math.sqrt(3)     et     60*3/2, 60*Math.sqrt(3)/2\nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width=600\n  canvas.height=600\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = "#dd3388";\n    ctx.fillRect (0, 0, 600, 600);\n    ctx.translate(-60,-330)\n    for(var i=0; i<9; i++) {\n       ctx.save()\n       for(j=0; j<=6; j++) {\n          ctx.translate(90, Math.sqrt(3)*60/2) \n          trois()\n       }\n       ctx.restore()\n       ctx.translate(0,60*Math.sqrt(3))\n    }\n  }\n}\n\ndraw()\n',
'// Pavages  19 \n// Rotations, translations et réflexions\n// dessin d une photographie de fleur (abelia)a\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nvar canvas, ctx;\nvar img = new Image();\nimg.src = url+"abelias.png";\nvar cote = 190\nfunction pave() {    \n      ctx.drawImage(img,0,0)\n}\nfunction refl() {\n   ctx.save();\n      pave()\n      ctx.transform(1,0,0,-1, 0, 0)\n      pave()\n   ctx.restore()\n}\n\n// dessins d un hexagone à partir de six pavés par rotation\nfunction trois() {\n   ctx.save();\n   for(var i=0; i<3; i++) {\n      ctx.rotate(4*Math.PI/6)\n      refl()\n   }\n   ctx.restore()\n}\n// pavage utilisant des translations selon deux vecteurs non colinéaires\n// 0,cote*Math.sqrt(3)     et     cote*3/2, cote*Math.sqrt(3)/2\nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width=900\n  canvas.height=800\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = "#330055";\n    ctx.fillRect (0, 0, canvas.width, canvas.height);\n    ctx.translate(-140,-330)\n    img.onload = function() {\n    for(var i=0; i<4; i++) {\n       ctx.save()\n       for(j=0; j<=3; j++) {\n          ctx.translate(cote*3/2, Math.sqrt(3)*cote/2) \n          trois()\n       }\n       ctx.restore()\n       ctx.translate(0,cote*Math.sqrt(3))\n    }\n    }\n  }\n}\n\ndraw()\n',
'// Pavages   20\n// Rotations, translations et réflexions\n// photographie d un bourdon sur une fleur\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nvar canvas, ctx;\nvar img = new Image();\nimg.src = url+"bourdonRed.png";\nvar cote = 230\nfunction pave() {    \n      ctx.drawImage(img,-20,-10)\n}\n\n\n// dessins d un carré à partir de 4 pavés par rotation Pi/2\nfunction quatre() {\n   ctx.save();\n   for(var i=0; i<4; i++) {\n      pave()\n      ctx.rotate(Math.PI/2)\n      \n   }\n   ctx.restore()\n}\n// pavage utilisant des translations selon deux vecteurs non colinéaires\n// 0,cote*Math.sqrt(3)     et     cote*3/2, cote*Math.sqrt(3)/2\nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width=900\n  canvas.height=800\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = "#443322";\n    ctx.fillRect (0, 0, canvas.width, canvas.height);\n    ctx.translate(-300,-100)\n    img.onload = function() {\n//ctx.drawImage(img,0,0)\n    for(var i=0; i<6; i++) {\n       ctx.save()\n       for(j=0; j<5; j++) {\n          ctx.translate(cote*5/4, cote/4) \n          quatre()\n       }\n       ctx.restore()\n       ctx.translate(-cote/2,cote)\n    }\n    }\n  }\n}\n\ndraw()\n',
'// Pavages   21\n// Réflexions et translations\n// photographie d un moro-sphinx sur une fleur de buddleia\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nvar canvas, ctx;\nvar img = new Image();\n//img.src = url+ "moro-sphinx.jpg";\n//var a=200, b=156, d=80;\n//img.src = url+"bleue.jpg";           // 600x600\nimg.src = url+"passiflore.jpg";\nvar a=150, b=150, d=150;\n//img.src = url+"rocsMer.jpg";\n//var a=150, b=150, d=150;\n//img.src = url+"mer.jpg";\n//var a=150, b=150, d=30;\n//img.src = url+"baiesRouges.jpg"; //400x600\n//var a=120, b=130, d=60;\n//img.src = url+"invalides.jpg"; // 400x500\n//var a=80, b=120, d=140;\n//img.src = url+"grenadiers.jpg";//600x231\n//var a=300, b=116, d=-150;\nfunction pave() {    \n      ctx.drawImage(img,0,0,a,b)\n}\n\n\n// dessins d un carré à partir de 4 pavés par rotation Pi/2\nfunction deux() {\n   ctx.save();  \n      pave()\n      ctx.transform(-1,0,0,1,0,0) // réflexion d axe vertical\n      pave()\n   ctx.restore()\n}\n// pavage utilisant des translations selon deux vecteurs non colinéaires\n// 0,cote*Math.sqrt(3)     et     cote*3/2, cote*Math.sqrt(3)/2\nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width=900\n  canvas.height=800\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = "#443322";\n    ctx.fillRect (0, 0, canvas.width, canvas.height);\n    ctx.translate(-950,0)\n    img.onload = function() {\n//ctx.drawImage(img,0,0)\n    for(var i=0; i<11; i++) {\n       ctx.save()\n       for(j=0; j<11; j++) {\n          ctx.translate(2*a, 0) \n          deux()\n       }\n       ctx.restore()\n       ctx.translate(d,b)\n    }\n    }\n  }\n}\n\ndraw()\n\n',
'// Pavages   22\n// Réflexions et translations\n// photographie d un moro-sphinx sur une fleur de buddleia\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nvar canvas, ctx;\nvar img = new Image();\n//img.src = url+"moro-sphinx.jpg";\n//var a = 200, b=156, c=78\n//img.src = "coupole.jpg"; //600x404\n//var a = 200, b=134,c=60;\n//img.src = url+"armure.jpg"; //450x600\n//var a = 112, b=150,c=60;\n//img.src = url+"mimosa.jpg"; // 600x419\n//var a = 200, b=140,c=70\nimg.src = url+"goelandBrest.jpg"; // 600x313\nvar a = 200, b=104,c=50;\nfunction pave() {    \n      ctx.drawImage(img,0,0,a,b)\n}\n// dessins d un carré à partir de 4 pavés par rotation Pi/2\nfunction deux() {\n   ctx.save();  \n      pave()\n      ctx.transform(-1,0,0,1,0,0) // réflexion d axe vertical\n      ctx.translate(0,c)\n      pave()\n   ctx.restore()\n}\n// translations \nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width =900\n  canvas.height=800\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = "#443322";\n    ctx.fillRect (0, 0,canvas.width, canvas.height );\n    ctx.translate(-600,-100)\n    img.onload = function() {\n    for(var i=0; i<10; i++) {\n       ctx.save()\n       for(j=0; j<7; j++) {\n          ctx.translate(2*a, 0) \n          deux()\n       }\n       ctx.restore()\n       ctx.translate(0,b)\n    }\n    }\n  }\n}\n\ndraw()\n\n',
'// Pavages  23  Rotations, translations et réflexions\n// Forgerons\n// Détail d un vitrail de la basilique St Sauveur de  Dinan\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nvar canvas, ctx;\nvar img = new Image();\n//img.src = url+"forgeronsVitrDinan.png";\nimg.src=url+"detailDinan.jpg";  // 100 kb\nvar cote = 180;             // 600 possible\nfunction pave() {    \n      ctx.drawImage(img,0,0,cote,cote)\n}\n// dessins d un carré à partir de 4 pavés par rotation Pi/2 \nfunction quatre() {\n   ctx.save();\n   for(var i=0; i<4; i++) {\n      pave()\n      ctx.rotate(Math.PI/2)     \n   }\n   ctx.restore()\n}\n// réflexion (symétrie axiale)\nfunction reflex() {\n  ctx.save();\n  quatre();\n  ctx.transform(-1,0,0,1,cote*2,0)\n  quatre();\n  ctx.restore()\n}\n// pavage utilisant des rotations réflexions et translations \nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width=900\n  canvas.height=800\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = "#000";\n    ctx.fillRect (0, 0,canvas.width ,canvas.height );\n    ctx.translate(-300,-300)\n    img.onload = function() {\n    for(var i=0; i<5; i++) {\n       ctx.save()\n       for(j=0; j<5; j++) {\n          reflex()\n          ctx.translate(cote*2, 0)          \n       }\n       ctx.restore()\n       ctx.translate(cote/2,2*cote)\n    }\n    }\n  }\n}\n\ndraw()\n',
'// Pavages   24\n// Rotations, translations et réflexions\n// statue à Carhaix, sa ville natale, de La Tour d Auvergne 1743-1800\n// Homme Cultivé \n// 1er Grenadier de France, mort au Champ d Honneur\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nvar canvas, ctx;\nvar img = new Image();\n//img.src = url+"deLaTourDAuvergneB.png";\n//var colr="#4167af";\n//img.src = url+"rosejaune.png";\nvar colr="#342";\n//img.src = url+"kayack.png";\n//img.src = url+"chaiseTerrasseB.png";\n//img.src = url+"pluie.png";\nimg.src = url+"lichenBois.png";\n//img.src = url+"vitrail.png"\nvar w=160, h=w/Math.sqrt(3)\n\nfunction pave() {    \n      ctx.drawImage(img,0,-h,w,h)\n}\n// chaque pavé est doublé par symétrie\nfunction refl() {\n   ctx.save();\n      pave()\n      ctx.transform(1,0,0,-1, 0, 0)\n      pave()\n   ctx.restore()\n}\n// dessins d un hexagone à partir de six doubles pavés par rotation\nfunction six() {\n   ctx.save();\n   for(var i=0; i<6; i++) {\n      refl()\n      ctx.rotate(Math.PI/3)\n   }\n   ctx.restore()\n}\n// pavage utilisant des translations selon deux vecteurs non colinéaires\nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width=900\n  canvas.height=800\n  var a = Math.sqrt(3);\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = colr;\n    ctx.fillRect (0, 0, canvas.width, canvas.height);\n    ctx.translate(-800,-200)\n    img.onload = function() {\n      for(var i=0; i<5; i++) {\n         ctx.save()\n         for(j=0; j<5; j++) {\n            ctx.translate(w*2,0) \n            six()\n         }\n         ctx.restore()\n         ctx.translate(w,h*3)\n      }\n    }\n  }\n}\n\ndraw()\n',
'// Pavages   25\n// Rotations et translations\n// photographie de la côte bretonne\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nvar canvas, ctx;\nvar img = new Image();\n//img.src = url+"chaiseTerrasse.png";\nimg.src = url+"epagneul.png";\n//img.src = url+"galets.png";\n//img.src = url+"papillonBugueles.png";\nvar a = 120, b=a*Math.sqrt(2)\nfunction pave() {    \n      ctx.drawImage(img,0,0, a, a)\n}\n// dessins d un carré à partir de 4 pavés par rotation Pi/2\nfunction quatre() {\n   ctx.save();  \n      for(var i=0; i<4; i++) {\n        pave();\n        ctx.rotate(Math.PI/2);\n      }\n   ctx.restore()\n}\n// pavage utilisant des translations \nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width=900\n  canvas.height=800;\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = "#443322";\n    ctx.fillRect (0, 0,canvas.width ,canvas.height );\n    ctx.translate(-1000,0)\n    img.onload = function() {\n    for(var i=0; i<12; i++) {\n       ctx.save()\n       for(j=0; j<8; j++) {\n          ctx.translate(a,-a) \n          quatre()\n       }\n       ctx.restore()\n       ctx.translate(a, a)\n    }\n    }\n  }\n}\n\ndraw()\n',
'// Pavages   26\n// Rotations, translations et réflexions\n// dessin d un pavé triangulaire\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nvar canvas, ctx;\nvar a=120, h=a*Math.sqrt(3)/2;\nvar img=new Image();\nimg.src=url+"fleurRougeInsecte.png";\nfunction pave() { \n  ctx.save()\n  ctx.drawImage(img,0,0,a,h)\n  ctx.restore()\n}\nfunction refl() {\n   ctx.save();\n      pave()\n      ctx.transform(1,0,0,-1,0 , 0)\n      pave()\n   ctx.restore()\n}\n// dessins d un hexagone à partir de six pavés par rotation\nfunction trois() {\n   ctx.save();\n   for(var i=0; i<4; i++) {\n      refl()\n      ctx.rotate(2*Math.PI/3)\n   }\n   ctx.restore()\n}\n// pavage utilisant des translations selon deux vecteurs non colinéaires\nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width=900\n  canvas.height=800\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = "#442";\n    ctx.fillRect (0, 0, canvas.width, canvas.height);\n    ctx.translate(0, -400)\n    img.onload = function(){\n      ctx.save()\n      for(var i=0; i<7; i++) {\n        ctx.save()\n        for(j=0; j<7; j++) {\n          trois()\n          ctx.translate(3*a/2, h) \n        }\n        ctx.restore()\n        ctx.translate(0,2*h)\n      }\n      ctx.restore()\n    }\n  }\n}\n\ndraw()\n',
'// Pavages   27 translations et réflexions\n// Forgerons\n// Détail d un vitrail de la basilique St Sauveur de  Dinan\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nvar canvas, ctx;\nvar img = new Image();\n//img.src=url+"houxB.png"; var a=200, b=90;     // 600x269\nimg.src=url+"fougere.png"; var a=200, b=81;     // 600x243\n//img.src=url+"herbe.png"; var a=300, b=128;     // 600x256\n            \nfunction pave() {   \n    ctx.save() \n      ctx.drawImage(img,0,0,a,b)\n    ctx.restore()\n}\n\n// réflexion (symétrie axiale)\nfunction sym() {\n  ctx.save();\n  pave();\n  ctx.transform(1,0,0,-1,0,2*b)\n  pave();\n  ctx.restore()\n}\n// pavage utilisant des rotations réflexions et translations \nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width=900\n  canvas.height=800\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = "#000";\n    ctx.fillRect (0, 0,canvas.width ,canvas.height );\n    ctx.translate(-1200,-200)\n    img.onload = function() {\n      ctx.save()\n      for(var i=0; i<15; i++) {\n        ctx.save()\n        for(var j=0; j<20; j++) {\n          sym();\n          ctx.translate(a, 0)\n        }\n        ctx.restore()\n        ctx.translate(a/2,b)\n      }\n      ctx.restore()\n    }\n  }\n}\n\ndraw()\n',
'// Pavages 28   \n// Rotations, translations et réflexions\n// dessin d un pavé triangulaire\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nvar canvas, ctx;\nvar img = new Image();\n//img.src=url+"sarrazin.png"; \n//var a=200, b=a*Math.sqrt(3)/2;     // 600x531\nimg.src=url+"alkekengeC.png"; \nvar colr = "#bd4221";\nvar a=150, b=a*Math.sqrt(3)/2;     // 600x531\n\nfunction pave() { \n    ctx.save() \n      ctx.drawImage(img,0,0,a,b)\n    ctx.restore()\n}\nfunction refl() {\n   ctx.save();\n      pave()\n      ctx.transform(1,0,0,-1,0,0)\n      pave()\n   ctx.restore()\n}\n\n// dessins d un hexagone à partir de six pavés par rotation\nfunction trois() {\n   ctx.save();\n   for(var i=0; i<3; i++) {\n      refl()\n      ctx.rotate(2*Math.PI/3)\n   }\n   ctx.restore()\n}\n// pavage utilisant des translations selon deux vecteurs non colinéaires\n\nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width=900\n  canvas.height=800\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = colr;\n    ctx.fillRect (0, 0,canvas.width, canvas.height);\n    ctx.translate(-300,-400)\n    img.onload = function() {\n    ctx.translate(-a,-2*b)\n    for(var i=0; i<6; i++) {\n       ctx.save()\n       for(j=0; j<7; j++) {\n          trois()\n          ctx.translate(3*a/2,b) \n       }\n       ctx.restore()\n       ctx.translate(0,2*b)\n    }\n    }\n  }\n}\n\ndraw()\n',
'// Pavages    29\n// Rotations, translations et réflexions\n// dessin d un pavé triangulaire\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nvar canvas, ctx;\nvar img = new Image();\n//img.src=url+"acanthe.jpg"; //503x600\n//var a=126, b=150;\n//var colr = "#333";\n//img.src=url+"sarrazinE.jpg"; //600x600\n//var a=200, b=200;\n//var colr = "#333";\n//img.src=url+"pensee.jpg"; //450x600\n//var a=112, b=150;\n//var colr = "#333";\n//img.src=url+"chevre.jpg"; //600x404\n//var a=150, b=101;\n//var colr = "#333";\n//img.src=url+"ferraille.jpg"; //300x320\n//var a=120, b=128;\n//var colr = "#430";\n//img.src=url+"crabe.jpg"; //400x364\n//var a=122, b=182;\n//var colr = "#430";\n//img.src=url+"meduse.jpg"; //600x600\n//var a=140, b=140;\n//var colr = "#030ca4";\n//img.src=url+"poissonJaune.jpg"; //500x262\n//var a=167, b=84;\n//var colr = "#030ca4";\nimg.src=url+"fenetresRennes.jpg"; //524x600\nvar a=131, b=150;\nvar colr = "#030ca4";\n\nfunction pave() { \n    ctx.save() \n      ctx.drawImage(img,0,0,a,b)\n    ctx.restore()\n}\nfunction refl() {\n   ctx.save();\n      pave()\n      ctx.transform(1,0,0,-1,0,0)\n      pave()\n   ctx.restore()\n}\n\n// demi-tour\nfunction deux() {\n   ctx.save();\n   for(var i=0; i<2; i++) {\n      refl()\n      ctx.rotate(Math.PI)\n   }\n   ctx.restore()\n}\n// pavage utilisant des translations selon deux vecteurs non colinéaires\n\nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width=900\n  canvas.height=800\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = colr;\n    ctx.fillRect (0, 0,canvas.width, canvas.height);\n    ctx.translate(0,0)\n    img.onload = function() {\n      \n      //ctx.rotate(Math.PI/6); ctx.translate(100,-400); // pensee\n      //ctx.translate(100,100);\n      //ctx.rotate(-Math.PI/12); ctx.translate(-400,100); // chevre\n      //ctx.rotate(-Math.PI/4); ctx.translate(-500,-100); // ferraille\n      //ctx.rotate(-Math.PI/3); ctx.translate(-600,-200); // crabe\n      //ctx.rotate(-Math.PI/4); ctx.translate(-600,-100); // meduse\n      //ctx.rotate(-Math.PI/10); ctx.translate(-100,0); // poissonJaune\n      ctx.rotate(0); ctx.translate(100,100); // fenetresRennes\n\n      for(var i=0; i<7; i++) {\n         ctx.save()\n         for(j=0; j<7; j++) {\n            deux()\n            ctx.translate(2*a,0) \n         }\n         ctx.restore()\n         ctx.translate(0,2*b)\n      }\n    }\n  }\n}\n\ndraw()\n',
'// Pavages   \n// Rotations, translations et réflexions\n// dessin d un pavé triangulaire\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nvar canvas, ctx;\nvar img = new Image();\n//img.src=url+"penseeB.png"; //500x509\n//var a=125, b=127;var colr = "#333";\n//img.src=url+"soir.png"; // 600x363 soir\n//var a=150, b=91; var colr = "#333";\n//img.src=url+"vitrailColombe.png";\nimg.src=url+"vitrailColombeB.png";\nvar a=500/2, b=500/2; var colr = "#333";// 500x500\n//img.src=url+"fenetresRennesB.png"; // 600x385\n//var a=200, b=128; var colr = "#333";\n\n// triangles rectangles\nfunction pave() { \n    ctx.save() \n      ctx.drawImage(img,0,0,a,b)\n    ctx.restore()\n}\n// 1ère symétrie\nfunction refl() {\n   ctx.save();\n      pave()\n      ctx.transform(1,0,0,-1,0,0)\n      pave()\n   ctx.restore()\n}\n\n// demi-tour\nfunction deux() {\n   ctx.save();\n   for(var i=0; i<2; i++) {\n      refl()\n      ctx.rotate(Math.PI)\n   }\n   ctx.restore()\n}\n// pavage utilisant des translations selon deux vecteurs non colinéaires\n\nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width=900\n  canvas.height=800\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = colr;\n    ctx.fillRect (0, 0,canvas.width, canvas.height);\n//    ctx.translate(0,0)\n    img.onload = function() {\n    //ctx.rotate(Math.PI/4); ctx.translate(0,-600); var ii=10, jj=12; // penseeB\n    //ctx.rotate(Math.PI/4); ctx.translate(200,-800);var ii=16, jj=5;// soir\n    ctx.rotate(-Math.PI/4); ctx.translate(-350,-250); var ii=11, jj=11;// vitrailColombe\n    //ctx.rotate(-Math.PI/3); ctx.translate(-800,-600); var ii=15, jj=14;// fenetresRennesB\n\nrefl()\n      for(var i=0; i<ii; i++) {\n         ctx.save()\n         for(j=0; j<jj; j++) {\n            deux()\n            ctx.translate(2*a,0) \n            \n         }\n         ctx.restore()\n         ctx.translate((2*(i%2)-1)*a,b)\n      }\n    }\n  }\n}\n\ndraw()\n\n',
'// Pavages   31\n// Rotations, translations et réflexions\n// dessin d un pavé triangulairea\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nvar canvas, ctx;\nvar img = new Image(); // rectangles\n// Melrand écomusée an mil\n//img.src = url+"melrand.jpg"; var a=600/5, b=391/5; var colr = "#333"; \nimg.src = url+"rue.jpg"; var a=603/5, b=530/5; var colr = "#333";\n// parapet du pont devant musée des forges d Hennebont\n//img.src = url+"pontHennebont.jpg";var a=400/5, b=475/5; var colr = "#333";\n\n// triangles rectangles\nfunction pave() { \n    ctx.save() \n      ctx.drawImage(img,0,0,a,b)\n    ctx.restore()\n}\n// 1ère symétrie\nfunction refl() {\n   ctx.save();\n      pave()\n      //ctx.translate(0,b)\n      ctx.transform(-1,0,0,1,0,0)\n      pave()\n   ctx.restore()\n}\n\n// symetrie translation\nfunction deux() {\n   ctx.save();\n      refl()   \n      //ctx.transform(1,0,0,-1,0,0)\n      ctx.translate(0,b)\n      ctx.transform(1,0,0,-1,0,0)\n      ctx.translate(a,-b)\n      refl()\n   ctx.restore()\n}\n// pavage utilisant des translations selon deux vecteurs non colinéaires\n\nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width=900\n  canvas.height=800\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = colr;\n    ctx.fillRect (0, 0,canvas.width, canvas.height);\n    img.onload = function() {\n    //var ii=11, jj=11;\n    //ctx.rotate(-Math.PI/4);ctx.translate(-800,-300);  var ii=11, jj=11;// fenetresRennesB\n    ctx.rotate(-Math.PI/8);  ctx.translate(-800,-300); var ii=11, jj=11; // rue (la plante)\nrefl()\n      for(var i=0; i<ii; i++) {\n         ctx.save()\n         for(j=0; j<jj; j++) {\n            deux()\n            ctx.translate(2*a,0) \n            \n         }\n         ctx.restore()\n         ctx.translate(0,2*b)\n      }\n    }\n  }\n}\n\ndraw()\n',
'// Pavages  32 (cf 19)\n// Rotations, translations et réflexions\n// dessin d une photographie de fleur (abelia)a\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nvar canvas, ctx;\nvar img = new Image();\n//img.src = url+"coucherSoleil.png";\n//var a=500/5;\n//img.src = url+"chat.png";\n//img.src = url+"hennebont.png";\nimg.src = url+"travaux.png";\n\nvar a=500/4;\nvar b = a*Math.sqrt(3)/2\n\nfunction pave() {    \n      ctx.drawImage(img,0,0,a,b)\n}\nfunction refl() {\n   ctx.save();\n      pave()\n      ctx.transform(1,0,0,-1, 0, 0)\n      pave()\n   ctx.restore()\n}\n\n// dessins d un hexagone à partir de six pavés par rotation\nfunction trois() {\n   ctx.save();\n   for(var i=0; i<3; i++) {\n      ctx.rotate(2*Math.PI/3)\n      refl()\n   }\n   ctx.restore()\n}\n// pavage utilisant des translations selon deux vecteurs non colinéaires\n// 0,cote*Math.sqrt(3)     et     cote*3/2, cote*Math.sqrt(3)/2\nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width=900\n  canvas.height=800\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = "#330055";\n    ctx.fillRect (0, 0, canvas.width, canvas.height);\n    ctx.translate(-300,-600)\n    img.onload = function() {\n      for(var i=0; i<8; i++) {\n        ctx.save()\n        for(var j=0; j<8; j++) {\n          ctx.translate(a*3/2, b) \n          trois()\n        }\n        ctx.restore()\n        ctx.translate(0,2*b)\n      }\n    }\n  }\n}\n\ndraw()\n',
'// Pavages  33 \n// Rotations, translations et réflexions\nvar url="http://jeux-et-mathematiques.davalan.org/lang/jsc/images/";\nvar canvas, ctx;\nvar colr;\nvar img = new Image();\n//img.src = url+"lichen.png";\n//img.src = url+"anse.png";\n//img.src = url+"feuillageRoux.png";colr="#7e444a";\n//img.src = url+"feuillage.png"; colr="#261";\n//img.src = url+"hortensiaB.png";colr="#838cc4";\n//img.src = url+"fleurPourpre.png";colr="#558d45";\nimg.src = url+"feuillesMortes.png";colr="#9c6c5d";\n//img.src = url+"fleurMauve.png";colr="#697652";\n//img.src = url+"jasminHiver.png";colr="#3b6f17";\n//img.src = url+"chris.png";colr="#8a4773";\n\nvar a=500/2;\nvar b = a/2*Math.tan(Math.PI/6)\n\nfunction pave() {\n      ctx.save()  \n      ctx.translate(-a/2,0)\n      ctx.drawImage(img,0,0,a,b)\n      ctx.restore()\n}\nfunction trois() {\n   ctx.save();\n   for(var j=0; j<6; j++) {\n      pave()\n      ctx.rotate(2*Math.PI/3)\n   }\n   ctx.restore()\n}\n// \nfunction six() {\n   ctx.save();\n   ctx.translate(0,0)\n   for(var i=0; i<6; i++) {\n      ctx.save();\n      ctx.translate(a/2,-b)\n      trois()\n      ctx.restore()\n      ctx.rotate(Math.PI/3)\n   }\n   ctx.restore()\n}\n// pavage utilisant des translations selon deux vecteurs non colinéaires\nfunction draw(){\n  canvas = document.getElementById("papier");\n  canvas.width=900\n  canvas.height=800\n  if (canvas.getContext){\n    ctx = canvas.getContext("2d");\n    ctx.fillStyle = colr;\n    ctx.fillRect (0, 0, canvas.width, canvas.height);\n    ctx.rotate(Math.PI/8)\n    ctx.translate(-300,-900)\n    img.onload = function() {\n      for(var i=0; i<8; i++) {\n        ctx.save()\n        for(var j=0; j<8; j++) {\n          six()\n          ctx.translate(0, a*Math.sqrt(3)) \n        }\n        ctx.restore()\n        ctx.translate(3*a/2,a*Math.sqrt(3)/2)\n      }\n    }\n  }\n}\n\ndraw()\n\n',
'// MOIRÉ - Droites parallèles et faisceaux de Fresnel\n// les aires des surfaces annulaires comprises entre deux cercles consécutifs sont égales\n// les rayons des cercles n=1... sont proportionnelles à racine(n)\n// les droites parallèles sont régulièrement espacées, elles.\n\nfunction draw(){\n  var canvas = document.getElementById("papier");\n  canvas.width=900;\n  canvas.height=800;\n  if (canvas.getContext){\n    var d=7, k=5, e=5;\n    var ctx = canvas.getContext("2d");\n    ctx.fillStyle = "#fff";\n    ctx.fillRect (0, 0,canvas.width, canvas.height);\n    ctx.beginPath();\n    // coord. centre 150,150  rayon : 50 angle départ 0 fin 2Pi, sens \n    ctx.linWidth=1;\n    for(var i=0; i<900; i+=d) {\n           ctx.moveTo(i,0);\n           ctx.lineTo(i,800);\n           ctx.stroke();\n     }\n    for(var x=0; x<2; x++) {\n      for(var i=1; i<=35; i++) {\n        ctx.strokeStyle="#000";\n        ctx.lineWidth=(1);\n        var ray = 60*Math.sqrt(i)\n        ctx.moveTo(450+ray,400);\n        ctx.arc(450,400,ray,0,Math.PI*2,true); // Cercle\n        ctx.stroke();\n      }\n    }\n    ctx.stroke();\n  }\n}\n\ndraw()\n',
'')