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

この記事は6年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

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

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

 
解説を追加しました。


<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>

デモはこちら