return (b - a) * p + a;

}

​

var canvas = document.getElementById("scratch");

​

// canvas dimensions

var width = parseInt(canvas.style.width);

var height = parseInt(canvas.style.height);

​

// retina

var dpr = window.devicePixelRatio || 1;

canvas.width = width * dpr;

canvas.height = height * dpr;

canvas.getContext("2d").scale(dpr, dpr);

​

// simulation

var sim = new VerletJS(width, height, canvas);

sim.friction = 1;

sim.highlightColor = "#fff";

//sim.gravity = new Vec2(0, 0);

​

// entities

var min = Math.min(width, height) * 0.5;

var segments = 20;

var cloth = sim.cloth(new Vec2(width / 2, height / 3), min, min, segments, 6, 0.9);

​

cloth.drawConstraints = function (ctx, composite) {

    var stride = min / segments;

    var x, y;

    for (y = 1; y < segments; ++y) {

        for (x = 1; x < segments; ++x) {

            ctx.beginPath();

​

            var i1 = (y - 1) * segments + x - 1;

            var i2 = (y) * segments + x;

​

            ctx.moveTo(cloth.particles[i1].pos.x, cloth.particles[i1].pos.y);

            ctx.lineTo(cloth.particles[i1 + 1].pos.x, cloth.particles[i1 + 1].pos.y);

​

            ctx.lineTo(cloth.particles[i2].pos.x, cloth.particles[i2].pos.y);

            ctx.lineTo(cloth.particles[i2 - 1].pos.x, cloth.particles[i2 - 1].pos.y);

​

            var off = cloth.particles[i2].pos.x - cloth.particles[i1].pos.x;

            off += cloth.particles[i2].pos.y - cloth.particles[i1].pos.y;

            off *= 0.25;

​

            var coef = Math.round((Math.abs(off) / stride) * 255);

            if (coef > 255) coef = 255;

​

            ctx.fillStyle = "rgba(" + coef + ",0," + (255 - coef) + "," + lerp(0.25, 1, coef / 255.0) + ")";

​

            ctx.fill();

            ctx.closePath();

        }

    }

​

    var c;

    for (c in composite.constraints) {

        if (composite.constraints[c] instanceof PinConstraint) {

            var point = composite.constraints[c];

            ctx.beginPath();

            ctx.arc(point.pos.x, point.pos.y, 1.2, 0, 2 * Math.PI);

            ctx.fillStyle = "rgba(255,255,255,1)";

            ctx.fill();

            ctx.closePath();

        }

    }

}

​

cloth.drawParticles = function (ctx, composite) {

    // do nothing for particles

}

​

// animation loop

var legIndex = 0;

var loop = function () {

    sim.frame(16);

    sim.draw();

    requestAnimFrame(loop);

};

​

loop();