metaballs

// can be run there: http://www.typescriptlang.org/play

class State {
    static dragging: boolean;
    static inflating: boolean;
    static draggingBallIndex: number;
}

class Ball {
    posX: number;
    posY: number;
    weight: number;
    constructor(public x: number, public y: number, radius) {
        this.posX = x;
        this.posY = y;
        this.weight = Math.pow(radius, 2);
    }
}

class Grid {
    content: Array<Array<number>>;
    constructor(public height: number, public width: number) {
        this.content = new Array(height);
        let i: number;
        for (i = 0; i < this.height; i++)
            this.content[i] = new Array(width);
        this.reset();
    }
    reset() {
        let i: number;
        let j: number;
        for (i = 0; i < this.height; i++)
            for (j = 0; j < this.width; j++)
                this.content[i][j] = 0;
    }
    drawBall(b) {
        let i: number;
        let j: number;
        for (i = 0; i < this.height; i++)
            for (j = 0; j < this.width; j++)
                this.content[i][j] += b.weight / (Math.pow(i - b.x, 2) + Math.pow(j - b.y, 2));
    }
    drawInContext(ctx) {
        let i: number;
        let j: number;
        let data = ctx.getImageData(0,0,n,n);
        for (i = 0; i < this.height; i++)
            for (j = 0; j < this.width; j++)
                if (this.content[i][j] > 1)
                    dot(data, i, j);
        ctx.putImageData(data, 0, 0);
    }
}

function canvasInit(height, width) {
    let canvas = document.createElement("canvas");
    canvas.setAttribute("height", "" + height);
    canvas.setAttribute("width", "" + width);
    document.body.appendChild(canvas);
    return canvas;
}
function onMouseDown(e) {
    State.dragging = true;
    let relX = e.pageX - canvas.offsetLeft;
    let relY = e.pageY - canvas.offsetTop;
    State.draggingBallIndex = nearestBall(relX, relY);
    if (State.draggingBallIndex < 0) {
        newBall(balls,relX, relY);
        State.inflating = true;
        State.draggingBallIndex = balls.length - 1;
    }
}
function newBall(balls,x,y) {
    balls[balls.length] = new Ball(x,y,10);
}
function onMouseMove(e) {
    if (State.dragging) {
        let relX = e.pageX - canvas.offsetLeft;
    let relY = e.pageY - canvas.offsetTop;
        balls[State.draggingBallIndex].x = relX;
        balls[State.draggingBallIndex].y = relY;
    }
}
function onMouseUp(e) {
    State.dragging = false;
    State.inflating = false;
}
function dist2(x,y,u,v) {
    return Math.pow(x-u,2) + Math.pow(y-v,2);
}
function dot(data,x,y) {
    data.data[(n*y + x)*4 + 0] = 0;
    data.data[(n*y + x)*4 + 1] = 0;
    data.data[(n*y + x)*4 + 2] = 0;
    data.data[(n*y + x)*4 + 3] = 255;
}
function nearestBall(x, y) {
    let res = -1;
    let d = +Infinity;
    let i: number;
    for (i = 0; i < balls.length; i++) {
        let dd = dist2(balls[i].x, balls[i].y,x,y);
        if (dd < d && dd < balls[i].weight) {
            d = dd;
            res = i;
        }
    }
    return res;
}
State.dragging = false;
State.inflating = false;
State.draggingBallIndex = -1;
let n = 400;
let canvas = canvasInit(n, n);
let ctx = canvas.getContext("2d");
canvas.addEventListener("mousedown", onMouseDown);
canvas.addEventListener("mouseup", onMouseUp);
canvas.addEventListener("mousemove",onMouseMove);
let balls = [new Ball(120, 50, 30),
             new Ball(100, 150, 70)];
let grid = new Grid(n, n);
function redraw(time) {
    let i: number;
    ctx.clearRect(0, 0, n, n);
    grid.reset();
    let draggingBall = balls[State.draggingBallIndex];
    if (State.inflating) {
        draggingBall.weight = Math.pow(Math.sqrt(draggingBall.weight) + 1,2);
    }
    for (i = 0; i < balls.length; i++)
        grid.drawBall(balls[i]);
    grid.drawInContext(ctx);
    requestAnimationFrame(redraw);
}
requestAnimationFrame(redraw);