Pixi.js粒子构成的液态物体和HELLO文本

pixi.js liquid text effects, 水滴掉落到杯子中的文本特效动画。

html5, canvas, particle

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";
console.clear();
var colors = [0xF9B52C, 0x333333];
var Stage = (function() {
    function Stage(canvas) {
        this.containers = [];
        this.particles = [];
        this.textures = [];
        this.onResize = function() {
            this.app.renderer.resize(this.element.offsetWidth, this.element.offsetHeight);
            this.stage.position.x = window.innerWidth / 2;
            this.stage.position.y = window.innerHeight / 2;
        };
        this.newParticle = function(color) {
            var graphic = new PIXI.Graphics();
            graphic.lineStyle(0);
            graphic.beginFill(color, 0.8);
            graphic.drawCircle(0, 0, 2);
            graphic.endFill();
            var texture = this.app.renderer.generateTexture(graphic);
            var sprite = new PIXI.Sprite(texture);
            this.particles.push(sprite);
            this.particleContainer.addChild(sprite);
            return sprite;
        };
        this.element = canvas;
        this.app = new PIXI.Application(this.element.offsetWidth, this.element.offsetHeight, {
            antialias: false,
            backgroundColor: 0xD3CFE5
        });
        this.element.appendChild(this.app.view);
        this.stage = new PIXI.Container();
        this.app.stage.addChild(this.stage);
        this.particleContainer = new PIXI.Container();
        this.stage.addChild(this.particleContainer);
        this.onResize();
    }
    return Stage;
}());
var Sim = (function() {
    function Sim(world) {
        this.width = 0;
        this.height = 0;
        this.timeStep = 1.0 / 60.0;
        this.velocityIterations = 8;
        this.positionIterations = 3;
        this.cooldown = 200;
        this.cooling = false;
        this.METER = 100;
        this.OFFSET_X = 0;
        this.OFFSET_Y = 0;
        this.PADDING = 50;
        this.onResize = function() {
            var h = window.innerHeight;
            this.width = 254;
            this.height = 180;
            this.height -= this.PADDING;
        };
        this.step = function() {
            this.world.Step(this.timeStep, this.velocityIterations, this.positionIterations);
            this.time += 1 / 60;
        };
        this.addParticles = function() {
            var _this = this;
            if (!this.cooling) {
                this.cooling = true;
                this.particle.position.Set((this.width / 2) / this.METER, -this.height * 2 / this.METER);
                this.particle.radius = 1;
                var particleGroupDef = new b2ParticleGroupDef();
                particleGroupDef.shape = this.particle;
                this.particleSystem.CreateParticleGroup(particleGroupDef);
                setTimeout(function() {
                    _this.cooling = false;
                }, this.cooldown);
            }
        };
        this.world = world;
        var liquidContainerDef = new b2BodyDef();
        var liquidContainer = this.world.CreateBody(liquidContainerDef);
        this.onResize();
        var floor = this.createWallShape(this.width / this.METER / 2, 0.05, new b2Vec2(this.width / this.METER / 2, this.height / this.METER + 0.05));
        var leftWall = this.createWallShape(0.05, (this.height + 1000) / this.METER, new b2Vec2(-0.05, 0));
        var rightWall = this.createWallShape(0.05, (this.height + 1000) / this.METER, new b2Vec2(this.width / this.METER + 0.05, 0));
        liquidContainer.CreateFixtureFromDef(floor);
        liquidContainer.CreateFixtureFromDef(leftWall);
        liquidContainer.CreateFixtureFromDef(rightWall);
        var particleSystemDef = new b2ParticleSystemDef();
        particleSystemDef.radius = 0.03;
        particleSystemDef.dampingStrength = 0.2;
        this.particleSystem = this.world.CreateParticleSystem(particleSystemDef);
        this.particle = new b2CircleShape();
    }
    Sim.prototype.createWallShape = function(width, height, angle) {
        var wallShape = new b2PolygonShape();
        wallShape.SetAsBoxXYCenterAngle(width, height, angle, 0);
        var fixtureDef = new b2FixtureDef();
        fixtureDef.shape = wallShape;
        fixtureDef.density = 5;
        return fixtureDef;
    };
    Sim.prototype.getParticles = function() {
        return this.world.particleSystems[0].GetPositionBuffer();
    };
    return Sim;
}());
var stage = new Stage(document.getElementById('canvas'));
var gravity = new b2Vec2(0, 10);
var world = new b2World(gravity);
var sim = new Sim(world);
// window.addEventListener('resize', e => 
// { 
// 	sim.onResize();
// 	stage.onResize();
// });
var simOutput = [];
var runFor = 10;

function playSim() {
        //sim.step();
        var particles = simOutput[frame];
        for (var i = 0; i < particles.length; i++) {
            var p = !stage.particles[i] ? stage.newParticle(0x666666) : stage.particles[i];
            p.position.set(particles[i].x, particles[i].y);
        }
        frame++;
        if (frame < simOutput.length)
            requestAnimationFrame(playSim);
        else
            requestAnimationFrame(realtimeTick);
    }
    playSim();
};

function getImageData(image) {
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext('2d');
    context.drawImage(image, 0, 0);
    return context.getImageData(0, 0, image.width, image.height);
}

function getPixel(imgData, percentX, percentY) {
    var x = Math.round((percentX / 100) * imageData.width);
    var y = Math.round((percentY / 100) * imageData.height);
    if (x < 0)
        x = 0;
    if (x > imageData.width)
        x = imageData.width;
    if (y < 0)
        y = 0;
    if (y > imageData.height)
        y = imageData.height;
    //console.log('x', x, 'y', y, 'width', imageData.width, 'height', imageData.height)
    var r, g, b, a, offset = x * 4 + y * 4 * imgData.width;
    if (offset + 3 > imgData.data.length)
        offset = imgData.data.length - 4;
    //if(percentX > 99) console.log(x)
    //if(percentY > 98 && percentX > 98) console.log(x, y)
    r = imgData.data[offset];
    g = imgData.data[offset + 1];
    b = imgData.data[offset + 2];
    var str = "0x" + componentToHex(r) + componentToHex(g) + componentToHex(b);
    //console.log(str);
    return parseInt(str);
}

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

编译

CSS

HTML

pixi.js liquid text effects, 水滴掉落到杯子中的文本特效动画。

html5, canvas, particle

编辑器支持Emmet

快捷键

pixi.js liquid text effects, 水滴掉落到杯子中的文本特效动画。

html5, canvas, particle

HTML5 NextParticle.js图像粒子化引擎演示实例

使用Perlin.js和Vector2.js构建的射线粒子背景动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：