Tangram: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 48: Line 48:




         var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:false, originX: 0, originY: 670, unitX: 30, unitY: 30});
         var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, originX: 0, originY: 670, unitX: 30, unitY: 30});
          
          
              
              
         var p1 = board.createElement('point',[11,5],{visible:false});  
         var p1 = board.create('point',[11,5],{visible:false});  
         var p2 = board.createElement('point',[11,15],{visible:false});         
         var p2 = board.create('point',[11,15],{visible:false});         
         var p3 = board.createElement('point',[21,15],{visible:false});  
         var p3 = board.create('point',[21,15],{visible:false});  
         var p4 = board.createElement('point',[21,5],{visible:false});
         var p4 = board.create('point',[21,5],{visible:false});
         var f = board.createElement('polygon',[p1,p2,p3,p4],{fillcolor:'none'});
         var f = board.create('polygon',[p1,p2,p3,p4],{fillcolor:'none'});
         for(i=0; i<f.borders.length; i++) {
         for(i=0; i<f.borders.length; i++) {
             f.borders[i].setProperty('strokeColor:black');
             f.borders[i].setProperty('strokeColor:black');
Line 61: Line 61:
          
          
         // First polygon  
         // First polygon  
         var p11 = board.createElement('point',[16,16],{face:'circle',fillColor:'blue',strokeColor:'blue',withLabel:false,visible:true});
         var p11 = board.create('point',[16,16],{face:'circle',fillColor:'blue',strokeColor:'blue',withLabel:false,visible:true});
         var c11 = board.createElement('circle',[p11,5],{visible:false});
         var c11 = board.create('circle',[p11,5],{visible:false});
         var p12 = board.createElement('glider',[21,16,c11],{face:'plus',strokeColor:'blue',withLabel:false,visible:true});
         var p12 = board.create('glider',[21,16,c11],{face:'plus',strokeColor:'blue',withLabel:false,visible:true});
         var p13 = board.createElement('point',[function() {return -p12.Y()+p11.Y()+p12.X()},function() {return -p11.X()+p12.X()+p12.Y()}],{face:'circle',fillColor:'blue',withLabel:false,visible:false});
         var p13 = board.create('point',[function() {return -p12.Y()+p11.Y()+p12.X()},function() {return -p11.X()+p12.X()+p12.Y()}],{face:'circle',fillColor:'blue',withLabel:false,visible:false});
         var f1 = board.createElement('polygon',[p11,p12,p13],{fillcolor:'#99FF00',visible:true,shadow:true});
         var f1 = board.create('polygon',[p11,p12,p13],{fillcolor:'#99FF00',visible:true,shadow:true});
         for(i=0; i<f1.borders.length; i++) {
         for(i=0; i<f1.borders.length; i++) {
             f1.borders[i].setProperty('strokeColor:black');
             f1.borders[i].setProperty('strokeColor:black');
Line 71: Line 71:
          
          
         // Second polygon
         // Second polygon
         var p21 = board.createElement('point',[11,16],{face:'circle',fillColor:'blue',strokeColor:'blue',withLabel:false,visible:true});
         var p21 = board.create('point',[11,16],{face:'circle',fillColor:'blue',strokeColor:'blue',withLabel:false,visible:true});
         var c21 = board.createElement('circle',[p21,5/2.0*Math.sqrt(2)],{visible:false});
         var c21 = board.create('circle',[p21,5/2.0*Math.sqrt(2)],{visible:false});
         var p22 = board.createElement('glider',[11.0+5/2.0*Math.sqrt(2),16,c21],{face:'plus',strokeColor:'blue',withLabel:false,visible:true});
         var p22 = board.create('glider',[11.0+5/2.0*Math.sqrt(2),16,c21],{face:'plus',strokeColor:'blue',withLabel:false,visible:true});
          
          
         var p23 = board.createElement('point',[function() {return -p22.Y()+p21.Y()+p22.X()},function() {return -p21.X()+p22.X()+p22.Y()}],{face:'circle',fillColor:'blue',withLabel:false,visible:false});
         var p23 = board.create('point',[function() {return -p22.Y()+p21.Y()+p22.X()},function() {return -p21.X()+p22.X()+p22.Y()}],{face:'circle',fillColor:'blue',withLabel:false,visible:false});
         var f2 = board.createElement('polygon',[p21,p22,p23],{fillcolor:'#0099CC',visible:true,shadow:true});
         var f2 = board.create('polygon',[p21,p22,p23],{fillcolor:'#0099CC',visible:true,shadow:true});
         for(i=0; i<f2.borders.length; i++) {
         for(i=0; i<f2.borders.length; i++) {
             f2.borders[i].setProperty('strokeColor:black');
             f2.borders[i].setProperty('strokeColor:black');
Line 82: Line 82:
          
          
         // Third polygon
         // Third polygon
         var p31 = board.createElement('point',[11+5/2.0*Math.sqrt(2),21],{face:'circle',fillColor:'blue',strokeColor:'blue',strokeColor:'blue',withLabel:false,visible:true});
         var p31 = board.create('point',[11+5/2.0*Math.sqrt(2),21],{face:'circle',fillColor:'blue',strokeColor:'blue',strokeColor:'blue',withLabel:false,visible:true});
         var c31 = board.createElement('circle',[p31,5/2.0*Math.sqrt(2)],{visible:false});
         var c31 = board.create('circle',[p31,5/2.0*Math.sqrt(2)],{visible:false});
         var p32 = board.createElement('glider',[11,21,c31],{face:'plus',strokeColor:'blue',withLabel:false,visible:true});
         var p32 = board.create('glider',[11,21,c31],{face:'plus',strokeColor:'blue',withLabel:false,visible:true});
         var p33 = board.createElement('point',[function() {return -p32.Y()+p31.Y()+p32.X()},function() {return -p31.X()+p32.X()+p32.Y()}],{face:'circle',fillColor:'blue',withLabel:false,visible:false});
         var p33 = board.create('point',[function() {return -p32.Y()+p31.Y()+p32.X()},function() {return -p31.X()+p32.X()+p32.Y()}],{face:'circle',fillColor:'blue',withLabel:false,visible:false});
         var f3 = board.createElement('polygon',[p31,p32,p33],{fillcolor:'#FFFF00',visible:true,shadow:true});
         var f3 = board.create('polygon',[p31,p32,p33],{fillcolor:'#FFFF00',visible:true,shadow:true});
         for(i=0; i<f3.borders.length; i++) {
         for(i=0; i<f3.borders.length; i++) {
             f3.borders[i].setProperty('strokeColor:black');
             f3.borders[i].setProperty('strokeColor:black');
Line 92: Line 92:


         // Fourth polygon
         // Fourth polygon
         var p41 = board.createElement('point',[1,5],{face:'circle',fillColor:'blue',strokeColor:'blue',withLabel:false,visible:true});
         var p41 = board.create('point',[1,5],{face:'circle',fillColor:'blue',strokeColor:'blue',withLabel:false,visible:true});
         var c41 = board.createElement('circle',[p41,5*Math.sqrt(2)],{visible:false});
         var c41 = board.create('circle',[p41,5*Math.sqrt(2)],{visible:false});
         var p42 = board.createElement('glider',[1+5*Math.sqrt(2),5,c41],{face:'plus',strokeColor:'blue',withLabel:false,visible:true});
         var p42 = board.create('glider',[1+5*Math.sqrt(2),5,c41],{face:'plus',strokeColor:'blue',withLabel:false,visible:true});
         var p43 = board.createElement('point',[function() {return -p42.Y()+p41.Y()+p42.X()},function() {return -p41.X()+p42.X()+p42.Y()}],{face:'circle',fillColor:'blue',withLabel:false,visible:false});
         var p43 = board.create('point',[function() {return -p42.Y()+p41.Y()+p42.X()},function() {return -p41.X()+p42.X()+p42.Y()}],{face:'circle',fillColor:'blue',withLabel:false,visible:false});
         var f4 = board.createElement('polygon',[p41,p42,p43],{fillcolor:'#FFCCFF',visible:true,shadow:true});
         var f4 = board.create('polygon',[p41,p42,p43],{fillcolor:'#FFCCFF',visible:true,shadow:true});
         for(i=0; i<f4.borders.length; i++) {
         for(i=0; i<f4.borders.length; i++) {
             f4.borders[i].setProperty('strokeColor:black');
             f4.borders[i].setProperty('strokeColor:black');
Line 102: Line 102:
          
          
         // Fifth polygon
         // Fifth polygon
         var p51 = board.createElement('point',[1+5*Math.sqrt(2),13.5],{face:'circle',fillColor:'blue',strokeColor:'blue',withLabel:false,visible:true});
         var p51 = board.create('point',[1+5*Math.sqrt(2),13.5],{face:'circle',fillColor:'blue',strokeColor:'blue',withLabel:false,visible:true});
         var c51 = board.createElement('circle',[p51,5*Math.sqrt(2)],{visible:false});
         var c51 = board.create('circle',[p51,5*Math.sqrt(2)],{visible:false});
         var p52 = board.createElement('glider',[1,13.5,c51],{face:'plus',strokeColor:'blue',withLabel:false,visible:true});
         var p52 = board.create('glider',[1,13.5,c51],{face:'plus',strokeColor:'blue',withLabel:false,visible:true});
         var p53 = board.createElement('point',[function() {return -p52.Y()+p51.Y()+p52.X()},function() {return -p51.X()+p52.X()+p52.Y()}],{face:'circle',fillColor:'blue',withLabel:false,visible:false});
         var p53 = board.create('point',[function() {return -p52.Y()+p51.Y()+p52.X()},function() {return -p51.X()+p52.X()+p52.Y()}],{face:'circle',fillColor:'blue',withLabel:false,visible:false});
         var f5 = board.createElement('polygon',[p51,p52,p53],{fillcolor:'#996699',visible:true,shadow:true});
         var f5 = board.create('polygon',[p51,p52,p53],{fillcolor:'#996699',visible:true,shadow:true});
         for(i=0; i<f5.borders.length; i++) {
         for(i=0; i<f5.borders.length; i++) {
             f5.borders[i].setProperty('strokeColor:black');
             f5.borders[i].setProperty('strokeColor:black');
Line 112: Line 112:


         // Sixth polygon
         // Sixth polygon
         var p61 = board.createElement('point',[1,15],{face:'circle',fillColor:'blue',strokeColor:'blue',withLabel:false,visible:true});
         var p61 = board.create('point',[1,15],{face:'circle',fillColor:'blue',strokeColor:'blue',withLabel:false,visible:true});
         var c61 = board.createElement('circle',[p61,5/2*Math.sqrt(2)],{visible:false});
         var c61 = board.create('circle',[p61,5/2*Math.sqrt(2)],{visible:false});
         var p62 = board.createElement('glider',[1+5/2*Math.sqrt(2),15,c61],{face:'plus',strokeColor:'blue',withLabel:false,visible:true});
         var p62 = board.create('glider',[1+5/2*Math.sqrt(2),15,c61],{face:'plus',strokeColor:'blue',withLabel:false,visible:true});
         var p63 = board.createElement('point',[function() {return -p62.Y()+p61.Y()+p62.X()},function() {return -p61.X()+p62.X()+p62.Y()}],{face:'circle',fillColor:'blue',withLabel:false,visible:false});     
         var p63 = board.create('point',[function() {return -p62.Y()+p61.Y()+p62.X()},function() {return -p61.X()+p62.X()+p62.Y()}],{face:'circle',fillColor:'blue',withLabel:false,visible:false});     
         var p64 = board.createElement('point',[function() {return -p62.Y()+p61.Y()+p61.X()},function() {return -p61.X()+p62.X()+p61.Y()}],{face:'circle',fillColor:'blue',withLabel:false,visible:false});  
         var p64 = board.create('point',[function() {return -p62.Y()+p61.Y()+p61.X()},function() {return -p61.X()+p62.X()+p61.Y()}],{face:'circle',fillColor:'blue',withLabel:false,visible:false});  
         var f6 = board.createElement('polygon',[p61,p62,p63,p64],{fillcolor:'#EE0000',visible:true,shadow:true});
         var f6 = board.create('polygon',[p61,p62,p63,p64],{fillcolor:'#EE0000',visible:true,shadow:true});
         for(i=0; i<f6.borders.length; i++) {
         for(i=0; i<f6.borders.length; i++) {
             f6.borders[i].setProperty('strokeColor:black');
             f6.borders[i].setProperty('strokeColor:black');
Line 123: Line 123:
              
              
         // Seventh polygon
         // Seventh polygon
         var p71 = board.createElement('point',[6,14.5],{face:'circle',fillColor:'blue',strokeColor:'blue',withLabel:false,visible:true});
         var p71 = board.create('point',[6,14.5],{face:'circle',fillColor:'blue',strokeColor:'blue',withLabel:false,visible:true});
         var c71 = board.createElement('circle',[p71,5/2*Math.sqrt(2)],{visible:false});
         var c71 = board.create('circle',[p71,5/2*Math.sqrt(2)],{visible:false});
         var p72 = board.createElement('glider',[8.5,17,c71],{face:'plus',strokeColor:'blue',withLabel:false,visible:true});
         var p72 = board.create('glider',[8.5,17,c71],{face:'plus',strokeColor:'blue',withLabel:false,visible:true});
         var p73 = board.createElement('point',[function() {return p72.X()-p71.X()-p72.Y()+p71.Y()+p72.X()},function() {return p72.X()-p71.X()+p72.Y()-p71.Y()+p72.Y()}],{face:'circle',fillColor:'blue',withLabel:false,visible:false});
         var p73 = board.create('point',[function() {return p72.X()-p71.X()-p72.Y()+p71.Y()+p72.X()},function() {return p72.X()-p71.X()+p72.Y()-p71.Y()+p72.Y()}],{face:'circle',fillColor:'blue',withLabel:false,visible:false});
         var p74 = board.createElement('point',[function() {return p72.X()-p71.X()-p72.Y()+p71.Y()+p71.X()},function() {return p72.X()-p71.X()+p72.Y()-p71.Y()+p71.Y()}],{face:'rectangle',fillColor:'blue',withLabel:false,visible:false});  
         var p74 = board.create('point',[function() {return p72.X()-p71.X()-p72.Y()+p71.Y()+p71.X()},function() {return p72.X()-p71.X()+p72.Y()-p71.Y()+p71.Y()}],{face:'rectangle',fillColor:'blue',withLabel:false,visible:false});  
         var f7 = board.createElement('polygon',[p71,p72,p73,p74],{fillcolor:'#FFCC33',visible:true,shadow:true});
         var f7 = board.create('polygon',[p71,p72,p73,p74],{fillcolor:'#FFCC33',visible:true,shadow:true});
         for(i=0; i<f7.borders.length; i++) {
         for(i=0; i<f7.borders.length; i++) {
             f7.borders[i].setProperty('strokeColor:black');
             f7.borders[i].setProperty('strokeColor:black');
         }  
         }  
</jsxgraph>


</jsxgraph>
===External links===
* [http://en.wikipedia.org/wiki/Tangram Tangram - Wikipedia entry]
 
[[Category: Examples]]

Latest revision as of 20:26, 29 September 2010

Click here to solve it

External links

Retrieved from "http://jsxgraph.org/wiki/index.php?title=Tangram&oldid=4435"