雷电

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var particles = [];

function Particle(){
  this.x = random()*width;
  this.y = random()*height;
  this.hue = random()*360;
  this.size = 2;
}

Particle.prototype.update = function(){
  var angle = noise(this.x/100, this.y/100);
  this.x += cos(angle*PI*4 - PI);
  this.y += sin(angle*PI*4 - PI);
  fill(this.hue, 100, 100, 3);
  noStroke();
  ellipse(this.x, this.y, this.size);
  this.size += .005;
  if (this.x < 0 || this.x > width || this.y < 0 || this.y > height){
    this.x = random()*width;
    this.y = random()*height;
    this.size = 2;
    // this.hue = floor(angle*10)*36;
  }
}

function setup(){
  createCanvas();
  colorMode(HSB, 360, 100, 100, 100);
  ellipseMode(CENTER);
  windowResized();
  // blendMode(ADD);
}

function draw(){
  for (var n = 0; n < 50; n++)
  for (var i = 0; i < particles.length; i++) particles[i].update();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  pixelDensity(1);
  
  particles = [];
  for (var i = 0; i < 100; i++){
    particles.push(new Particle());
  }
  
  clear();
  background(0);
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg