Rectangle Rotation

by hawede

HTML

<script src="https://cindyjs.org/dist/latest/Cindy.js"></script>
<div id="CSCanvas"></div>

<script>
CindyJS({
  scripts: "cs*",
  ports: [{
    id: "CSCanvas",
    axes: true,
    width: 500,
    height: 500,
    transform: [{
      visibleRect: [-3, 7, 14, -7]
    }],
    grid: 1,
  }],
  autoplay: true,
  geometry: [
  {name:"M", kind:"P", type:"Free", pos:[2, 3]},
  {name:"X", kind:"P", type:"Free", pos:[1, -1],size:10},
    {name:"A", kind:"P", type:"Free", pos:[-2, 3], color:[0,0,1]},
    {name:"B", kind:"P", type:"Free", pos:[4, 6], size:8},
    {name:"C", kind:"P", type:"Free", pos:[0, 0], color:[0,0,1]},
    {name:"D", kind:"P", type:"Free", pos:[0, 0], color:[0,0,1]},
    {name:"Ao", kind:"P", type:"Free", pos:[0, 0], color:[0,0,0]},
    {name:"Bo", kind:"P", type:"Free", pos:[0, 0], color:[0,0,0]},
    {name:"Co", kind:"P", type:"Free", pos:[0, 0], color:[0,0,0]},
    {name:"Do", kind:"P", type:"Free", pos:[0, 0], color:[0,0,0]},
    {name:"Ac", kind:"P", type:"Free", pos:[0, 0], color:[0,1,0]},
    {name:"Bc", kind:"P", type:"Free", pos:[0, 0], color:[0,1,0]},
    {name:"Cc", kind:"P", type:"Free", pos:[0, 0], color:[0,1,0]},
    {name:"Dc", kind:"P", type:"Free", pos:[0, 0], color:[0,1,0]}
  ],
});

</script>
<script id="csinit" type="text/x-cindyscript">
</script>

<script id="csdraw" type="text/x-cindyscript">
a=B.x-M.x; b=B.y-M.y;


A.xy=(-a,b)+M; 
C.xy=(a,-b)+M; 
D.xy=(-a,-b)+M;

phi=(180-X.x*20)/180*3.1415;
 
drawtext((X.x-0.5 ,X.y-1),text(X.x*20));
draw([A,B]);draw([B,C]);
draw([C,D]);draw([D,A]);

R=[[cos(phi),-sin(phi)],[sin(phi),cos(phi)]];
Ao.xy= R*(A-M)+M;
Bo.xy= R*(B-M)+M;
Co.xy= R*(C-M)+M;
Do.xy= R*(D-M)+M;
  pv = mod(seconds(),1);
  forall([M,Ao,Bo,Co,Do], point,
  	fillcircle(point, pv*.75, color->[0,0,0], alpha->1-pv);      
  );
  Ac.xy=Ao+(Ao.x-A.x)/(Ao.x-Bo.x)*(Bo-Ao);
  Bc.xy=Bo+(Bo.y-B.y)/(Bo.y-Co.y)*(Co-Bo);
  Cc.xy=Do+(Do.x-C.x)/(Do.x-Co.x)*(Co-Do);
  Dc.xy=Ao+(Ao.y-D.y)/(Ao.y-Do.y)*(Do-Ao);
  draw([Ac,Bc]);draw([Bc,Cc]);
 ...