p5实现奥运五环粒子风化合成动画效果-html代码-BFW代码库

p5实现奥运五环粒子风化合成动画效果

代码语言：html

所属分类：粒子

代码描述：p5实现奥运五环粒子风化合成动画效果

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


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

<style>
html, body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  height: 100%;
}

canvas {
  box-shadow: 0px 1px 5px 2px black;
}
</style>

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

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/p5.js"></script>
<script >
const SCALAR = 150 / 2;
const DEST_SCALAR = 20;
const rings = [];

function ease(x) {
  return (1 / PI) * asin(2 * x - 1) + 0.5
}

function ring(pos, points, col, gap) {
  this.pos = pos;
  this.points = points;
  this.col = col;
  this.gap = gap;


  this.display = () => {
    stroke(this.col);
    push();
    translate(this.pos.x, this.pos.y);
    // rotate(-HALF_PI); //rotate test
    
    for (const point of this.points) {
      point.display();
    }

    pop();
  }

  this.update = () => {
    for (const point of this.points) {
      point.update();
    }
  }
}


function p(degree, scalar, delay, dest) {
  this.scalar = scalar;
  this.sp = createVector(cos(convertToRadians(degree)) * this.scalar, sin(convertToRadians(degree)) * this.scalar);
  this.pos = createVector(cos(convertToRadians(degree)) * this.scalar, sin(convertToRadians(degree)) * this.scalar);
  this.ep = createVector(cos(convertToRadians(degree)) * (this.scalar + dest[0]), sin(convertToRadians(degree)) * (this.scalar + dest[1]));
  this.delay = delay;
  this.percent = 0.0;

  this.display = () => {
    point(this.pos.x, this.pos.y);
  };

  this.update = () => {
    if (millis() > this.delay) {
      if (this.percent < 0.5) {
        const elapsed = map(this.percent, 0.0, 0.5, 0.0, 1);

        const l = createVector(
          lerp(this.sp.x, this.ep.x, ease(elapsed)),
          lerp(this.sp.y, this.ep.y, ease(elapsed))
        );

        const change = p5.Vector.sub(l, this.ep);

        this.pos.add(change);

        this.percent += 0.01;
      } else if (this.percent >= 0.5 && this..........完整代码请登录后点击上方下载按钮下载查看