HTML5 粒子引力球

粒子从四面八方聚拢成一个空心球。

canvas, ball

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

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

Vector.prototype = {
    negative: function() {
        return new Vector(-this.x, -this.y, -this.z);
    },
    add: function(v) {
        if (v instanceof Vector) return new Vector(this.x + v.x, this.y + v.y, this.z + v.z);
        else return new Vector(this.x + v, this.y + v, this.z + v);
    },
    subtract: function(v) {
        if (v instanceof Vector) return new Vector(this.x - v.x, this.y - v.y, this.z - v.z);
        else return new Vector(this.x - v, this.y - v, this.z - v);
    },
    multiply: function(v) {
        if (v instanceof Vector) return new Vector(this.x * v.x, this.y * v.y, this.z * v.z);
        else return new Vector(this.x * v, this.y * v, this.z * v);
    },
    divide: function(v) {
        if (v instanceof Vector) return new Vector(this.x / v.x, this.y / v.y, this.z / v.z);
        else return new Vector(this.x / v, this.y / v, this.z / v);
    },
    equals: function(v) {
        return this.x == v.x && this.y == v.y && this.z == v.z;
    },
    dot: function(v) {
        return this.x * v.x + this.y * v.y + this.z * v.z;
    },
    cross: function(v) {
        return new Vector(
            this.y * v.z - this.z * v.y,
            this.z * v.x - this.x * v.z,
            this.x * v.y - this.y * v.x
        );
    },
    length: function() {
        return Math.sqrt(this.dot(this));
    },
    unit: function() {
        return this.divide(this.length());
    },
    min: function() {
        return Math.min(Math.min(this.x, this.y), this.z);
    },
    max: function() {
        return Math.max(Math.max(this.x, this.y), this.z);
    },
    toAngles: function() {
        var phi = Math.atan2(this.y, this.x);
        if (phi < 0) {
            phi = phi + Math.PI * 2;
        }
        return {
            theta: Math.acos(this.z / this.length()),
            phi: phi
        };
    },
    angleTo: function(a) {
        return Math.acos(this.dot(a) / (this.length() * a.length()));
    },
    toArray: function(n) {
        return [this.x, this.y, this.z].slice(0, n || 3);
    },
    clone: function() {
        return new Vector(this.x, this.y, this.z);
    },
    init: function(x, y, z) {
        this.x = x;
        this.y = y;
        this.z = z;
        return this;
    }
};

Vector.negative = function(a, b) {
    b.x = -a.x;
    b.y = -a.y;
    b.z = -a.z;
    return b;
};
Vector.add = function(a, b, c) {
    if (b instanceof Vector) {
        c.x = a.x + b.x;
        c.y = a.y + b.y;
        c.z = a.z + b.z;
    } else {
        c.x = a.x + b;
        c.y = a.y + b;
        c.z = a.z + b;
    }
    return c;
};
Vector.subtract = function(a, b, c) {
    if (b instanceof Vector) {
        c.x = a.x - b.x;
        c.y = a.y - b.y;
        c.z = a.z - b.z;
    } else {
        c.x = a.x - b;
        c.y = a.y - b;
        c.z = a.z - b;
    }
    return c;
};
Vector.multiply = function(a, b, c) {
    if (b instanceof Vector) {
        c.x = a.x * b.x;
        c.y = a.y * b.y;
        c.z = a.z * b.z;
    } else {
        c.x = a.x * b;
        c.y = a.y * b;
        c.z = a.z * b;
    }
    return c;
};
Vector.divide = function(a, b, c) {
    if (b instanceof Vector) {
        c.x = a.x / b.x;
        c.y = a.y / b.y;
        c.z = a.z / b.z;
    } else {
        c.x = a.x / b;
        c.y = a.y / b;
        c.z = a.z / b;
    }
    return c;
};
Vector.cross = function(a, b, c) {
    c.x = a.y * b.z - a.z * b.y;
    c.y = a.z * b.x - a.x * b.z;
    c.z = a.x * b.y - a.y * b.x;
    return c;
};
Vector.unit = function(a, b) {
    var length = a.length();
    b.x = a.x / length;
    b.y = a.y / length;
    b.z = a.z / length;
    return b;
};
Vector.fromAngles = function(theta, phi) {
    return new Vector(Math.cos(theta) * Math.cos(phi), Math.sin(phi), Math.sin(theta) * Math.cos(phi));
};
Vector.randomDirection = function() {
    return Vector.fromAngles(Math.random() * Math.PI * 2, Math.asin(Math.random() * 2 - 1));
};
Vector.min = function(a, b) {
    return new Vector(Math.min(a.x, b.x), Math.min(a.y, b.y), Math.min(a.z, b.z));
};
Vector.max = function(a, b) {
    return new Vector(Math.max(a.x, b.x), Math.max(a.y, b.y), Math.max(a.z, b.z));
};
Vector.lerp = function(a, b, fraction) {
    return b.subtract(a).multiply(fraction).add(a);
};
Vector.fromArray = function(a) {
    return new Vector(a[0], a[1], a[2]);
};
Vector.angleBetween = function(a, b) {
    return a.angleTo(b);
};

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
var CenterX = width / 2;
var CenterY = height / 2;

var dotImageList = [];
for (var i = 1; i <= 4; i++) {
    var dotImage = new Image();
    dotImage.src = "http://wximg.gtimg.com/tmt/coding-math/dist/img/gatherround/dot" + i + ".png";
    dotImageList.push(dotImage);
}

var sphereRad = 130;
var fLen = 300;
var maxParticle = 400;
var turnSpeed = 0.005;
var particles = [];

this.distPos.x = sphereRad * Math.sin(this.distPos.theta) * Math.cos(this.distPos.phi);
    this.distPos.y = sphereRad * Math.sin(this.distPos.theta) * Math.sin(this.distPos.phi);
    this.distPos.z = sphereRad * Math.cos(this.distPos.theta);
    this.distVec = new Vector(this.distPos.x, this.distPos.y, this.distPos.z);
    this.unitVec = this.distVec.unit();

var startMult = 1 + Math.random() * 2;
    this.startVec = this.distVec.multiply(startMult);
    this.x = this.startVec.x;
    this.y = this.startVec.y;
    this.z = this.startVec.z;

this.veloRate = 1 + Math.random() * 1;
    this.velo = this.unitVec.negative().multiply(this.veloRate);
    this.finalVelo = 0;
    this.m = fLen / (fLen - this.z);

this.age = this.life = 50 + Math.floor(Math.random() * 500);
    this.proj = {};
    this.turnAngle = 0;
    this.wanderTime = 200;
    this.radius = 1 + Math.random() * 3;

Particle.prototype.update = function() {
    this.nowPos = new Vector(this.x, this.y, this.z);
    this.nowPosUnit = this.nowPos.unit();

if (this.wanderTime > 0 && this.nowPos.length() > (sphereRad * 1.2)) {
        this.wanderTime--;
        this.velo.x += 0.1 * (Math.random() * 2 - 1);
        this.velo.y += 0.1 * (Math.random() * 2 - 1);
        this.velo.z += 0.1 * (Math.random() * 2 - 1);
        this.x = this.x + this.velo.x;
        this.y = this.y + this.velo.y;
        this.z = this.z + this.velo.z;
        this.op = util.map(this.nowPos.length(), sphereRad, this.startVec.length(), 1, 0);

} else if (this.nowPos.length() > sphereRad) {
        if (this.finalPos === 0) {
            this.finalPos = this.nowPosUnit.multiply(sphereRad);
        }
        if (this.finalVelo === 0) {
            this.finalVelo = this.nowPosUnit.negative().multiply(this.veloRate);
        }
        this.x = this.x + this.finalVelo.x;
        this.y = this.y + this.finalVelo.y;
        this.z = this.z + this.finalVelo.z;
        this.op = util.map(this.nowPos.length(), sphereRad, this.startVec.length(), 1, 0);
    } else {
        this.op = this.life / (this.age / 2);
        this.turnAngle = (this.turnAngle + turnSpeed) % (Math.PI * 2);
        var cosAngle = Math.cos(turnSpeed);
        var sinAngle = Math.sin(turnSpeed);
        this.x = cosAngle * this.nowPos.x + sinAngle * this.nowPos.z;
        this.z = -sinAngle * this.nowPos.x + cosAngle * this.nowPos.z;
        this.y = this.nowPos.y;
        this.life--;
    }

this.m = fLen / (fLen - this.z);
};

function loop() {
    context.clearRect(0, 0, width, height);
    if (particles.length < maxParticle) {
        var p = new Particle();
        particles.push(p);
    }
    for (var i = 0; i < particles.length; i++) {
        var p = particles[i];
        if (p.life === 0) {
            particles.splice(i, 1);
            var p = new Particle();
            particles.push(p);
        }

p.update();

if (p.m > 0) {
            context.save();
            context.globalAlpha = p.op;
            context.drawImage(p.img, p.x * p.m + CenterX, CenterY - p.y * p.m, p.radius * p.m * 2, p.radius * p.m * 2);
            context.restore();
            //                context.fillStyle = p.color + p.op + ")";
            //                context.beginPath();
            //                context.arc(p.x * p.m + CenterX, CenterY - p.y * p.m, p.radius * p.m, 0, Math.PI * 2);
            //                context.fill();
        }
    }
    requestAnimationFrame(loop);
}
loop();

编译

CSS

HTML

粒子从四面八方聚拢成一个空心球。

canvas, ball

编辑器支持Emmet

快捷键

粒子从四面八方聚拢成一个空心球。

canvas, ball

HTML5 CANVAS 重力（粒子引力）小游戏

HTML5 Canvas星空粒子动画压力测试

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：