(function(){document.getElementById('a').onchange = function(){change()};document.getElementById('b').onchange = function(){change()};document.getElementById('c').onchange = function(){change()};document.getElementById('d').onchange = function(){change()};function change(){var cvs = document.getElementById('cvs');var ctx = cvs.getContext('2d');var a = document.getElementById('a').selectedIndex*10+10;var b = document.getElementById('b').selectedIndex*10+10;var c = document.getElementById('c').selectedIndex*10+10;var d = document.getElementById('d').selectedIndex;var r = 0;ctx.beginPath();if (d) ctx.clearRect(0,0,400,400);document.getElementById('d').selectedIndex = 0;ctx.moveTo( (a-b)*Math.sin(r/180*Math.PI)-c*Math.sin(r*(a-b)/b/180*Math.PI)+200, -(a-b)*Math.cos(r/180*Math.PI)-c*Math.cos(r*(a-b)/b/180*Math.PI)+200);for (r=1; r!=360*b*c/100; r++) ctx.lineTo( (a-b)*Math.sin(r/180*Math.PI)-c*Math.sin(r*(a-b)/b/180*Math.PI)+200, -(a-b)*Math.cos(r/180*Math.PI)-c*Math.cos(r*(a-b)/b/180*Math.PI)+200);ctx.closePath();ctx.lineWidth = 2.5;ctx.lineJoin = 'round';ctx.strokeStyle = document.getElementById('e').options[document.getElementById('e').selectedIndex].value;ctx.stroke();}})();HTML5のCanvasタグにJavaScriptで描画するプログラムを書いてみました。
とりあえず、三つのプルダウンのどれでも良いので数値を変更してみてください。
解る世代には解ると思いますが、この図形を描画する定規があって、幼少のころに遊んだ記憶もあるかと思います。
各数値は、1番目は大外のギアの半径、2番目は内接するギアの半径、3番目は内接するギアの中心から鉛筆までの距離となっています。
物理的なスピログラフ定規では、大外のギアよりも大きな内接するギアを設置することはできませんし、内接ギアを外れた位置に鉛筆を設置することはできません。
しかし、論理的、数学的な話であれば、上記のような制限はありませんので、物理的な定規では描けなかった図形も描くことができることになります。
- デザイン定規/(株)エニシル
- ￥84
- Amazon.co.jp
