LV-Leiter: a. Univ.-Prof. Dr. Alois Stritzinger
<html>
<head>
<script type="text/javascript">
var dimension=5;
function drawShape(){
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(0,0,300,300);
// Zeilen
for (i=0;i<dimension;i++) {
//Spalten
for (j=0;j<dimension;j++) {
ctx.save();
ctx.strokeStyle = "#e600b8";
ctx.translate(60+j*120,60+i*120);
drawSpirograph(ctx,20*(j+6)/(j+3),-1*(i+4)/(i+1),12);
ctx.restore();
}
}
}
function drawSpirograph(ctx,R,r,O){
var x1 = R-O;
var y1 = 0;
var i = 1;
ctx.beginPath();
ctx.moveTo(x1,y1);
do {
if (i>20000) break;
var x2 = (R+r)*Math.cos(i*Math.PI/72) -
(r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
var y2 = (R+r)*Math.sin(i*Math.PI/72) -
(r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
ctx.lineTo(x2,y2);
x1 = x2;
y1 = y2;
i++;
} while (x2 != R-O && y2 != 0 );
ctx.stroke();
}
</script>
</head>
<body onload="drawShape();">
<canvas id="mycanvas" width="1024" height="800"></canvas>
</body>
</html>
