你可能会想

直接使用

                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);

渲染出来的布也太单调了吧，简直不能称之为布，咱们应该来给它加点颜色。

不必修改 verlet-js 源码

function Composite() {
    this.particles = [];
    this.constraints = [];

    this.drawParticles = null;
    this.drawConstraints = null;
}

复合材料拥有两个方法 drawParticles、drawConstraints，在实例化时是没有赋值的。即：

                if (this.composites[c].drawConstraints) {
            this.composites[c].drawConstraints(this.ctx, this.composites[c]);
        } else {
            var constraints = this.composites[c].constraints;
            for (i in constraints)
                constraints[i].draw(this.ctx);
        }

        // draw particles
        if (this.composites[c].drawParticles) {
            this.composites[c].drawParticles(this.ctx, this.composites[c]);
        } else {
            var particles = this.composites[c].particles;
            for (i in particles)
                particles[i].draw(this.ctx);
        }

在示例中的用法

                   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();
                }
            }

            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();
                }
            }
        }

        cloth.drawParticles = function(ctx, composite) {
            // do nothing for particles
        }