canvas粒子动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

"use strict";

class Vector {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

add(v) {
    return new Vector(
      this.x + v.x,
      this.y + v.y);
  }

addTo(v) {
    this.x += v.x;
    this.y += v.y;
  }

sub(v) {
    return new Vector(
      this.x - v.x,
      this.y - v.y);
  }
  
  subFrom(v) {
    this.x -= v.x;
    this.y -= v.y;
  }
  
  mult(n) {
    return new Vector(this.x * n, this.y * n);
  }
  
  multTo(n) {
    this.x *= n;
    this.y *= n;
  }
  
  div(n) {
    return new Vector(this.x / n, this.y / n);
  }
  
  setAngle(angle) {
    var length = this.getLength();
    this.x = Math.cos(angle) * length;
    this.y = Math.sin(angle) * length;
  }
  
  setLength(length) {
    var angle = this.getAngle();
    this.x = Math.cos(angle) * length;
    this.y = Math.sin(angle) * length;
  }
  
  getAngle() {
    return Math.atan2(this.y, this.x);
  }
  
  getLength() {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  }

getLengthSq() {
    return this.x * this.x + this.y * this.y;
  }

distanceTo(v) {
    return this.sub(v).getLength();
  }
  
  copy() {
    return new Vector(this.x, this.y);
  }
}
let canvas, ctx, field, w, h, fieldSize, columns, rows, noiseZ, particles, hue;
(noiseZ = 0);
particleCount = 150;
particleBCount = 1500;
particleSize = 25;
particleSizeB = 25;
fieldSize = 25;
fieldForce = 0.1;
noiseSpeed = 0.003;
sORp = false;
trailLength = 0.2;
hueBase = 250;
hueRange = 20;
maxSpeed = 0.2;
maxSpeedB = 0.03;
enableGUI = true;
glow = true;

var ui = new function() {
  this.particleCount = particleCount;
  this.particleBCount = particleBCount;
  this.fieldSize = fieldSize;
  this.fieldForce = fieldForce;
  this.noiseSpeed = noiseSpeed;
  this.simplexOrPerlin = sORp;
  this.trailLength = trailLength;
  this.maxSpeed = maxSpeed;
  this.maxSpeedB = maxSpeedB;
  this.hueBase = hueBase;
  this.hueRange = hueRange;
  this.glow = glow;

this.change = function() {
    fieldSize = ui.fieldSize;
    fieldForce = ui.fieldForce;
    noiseSpeed = ui.noiseSpeed;
    maxSpeed = ui.maxSpeed;
    maxSpeedB = ui.maxSpeedB;
    hueBase = ui.hueBase;
    hueRange = ui.hueRange;
    fieldColor = ui.fieldColor;
    glow = ui.glow;
    ui.simplexOrPerlin?sORp=1:sORp=0;
  }
  
  this.reset = function() {
    particleCount = ui.particleCount;
    particleBCount = ui.particleBCount;
    reset();
  }
  
  this.bgColor = function(){
    trailLength = ui.trailLength;
  }
}();

if(enableGUI){
  var gui = new dat.GUI();
  f1 = gui.addFolder("Color");
  f2 = gui.addFolder("Particle");
  f3 = gui.addFolder("Flowfield");
  f1.add(ui, "hueBase", 0, 360).onChange(ui.change);
  f1.add(ui, "hueRange", 0, 40).onChange(ui.change);
  f1.add(ui, "glow").onChange(ui.change);
  f2.add(ui, "particleCount", 30, 300).step(5).onChange(ui.reset);
  f2.add(ui, "particleBCount", 200, 2000).step(10).onChange(ui.reset);
  f2.add(ui, "trailLength", 0.05, 0.60).onChange(ui.bgColor);
  f2.add(ui, "maxSpeed", 0.05, 0.5).onChange(ui.change);
  f2.add(ui, "maxSpeedB", 0.02, 0.1).onChange(ui.change);
  f3.add(ui, "fieldSize", 10, 100).step(1).onChange(ui.change);
  f3.add(ui, "fieldForce", 0.05, 1).onChange(ui.change);
  f3.add(ui, "noiseSpeed", 0.001, 0.005).onChange(ui.change);
  f3.add(ui, "simplexOrPerlin").onChange(ui.change);
}

class Particle {
  constructor(x, y) {
    this.pos = new Vector(x, y);
    this.vel = new Vector(Math.random() - 0.5, Math.random() - 0.5);
    this.acc = new Vector(0, 0);
    this.hue = Math.random()*30-15;
    this.rad = Math.random()*(particleSize - 5) + particleSize;
  }

move(acc) {
    if (acc) {
      this.acc.addTo(acc);
    }
    this.vel.addTo(this.acc);
    this.pos.addTo(this.vel);
    if (this.vel.getLength() > maxSpeed) {
      this.vel.setLength(maxSpeed);
    }
    this.acc.setLength(0);
  }

wrap() {
    if (this.pos.x > w) {
      this.pos.x = 0;
    } else if (this.pos.x < -this.fieldSize) {
      this.pos.x = w - 1;
    }
    if (this.pos.y > h) {
      this.pos.y = 0;
    } else if (this.pos.y < -this.fieldSize) {
      this.pos.y = h - 1;
    }
  }
}

class ParticleB {
  constructor(x, y) {
    this.pos = new Vector(x, y);
    this.vel = new Vector(Math.random() - 0.5, Math.random() - 0.5);
    this.acc = new Vector(0, 0);
    this.hue = Math.random()*30-15;
    this.rad = Math.random()*(particleSizeB - 5) + particleSizeB;
  }

move(acc) {
    if (acc) {
      this.acc.addTo(acc);
    }
    this.vel.addTo(this.acc);
    this.pos.addTo(this.vel);
    if (this.vel.getLength() > maxSpeedB) {
      this.vel.setLength(maxSpeedB);
    }
    this.acc.setLength(0);
  }

canvas = document.querySelector("#canvas");
ctx = canvas.getContext("2d");
reset();
window.addEventListener("resize", reset);

function reset() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  //ctx.strokeStyle = fieldColor;
  noise.seed(Math.random());
  columns = Math.round(w / fieldSize) + 1;
  rows = Math.round(h / fieldSize) + 1;
  initParticles();
  initField();
}

function draw() {
  requestAnimationFrame(draw);
  calcField();
  noiseZ += noiseSpeed;
  drawBackground();
  drawParticles();
}

function drawBackground() {
  ctx.shadowBlur = 0;
  ctx.clearRect(0, 0, w, h);
  ctx.fillStyle = "rgba(0,0,0,1)";
  ctx.fillRect(0, 0, w, h);
}

draw();

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