2014年11月17日
♪そこに行けば～どんな夢もかなうというよ～♪ それはゴダイゴの「ガンダーラ」だね。今回はまたしても「マンダーラ」。それはともかく、JavaScriptのインターバルタイマーを使い、いちいち数値を入力しなくても、自動的に次々と曼荼羅図を描くようにしてみたよ。
<script>
window.onload = function(){
var canvas = document.getElementById('myGraph');
if (! canvas || ! canvas.getContext){return false;};
ctx = canvas.getContext('2d');
widthX = canvas.width;
heightY = canvas.height;
S = 999;
mandara();
};
// タイマーを設定（1秒＝1000ミリ秒）
function setTimer(){
timerID = setInterval("scaleDown()", 1000);
};
// タイマーを解除
function stopTimer(){
clearInterval(timerID);
};
function scaleDown(){
if(S>1){
S=S-1;
mandara();
};
if(S<2){
stopTimer();
};
};
function mandara(){
//S = document.getElementById("Scale").value;
Step = 3;
for (Y=0; Y < heightY; Y+= Step) {
for (X=0; X < widthX; X+= Step) {
Z = (((X-widthX/2)*S)*((X-widthX/2)*S)+((Y-heightY/2)*S)*((Y-heightY/2)*S)) % (255*255*255);
R = Math.floor((Z/(255*255)) % 255);
G = Math.floor((Z/255) % 255);
B = Math.floor((Z) % 255);
myColor = "rgb("+ R +"," + G +"," + B +")";
ctx.fillStyle = myColor;
ctx.fillRect(X, Y, Step, Step);
//console.log(myColor);
};
};
};
</script>