혼자라고 느낄 때

* index7
var PI2 = Math.PI * 2;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var circles = []
var mouse = {
    x: Math.random() * window.innerWidth,
    y: Math.random() * window.innerHeight
};
var options = {
    totalCircles: 10,
    maxRadius: 300,
    maxLineWidth: 150,
    colors: ["#105187", "#2C8693", "#F19722", "#C33325"]
};

function init() {
    onWindowResize();
    window.addEventListener("resize", onWindowResize, false);
    document.body.addEventListener("mousemove", onMouseMove, false);
    document.body.addEventListener("touchmove", onTouchMove, false);
    for (var i = 0; i < options.totalCircles; i++) circles.push(new Circle());
}

function onTouchMove(event) {
    var touch = event.touches[0];
    mouse = {
        x: touch.clientX,
        y: touch.clientY
    };
}

function onMouseMove(event) {
    mouse = {
        x: event.clientX,
        y: event.clientY
    };
}

function onWindowResize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    time = new Date().getTime() * 0.001;
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < circles.length; i++) circles[i].draw(context);
}

var Circle = function (args) {
    if (args === undefined) var args = {};
    this.radius = args.radius || (Math.random() * options.maxRadius) + 10;
    this.lineWidth = args.lineWidth || Math.random() * options.maxLineWidth;
    this.color = args.color || options.colors[Math.floor(Math.random() * options.colors.length)];
    this.delay = Math.random() * 100 + 4;
    this.center = {
        x: canvas.width / 2,
        y: canvas.height / 2
    };
    this.draw = function (ctx) {
        this.center.x += (mouse.x - this.center.x) / this.delay;
        this.center.y += (mouse.y - this.center.y) / this.delay;
        var scale = Math.sin(time + this.lineWidth) - 0.5;
        ctx.lineWidth = (Math.sin(time + this.lineWidth) + 1) * this.lineWidth;
        ctx.save();
        ctx.beginPath();
        ctx.translate(this.center.x, this.center.y);
        ctx.scale(scale, scale);
        ctx.strokeStyle = this.color;
        ctx.arc(0, 0, this.radius, 0, PI2, false);
        ctx.stroke();
        ctx.restore();
    }
    return this;
}

init();
animate();