p5实现pi动态变换动画效果代码-html代码-BFW代码库

p5实现pi动态变换动画效果代码

代码语言：html

所属分类：动画

代码描述：p5实现pi动态变换动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  



</head>

<body >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script>
      <script >
let piPic;
function preload() {
  piPic=loadImage('https://assets.codepen.io/4559259/pipic.png');
}
let a=4,b=10,c=0;
function setup() {
  createCanvas(500, 500);
  stroke(255);
  noFill();
  angleMode(DEGREES);
}

function draw() {
  background(0);
  w1=width/2
  pi1()
  pi2()
  pi3()
  pi4()
  
  
}
function pi1(){
  push();
  translate(w1/2,w1/2);
  t=frameCount/2;
  strokeWeight(0.5)
  for(let j=0;j<360;j=j+3){
    push()
    rotate(j)
    beginShape()
    for(let i=0;i<w1/2;i++){
      x=i
      y=a*cos(2*i*b/a)
      vertex(x,y)
    }
    endShape()
    pop()
  }
  a=w1/2*sin(t/2)
  b=w1/3*cos(t/2)
  image(piPic,-w1/2,-w1/2,w1,w1)
  circleWindow()
  pop()
}
function pi2(){
  push();
    translate(3*w1/2,3*w1/2);
    fill(0)
    rect(-w1/2,w1/2,w1,w1)
    noFill()
    strokeWeight(0.1)
    t=frameCount;
      for(let i=0;i<360;i++){
        x=90*cos(i)
        y=40*sin(i)*cos(t)
        circle(x,y,100)
      }
    image(piPic,-w1/2,-w1/2,w1,w1)
    circleWindow()
  pop()
.........完整代码请登录后点击上方下载按钮下载查看