使用P5.js实现的萤火虫飞舞动画效果

HTML5 Birds Animation，模拟在一定范围内随机游走或飞舞的动物。

html5, bird

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/*
  Click canvas to reset.
*/
function Particle() {
  this.pos = createVector(random(windowWidth), random(windowHeight));
  this.tail = [];
  this.tailLength = 7;
}

Particle.prototype.move = function() {
  if(this.tail.length > this.tailLength) {
    this.tail.splice(0, 1);
  }
  this.tail.push(this.pos.copy());

this.pos.x += random(-particleStepMax, particleStepMax);
  this.pos.y += random(-particleStepMax, particleStepMax);
}

Particle.prototype.draw = function() {
  this.tail.forEach(pos => {
    line(this.pos.x, this.pos.y, pos.x, pos.y);
  });
}

var particles;
var particleStepMax;

function setup() {
  cursor(HAND);
  particleStepMax = 6;
  initParticles();
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255);
  particles.forEach(p => {
    p.move();
    p.draw();
  });
}

function initParticles() {
  particles = [];
  for(var i = 0; i < 40; i++) {
    particles.push(new Particle());
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function mouseClicked() {
  initParticles();
  background(255);
}

编译

CSS

HTML

HTML5 Birds Animation，模拟在一定范围内随机游走或飞舞的动物。

html5, bird

编辑器支持Emmet

快捷键

HTML5 Birds Animation，模拟在一定范围内随机游走或飞舞的动物。

html5, bird

使用P5.js实现的3D空间粒子追踪动画

使用P5.js实现的水面波动交互动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：