Fractals 1

by alekskorovin

HTML

<center>
    <canvas id='c' width="900" height="900"></canvas>
</center>

CSS

body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

JavaScript

var looper;
var SCREEN_WIDTH = 900;
var SCREEN_HEIGHT = 900;
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');

var nodes;
var NUM_NODES = 500;
var minDist = 100;
var springAmount = 0.00001;

nodes_init();

function nodes_init() {
    createNodes();
    context.lineWidth = 1.9;
    looper = setInterval(nodes_loop, 1000 / 30);
}

function createNodes() {
    nodes = [];
    for (var i = 0; i < NUM_NODES; i++) {
        var node = {
            radius: 3,
            x: Math.random() * SCREEN_WIDTH,
            y: Math.random() * SCREEN_HEIGHT,
            vx: Math.random() * 6 - 3,
            vy: Math.random() * 6 - 3,
            mass: 1,
            update: function () {
                this.x += this.vx;
                this.y += this.vy;
                if (this.x > SCREEN_WIDTH) {
                    this.x = 0;
                } else if (this.x < 0) {
                    this.x = SCREEN_WIDTH;
                }
                if (this.y > SCREEN_HEIGHT) {
                    this.y = 0;
                } else if (this.y < 0) {
                    this.y = SCREEN_HEIGHT;
                }
            },
            draw: function () {
                context.fillStyle = "rgb(0,0,0)";
                context.beginPath();
                context.arc(this.x, this.y, this.radius, 0, Math.PI * 3, true);
                context.closePath();
                context.fill();
            }
        };
        nodes.push(node);
    }
}

function nodes_loop() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (i = 0; i < NUM_NODES; i++) {
        nodes[i].update();
        nodes[i].draw();
    }
    for (i = 0; i < NUM_NODES - 1; i++) {
        var node1 = nodes[i];
        for (var j = i + 1; j < NUM_NODES; j++) {
            var node2 = nodes[j];
            spring(node1, node2);
        }
    }
}

function spring(na, nb) {
    var dx = nb.x - na.x;
    var dy = nb.y - na.y;
    var dist = Math.sqrt(dx * dx + dy *...