HTML5 P5.js像素烟花动画

Pixel Fireworks

html5, p5, fireworks

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

window.addEventListener('resize', resize, false);

var fireworks;
var hills;
var stars;
var dirs = [
    [-1, -1],
    [0, -1],
    [1, -1],
    [-1, 0],
    [1, 0],
    [-1, 1],
    [0, 1],
    [1, 1]
];

function Conway() {
    this.x = floor(random() * width);
    this.y = floor(random() * height * .7);
    this.type = floor(random() * 3);
    this.size = random() * 2;
    this.angle = random() * PI;
    this.baseHue = random() * 360;
    this.hueSwap = random() * 30 + 60;
    this.gridSize = 61;
    if (this.gridSize % 2 == 0) this.gridSize;
    this.center = floor(this.gridSize / 2);
    this.cyclesPerTick = 5;
    this.numTicks = 0;
    this.finished = false;
    this.grid = [];

for (var i = 0; i < 2; i++) {
        this.grid.push([]);
    }

for (var i = 0; i < this.gridSize; i++) {
        this.grid[0].push([]);
        this.grid[1].push([]);
        for (var j = 0; j < this.gridSize; j++) {
            this.grid[0][i].push(false);
            this.grid[1][i].push(false);
        }
    }

for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            if (random() > .5) {
                this.grid[0][this.center - i][this.center - j] = true;
                this.grid[0][this.center + i][this.center + j] = true;
                if (this.type == 0) {
                    this.grid[0][this.center + i][this.center - j] = true;
                    this.grid[0][this.center - i][this.center + j] = true;
                } else if (this.type == 1) {
                    this.grid[0][this.center - j][this.center + i] = true;
                    this.grid[0][this.center + j][this.center - i] = true;
                } else if (this.type == 2) {
                    this.grid[0][this.center + i][this.center - j] = true;
                    this.grid[0][this.center - i][this.center + j] = true;
                    this.grid[0][this.center - j][this.center + i] = true;
                    this.grid[0][this.center + j][this.center - i] = true;
                    this.grid[0][this.center - j][this.center - i] = true;
                    this.grid[0][this.center + j][this.center + i] = true;
                }
            }
        }
    }

this.tick = function() {
        var ind = (this.numTicks % 2);
        for (var i = 0; i < this.gridSize; i++) {
            for (var j = 0; j < this.gridSize; j++) {
                var neighbors = 0;
                for (var k = 0; k < dirs.length; k++) {
                    var dx = i + dirs[k][0];
                    var dy = j + dirs[k][1];
                    if (dx >= 0 && dy >= 0 &&
                        dx < this.gridSize - 1 && dy < this.gridSize - 1) {
                        if (this.grid[ind][dx][dy]) neighbors++;
                    }
                }
                if ((this.grid[ind][i][j] &&
                        (neighbors == 2 || neighbors == 3)) ||
                    (!this.grid[ind][i][j] && neighbors == 3)) {
                    this.grid[(ind + 1) % 2][i][j] = true;
                } else {
                    this.grid[(ind + 1) % 2][i][j] = false;
                }
            }
        }
    }

this.render = function() {
        this.numTicks++;
        var mod = pow(((48 - this.numTicks) / 40), 2);
        this.size += mod * .5;
        var ind = this.numTicks % 2;
        translate(this.x, this.y);
        scale(this.size);
        for (var i = 0; i < this.gridSize; i++) {
            for (var j = 0; j < this.gridSize; j++) {
                if (this.grid[ind][i][j]) {
                    fill(this.baseHue + random() * this.hueSwap,
                        100, 100, mod * 100);
                    // fill(0, 100, 100);
                    rect(i - this.center, j - this.center, 1, 1);
                }
            }
        }

if (this.numTicks > 40) this.finished = true;
        resetMatrix();
    }
}

function Hill(distance) {
    this.scale = distance * 20;
    this.bal = distance * 50;
    this.hue = 180 - distance * 60;
    this.pos = random() * 2 - .5;

this.heights = [];
    for (var i = 0; i < 40; i++) {
        var y = 200 * sin((i / 40) * PI);
        this.heights.push(y);
    }

this.render = function() {
        fill(this.hue, this.bal, this.bal);
        for (var i = 0; i < 40; i++) {
            var x = width * this.pos - 10 * this.scale;
            var y = this.heights[i];
            rect(x + i * this.scale, height - y + this.scale * 4, this.scale + 1, y);
        }
    }
}

function Star() {
    this.x = random();
    this.y = random();
    this.size = random() * 2 + 1;

this.render = function() {
        fill(160 + random() * 40, 40, 60 + random() * 20);
        rect(this.x * width, this.y * height, this.size, this.size);
    }
}

function draw() {
    background(0);
    noStroke();

if (!stars) return;
    for (var i = 0; i < stars.length; i++) {
        stars[i].render();
    }

if (!fireworks) return;
    for (var i = fireworks.length - 1; i >= 0; i--) {
        if (fireworks[i].finished) {
            fireworks.splice(i, 1);
        } else {
            fireworks[i].tick();
            fireworks[i].render();
        }
    }

for (var i = 0; i < hills.length; i++) {
        hills[i].render();
    }

if (random() < .08) {
        fireworks.push(new Conway());
    }
}

function resize() {
    resizeCanvas(window.innerWidth, window.innerHeight);
}

编译

CSS

HTML

Pixel Fireworks

html5, p5, fireworks

编辑器支持Emmet

快捷键

Pixel Fireworks

html5, p5, fireworks

HTML5 P5.js 曼荼罗花的轮廓线变换动画

HTML5 P5.js 百足蜈蚣动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：