【第九浅】Give the Composite all the world
发布在九浅一深 verlet-js 物理引擎【完结撒花】2015年6月14日view:1311图形学,动画BrettBat物理引擎
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

你可能会想

直接使用

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

复合材料拥有两个方法 drawParticlesdrawConstraints,在实例化时是没有赋值的。即:

                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
        }
评论
发表评论
暂无评论
WRITTEN BY
Bolt_白衣苍狗
更多博文请登录http://bolt.h-won.com腾讯微博请@lc60005457
TA的新浪微博
PUBLISHED IN
九浅一深 verlet-js 物理引擎【完结撒花】

verlet-js 【译】

原文取自官方示例首页

转载请声明出处:[前端乱炖-Bolt 个人专栏]http://www.html-js.com/article/column/4527

About 关于

verlet-js,一个简单 verlet integration(混合) 物理引擎,javascript 实现,作者 Sub Protocol。Verlet 发音为 “ver-ley”。

Examples 示例

  1. Shapes(形状) (Hello world)
  2. Fractal(不规则碎片形) Trees
  3. Cloth(布)
  4. Spiderweb(蜘蛛网)

Features 特性

以下是 verlet-js 内部的可用实体分层:

  • 模拟器(Simulation):拥有复合实体,驱动所在一个场景内所有物理、动画的根对象
  • 复合材料(Composites):所在场景内的可用高阶对象(球,桥,布等)
  • 颗粒(Particles):仅仅是一个在空间内可以响应重力的点
  • 约束(Constraints):互相联结颗粒,这样他们就可以彼此互动
    1. 钉(Pin):将一个颗粒绑定在空间内的一个静态(static/fixes)位置上
    2. 距离(Distance):将两个颗粒互相固定在线性距离上
    3. 角(Angle):通过一个锐角彼此固定 3 个颗粒

License 许可证

你可以在非常宽松的 MIT 许可证下使用 verlet-js。

Source Code 源代码

[View project on GitHub](View project on GitHub)

版权声明

原文

Copyright 2013 Sub Protocol and other contributors.

http://subprotocol.com/

译文

原文取自官方示例首页

转载请声明出处:[前端乱炖-Bolt 个人专栏]http://www.html-js.com/article/column/4527

我的收藏