Difference between revisions of "User:Lerc/shapes"

From CodeStuff
Jump to: navigation, search
(clea)
 
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<edcode>
+
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} ]
 +
               
 +
              ];
  
−
var m;
 
  
 
function move() {
 
function move() {
 
   m=getMousePosition()
 
   m=getMousePosition()
−
   
+
  age+=0.01;
 
}
 
}
  
−
function drawParallelogram(x,y,tilt) {
+
function drawTriangle(originX,originY,dx,dy,angle) {
−
+
   dy=-dy;
−
   var width =200;
+
   canvasSave();
−
   var height = 150;
+
   canvasTranslate(originX,originY);
−
   var halfWidth = width/2;
+
   canvasRotate(angle);
−
   var halfHeight = height/2;
+
 
 +
  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 bottom= y+halfHeight;
+
  var pongage = age%(steps*2);
−
  var top=bottom-height;
+
  if (pongage > steps) pongage=(steps*2)-pongage;
 
    
 
    
−
  var bottomLeft = x-halfWidth;
+
  var a=Math.floor(pongage);
−
   var bottomRight = bottomLeft + width;
+
  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];
 
    
 
    
−
  var topLeft = bottomLeft+tilt;
+
  for (var i in now) {
−
  var topRight = topLeft+width;
+
    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();
 +
  }
 +
 
    
 
    
−
   drawLine(bottomLeft,bottom,bottomRight,bottom);
+
   if (pongage>=8) {
−
  drawLine(topLeft,top,topRight,top);
+
    var shade= (pongage<9?frac:1);
−
 
+
    canvasSave();
−
  drawLine(bottomLeft,bottom,topLeft,top);
+
−
  drawLine(bottomRight,bottom,topRight,top);
+
 
      
 
      
−
}
+
    if (pongage>9) {
−
function draw() {
+
      var shift=pongage<10?frac:1;     
−
  clear();
+
      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);
 
    
 
    
−
  drawParallelogram(300,250,m.x-300);
+
      fillRectangle(-75,70,50,20);
 +
      fillRectangle(-75,100,50,20);
 +
    }
 +
  }
 +
 
 
    
 
    
−
   print(JSON.stringify(m),30,200);
+
 
 +
   setColour("black");
 
}
 
}
  
 
run(move,draw);
 
run(move,draw);
−
 
 
</edcode>
 
</edcode>

Latest revision as of 10:45, 26 April 2012

An attempt to demonstrate Pythagoras without text.

Click run to see it happen.

Retrieved from "https://fingswotidun.com/code/index.php?title=User:Lerc/shapes&oldid=347"