View source for User:Lerc/shapes

An attempt to demonstrate Pythagoras without text.

Click run to see it happen.
<edcode>var m;
var quarterTurn = Math.PI/2;
var base=65;
var height=100;
var age = 0.0;
var triangles =[ [ {x:0,y:0,dx:base,dy:height,angle:0},
                   {x:0,y:0,dx:base,dy:height,angle:0},
                   {x:0,y:0,dx:base,dy:height,angle:0},
                   {x:0,y:0,dx:base,dy:height,angle:0} ],
                
               [ {x:0,y:0,dx:base,dy:height,angle:quarterTurn*0},
                 {x:0,y:0,dx:base,dy:height,angle:quarterTurn*1},
                 {x:0,y:0,dx:base,dy:height,angle:quarterTurn*2},
                 {x:0,y:0,dx:base,dy:height,angle:quarterTurn*3} ],

               [ {x:0,y:0,dx:base,dy:height,angle:quarterTurn*0},
                 {x:0,y:-(base+height),dx:base,dy:height,angle:quarterTurn*1},
                 {x:0,y:-(base+height),dx:base,dy:height,angle:quarterTurn*2},
                 {x:0,y:0,dx:base,dy:height,angle:quarterTurn*3} ],
                
               [ {x:0,y:0,dx:base,dy:height,angle:quarterTurn*0},
                 {x:0,y:-(base+height),dx:base,dy:height,angle:quarterTurn*1},
                 {x:base+height,y:-(base+height),dx:base,dy:height,angle:quarterTurn*2},
                 {x:base+height,y:0,dx:base,dy:height,angle:quarterTurn*3} ],

               [ {x:0,y:0,dx:base,dy:height,angle:quarterTurn*0},
                 {x:0,y:-(base+height),dx:base,dy:height,angle:quarterTurn*1},
                 {x:base+height,y:-(base+height),dx:base,dy:height,angle:quarterTurn*2},
                 {x:base+height,y:0,dx:base,dy:height,angle:quarterTurn*3} ],

               [ {x:0,y:0,dx:base,dy:height,angle:quarterTurn*0},
                 {x:0,y:-(base+height),dx:base,dy:height,angle:quarterTurn*1},
                 {x:base+height,y:-(base+height),dx:base,dy:height,angle:quarterTurn*2},
                 {x:base+height,y:0,dx:base,dy:height,angle:quarterTurn*3} ],

               [ {x:0,y:0,dx:base,dy:height,angle:quarterTurn*0},
                 {x:0,y:-(base+height),dx:base,dy:height,angle:quarterTurn*1},
                 {x:base,y:-height,dx:base,dy:height,angle:quarterTurn*2},
                 {x:base+height,y:0,dx:base,dy:height,angle:quarterTurn*3} ],

               [ {x:0,y:0,dx:base,dy:height,angle:quarterTurn*0},
                 {x:0,y:-(base+height),dx:base,dy:height,angle:quarterTurn*1},
                 {x:base,y:-height,dx:base,dy:height,angle:quarterTurn*2},
                 {x:base+height,y:-height,dx:base,dy:height,angle:quarterTurn*3} ],

               [ {x:0,y:0,dx:base,dy:height,angle:quarterTurn*0},
                 {x:0,y:-(base+height),dx:base,dy:height,angle:quarterTurn*1},
                 {x:base,y:-height,dx:base,dy:height,angle:quarterTurn*2},
                 {x:height,y:-height,dx:base,dy:height,angle:quarterTurn*3} ],

               [ {x:0,y:0,dx:base,dy:height,angle:quarterTurn*0},
                 {x:0,y:-(base+height),dx:base,dy:height,angle:quarterTurn*1},
                 {x:base,y:-height,dx:base,dy:height,angle:quarterTurn*2},
                 {x:height,y:-height,dx:base,dy:height,angle:quarterTurn*3} ],

               [ {x:0,y:0,dx:base,dy:height,angle:quarterTurn*0},
                 {x:0,y:-(base+height),dx:base,dy:height,angle:quarterTurn*1},
                 {x:base,y:-height,dx:base,dy:height,angle:quarterTurn*2},
                 {x:height,y:-height,dx:base,dy:height,angle:quarterTurn*3} ],

               [ {x:0,y:0,dx:base,dy:height,angle:quarterTurn*0},
                 {x:0,y:-(base+height),dx:base,dy:height,angle:quarterTurn*1},
                 {x:base,y:-height,dx:base,dy:height,angle:quarterTurn*2},
                 {x:height,y:-height,dx:base,dy:height,angle:quarterTurn*3} ],

               [ {x:0,y:0,dx:base,dy:height,angle:quarterTurn*0},
                 {x:0,y:-(base+height),dx:base,dy:height,angle:quarterTurn*1},
                 {x:base,y:-height,dx:base,dy:height,angle:quarterTurn*2},
                 {x:height,y:-height,dx:base,dy:height,angle:quarterTurn*3} ]
                
               ]; 


function move() {
  m=getMousePosition()
  age+=0.01;
}

function drawTriangle(originX,originY,dx,dy,angle) {
  dy=-dy;
  canvasSave();
  canvasTranslate(originX,originY);
  canvasRotate(angle);

  fillPolygon(0,0,dx,0,0,dy);
  setColour("black");
  drawPolygon(0,0,dx,0,0,dy);
  canvasRestore();
}


function draw() {
   clear();
   canvasTranslate(400,200);

   setColour("rgba(255,255,0,0.5)");
    
   var steps = 13;
  
   var pongage = age%(steps*2);
   if (pongage > steps) pongage=(steps*2)-pongage;
  
   var a=Math.floor(pongage);
   var frac=pongage-a;
   if (frac<0) frac=0;
   
  var move = (frac<0.1) ? 0 : (frac-0.1)*1.11 ;
   var b=a+1;
   if (b>=triangles.length) b=triangles.length-1;
   
  function lerp(a,b) {
    return a*(1-move) + b* move;
  }
 
   var now = triangles[a];
   var next = triangles[b];
  
   for (var i in now) {
     var ta=now[i];
     var tb=next[i];
          
     drawTriangle(lerp(ta.x,tb.x) ,lerp(ta.y,tb.y) ,lerp(ta.dx,tb.dx) ,lerp(ta.dy,tb.dy) ,lerp(ta.angle,tb.angle));
   }
  
  if (pongage>3) {
    var shade= (pongage<4)?frac:1;
    setColour("rgba(0,0,0,"+shade+")");
    drawRectangle(0,0,base+height,base+height);
    drawRectangle(0,-(base+height),base+height,base+height);
    canvasSave();
    var shade= (pongage<4)?frac:1;
    setColour("rgba(0,200,180,"+shade+")");
    if (pongage>4) {
      canvasTranslate(0,(pongage<5)?lerp(0,base+height):base+height); 
    }
    fillPolygon(base,0,0,-height,height,-(base+height),base+height,-(base));
    setColour("Black");
    drawPolygon(base,0,0,-height,height,-(base+height),base+height,-(base));
    
    
    
    if (pongage > 11) {
      var s2= (pongage<12?frac:1);
      setColour("rgba(255,255,200,"+s2+")");
      fillPolygon(0,0,  0,-height,  base,0);

      setColour("rgba(0,0,0,"+s2+")");
      drawPolygon(0,0,  0,-height,  base,0);
    }

    canvasRestore();
  }

  
  if (pongage>=8) {
    var shade= (pongage<9?frac:1);
    canvasSave();
    
    if (pongage>9) {
      var shift=pongage<10?frac:1;      
      canvasTranslate(-440*shift,220*shift); 
    }
    setColour("rgba(230,100,230,"+shade+")");
    fillRectangle(height,-(base+height),base,base);
    setColour("Black");
    drawRectangle(height,-(base+height),base,base);

    if (pongage > 11) {
      var s2= (pongage<12?frac:1);
      setColour("rgba(255,255,200,"+s2+")");
      fillPolygon(height,-(base+height),  (base+height),-(base+height), (base+height), -(base+height*2));

      setColour("rgba(0,0,0,"+s2+")");
      drawPolygon(height,-(base+height),  (base+height),-(base+height), (base+height), -(base+height*2));
    }
    canvasRestore();

    canvasSave();

    if (pongage>9) {
      var shift=pongage<10?frac:1;      
      canvasTranslate(-255*shift,140*shift); 
    }

    setColour("rgba(230,180,100,"+shade+")");
    fillRectangle(base,-(height),height,height);
    setColour("Black");
    drawRectangle(base,-(height),height,height);

    if (pongage > 11) {
      var s2= (pongage<12?frac:1);
      setColour("rgba(255,255,200,"+s2+")");
      fillPolygon(base,-height,  base+height, -height, (base+height), -(base+height));

      setColour("rgba(0,0,0,"+s2+")");
      drawPolygon(base,-height,  base+height, -height, (base+height), -(base+height));
    }
    
    canvasRestore();

    if (pongage > 9) {
      var shade= (pongage<10?frac:1);
      setColour("rgba(0,0,0,"+shade+")");
      
      fillRectangle(-255,85,50,20);
      fillRectangle(-240,70,20,50);
  
      fillRectangle(-75,70,50,20);
      fillRectangle(-75,100,50,20);
    }
  }

  

   setColour("black");
}

run(move,draw);
</edcode>