canvas多彩点随机自动喷绘动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：canvas多彩点随机自动喷绘动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  background: black;
}
</style>



</head>

<body  >
  <canvas id="canvas"></canvas>

      <script  >
/* eslint-disable no-new */
/* eslint-disable prettier/prettier */
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const width = canvas.width;
const height = canvas.height;
canvas.style.background = "#000";
canvas.style.filter = "blur(1px) ";
//canvas.style.filter = "blur(2px) contrast(20) brightness(0.8)";
// const types = ["red", "blue", "green", "yellow", "purple", "orange", "darkblue", "pink", "teal", "magenta", "cyan", "lime", "Chartreuse"];
const types=['red','green','blue', 'pink', 'cyan', 'magenta', 'yellow', 'black', 
             'white', 'orange', 'gray', 'brown', 'lime', 'purple', 'silver', 'navy', 'aqua',
                'teal', 'olive', 'maroon', 'darkred', 'fuchsia', 'darkblue', 'darkgreen', 'darkcyan', 'darkmagenta', 'darkyellow', 'darkgray', 'darkkhaki', 'darkgoldenrod',
                 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkturquoise', 'darkviolet',
                 'deeppink', 'deepskyblue', 'dimgray', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'gold', 'goldenrod', 'greenyellow',
                'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral',
            //    'lightcyan', 'lightgoldenrodyellow', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightsteelblue',
              //  'lightyellow', 'limegreen', 'linen', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen',
              //  'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'oldlace', 'olivedrab', 'orangered', 'orchid',
              //  'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'plum', 'powderblue', 'rosybrown', 'royalblue', 'saddlebrown',
               // 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'skyblue', 'slateblue', 'slategray', 'snow', 'springgreen'
]
function random(min, max) { return Math.random() * (max - min) + min; }
class Particle {
  constructor(x, y, vx, vy, ax, ay, r, type) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.vx = vx;
    this.vy = vy;
    this.ax = ax;
    this.ay = ay;
    this.tx = 0;
    this.ty = 0;
    this.type = type;
    this.age = 0;
    this.birthdate = Date.now();
  }

  draw(particles) {

    // count number of partiles less than 100px away
    let count = 0;
    for (let i = 0; i < particles.length; i++) {
      const dx = this.x - particles[i].x;
      const dy = this.y - particles[i].y;
      const dist = Math.sqrt(dx * dx + dy * dy);
      if (dist < 100) {
        count++;
      }
    }
    if(this.r * count /24 > 2) {
      let sz = this.r * count/24;
      sz = sz > 8 ? 8 : sz;
      sz = sz < 4 ? 4 : sz;
      ctx.beginPath();
      ctx.arc(this.x, this.y, sz, 0, Math.PI * 2);
      ctx.fillStyle = this.type;
      ctx.fill();
    }
  }
}

class AttractionRepulsionRule {
  constructor(strength, minDist, maxDist, forceVector) {
    this.strength = strength;
    this.minDist = minDist;
    this.maxDist = maxDist;
    this.forceVector = forceVector;
  }

  adjust(vecToAdd) {
    this.forceVector.x += vecToAdd.x;
    this.forceVector.y += vecToAdd.y;
  }

  apply(p1, p2, i, j) {
    const dx = p2.x - p1.x;
    const dy = p2.y - p1.y;
    const dist = Math.sqrt(dx * dx + dy * dy);
    if (dist < this.minDist || dist < p1.r + p2.r|| dist > this.maxDist) return;
    const force = p1.r * p2.r * this.strength / (dist * dist);
    const zx = (force * dx * this.forceVector.x) / dist;
    const zy = (force * dy * this.forceVector.y) / dist;

    p1.ax += zx;
    p1.ay += zy;

    // adjust the rule  based on the distance between the particles
    const adjVec = { x: zx / dist * dist, y: zy / dist * dist };

    if(adjVec.x&&adjVec.y&&Math.random()>0.999999999)this.adjust(adjVec);
    
    return [p1]
  }
}

class Ruleset {
  rules;
  constructor() {
    this.rules = {};
  }

  addRule (type1, type2, rule) {
    if (!this.rules[type1]) this.rules[type1] = {};
    this.rules[type1][type2] = rule;
  }

  getRule(type1, type2) {
    if (!this.rules[type1]) return null;
    return this.rules[type1][type2];
  }

  apply (p1, p2, i, j) {
    let rule = this.rules[p1.type][p2.type];
    if(!rule) rule = this.rules[p2.type][p1.type];
    if (rule) return rule.apply(p1, p2, i, j);
    return [];
  }

  static createRuleset(types) {
    const rules = new Ruleset();
    types.forEach((type1) => {
      types.forEach((type2) => {
       // if (type1 === type2) return;
        const minDist = random(5, 10.........完整代码请登录后点击上方下载按钮下载查看