forked: 点と線

jsdoit.css

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: #000;
  color: #fff;
  font-size: 12px;
}
canvas {
  padding: 0;
  margin: 0;
}

jsdoit.html

Point&nbsp;<input id="point_num" type="range"  step="1"  min="1" max="80" onchange="onChange();">
<canvas id="canvas"></canvas>

jsdoit.js

// forked from baroque_55's "forked: 点と線" http://jsdo.it/baroque_55/m5j8
// forked from Anderson's "forked: 点と線" http://jsdo.it/Anderson/81g4
// forked from baroque_55's "点と線" http://jsdo.it/baroque_55/8pO9
var POINT_NUM = 25; //点の数（初期値）
var POINT_SIZE = 1.5; //点のサイズ
var LINE_WIDTH = 0.05; //線の太さ
var MIN_DISTANCE = 60; //最小距離
var SPEED = 30; //点の移動速度
var SPRING = 0.4; //バネ定数
var FPS = 200; //FPS

var canvas; //キャンバス
var ctx; //コンテキスト
var mouseX; //マウスX座標
var mouseY; //マウスY座標
var timerId; //タイマー
var pointNum; //点の数
var points; //点配列

//点オブジェクト
var Point = function(no) {
    this.init(no);
};

//マウス座標取得
function onMouseMove(e) {
    var rect = e.target.getBoundingClientRect(); 
    mouseX = e.clientX - rect.left;
    mouseY = e.clientY - rect.top;
}

//初期設定
Point.prototype.init = function(no) {
    this.no = no;
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.vx = 0;
    this.vy = 0;
};

//位置を更新
Point.prototype.move = function() {
    var min = canvas.width + canvas.height;
    var min_no = this.no;
    var gx = canvas.width/2;
    var gy = canvas.height/2;
    //マウスとの距離
    var d = this.getDist(this.x, this.y, mouseX, mouseY);
    if (d <= MIN_DISTANCE*1.5) {
        gx = this.x + Math.random() * ((this.x - mouseX)*4);
        gy = this.y + Math.random() * ((this.y - mouseY)*4);
    } else {
        //中央との距離（丸くするための小細工）
        d = this.getDist(this.x, this.y, canvas.width/2, canvas.height/2);
        if (d < MIN_DISTANCE*2) {
            //他の点との距離
            for (var i=0; i<pointNum; i++) {
                if (i != this.no) {
                    d = this.getDist(this.x, this.y, points[i].x, points[i].y);
                    if (min > d) {
                        min = d;
                        min_no = i;
                    }
                }
            }
            //一番近い点から遠ざかる
            if (MIN_DISTANCE >= min) {
                gx = this.x + (this.x - points[min_no].x)/2;
                gy = this.y + (this.y - points[min_no].y)/2;
            }
        }
    }
    //移動
    this.vx += ((this.x - gx) - this.vx * SPRING);
    this.x -= this.vx / SPEED;
    this.vy += ((this.y - gy) - this.vy * SPRING);
    this.y -= this.vy / SPEED;
};

//距離を計算
Point.prototype.getDist = function(x1, y1, x2, y2) {
    var dx = (x1 - x2);
    var dy = (y1 - y2);
    return Math.sqrt(dx*dx+dy*dy);
};

//初期設定
function init() {
    //キャンバス設定
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    var b = document.body;
    var d = document.documentElement;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    //マウスイベント
    canvas.onmousemove = onMouseMove;
    mouseX = 0;
    mouseY = 0;
    //点の初期設定
    pointNum = document.getElementById("point_num").value;
    points = new Array(pointNum);
    for(var i=0; i<pointNum; i++){
        points[i] = new Point(i);
    }
    //インターバル設定
    clearTimeout(timerId);
    timerId = setInterval(draw, 1000 / FPS);
}

window.onload = function() {
    document.getElementById("point_num").value = POINT_NUM;
    init();
};

//値の更新と描画
function draw() {
    //画面をクリア
    ctx.beginPath();
    ctx.fillStyle = "rgba(0,0,0,0.2)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fill();
    
    //点の数だけくりかえし
    for(var i=0; i<pointNum; i++) {
        //位置を更新
        points[i].move();
        //更新した座標で円を描く
        ctx.beginPath();
        ctx.fillStyle = "rgba(255, 255, 255, 0.7)";
        ctx.arc(points[i].x, points[i].y, POINT_SIZE, 0, Math.PI*2, false);
        ctx.fill();
        //線を描く
        for(var j=i; j<pointNum; j++) {
            ctx.beginPath();
            ctx.strokeStyle = "rgba(255, 255, 255, 0.6)";
            ctx.lineWidth = LINE_WIDTH;
            ctx.moveTo(points[i].x, points[i].y);
            ctx.lineTo(points[j].x, points[j].y);
            ctx.closePath();
            ctx.stroke();
        }
    }
}

function onChange() {
    //数値チェック
    if (isNaN(document.getElementById("point_num").value)) {
        document.getElementById("point_num").value = POINT_NUM;
    }
    if (80 <= document.getElementById("point_num").value) {
        document.getElementById("point_num").value = 80;
    }
    //初期化
    init();
}