p5实现旋风动画旋转代码-html代码-BFW代码库

p5实现旋风动画旋转代码

代码语言：html

所属分类：动画

代码描述：p5实现旋风动画旋转代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html, body {
          margin: 0;
        }
        
        #container {
          background-color: hsl(230, 91%, 43%);
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        canvas {
          border: 1px solid #fff;
        }
    </style>




</head>

<body>
    <main id="container"></main>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.5.0.js"></script>
    <script>
        function createAngle(angleControl) {
          const angle = angleControl * Math.PI;
          return angle;
        }
        
        function createDot(radius, angle, width, strokeAlpha, color) {
          
          const dot = {
            radius: radius,
            angle: angle,
            width: width,
            strokeAlpha: strokeAlpha,
            color: color,
            direction: 1,
          };
          return dot;
        }
        
        function positionDot(radius, angle) {
          const position = {
            x: radius * (Math.cos(createAngle(angle))),
            y: radius * (Math.sin(createAngle(angle))),
          };
          return position;
        }
        
        const circleContainers = 10;
        let radius;
        let angle = 1;
        const dotNumber = 80;
        const dotWidthMax = 10;
        const dotWidthMin = 2;
        let dotInfos = [];
        
        function setup() {
          colorMode(HSL);
          angleMode(DEGREES);
        
          const myCanvas = createCanvas(700, 700);
          myCanvas.parent("container");
          background(230, 91, 43);
          radius = (width * .9) / 2;
          strokeWeight(1)
        
          for (let j = 1; j <= circleContainers; j++) {
        
            const minRadius = (.........完整代码请登录后点击上方下载按钮下载查看