HTML5/Canvas果冻珍珠

Pearls Jell-O, 移动鼠标时会产生聚合动效。

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = window.innerWidth,
    cx = cw / 2;
var ch = canvas.height = window.innerHeight,
    cy = ch / 2;
var requestId = null;
var rad = Math.PI / 180;
var balls = [];
var numBalls = 500;
var spring = .01;
var friction = .98;
var easing = 1 / 10;
var offset = 100;
var m = {
    x: -offset,
    y: -offset
}

function Ball() {
    this.r = 5 + Math.random() * 25; //

this.Pos = {
        // the initial position
        x: Math.random() * cw,
        y: Math.random() * ch
    }
    this.pos = {
        // active position
        x: this.Pos.x,
        y: this.Pos.y
    }
    this.h = 0;
    this.s = 10;

this.vel = {
        x: 0,
        y: 0
    }

this.flag = true;

this.draw = function() {
        ctx.fillStyle = Grd(this.pos.x, this.pos.y, this.r, this.h, this.s);
        ctx.beginPath();
        ctx.arc(this.pos.x, this.pos.y, this.r, 0, 2 * Math.PI);
        ctx.fill();
    }

this.ease = function(m) {
        var dx = m.x - this.pos.x;
        var dy = m.y - this.pos.y;
        this.angle = Math.atan2(dy, dx);
        ////////////////////////////
        this.vel.x = (m.x - this.pos.x) * easing;
        this.vel.y = (m.y - this.pos.y) * easing;

if (Math.abs(m.x - this.pos.x) < 1) {
            this.pos.x = m.x;
            this.flag = false;
        }
        ////////////////////////////
        this.pos.x += this.vel.x;
        this.pos.y += this.vel.y;
    }

this.spring = function() {
        var distX = this.Pos.x - this.pos.x;
        var distY = this.Pos.y - this.pos.y;
        var accX = distX * spring;
        var accY = distY * spring;
        this.vel.x += accX;
        this.vel.y += accY;

this.vel.x *= friction;
        this.vel.y *= friction;

this.pos.x += this.vel.x;
        this.pos.y += this.vel.y;

if (dist(this.Pos, this.pos) < 1) {
            this.flag = true;
        }

}

this.update = function(m) {
        if (dist(this.Pos, m) < offset && this.flag) {
            this.ease(m);
        } else {
            this.spring();
        }

}
}

for (var i = 0; i < numBalls; i++) {
    balls.push(new Ball());
}

function Draw() {
    requestId = window.requestAnimationFrame(Draw);
    ctx.clearRect(0, 0, cw, ch);

for (var i = 0; i < balls.length; i++) {
        balls[i].update(m);
        balls[i].draw();
    }

//ctx.globalCompositeOperation = "difference";
}

//Draw();

var Init = function() {
    if (requestId) {
        window.cancelAnimationFrame(requestId);
        requestId = null;
    }
    cw = canvas.width = window.innerWidth,
        cx = cw / 2;
    ch = canvas.height = window.innerHeight,
        cy = ch / 2;

balls.length = 0;
    for (var i = 0; i < numBalls; i++) {
        balls.push(new Ball());
    }

Draw();
}

window.setTimeout(function() {
    Init();
    window.addEventListener('resize', Init, false);
}, 15);

var timeout;
canvas.addEventListener("mousemove", function(evt) {
    // ignore mouse if not moving
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        m = {
            x: -offset,
            y: -offset
        }
    }, 600);
    // but if it moves:
    m = oMousePos(canvas, evt);
}, false);

function dist(p1, p2) {
    var dx = p2.x - p1.x;
    var dy = p2.y - p1.y;
    return Math.sqrt(dx * dx + dy * dy);
}

function oMousePos(canvas, evt) {
    var ClientRect = canvas.getBoundingClientRect();
    return { //objeto
        x: Math.round(evt.clientX - ClientRect.left),
        y: Math.round(evt.clientY - ClientRect.top)
    }
}

function randomIntFromInterval(mn, mx) {
    return ~~(Math.random() * (mx - mn + 1) + mn);
}

function Grd(x, y, r, h, s) {
    grd = ctx.createRadialGradient(x - .3 * r, y - .3 * r, 0, x - .3 * r, y - .3 * r, r);
    grd.addColorStop(0, 'hsla(' + h + ',' + s + '%,95%,.95)');
    grd.addColorStop(0.4, 'hsla(' + h + ',' + s + '%,55%,.85)');
    grd.addColorStop(1, 'hsla(' + h + ',' + s + '%,35%,.85)');
    return grd;
}

编译

CSS

HTML

Pearls Jell-O, 移动鼠标时会产生聚合动效。

编辑器支持Emmet

快捷键

Pearls Jell-O, 移动鼠标时会产生聚合动效。

HTML5/Canvas使用单纯形噪音算法实现的粒子乱流动画

HTML5 Canvas 粒子聚合/离散动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：