Segments mouse following

index.html

<script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js" type="text/javascript"></script>

<canvas id="canvas"></canvas>
<div class="title">move your mouse</div>

script.js

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

var rAF;


var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    width = canvas.width = window.innerWidth,
    height = canvas.height = window.innerHeight,
    particles = [],
    mouseX = 0,
    mouseY = 0,
    total = 15,
    followSpeed = 0.1,
    size = 25;

document.body.addEventListener("mousemove", function (event) {
    mouseX = event.clientX;
    mouseY = event.clientY;
});

window.addEventListener('resize', function () {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
});

function init() {
    cancelAnimationFrame(rAF);

    particles = [];

    for (var i = 0; i < total; i += 1) {
        particles.push(new Particle(i));
    }

    draw();
}

function draw() {
    context.clearRect(0, 0, width, height);

    for (var i = 0; i < total; i += 1) {
        particles[i].update();
    }

    rAF = requestAnimationFrame(draw);
}


/**
 * Particle
 */
var Particle, p;

Particle = function (index) {
    this.initialize(index);
};

p = Particle.prototype;

p.initialize = function (index) {
    this.x = -50;
    this.y = height;
    this.id = index + 1;
    this.angleX = Math.PI * 2 * Math.random();
    this.angleY = Math.PI * 2 * Math.random();
    this.speedX = .03 * Math.random() + .03;
    this.speedY = .03 * Math.random() + .03;
    this.radius = 150;

    return this;
};

p.update = function () {
    var aim, dx, dy, scale, angle;

    if (this.id > 1) {
        aim = particles[this.id - 1 - 1];
        dx = aim.x - this.x;
        dy = aim.y - this.y;

        this.x += dx * con.speed;
        this.y += dy * con.speed;
    } else {
        if (mouseX === 0 && mouseY === 0) {
            dx = width / 2 + Math.cos(this.angleX) * this.radius - this.x;
            dy = height / 2 + Math.sin(this.angleY) * this.radius - this.y;

            this.x = width / 2 + Math.cos(this.angleX) * this.radius;
            this.y = height / 2 + Math.sin(this.angleY) * this.radius;

            this.angleX += this.speedX;
            this.angleY += this.speedY;

        } else {
            dx = mouseX - this.x;
            dy = mouseY - this.y;

            this.x += dx * con.speed;
            this.y += dy * con.speed;
        }
    }

    angle = Math.atan2(dy, dx);
    scale = Math.cos(Math.PI / 2 * (this.id / total));

    context.save();
    context.translate(this.x, this.y);
    context.rotate(angle);
    context.scale(scale, scale);

    context.beginPath();
    context.moveTo(-size / 2 * 1.732, -size / 2);
    context.lineTo(0, 0);
    context.lineTo(-size / 2 * 1.732, size / 2);
    context.lineTo(-size / 2 * 1.2, 0);
    context.fillStyle = 'white';
    context.fill();

    context.restore();
};

// control bar
var ControlBar = function () {
    this.num = total;
    this.speed = followSpeed;
};

var con = new ControlBar();
var gui = new dat.GUI();
var conSpeed = gui.add(con, 'speed', 0.05, 0.25).step(0.05);
var conNum = gui.add(con, 'num', 10, 30).step(1);

conNum.onFinishChange(function (value) {
    total = value;

    init();
});

init();

Segments mouse following.markdown

Segments mouse following

A Pen by Max Huang on CodePen.

License.

style.css

	html, body {
		margin: 0px;

		background: #F09819; /* fallback for old browsers */
		background: -webkit-radial-gradient(#00d2ff, #3a7bd5); /* Chrome 10-25, Safari 5.1-6 */
		background: radial-gradient(#00d2ff, #3a7bd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

	}
	canvas {
		display: block;
	}
	.title {
		color: #FFF;
		position: absolute;
		top: 8px;
		left: 12px;
		font-family: verdana;
		text-transform: uppercase;
		font-size: 10px;
		font-weight: bold;
	}