verlet.js 源码分析--动画原理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// 构造函数
function VerletJS(width, height, canvas) {
    this.width = width;
    this.height = height;
    this.canvas = canvas;
    this.ctx = canvas.getContext("2d");
    // 鼠标位置也是一个向量
    this.mouse = new Vec2(0,0);
    this.mouseDown = false;
    // 被鼠标拖拽的节点
    this.draggedEntity = null;
    this.selectionRadius = 20;
    this.highlightColor = "#4f545c";
    
    // 边界检测
    this.bounds = function (particle) {
        if (particle.pos.y > this.height-1)
            particle.pos.y = this.height-1;
        
        if (particle.pos.x < 0)
            particle.pos.x = 0;

        if (particle.pos.x > this.width-1)
            particle.pos.x = this.width-1;
    }
    
    var _this = this;
    
    // prevent context menu
    this.canvas.oncontextmenu = function(e) {
        e.preventDefault();
    };
    
    this.canvas.onmousedown = function(e) {
        _this.mouseDown = true;
        var nearest = _this.nearestEntity();
        if (nearest) {
            _this.draggedEntity = nearest;
        }
    };
    
    this.canvas.onmouseup = function(e) {
        _this.mouseDown = false;
        _this.draggedEntity = null;
    };
    
    this.canvas.onmousemove = function(e) {
        var rect = _this.canvas.getBoundingClientRect();
        _this.mouse.x = e.clientX - rect.left;
        _this.mouse.y = e.clientY - rect.top;
    };  
    
    // 重力
    this.gravity = new Vec2(0,0.2);
    // 空气阻力
    this.friction = 0.99;
    // 地面碰撞产生的阻力
    this.groundFriction = 0.8;
    
    // 存储所有的组合对象
    this.composites = [];
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/*
 * 关键方法，用于改变在一个时刻内各粒子对象和约束对象的位移情况
 * @param {Number} step 幅度，用于决定约束对象的“振荡”幅度
 */
VerletJS.prototype.frame = function(step) {
    var i, j, c;

    for (c in this.composites) {
        // 处理组合对象中的所有粒子对象
        for (i in this.composites[c].particles) {
            var particles = this.composites[c].particles;
            
            // 用当前位置减去前一时刻位置得到速度，并乘以空气阻力得到当前时刻的速度
            var velocity = particles[i].pos.sub(particles[i].lastPos).scale(this.friction);
        
            // 当粒子和地面接触（碰撞）后
            // 坐标y值小于画布高度，用length2主要是为了确保精度
            if (particles[i].pos.y >= this.height-1 && velocity.length2() > 0.000001) {
                // 当前时刻的速度大小：标量
                var m = velocity.length();
                velocity.x /= m;
                velocity.y /= m;
                // 和地面碰撞后的速度损失
                // 注意，在构造函数中有一个bounds函数用于边界修正
                velocity.mutableScale(m*this.groundFriction);
            }
        
            // 更新位置
            particles[i].lastPos.mutableSet(particles[i].pos);
        
            // 重力产生的加速度
            particles[i].pos.mutableAdd(this.gravity);
        
            // 粒子的位移更新
            particles[i].pos.mutableAdd(velocity);
        }
    }
    
    // 如果是鼠标拖拽节点，则改变该节点的位置
    if (this.draggedEntity)
        this.draggedEntity.pos.mutableSet(this.mouse);
        
    // “惯性”效果
    var stepCoef = 1/step;
    for (c in this.composites) {
        var constraints = this.composites[c].constraints;
        for (i=0;i<step;++i)
            for (j in constraints)
                constraints[j].relax(stepCoef);
    }
    
    // 对粒子位置坐边界检测
    for (c in this.composites) {
        var particles = this.composites[c].particles;
        for (i in particles)
            this.bounds(particles[i]);
    }
}

/**
 * 核心方法，用于对所有的组合中的粒子，约束进行重绘
 */
VerletJS.prototype.draw = function() {
    var i, c;
    
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);  
    
    for (c in this.composites) {
        // 如果有自定义的drawConstraints方法则调用，否则使用默认的draw方法
        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);
        }
    }

    // highlight nearest / dragged entity
    var nearest = this.draggedEntity || this.nearestEntity();
    if (nearest) {
        this.ctx.beginPath();
        this.ctx.arc(nearest.pos.x, nearest.pos.y, 8, 0, 2*Math.PI);
        this.ctx.strokeStyle = this.highlightColor;
        this.ctx.stroke();
    }
}

/*
 * 检测离鼠标最近的粒子对象
 */
VerletJS.prototype.nearestEntity = function() {
    var c, i;
    var d2Nearest = 0;
    var entity = null;
    var constraintsNearest = null;
    
    // find nearest point
    for (c in this.composites) {
        var particles = this.composites[c].particles;
        for (i in particles) {
            // 计算粒子对象和鼠标的位置
            var d2 = particles[i].pos.dist2(this.mouse);
            // 如果该位置小于粒子的半径则代表区域重合，发生碰撞。及离鼠标最近；已此迭代
            if (d2 <= this.selectionRadius*this.selectionRadius && (entity == null || d2 < d2Nearest)) {
                entity = particles[i];
                constraintsNearest = this.composites[c].constraints;
                d2Nearest = d2;
            }
        }
    }
    
    // 在最近的粒子中寻找固定粒子对象
    for (i in constraintsNearest)
        if (constraintsNearest[i] instanceof PinConstraint && constraintsNearest[i].a == entity)
            entity = constraintsNearest[i];
    
    return entity;
}