HTML5/Canvas彩色弹珠沙盒碰撞交互动画

里面包含一个二维向量（Vector2）类的实现代码。使用鼠标可以打扫彩色珠子阵列。

html5, balls

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    var canvasBody = document.getElementById("canvas"),
        canvas = canvasBody.getContext("2d"),

w = canvasBody.width = window.innerWidth,
        h = canvasBody.height = window.innerHeight,

pi2 = Math.PI * 2,
        tick = 0,
        opts = {
            canvas: {
                backgroundColor: "#222"
            },
            affRad: 50,
            size: 5,
            spacing: 20,
            color: "#fcfcfc",
            speedLimit: 5
        },
        Colors = [
            "#2ecc71", //green
            "#3498db", //blue
            "#e67e22", //orange
            "#e74c3c", //red
            "#ecf0f1", //white
            "#9b59b6", //purple
            "#2c3e50", //night-blue
        ],
        gui = new dat.GUI(),
        particles = [],
        Mouse = new Vector2(w / 2, h / 2),
        Particle = function(X, Y) {
            this.pos = new Vector2(X || 0, Y || 0);
            this.speed = new Vector2();
            this.acc = new Vector2();
            this.speed.mult(0.1)
            this.color = Colors[Math.floor(Math.random() * Colors.length)];
        };
    Particle.prototype.update = function() {
        this.border();
        this.speed.add(this.acc);
        this.pos.add(this.speed);
        this.acc.set(0);

return this;
    }
    Particle.prototype.border = function() {
        0 > this.pos.x ? (this.speed.x *= -1, this.pos.x = 0) : undefined;
        w < this.pos.x ? (this.speed.x *= -1, this.pos.x = w - opts.size) : undefined;
        0 > this.pos.y ? (this.speed.y *= -1, this.pos.y = 0) : undefined;
        h < this.pos.y ? (this.speed.y *= -1, this.pos.y = h - opts.size) : undefined;
    }
    Particle.prototype.force = function(f) {
        var tar = f.copy();
        this.acc.add(tar);
        return this;
    }
    Particle.prototype.runAway = function(t) {
        if (this.pos.distanceTo(Mouse) < opts.affRad) {
            var tar = t.copy();
            tar.sub(this.pos);
            tar.mult(-1);
            var desired = tar.sub(this.speed);
            tar.limit(opts.speedLimit);
            this.force(desired);
        }
        this.speed.limit(opts.speedLimit)
        this.speed.div(1.05);
        return this;
    }
    Particle.prototype.render = function() {
        var size = opts.size;
        canvas.fillStyle = this.color;
        canvas.beginPath();
        canvas.arc(this.pos.x, this.pos.y, opts.size, 0, pi2);
        canvas.fill();
        //canvas.fillRect(this.pos.x, this.pos.y, size, size);
        return this;
    }

function setup() {
        populate();
        stats = new Stats();
        stats.showPanel(0);
        gui.add(opts, "size", 0.5, 100);
        gui.add(opts, "spacing", opts.size, 200).onFinishChange(populate);
        gui.add(opts, "affRad", 10, Math.min(w, h) / 2);
        document.body.appendChild(stats.domElement);
        window.requestAnimationFrame(loop);
    };

function loop() {
        stats.begin();
        canvas.fillStyle = opts.canvas.backgroundColor;
        canvas.fillRect(0, 0, w, h);
        particles.map(function(P) {
            P.runAway(Mouse).update().render();
        });
        window.requestAnimationFrame(loop);
        stats.end();
    };
    setup();

window.addEventListener("resize", function() {
        w = canvasBody.width = window.innerWidth;
        h = canvasBody.height = window.innerHeight;
        populate();
    });
    canvasBody.addEventListener("mousemove", function(e) {
        Mouse.x = e.pageX;
        Mouse.y = e.pageY;
    })
})();

编译

CSS

HTML

this.x = Math.cos(newDirection) * mag;
        this.y = Math.sin(newDirection) * mag;
        return this;
    };
    Vector2.prototype.mag = function() {
        return Math.sqrt((this.x * this.x) + (this.y * this.y));
    };
    Vector2.prototype.angleTo = function(vector) {
        var angle = Math.atan2(vector.x - this.x, vector.y - this.y);
        return angle;
    };
    Vector2.prototype.distanceTo = function(vector) {
        return Math.sqrt(Math.pow(vector.x - this.x, 2) + Math.pow(vector.y - this.y, 2));
    };
    Vector2.prototype.copy = function() {
        return new Vector2(this.x, this.y);
    };
    Vector2.prototype.set = function() {
        var args = arguments
        if (args.length == 1) {
            if (typeof args[0] == "object") {
                this.x = args[0].x;
                this.y = args[0].y;
            } else if (typeof args[0] == "number") {
                this.x = args[0];
                this.y = args[0];
            }
        } else if (args.length == 2) {
            this.x = args[0];
            this.y = args[1];
        }
        return this;
    };
    Vector2.prototype.map = function(vXmin, vXmax, vYmin, vYmax) {
        if (vXmin < this.x < vXmax && vYmin < this.y < vYmax) {
            return this;
        }
        this.x < vXmin ? this.x = vXmin : this;
        this.x > vXmax ? this.x = vXmax : this;
        this.y < vYmin ? this.y = vYmin : this;
        this.y > vYmax ? this.y = vYmax : this;
    };
    Math.radians = function(deg) {
        return deg * (Math.PI / 180);
    };
    Math.degrees = function(rad) {
        return rad * (180 / Math.PI);
    };
    random = function() {
        if (arguments) {
            var arg = arguments;
            if (arg.length == 1) {
                return Math.random() * arg[0];
            }
            if (arg.length == 2) {
                return Math.random() * (Math.max(arg[0], arg[1]) - (Math.min(arg[0], arg[1]))) + Math.min(arg[0], arg[1]);
            }
        } else {
            return Math.random();
        }
    };
</script>

里面包含一个二维向量（Vector2）类的实现代码。使用鼠标可以打扫彩色珠子阵列。

html5, balls

编辑器支持Emmet

快捷键

里面包含一个二维向量（Vector2）类的实现代码。使用鼠标可以打扫彩色珠子阵列。

html5, balls

HTML5/Canvas交互式漂浮三角形动画背景

HTML5 Canvas交互式液体表面波动动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：