/**
@prefix : <http://purl.org/net/ns/doas#> .
<http://ghostpia.com/script/ethertank.js> a :CSSstylesheet;
 :タイトル "ethertank.js";
 :一行説明 "canvas#visionに簡易グラフィックを描画。アクセス時とクリック時に描画する。";
 :作成日 "2010-07-18";
 :公開版 [:版 "0.0.7"; :作成日 "2010-07-24"];
 :作成者 [:名 "ethertank"; :ホームページ <http://ghostpia.com/> ];
 :ライセンス Public Domain.
*/

/* Hello━━━━━━━━━(n‘∀‘)η━━━━━━━━━World !!!! */



onload = function(){if(document.getElementById("vision")){drawCanvas();};};


function drawCanvas(){

	var mycanvas = document.getElementById("vision");
	var ctx = mycanvas.getContext("2d");
	var cWidth = mycanvas.offsetWidth; //canvasの幅を取得
	var cHeight = mycanvas.offsetHeight; //canvasの高さを取得


	function drawBlack(){
		ctx.globalAlpha = 1;
		ctx.globalCompositeOperation = "source-over"; //レイヤーモード指定をcanvasのデフォルト値に初期化。
		ctx.fillStyle = '#000';
		ctx.fillRect(0,0,cWidth,cHeight); // 描画（開始点のx/y座標、終了点のx/y座標を指定。）
	}


	function drawGradation(){
		var lingrad = ctx.createLinearGradient(0,0,cWidth,cHeight); // グラデーションを作る（開始点のx/y座標、終了点のx/y座標を指定。）
		var
			c1 = Math.floor(Math.random()*10), c2 = Math.floor(Math.random()*10), c3 = Math.floor(Math.random()*10), c4 = Math.floor(Math.random()*10),
			c5 = Math.floor(Math.random()*10), c6 = Math.floor(Math.random()*10); // 0～9までの整数をランダムで６つ生成。
		var color1 = "#"+c1+c2+c3,  color2 = "#"+c4+c5+c6; // 生成した数字をつなげてHTMLのカラーコード２つ作る。MIN = #000, MAX = #999。
		lingrad.addColorStop(0, color1); lingrad.addColorStop(1, color2); //２色でグラデーションを喰らわす。
		ctx.fillStyle = lingrad; // グラデーションを塗りのスタイルに割り当てる
		ctx.fillRect(0,0,cWidth,cHeight); // 描画（開始点のx/y座標、終了点のx/y座標を指定。）
	};


	function drawCircle() {
		ctx.globalCompositeOperation = "lighter";
		var Num = 10; //※黒丸と白丸のそれぞれの個数
		for (i = 0; i < Num; i = i +1){
			var
				bs = Math.floor(Math.random()*100),
				bw = Math.floor(Math.random()*cWidth),
				bh = Math.floor(Math.random()*cHeight),
				ws = Math.floor(Math.random()*100);
				ww = Math.floor(Math.random()*cWidth),
				wh = Math.floor(Math.random()*cHeight),

			/* 黒丸 */
			ctx.globalCompositeOperation = "source-over";
			ctx.beginPath();
			ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
			ctx.arc(bw, bh, bs, 0, Math.PI*2, false); // 円を描く。（円の中心のx/y座標、半径、円弧描画開始角度、終了角度、時計回り。）
			ctx.fill();
			/* 白丸 */
			ctx.globalCompositeOperation = "lighter";//「加算モード」に指定
			ctx.beginPath();
			ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
			ctx.arc(ww, wh, ws, 0, Math.PI*2, false);
			ctx.fill();
		}
	};


	function drawAll(){
		drawBlack(); // エクスデス「全てを無に還す。」 ※これをしないと再描画の時にちょろめちゃんで残像が残っちゃう。
		drawGradation(); // 背景にグラデ喰らわす。
		drawCircle();　// エーテル喰らわす。
	};


	drawAll(); //とりあえず一回全部書いとく。
	mycanvas.onclick = drawAll; //クリックすると再描画。楽しいな。


};