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

Demo of NextParticle，能自动识别图像并把图像转换成粒子群动画。

js, particle

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/* https://nextparticle.nextco.de */

var nextParticle = new NextParticle(document.all.logo);
nextParticle.particleGap = 2;
nextParticle.noise = 30;
nextParticle.mouseForce = 30;
nextParticle.size = Math.max(window.innerWidth, window.innerHeight);
nextParticle.colorize = false;
nextParticle.tint = '#FF00FF';
nextParticle.minWidth = nextParticle.size;
nextParticle.minHeight = nextParticle.size;
nextParticle.maxWidth = nextParticle.size;
nextParticle.maxHeight = nextParticle.size;

var redraw = function() {
    nextParticle.initPosition = "none";
    nextParticle.initDirection = "none";
    nextParticle.fadePostion = "none";
    nextParticle.fadeDirection = "none";
    nextParticle.minWidth = nextParticle.size;
    nextParticle.minHeight = nextParticle.size;
    nextParticle.maxWidth = nextParticle.size;
    nextParticle.maxHeight = nextParticle.size;
    nextParticle.color = nextParticle.colorize ? nextParticle.tint : '';
    nextParticle.start();
};

var gui = new dat.GUI();
gui.add(nextParticle, "particleGap", 1, 10, 1).onChange(redraw);
gui.add(nextParticle, "noise", 0, 200, 1).onChange(redraw);
gui.add(nextParticle, "mouseForce", -200, 200, 1).onChange(redraw);
gui.add(nextParticle, "size", 100, 800, 1).onChange(redraw);
gui.add(nextParticle, "colorize").onChange(redraw);
gui.addColor(nextParticle, "tint").onChange(redraw);

window.onresize(function() {
    nextParticle.width = window.innerWidth;
    nextParticle.height = window.innerHeight;
    redraw();
});

编译

CSS

HTML

Demo of NextParticle，能自动识别图像并把图像转换成粒子群动画。

js, particle

编辑器支持Emmet

快捷键

Demo of NextParticle，能自动识别图像并把图像转换成粒子群动画。

js, particle

HTML5 SVG基于Matter.js实现的粒子管道流动动画

HTML5 Perlin.js带发光效果的粒子特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：