Uses Processing.js. It’s simple. It’s interactive. It uses a simple Soft Float class, originally written by Andrés Colubri. This is really the highlight of this little script, since it’s what powers the animations. While I’ve done some classes for animations, this once is much better than anything I’ve seen before!

function SoftFloat(v) {
    this.value = v; 
    this.ATTRACTION = 0.0001;
    this.DAMPING = 0.05;
    this.velocity = 0;
    this.acceleration = 0;
    this.enabled = true;
    this.targeting = false;
    this.source = 0;
    this.target = 0;
    this.enableAnimation = true;
} 

SoftFloat.prototype.enable = function() {
    this.enabled = true;
}

SoftFloat.prototype.disable = function() {
    this.enabled = false;
}

SoftFloat.prototype.update = function() {
    if (!this.enabled) return false;
    if (this.targeting) {
        if(!this.enableAnimation){
            this.value = this.target;
            this.targeting = false;
        } else {
            this.acceleration += (this.ATTRACTION * (this.target - this.value));
            this.acceleration += (this.target - this.value);
            this.velocity = (this.velocity + this.acceleration) * this.DAMPING;
            this.value += this.velocity;
            //this.value += (this.target - this.value)/30;
            this.acceleration = 0;
            if (p5.abs(this.velocity) > 0.0001) {
                return true;
            }
            this.value = this.target;
            this.targeting = false;
        }
    }
    return false;
}

SoftFloat.prototype.setTarget = function(t) {
    this.targeting = true;
    this.target = t;
    this.source = this.value;
}

SoftFloat.prototype.getTarget = function() {
    return this.targeting ? this.target : this.value;
}