HTML5 パーティクル 成長するクリスタル作ってみました。

前回書きました
HTML5 パーティクル ランダムに発生する円の間に線を引く
の改造で作ってみました〜！
　
成長するクリスタル風で面白いのでUPしておきます。
　

　

すみません本日は時間がなく…
こちらも解説はまた後日やりますので少々お待ちください(^_^)/

　
解説を追加しました。

<script type="text/javascript">
//まずは変数の設定
var NUM = 36;
//クリスタルの各頂点の数になります。
//3点から図形になりますので、3*XであればOK
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
//ウィンドウの横幅と縦幅の取得
var bX = new Array(NUM);
var bY = new Array(NUM);
var wX = new Array(NUM);
var wY = new Array(NUM);
var sX = new Array(NUM);
var sY = new Array(NUM);
//拡張点のX,Y座標です。
var strokeL = new Array(NUM);
//特定の線分の長さの計算に使用
var radius = new Array(NUM);
//半径
var ctx;
//描写
$(document).ready(function(){$("#canv").attr({height:$("body").height()});$("#canv").attr({width:$("body").width()});});
//canvasの高さと幅をbodyにあわせ100%に設定	
$(window).resize(function(){$("#canv").attr({height:$("body").height()});$("#canv").attr({width:$("body").width()});});
//リサイズ時にキャンバスサイズの更新
function init(){
	var canvas = document.getElementById(‘canv’);
	if (canvas.getContext){
		ctx = canvas.getContext(‘2d’);
		for(var i = 0; i < NUM; i++){
		bX[i] = Math.random() – 0.5;
		bY[i] = Math.random() * -10 -1;
		wX[i] = window.innerWidth/2;
		wY[i] = window.innerHeight + 300;
		radius[i] = 1;
		}
		setInterval(draw, 60);
	}
}
//初期値の設定
function draw(){
	ctx.fillStyle = "rgba(42,64,88,0)";
	ctx.fillRect(0, 0, WIDTH, HEIGHT);
	ctx.globalCompositeOperation = "lighter";
//canvas色指定〜透明度の設定
//またオーバレイの種類をしていする。
	for(var i = 0; i < NUM; i++){
		sX[i] = wX[i] – wX[i+1];
		sY[i] = wY[i] – wY[i+1];
		strokeL[i] = Math.sqrt(Math.pow(sX[i],2) + Math.pow(sY[i],2));
		if(strokeL[i] >= 100){
			ctx.beginPath();
			ctx.fillStyle = ‘rgb(12,36,48)’;
			ctx.moveTo(wX[i-1], wY[i-1]);
			ctx.lineCap = "round";
			ctx.lineWidth = 1;
			ctx.lineTo(wX[i]+bX[i], wY[i]+bY[i]);
			ctx.lineTo(wX[i+1]+bX[i+1], wY[i+1]+bY[i+1]);
			ctx.closePath();
			ctx.stroke();
			ctx.fill();
		}else{
			ctx.clearRect(20, 30, 60, 0);
		}
//連続した3点に線分を描写し、塗りを設定
//線分の長さをstrokeLに入れ、その長さで描写するかしないかを判定している。
		wX[i] += bX[i];
		wY[i] += bY[i];
		if(wX[i] < -500 || wX[i] > $(‘#canv’).innerWidth() + 500){ bX[i] *= -1.0; }
		if(wY[i] < -500 || wY[i] > $(‘#canv’).innerHeight() + 500){ bY[i] *= -1.0; }
		ctx.beginPath();
		ctx.fillStyle = ‘rgb(12,36,48)’;
		if(bY[i] >= 0 ){ctx.arc(wX[i], wY[i], radius[i], 0, Math.PI*2.0, true);}else{ctx.arc(wX[i], wY[i], radius[i]/1.5, 0, Math.PI*2.0, true);}
		ctx.fill();
//キャンバスの設定
	}
}
</script>

デモはこちら