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.........完整代码请登录后点击上方下载按钮下载查看