HTML5 Verlet积分法实现可拖拉弹性毛线球

重力效应球，带边界碰撞检测和弹性挤压效果（柔性球）。很棒的一个作品！

h5, svg, ball, gravity

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var ss = 460; //svg size
var p = document.getElementById('p'),
    poly, $;

function Pt(x, y) {
    this.x = x || 0;
    this.y = y || 0;
}

Pt.dist = function(a, b) {
    return Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
};

//polygon (point, vertex, size, var k)
function Poly(pt, vert, size, k) {
    this.vert = vert;
    this.pts = [];
    this.lines = [];

this.vx = 0.2;

for (var v = 0; v < 2 * Math.PI; v += 2 * Math.PI / vert) {
        this.pts.push(
            new vPt(Math.cos(v) * size + pt.x, Math.sin(v) * size + pt.y)
        );
    }

for (var i = 0, n = this.pts.length; i < n; i++) {
        pt = this.pts[i];

for (var j = 0, m = this.pts.length; j < m; j++) {
            if (i !== j) {
                this.lines.push(
                    new vLine(pt, this.pts[j], k)
                );
            }
        }
    }
}

Poly.prototype.upd = function() {
    var pt,
        line,
        i = 0,
        n = this.pts.length;

for (; i < n; i++) {
        pt = this.pts[i];
        pt.y += this.vx;
        pt.upd();
        pt.cont($);
    }

i = 0;
    n = this.lines.length;
    for (; i < n; i++) {
        line = this.lines[i];
        line.upd();
    }
}

Poly.prototype.draw = function() {
    var pt,
        line,
        i,
        n;

var d = 'M ' + this.pts[0].x + ' ' + this.pts[0].y + ' L ';

i = 0;
    n = this.pts.length;
    for (; i < n; i++) {
        pt = this.pts[i];
        d += ' ' + pt.x + ' ' + pt.y;
    }

d += ' Q ';

i = 0;
    n = this.lines.length;

for (; i < n; i++) {
        line = this.lines[i];
        d += ' ' + line.ptA.x + ' ' + line.ptA.y;
        d += ' ' + line.ptB.x + ' ' + line.ptB.y;
    }

d += ' Z';
    p.setAttribute('d', d);
}

var msdn,
    prevX = 0,
    prevY = 0;

window.addEventListener("mousedown", function(e) {
    msdn = true;
    prevX = e.clientX;
    prevY = e.clientY;
});

window.addEventListener("touchstart", function(e) {
    msdn = true;
    prevX = e.touches[0].clientX;
    prevY = e.touches[0].clientY;
});

window.addEventListener("mouseup", function(e) {
    msdn = false;
});

window.addEventListener("touchend", function(e) {
    msdn = false;
});

$ = new Rect(0, 0, ss, ss);
poly = new Poly(new Pt(220, 90), 9, 80, 0.025);

function loop() {
    poly.upd();
    poly.draw();
    window.requestAnimationFrame(loop);
}

loop();

document.getElementById('ptrng').addEventListener('change', function(e) {
    poly = new Poly(new Pt(220, 90), e.currentTarget.value, 80, 0.025);
});

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Ubuntu:700);
html,
body {
    height: 100%;
}
body {
    font-family: 'Ubuntu', sans-serif;
    font-size: .75em;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background: #282537;
    background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    cursor: move;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
svg {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background: #282537;
    background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    box-shadow: inset 4px 4px 8px 8px hsla(0, 5%, 5%, .07);
    border-radius: 5px;
}
.svg {
    width: 100%;
    text-align: center;
    margin-top: 2%;
}
.input {
    padding: 2em;
}
p {
    bottom: 0;
    left: 0;
    width: 350px;
    position: absolute;
    text-align: left;
    padding: .5em;
}
form,
p {
    color: hsla(231, 5%, 85%, 1);
}

HTML

重力效应球，带边界碰撞检测和弹性挤压效果（柔性球）。很棒的一个作品！

h5, svg, ball, gravity

编辑器支持Emmet

快捷键

重力效应球，带边界碰撞检测和弹性挤压效果（柔性球）。很棒的一个作品！

h5, svg, ball, gravity

HTML5类似trello网站的可拖拉卡片任务面板

HTML5/Three.js 3D版本的毛线球（棉球）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：