A Pen by naoyashiga.

Catch-the-Particles..markdown

Catch the Particles.

if the Particles is in the circle,the particle get slowly.

A Pen by naoyashiga on CodePen.

License.

index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<canvas id="world"></canvas>

script.js

//global variables
var canvas = document.getElementById("world");
var SCREEN_WIDTH = canvas.width = window.innerWidth;
var SCREEN_HEIGHT = canvas.height =window.innerHeight;
var centerX = SCREEN_WIDTH / 2;
var centerY = SCREEN_HEIGHT / 2;

var blobArray = [];
var SPEED = 3;

var c = canvas.getContext("2d");

//background
c.fillStyle = "#000";
c.fillRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);

var mouseX = centerX;
var mouseY = centerY;
var distance;
var radius = 100;

draw();

document.addEventListener("mousemove",onDocumentMouseMove,false);
document.addEventListener("touchstart",onDocumentTouchStart,false);
document.addEventListener("touchmove",onDocumentTouchMove,false);


function randomRange(min,max){
	return Math.random() * (max - min) + min;
}

function onDocumentMouseMove(event){
	mouseX = event.clientX;
	mouseY = event.clientY;
}

/*-----------------------------------
    新しくスクリーンに指が触れた場合に発生するイベント
-----------------------------------*/
function onDocumentTouchStart(event){

    if(event.touches.length > 1){//触れている指の本数をチェック
        //スクロール停止
        event.preventDefault();

        mouseX = event.touches[0].pageX;
        mouseY = event.touches[0].pageY;
    }
}

/*-----------------------------------
    スクリーンに触れている指をスライドさせた場合に発生するイベント
-----------------------------------*/
function onDocumentTouchMove(event){
    if(event.touches.length == 1){//触れている指の本数をチェック
        //スクロール停止
        event.preventDefault();

		mouseX = event.touches[0].pageX;
        mouseY = event.touches[0].pageY;
    }
}

function draw(){
	//blob 
	var blob = {
		x : 0,
		y : randomRange(0,SCREEN_HEIGHT), 
		xSpeed : 10,
		ySpeed : randomRange(-SPEED,SPEED),
		size :15,
		shadowColor : "#ea3818"
	};

	blobArray.push(blob);
	
	c.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);
	
	//background
	c.fillStyle = "#000";
	c.fillRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);

	//マウスポインタ	外側の円
	c.fillStyle = "#86fb3f";
	c.beginPath();
	c.arc(mouseX,mouseY,radius + 30,0,Math.PI * 2);
	c.closePath();
	c.fill();
	
	//マウスポインタ	内側の円
	c.fillStyle = "#000";
	c.beginPath();
	c.arc(mouseX,mouseY,radius,0,Math.PI * 2);
	c.closePath();
	c.fill();
	c.fillStyle = "#fcb9fa";

	for(var i = 0;i < blobArray.length;i++){
		blob = blobArray[i];

		//影
		c.shadowColor = blob.shadowColor;
		c.shadowBlur = 10;

		//パーティクル	
		c.beginPath();
		c.arc(blob.x,blob.y,blob.size,0,Math.PI * 2);
		c.closePath();
		c.fill();

		//マウスポインタからパーティクルまでの距離	
		distance = Math.sqrt( Math.pow(blob.x - mouseX,2) + Math.pow(blob.y - mouseY,2));

		if(distance < radius){//
			blob.xSpeed *= 0.58;//減速
			blob.size *= 0.98;//縮小
		}

		if(distance > radius && distance < radius + 30){
			blob.xSpeed *= 1.3;//加速
		}

		blob.x += blob.xSpeed;
		blob.y += blob.ySpeed;
		

		//画面端で減速
		if(blob.x > SCREEN_WIDTH * 0.9 || blob.y > SCREEN_HEIGHT * 0.9 || blob.y < SCREEN_HEIGHT * 0.1){
			blob.size *= 0.98;
		}
		//delete the blob if it enters the outside screen 
		if(blob.x < 0 || canvas.width < blob.x || blob.y < -blob.size || SCREEN_HEIGHT + blob.size / 2 < blob.y || blob.size < 0.1){
			blobArray.splice(i,1);
		}
	}
	requestAnimationFrame(draw);
}