p5实现虫洞动画效果代码-html代码-BFW代码库

p5实现虫洞动画效果代码

代码语言：html

所属分类：粒子

代码描述：p5实现虫洞动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body{
        background: black;
    }
</style>
  <script>
window.requestAnimFrame = (function() {
  return (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback);
    }
  );
});

function init(elemid) {
  let canvas = document.getElementById(elemid),
    c = canvas.getContext("2d"),
    w = (canvas.width = window.innerWidth),
    h = (canvas.height = window.innerHeight);
  c.fillStyle = "rgba(30,30,30,1)";
  c.fillRect(0, 0, w, h);
  return {c:c,canvas:canvas};
}
</script>

</head>
<body>

<canvas id="canvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5-0.5.1.js"></script>

<script >
    new p5();
window.onload = function () {
  //functions definition

  //class definition
  class segm {
    constructor(x, y, l) {
      this.b = Math.random() * 1.9 + 0.1;
      this.x0 = x;
      this.y0 = y;
      this.a = Math.random() * 2 * Math.PI;
      this.x1 = this.x0 + l * Math.cos(this.a);
      this.y1 = this.y0 + l * Math.sin(this.a);
      this.l = l;
    }
    update(x, y) {
      this.x0 = x;
      this.y0 = y;
      this.a = Math.atan2(this.y1 - this.y0, this.x1 - this.x0);
      this.x1 = this.x0 + this.l * Math.cos(this.a);
      this.y1 = this.y0 + this.l * Math.sin(this.a);
    }
  }
  class rope {
    constructor(tx, ty, l, b, slq, typ) {
      if (typ == "l") {
        this.res = l / 2;
      } else {
        this.res = l / slq;
      }
      this.type = typ;
      this.l = l;
      this.segm = [];
      this.segm.push(new segm(tx, ty, this.l / this.res));
      for (let i = 1; i < this.res; i++) {
        this.segm.push(
          new segm(this.segm[i - 1].x1, this.segm[i - 1].y1, this.l / this.res)
        );
      }
      this.b = b;
    }
    update(t) {
      this.segm[0].update(t.x, t.y);
      for (let i = 1; i < this.res; i++) {
        this.segm[i].update(this.segm[i - 1].x1, this.segm[i - 1].y1);
      }
    }
    show() {
      if (this.type == "l") {
        c.beginPath();
        for (let i = 0; i < this.segm.length; i++) {
          c.lineTo(this.segm[i].x0, this.segm[i].y0);
        }
        c.lineTo(
          this.segm[this.segm.length - 1].x1,
          this.segm[this.segm.length - 1].y1
        );
        c.strokeStyle = "white";
        c.lineWidth = this.b;
        c.stroke();

        c.beginPath();
        c.arc(this.segm[0].x0, this.segm[0].y0, 1, 0, 2 * Math.PI);
        c.fillStyle = "white";
        c.fill();

        c.beginPath();
        c.arc(
          this.segm[this.segm.length - 1].x1,
          this.segm[this.s.........完整代码请登录后点击上方下载按钮下载查看