涟漪粒子动画效果-html代码-BFW代码库

涟漪粒子动画效果

代码语言：html

所属分类：粒子

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Witches&#39; Brew</title>
<style>
      body {
  overflow: hidden;
  background: linear-gradient(to right, hsl(272, 76%, 16%), #572584);
  min-height: 100vh;
}

#canvas {
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /*border-radius: 50%;*/
  background: hsl(272, 76%, 16%);
}

    </style>

</head>
<body translate="no">
<canvas id="canvas"></canvas>

<script src='http://repo.bfw.wiki/bfwrepo/js/qzgbqx.js'></script>
<script>
      //stats: https://codepen.io/giaco/pen/qzgbqx.js
let stats = new Stats();
stats.showPanel(1);
document.body.appendChild(stats.dom);

let ctx = canvas.getContext("2d");
let cw = canvas.width = window.innerWidth,
ch = canvas.height = window.innerHeight;

let rid = null; // request animation id

let numParticles = 1000;
let baseSpeed = 2;

let size = 5; //vector size
let k = 0.008; // change cell size
let rows = ~~(ch / size) + 2;
let cols = ~~(cw / size) + 2;

let flowField = [];

class Particle {
  constructor(i) {
    this.i = i;
    this.pos = { x: Math.random() * cw, y: Math.random() * ch };
    this.vel = { x: 0, y: 0 };
    this.base = (1 + Math.random()) * -baseSpeed;
    this.r = 2;

    this.color = `hsla(100, ${~~(Math.random() * 55) + 45}%, ${~~(
    Math.random() * 55) +
    10}%, 1)`;
  }

  update() {
    this.pos.x += this.vel.x;
    this.pos.y += this.vel.y;
  }

  show() {
    ctx.beginPath();
    ctx.arc(this.pos.x, this.pos.y, this.r, 0, 2 * Math.PI);
    ctx.fillStyle = this.color;
    ctx.fill();
  }

  edges() {
    if (
    this.pos.x > cw ||
    this.pos.x < 0 ||
    this.pos.y > ch ||
    this.pos.y < 0)
    {
      this.pos.y = Math.random() * ch;
      this.pos.x = Math.random() * cw;
    }
  }

  follow() {
    let x = ~~(this.pos.x / size);
    let y = ~~(this.pos.y / size);
    let index = x + y.........完整代码请登录后点击上方下载按钮下载查看