HTML5 パーティクル ランダムに発生する円の間に線を引く

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

HTML5 パーティクル ランダムに発生する円の間に線を引く

キャンバスで作ってみました。
応用すると色んな表現ができて面白いです。
 
SUPER-CHEMICAL|HTML5|A
 
解説はまた後日やりますので少々お待ちください(^_^)/
 


<script type="text/javascript">

var NUM = 200;
var mouseX = mouseY = 0;
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);
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()});
});

$(window).resize(function(){
$("#canv").attr({height:$("body").height()});
$("#canv").attr({width:$("body").width()});
});

function init(){
window.addEventListener(‘mousemove’, function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
}, false)
var canvas = document.getElementById(‘canv’);
if (canvas.getContext){
ctx = canvas.getContext(‘2d’);
for(var i = 0; i < NUM; i++){
// bX[i] = Math.random()* -10 + 5;
// bY[i] = Math.random() * -10 -1;
bX[i] = Math.random() – 0.5;
bY[i] = Math.random() * -10 -1;
wX[i] = window.innerWidth/2; //radius X位置
wY[i] = window.innerHeight + 300; //radius Y位置
radius[i] = Math.random() * 40 + 8;
}
setInterval(draw, 60);
}
}
function draw(){
ctx.globalCompositeOperation = "source-out";
ctx.fillStyle = "rgba(42,64,88,0)";//canvas色指定-透明度
ctx.fillRect(0, 0, WIDTH, HEIGHT);
ctx.globalCompositeOperation = "lighter";//オーバーレイ

//距離
//var sX = wX[1] – wX[2];
//var sY = wY[1] – wY[2];
//var strokeL = Math.sqrt(Math.pow(sX,2) + Math.pow(sY,2));

for(var i = 0; i < NUM; i++){
sX[i] = window.innerWidth/2 – wX[i];
sY[i] = window.innerHeight/2 – wY[i];
strokeL[i] = Math.sqrt(Math.pow(sX[i],2) + Math.pow(sY[i],2));
if(strokeL[i] <= 400){
//線分
ctx.beginPath();
ctx.moveTo(wX[i-1], wY[i-1]);
ctx.lineCap = "round";
//ctx.strokeStyle = "rgba(12,36,48,1)";
//ctx.lineJoin = "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.lineTo(wX[i+2]+bX[i+2], wY[i+2]+bY[i+2]);
ctx.lineTo(window.innerWidth/2,window.innerHeight/2);
ctx.closePath();
ctx.stroke();
}else{
ctx.clearRect(20, 30, 60, 0);
}
//図形
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();
}
//テスト
//ctx.font = "18px ‘MS Pゴシック’";
//ctx.fillStyle = "red";
//ctx.fillText(mouseX, 10, 75);
}
</script>

デモはこちら

 
ランダムは面白いけど
やはりmouseXYからめてルール作らないと微妙かも
そちらのバージョンはいつかupしますね♪