PKJJp@wm|| index.html Particle MouseStalker (PC/iPhone) - js do it
PKJJ3N/K K index.jsvar ctx ; var canvas ; var particle = []; var number = 500; var easing = 0.97; var toDist = 300 ; var cW ; var cH ; var mouseX ; var mouseY ; //canvasへの描画 window.onload = function init(){ canvas = document.getElementById('particle'); if (canvas.getContext){ setup(); setInterval(draw, 30); } }; //初期状態 function setup(){ ctx = canvas.getContext('2d'); cW = canvas.width = window.innerWidth; cH = canvas.height = window.innerHeight; window.onresize = resize ; canvas.addEventListener('mousemove',mousePosition,false); var i = number ; while ( i-- ){ var m = new particleElements(); m.x = cW / 2; m.y = cH / 2; m.vX = Math.cos(i) * Math.random() * 30; m.vY = Math.sin(i) * Math.random() * 30; m.size = (Math.random() * 10|0 ) + 2; particle[i] = m; } } //パーティクルの位置更新 function draw(){ ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = 'darkturquoise'; ctx.fillRect( 0 , 0 , cW , cH ); ctx.globalCompositeOperation = "darker"; var i = number ; while ( i-- ){ var m = particle[i]; var x = m.x ; var y = m.y ; var vX = m.vX ; var vY = m.vY ; var dX = x - mouseX; var dY = y - mouseY; var d = Math.sqrt( dX * dX + dY * dY ); if( d === 0 ) d = 0.1; dX /= d; dY /= d; //マウスへの引力 if ( d < toDist ){ var toAcc = ( 1 - ( d / toDist ) ) * cW * 0.005 / m.size; vX -= dX * toAcc ; vY -= dY * toAcc ; } //引力の範囲外なら拡散 else { vX += (Math.random() *2-1)*0.2; vY += (Math.random() *2-1)*0.2; } //イージング係数 vX *= easing ; vY *= easing ; //壁からの跳ね返り if ( x > cW ){x = cW ;vX *= -1 ;} else if ( x < 0 ){x = 0 ;vX *= -1 ;} if ( y > cH ){y = cH ;vY *= -1 ;} else if ( y < 0 ){y = 0 ;vY *= -1 ;} m.vX = vX ; m.vY = vY ; m.x = x + vX ; m.y = y + vY ; ctx.fillStyle = m.color ; ctx.beginPath(); ctx.arc( m.x , m.y , m.size , 0 , Math.PI * 2 , true ); ctx.closePath(); ctx.fill(); } } //パーティクルの要素 function particleElements(){ this.color = 'rgba(20,250,0,0.5)'; this.x; this.y; this.vX; this.vY; this.size; } //画面のリサイズ function resize(){ cW = canvas.width = window.innerWidth; cH = canvas.height = window.innerHeight; } //canvas内のマウス座標の取得 function mousePosition(e){ var rect = e.target.getBoundingClientRect(); mouseX = e.clientX - rect.left; mouseY = e.clientY - rect.top; }PKJJ style.cssbody { margin: 0; overflow-wrap: break-word; word-wrap: break-word; } canvas { width: 100vw; height: 100vh; display:block; margin:0; background: black; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-user-select:none; }PKJJp@wm|| index.htmlPKJJ3N/K K index.jsPKJJ  style.cssPK*