angles

        main(_p5) {
                let p5 = _p5;
                let angle = 0;
                p5.setup=()=> {
                    p5.createCanvas(p5.windowWidth-30, p5.windowHeight-100);
                    p5.angleMode(p5.RADIANS)
                }
                p5.draw=()=> {
                    p5.background(146,83,161);
                    p5.noStroke();
                    p5.fill(240,99,164);
                    p5.rectMode(p5.CENTER);
                    p5.translate(200,200);
                    p5.rotate(angle);
                    p5.rect(0,0,256,32);
                    angle+=0.05;
                    }
                }

angular motion demo

        main( _p5 ) {
                let p5 = _p5 ;
                let angle = 0 ;

                let angleV = 0;
                let angleA = 0.00001;

                let cWidth =  p5.windowWidth/2;
                let cHeight = p5.windowHeight/2;


                p5.setup=()=> {

                    p5.createCanvas(cWidth, cHeight);
                    p5.angleMode(p5.RADIANS);

                }
                p5.draw=()=> {
                    angleA = p5.map(p5.mouseX,0,p5.width,-0.01,0.01)
                    angleV = p5.constrain(angleV,-0.2,0.2)
                    p5.background( 146 , 83 , 161 );
                    p5.noStroke();
                    p5.fill( 240 , 99 , 164 );
                    p5.rectMode( p5.CENTER );
                    p5.translate( cWidth/2 , cHeight/2);
                    p5.rotate( angle );
                    p5.rect( 0 , 0 , 256 , 32 );
                    angle += angleV;
                    angleV+=angleA;

                }
            }

draw function

            main(_p5) {
                let p5 = _p5;

                let yPos= 0
                p5.setup=()=> {
                    p5.createCanvas((p5.windowWidth-30)/4, (p5.windowHeight-100)/2);

                    p5.frameRate(60);

                }

                p5.draw=()=> {
                    p5.background(204);
                    yPos = yPos - 1;
                    if (yPos < 0) {
                        yPos = p5.height;
                    }
                    p5.strokeWeight(4);
                    if(yPos%10<5){
                        p5.stroke(yPos%256,256-yPos%256,p5.random(0,255))
                        p5.line(0, yPos, p5.width, yPos);
                    }

                }
            }

describe function

triangle function

<template>
  <div class="box">
    <div id="triangle"></div>
  </div>
</template>
<script>
//vue中使用P5的方式
import P5 from "../../.vuepress/resource/p5";

export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    document.getElementById('triangle').innerHTML = ''
    new P5(this.main, "triangle");
  },
  // "谢尔宾斯基"(笑)
  methods: {
    main(_p5) {
      let p5 = _p5;
      let i = 0;
      let num = 5;

      let width = p5.windowWidth - 30;
      let height = p5.windowHeight - 100;
      let pointa, pointb, pointc;

      p5.setup = () => {
        p5.createCanvas(width / 2, height / 2);
      };
      p5.draw = () => {
        p5.describe("pink square with red heart in the bottom right corner");
        p5.background("pink");
        // p5.fill('red');
        // p5.noStroke();
        let originPoints = [
          p5.height / 2,
          0,
          0,
          (p5.height * p5.sqrt(3)) / 2,
          p5.height,
          (p5.height * p5.sqrt(3)) / 2,
        ];
        p5.triangle(
          originPoints[0],
          originPoints[1],
          originPoints[2],
          originPoints[3],
          originPoints[4],
          originPoints[5]
        );
        pointb = originPoints;
        pointc = originPoints;
        pointa = originPoints;
        while (originPoints[0] - originPoints[2] > 10) {
          pointa = this.getPoint(
            originPoints[0],
            originPoints[1],
            originPoints[2],
            originPoints[3],
            originPoints[4],
            originPoints[5]
          );
          p5.triangle(
            pointa[0],
            pointa[1],
            pointa[2],
            pointa[3],
            pointa[4],
            pointa[5]
          );
          pointb = this.getPointB(
            originPoints[0],
            originPoints[1],
            originPoints[2],
            originPoints[3],
            originPoints[4],
            originPoints[5]
          );
          p5.triangle(
            pointb[0],
            pointb[1],
            pointb[2],
            pointb[3],
            pointb[4],
            pointb[5]
          );
          pointc = this.getPointC(
            originPoints[0],
            originPoints[1],
            originPoints[2],
            originPoints[3],
            originPoints[4],
            originPoints[5]
          );
          p5.triangle(
            pointc[0],
            pointc[1],
            pointc[2],
            pointc[3],
            pointc[4],
            pointc[5]
          );

          originPoints = this.getPoint(
            originPoints[0],
            originPoints[1],
            originPoints[2],
            originPoints[3],
            originPoints[4],
            originPoints[5]
          );
        }
      };
    },

    getPoint(x1, y1, x2, y2, x3, y3) {
      return [
        x1,
        y1,
        (x1 + x2) / 2,
        (y1 + y2) / 2,
        (x1 + x3) / 2,
        (y1 + y3) / 2,
      ];
    },
    getPointB(x1, y1, x2, y2, x3, y3) {
      return [
        (x1 + x2) / 2,
        (y1 + y2) / 2,
        x2,
        y2,
        (x2 + x3) / 2,
        (y2 + y3) / 2,
      ];
    },
    getPointC(x1, y1, x2, y2, x3, y3) {
      return [
        (x3 + x1) / 2,
        (y3 + y1) / 2,
        (x2 + x3) / 2,
        (y3 + y2) / 2,
        x3,
        y3,
      ];
    },
  },
};
</script>
<style scoped>
#triangle {
  max-width: 100%;
  /* max-height: 80%; */
  overflow: hidden;
}
</style>

极坐标 polar coordinates

<template>
  <div class="box">
    <div id="polar-coordinates"></div>
    <p>半径减小的幅度</p>
    <el-input-number
      v-model="deleteNumber"
      placeholder="请输入减小的幅度"
      width="200"
      :step="0.01"
    ></el-input-number>
    <p>旋转的速度</p>
    <el-input-number
      v-model="rotateSpeed"
      placeholder="请输入旋转的速度"
      width="200"
      :step="0.01"
    ></el-input-number>
    <p>选择颜色</p>
    <el-color-picker v-model="color1" />
  </div>
</template>
<script>
//vue中使用P5的方式
import P5 from "../../.vuepress/resource/p5";

export default {

  data() {
    return {
      deleteNumber: 0.03,
      rotateSpeed: 1,
      color1:'#abcde1'

    };
  },
  watch:{
      deleteNumber(value){
          console.log(typeof value)
      }
  },
  setup(){
  },
  created() {},
  mounted() {
    document.getElementById('polar-coordinates').innerHTML = ''
    new P5(this.main, "polar-coordinates");
  },
  // 极坐标
  methods: {
    main(_p5) {
      let p5 = _p5;
      let angle = p5.PI / 4;
      let r = 150;
      let width = p5.windowWidth - 30;
      let height = p5.windowHeight - 100;
      p5.setup = () => {
        p5.createCanvas(400, 400);
        // p5.frameRate(60);
      };
      p5.draw = () => {
        p5.background(0, 10);
        // p5.stroke(255);
        // p5.strokeWeight(4);
        // p5.noFill();
        // p5.circle(0, 0, r * 2);
        p5.translate(200, 200);
        // 定义点
        p5.strokeWeight(32);
        p5.stroke(this.color1);
        let x = r * p5.cos(angle);
        let y = r * p5.sin(angle);
        p5.point(x, y);
        r -= this.deleteNumber;
        if (r < 32) {
          r = 150;
        }
        angle += (p5.PI / 10) * this.rotateSpeed;
      };
    },
  },
};
</script>
<style scoped lang="scss">
@import "~element-plus/dist/index.css";

#polar-coordinates {
  max-width: 100%;
  max-height: 80%;
  overflow: hidden;
}
</style>

延伸（发动鼠标）

<template>
  <div class="box">
    <div id="polar-coordinates-demo"></div>
  </div>
</template>
<script>
//vue中使用P5的方式
import P5 from "../../.vuepress/resource/p5";
export default {
  data() {
    return {
      deleteNumber: 0.03,
      rotateSpeed: 1,
      color1:'#abcde1',
      value:0.01,

    };
  },
  setup(){
  },
  created() {},
  mounted() {
    document.getElementById('polar-coordinates-demo').innerHTML = ''
    new P5(this.main, "polar-coordinates-demo");
  },
  // 极坐标
  methods: {
    main(_p5) {
      let p5 = _p5;
      let r = 150;

      let TWO_PI = p5.PI * 2;


      p5.setup = () => {
        p5.createCanvas(400, 400);
      };

      p5.draw = () => {

        // console.log(document.getElementById('polar-coordinates-demo').getBoundingClientRect().top,window.innerHeight)
        let increment = p5.map(p5.mouseX,0,400,p5.PI,0.01)
        p5.translate(200, 200);

        p5.background(0,10);
        p5.stroke(255);
        p5.strokeWeight(4);
        p5.noFill();
        p5.beginShape();

        if(increment<0){
          increment=-increment
        }

        for(let i=0;i<TWO_PI;i+=increment){
          let x=r*p5.cos(i);
          let y=r*p5.sin(i);
          p5.vertex(x,y)
        }

        p5.endShape(p5.CLOSE);



      };
    },
  },
};
</script>
<style scoped lang="scss">
@import "~element-plus/dist/index.css";

#polar-coordinates-demo {
  max-width: 100%;
  max-height: 80%;
  overflow: hidden;
}
</style>