p5实现包容的爱心跳动动画表白效果代码-html代码-BFW代码库

p5实现包容的爱心跳动动画表白效果代码

代码语言：html

所属分类：表白

代码描述：p5实现包容的爱心跳动动画表白效果代码

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

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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
html,
body {
  margin: 0;
  padding: 0;
  cursor: none;
}
canvas {
  display: block;
}
</style>


</head>

<body  >
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
      <script >
let particles = [],
  heart = [],
  heartWithGap = [],
  a = 0,
  s = 1,
  R;
const colors = ["#ffbe0b", "#fb5607", "#ff006e", "#8338ec", "#3a86ff"],
  easing = 0.032,
  num = 640;

class NoiseLoop {
  constructor(d, min, max) {
    this.d = d;
    this.min = min;
    this.max = max;
    this.cx = random(320);
    this.cy = random(320);
  }

  value(a) {
    let xoff = map(cos(a), -1, 1, this.cx, this.cx + this.d);
    let yoff = map(sin(a), -1, 1, this.cy, this.cy + this.d);
    let r = noise(xoff, yoff);
    return map(r, 0, 1, this.min, this.max);
  }
}

class Particle {
  constructor(c) {
    this.x = random(0, width);
    this.y = random(0, height);

    while (this.inside()) {
      this.x = random(0, width);
      this.y = random(0, height);
    }

    this.c = c;

    this.homeX = this.x;
    this.homeY = this.y;

    this.xNoise = new NoiseLoop(0.32, -width, width * 2);
    this.yNoise = new NoiseLoop(0.32, -height, height * 2);
    this.rNoise = new NoiseLoop(3.2, 8, 64);

    this.r = this.rNoise.value(0);

    this.insideDes = createVector(
      random([-width, width * 2]),
      random([-height, height * 2])
    );
  }

  inside() {
    // ray-casting algorithm based on
    // https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html/pnpoly.html
    let inside = false;
    for (
      let i = 0, j = heartWithGap.length - 1;
      i < heartWithGap.length;
      j = i++
    ) {
      const xi = heartWithGap[i].x,
        yi = heartWithGap[i].y;
      const xj = heartWithGap[j].x,
        yj = heartWithGap[j].y;

      const intersect =
        yi > this.y != yj > this.y &&
        this.x < ((xj - xi) * (this.y - yi)) / (yj - yi) + xi;
      if (intersect) inside = !inside;
    }

    return inside;
  }

  update() {
    // mouse
    .........完整代码请登录后点击上方下载按钮下载查看