基本的重力感应、骨骼动画和碰撞检测

人形布偶 | Verlet积分法

canvas, doll

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1867
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

/* 
  Verlet Integration
  from Coding Math by Keith Peters.
  
  My Verlet Integration Pens:
  http://codepen.io/collection/DxeyOb/
*/

function distance(p0, p1) {
    var x = p1.x - p0.x;
    var y = p1.y - p0.y;
    return Math.sqrt(x * x + y * y);
}

var Point = function Point(x, y, extremity, gravity, radius) {
    _classCallCheck(this, Point);

this.x = x;
    this.y = y;
    this.oldx = x;
    this.oldy = y;
    this.extremity = extremity;
    if (extremity) {
        this.r = 5;
    } else {
        this.r = radius || 1;
    }
    this.g = gravity || 0.1;
};

var Stick = function Stick(p0, p1, invisible) {
    _classCallCheck(this, Stick);

this.p0 = p0;
    this.p1 = p1;
    this.length = distance(p0, p1);
    this.invisible = invisible;
};

var World = function() {
    function World() {
        var _this = this;

_classCallCheck(this, World);

this.canvas = document.getElementById("canvas");
        this.ctx = canvas.getContext("2d");
        this.h = this.canvas.height = window.innerHeight;
        this.w = this.canvas.width = window.innerWidth;
        this.ctx.lineWidth = 2;

this.bounce = 0.65;
        this.friction = 0.995;

this.points = [];
        this.sticks = [];
        this.createRagdoll(100, 0);
        this.createRagdoll(300, 0);

this.isDragging = false;
        this.dragPoint = undefined;

this.canvas.addEventListener("mousedown", function(event) {
            return _this.onMouseDown(event);
        });
        this.onMouseMove = this.onMouseMove.bind(this);
        this.onMouseUp = this.onMouseUp.bind(this);
        document.getElementById("jump").addEventListener("click", function() {
            return _this.onJumpClick();
        });
    }

World.prototype.createRagdoll = function createRagdoll(x0, y0) {
        // Start index
        var i0 = this.points.length;

// Head
        var h = new Point(x0, y0, false, 0.12, 15);
        h.head = true;
        h.oldx = x0 + (Math.random() - 0.5) * 25;
        this.points.push(h);

// Groin
        this.points.push(new Point(x0, y0 + 80, false, 0.15));

// Hips
        this.points.push(new Point(x0 + 15, y0 + 90, false, 0.12));
        this.points.push(new Point(x0 - 15, y0 + 90, false, 0.12));

// Knees
        this.points.push(new Point(x0 + 20, y0 + 130));
        this.points.push(new Point(x0 - 20, y0 + 130));

// Feet
        this.points.push(new Point(x0 + 20, y0 + 190, true));
        this.points.push(new Point(x0 - 20, y0 + 190, true));

// Neck
        this.points.push(new Point(x0, y0 + 25));

// Shoulders
        this.points.push(new Point(x0 + 15, y0 + 25));
        this.points.push(new Point(x0 - 15, y0 + 25));

// Hands
        this.points.push(new Point(x0 + 15, y0 + 105, true));
        this.points.push(new Point(x0 - 15, y0 + 105, true));

// "Muscles"
        // Head - shoulders
        this.sticks.push(new Stick(this.points[i0], this.points[i0 + 9], true));
        this.sticks.push(new Stick(this.points[i0], this.points[i0 + 10], true));
        // Shoulder - shoulder
        this.sticks.push(new Stick(this.points[i0 + 9], this.points[i0 + 10], true));

// Shoulders - hips
        this.sticks.push(new Stick(this.points[i0 + 9], this.points[i0 + 2], true));
        this.sticks.push(new Stick(this.points[i0 + 10], this.points[i0 + 3], true));
        // Shoulders - hips opposite side
        this.sticks.push(new Stick(this.points[i0 + 9], this.points[i0 + 3], true));
        this.sticks.push(new Stick(this.points[i0 + 10], this.points[i0 + 2], true));

// Hips - feet
        this.sticks.push(new Stick(this.points[i0 + 2], this.points[i0 + 6], true));
        this.sticks.push(new Stick(this.points[i0 + 3], this.points[i0 + 7], true));

// Hips - feet, opposite
        this.sticks.push(new Stick(this.points[i0 + 2], this.points[i0 + 7], true));
        this.sticks.push(new Stick(this.points[i0 + 3], this.points[i0 + 6], true));

// Head - groin
        this.sticks.push(new Stick(this.points[i0], this.points[i0 + 1], true));

// Hip - hip
        this.sticks.push(new Stick(this.points[i0 + 2], this.points[i0 + 3], true));
        // Shoulder - hip
        this.sticks.push(new Stick(this.points[i0 + 9], this.points[i0 + 2], true));
        this.sticks.push(new Stick(this.points[i0 + 10], this.points[i0 + 3], true));

// Head - knee
        this.sticks.push(new Stick(this.points[i0], this.points[i0 + 4], true));
        // Head - knee
        this.sticks.push(new Stick(this.points[i0], this.points[i0 + 5], true));

// Head feet
        this.sticks.push(new Stick(this.points[i0], this.points[i0 + 6], true));
        this.sticks.push(new Stick(this.points[i0], this.points[i0 + 7], true));

// Body parts
        // Hips
        this.sticks.push(new Stick(this.points[i0 + 1], this.points[i0 + 2]));
        this.sticks.push(new Stick(this.points[i0 + 1], this.points[i0 + 3]));
        // Legs
        this.sticks.push(new Stick(this.points[i0 + 2], this.points[i0 + 4]));
        this.sticks.push(new Stick(this.points[i0 + 3], this.points[i0 + 5]));
        this.sticks.push(new Stick(this.points[i0 + 4], this.points[i0 + 6]));
        this.sticks.push(new Stick(this.points[i0 + 5], this.points[i0 + 7]));

this.sticks.push(new Stick(this.points[i0], this.points[i0 + 8]));
        this.sticks.push(new Stick(this.points[i0 + 8], this.points[i0 + 1]));

// Left arm
        this.sticks.push(new Stick(this.points[i0 + 8], this.points[i0 + 9]));
        this.sticks.push(new Stick(this.points[i0 + 9], this.points[i0 + 11]));

// Right arm
        this.sticks.push(new Stick(this.points[i0 + 8], this.points[i0 + 10]));
        this.sticks.push(new Stick(this.points[i0 + 10], this.points[i0 + 12]));
    };

World.prototype.onJumpClick = function onJumpClick() {
        var p = this.points[0];
        p.oldy = p.y + 50;
    };

World.prototype.onMouseDown = function onMouseDown(event) {
        var x = event.clientX;
        var y = event.clientY;
        var p0 = {
            x: x,
            y: y
        };
        var p1 = this.getClosestPoint(p0);
        var dist = this.distance(p0, p1);
        if (dist < 30) {
            this.dragPoint = p1;
            this.dragPoint.x = x;
            this.dragPoint.y = y;
            this.dragPoint.oldx = x;
            this.dragPoint.oldy = y;
            this.dragPoint.pinned = true;
            this.isDragging = true;
            this.canvas.addEventListener("mousemove", this.onMouseMove);
            this.canvas.addEventListener("mouseup", this.onMouseUp);
        }
    };

World.prototype.onMouseMove = function onMouseMove(event) {
        this.dragPoint.oldx = this.dragPoint.x;
        this.dragPoint.oldy = this.dragPoint.y;
        this.dragPoint.x = event.clientX;
        this.dragPoint.y = event.clientY;
    };

World.prototype.onMouseUp = function onMouseUp(event) {
        this.dragPoint.pinned = false;
        this.isDragging = false;
        this.canvas.removeEventListener("mousemove", this.onMouseMove);
        this.canvas.removeEventListener("mouseup", this.onMouseUp);
    };

World.prototype.getClosestPoint = function getClosestPoint(p0) {
        var _this2 = this;

World.prototype.distance = function distance(p0, p1) {
        var x = p1.x - p0.x;
        var y = p1.y - p0.y;
        return Math.sqrt(x * x + y * y);
    };

World.prototype.update = function update() {
        this.ctx.clearRect(0, 0, this.w, this.h);
        this.updatePoints();
        this.updateSticks();
        this.drawSticks();
        this.drawHeads();
        this.drawExtremities();
    };

World.prototype.drawHeads = function drawHeads() {
        var _this3 = this;

this.points.filter(function(p) {
            return p.head;
        }).forEach(function(h) {
            _this3.ctx.beginPath();
            _this3.ctx.arc(h.x, h.y, h.r, 0, Math.PI * 2);
            _this3.ctx.fill();
        });
    };

World.prototype.drawExtremities = function drawExtremities() {
        var _this4 = this;

this.points.filter(function(p) {
            return p.extremity;
        }).forEach(function(e) {
            _this4.ctx.beginPath();
            _this4.ctx.arc(e.x, e.y, e.r, 0, Math.PI * 2);
            _this4.ctx.fill();
        });
    };

World.prototype.drawSticks = function drawSticks() {
        var _this5 = this;

this.sticks.forEach(function(s) {
            _this5.ctx.beginPath();
            if (s.invisible) {
                _this5.ctx.strokeStyle = "rgba(255, 0, 0, 0.2)";
            } else {
                _this5.ctx.strokeStyle = "black";
            }
            _this5.ctx.moveTo(s.p0.x, s.p0.y);
            _this5.ctx.lineTo(s.p1.x, s.p1.y);
            _this5.ctx.stroke();
        });
    };

World.prototype.updatePoints = function updatePoints() {
        var _this6 = this;

this.points.forEach(function(p) {
            if (!p.pinned) {
                var vx = (p.x - p.oldx) * _this6.friction;
                var vy = (p.y - p.oldy) * _this6.friction;
                p.oldx = p.x;
                p.oldy = p.y;
                // Ground friction
                if (p.y > _this6.h - 1) {
                    vx = 0;
                }
                p.x += vx;
                p.y += vy;
                p.y += p.g;

if (p.x + p.r > _this6.w) {
                    p.x = _this6.w - p.r;
                    p.oldx = p.x + vx * _this6.bounce;
                }
                if (p.x - p.r < 0) {
                    p.x = p.r;
                    p.oldx = p.x + vx * _this6.bounce;
                }

if (p.y + p.r > _this6.h) {
                    p.y = _this6.h - p.r;
                    p.oldy = p.y + vy * _this6.bounce;
                }
                if (p.y - p.r < 0) {
                    p.y = p.r;
                    p.oldy = p.y + vy * _this6.bounce;
                }
            }
        });
    };

World.prototype.updateSticks = function updateSticks() {
        this.sticks.forEach(function(s) {
            var dx = s.p1.x - s.p0.x;
            var dy = s.p1.y - s.p0.y;
            var dist = Math.sqrt(dx * dx + dy * dy);
            var diff = s.length - dist;
            var percent = diff / dist / 2;
            var offsetX = dx * percent;
            var offsetY = dy * percent;

if (!s.p0.pinned) {
                s.p0.x -= offsetX;
                s.p0.y -= offsetY;
            }
            if (!s.p1.pinned) {
                s.p1.x += offsetX;
                s.p1.y += offsetY;
            }
        });
    };

return World;
}();

var world = new World();

function animate() {
    world.update();
    requestAnimationFrame(animate);
}

animate();

编译

CSS

HTML

人形布偶 | Verlet积分法

canvas, doll

编辑器支持Emmet

快捷键

人形布偶 | Verlet积分法

canvas, doll

Canvas 盒子碰撞检测动画

HTML5 Canvas线条被重力（引力）所吸引的动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：