P5.js炫彩梦幻萤火虫全屏背景动画

glittering particle，学习如何使用P5快速创建canvas粒子动画。

h5, p5, particle

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var scketch = function(p) {

var Particle = function(pos, v, d) {
        this.p = pos;
        this.v = v;
        this.a = 0;
        this.d = d;
        this.r = d / 2;
        this.col_r = p.floor(p.random(255));
        this.col_g = p.floor(p.random(255));
        this.col_b = p.floor(p.random(255));
    }
    Particle.prototype.addForce = function() {

}
    Particle.prototype.update = function() {
        this.v.add(this.a);
        this.p.add(this.v);
    }
    Particle.prototype.draw = function() {
        //p.translate(p.windowWidth/2,p.windowHeight/2);
        p.noStroke();
        //gradation
        var grad = p.drawingContext.createRadialGradient(this.p.x, this.p.y, 0, this.p.x, this.p.y, this.r);
        grad.addColorStop(0.1, 'rgba(' + this.col_r + ',' + this.col_g + ',' + this.col_b + ', 1)');
        grad.addColorStop(1, 'rgba(0, 0, 0, 0)');
        p.drawingContext.fillStyle = grad;
        p.ellipse(this.p.x, this.p.y, this.d, this.d);
    }
    Particle.prototype.through = function() {
        if (this.p.x - this.r > p.windowWidth) {
            this.p.x = 0;
        } else if (this.p.x + this.r < 0) {
            this.p.x = p.windowWidth + this.r;
        }
        if (this.p.y - this.r > p.windowHeight) {
            this.p.y = 0;
        } else if (this.p.y + this.r < 0) {
            this.p.y = p.windowHeight + this.r;
        }

}

var particle;
    var particles = [];
    var particlesNum = 100;
    var px = 0;

/*--
      p5 framwork
    ------------------------------------*/
    p.setup = function() {
        p.createCanvas(p.windowWidth, p.windowHeight);
        p.blendMode(p.ADD);
        p.background(0);
        for (var i = 0; i < particlesNum; i++) {
            var pos = p.createVector(p.random(p.windowWidth), p.random(p.windowHeight));
            var vec = p.createVector(p.random(-2, 2), p.random(-2, 2));
            particles.push(
                new Particle(pos, vec, p.random(4, 300))
            )
        }
    }

p.draw = function() {
        p.clear();
        p.background(0, 0, 0, 255);
        for (var i = 0; i < particlesNum; i++) {
            particles[i].update();
            particles[i].through();
            particles[i].draw();
        }
    }

p.mousePressed = function(event) {};

p.windowResized = function() {}

}

new p5(scketch);

编译

CSS

HTML

glittering particle，学习如何使用P5快速创建canvas粒子动画。

h5, p5, particle

编辑器支持Emmet

快捷键

glittering particle，学习如何使用P5快速创建canvas粒子动画。

h5, p5, particle

HTML5 Rx.js使用随机几何图形元素构建网页全屏动画背景

HTML5 Canvas构建全屏彩色缤纷水母背景动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：