p5实现柏林旋转星系粒子流动画效果代码

代码语言:html

所属分类:粒子

代码描述:p5实现柏林旋转星系粒子流动画效果代码

代码标签: p5 柏林 旋转 星系 粒子流

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

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

<head>

    <meta charset="UTF-8">





    <style>
        body {
          padding: 0;
          margin: 0;
        }
    </style>




</head>

<body>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.dom.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.sound.min.js"></script>
    <script>
        let particles = [];
        
        function setup() {
          createCanvas(windowWidth, windowHeight);
          background(50);
        
          // less jiggle less speed farthest
          for (let i = 0; i <= 500; ++i) {
            particles.push(new Particle(200, 0.01, 0));
          }
        
          // more jiggle more speed fast
          for (let i = 0; i <= 300; ++i) {
            particles.push(new Particle(100, 0.005, 0.05));
          }
        
          // most jiggle most speed fastest
          for (let i = 0; i <= 300; ++i) {
            particles.push(new Particle(0, 0.02, 0.3));
          }
        }
        let zoff = 0;
        
        // let a = 0;
        // let r = 50;
        function draw() {
          background(50, 60);
          translate(width / 2, height / 2);
          // fill(200);
          // stroke(200);
        
          particles.forEach((particle) => {
            particle.render();
          });
        }
        
        class Particle {
         .........完整代码请登录后点击上方下载按钮下载查看

网友评论0