p5实现涡旋线条动画绘制效果代码-html代码-BFW代码库

p5实现涡旋线条动画绘制效果代码

代码语言：html

所属分类：动画

代码描述：p5实现涡旋线条动画绘制效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body {
      overflow: hidden;padding:0;margin:0;
    }
    </style>

</head>

<body>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script>
    <script>
        var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}console.clear();
    
    var config = {
      attractor: 'lorenz',
      dt: 0.005,
      maxLife: 1000,
      minLife: 100,
      maxTailLength: 80,
      minTailLength: 5,
      numberOfParticles: 75,
      segmentsPerFrame: 1,
      spawnRange: 10,
      strokeWeight: 0.5,
      tailOpacity: 190,
      zoom: 12,
    
      minRed: 0,
      maxRed: 100,
      minGreen: 100,
      maxGreen: 255,
      minBlue: 100,
      maxBlue: 255 };
    
    
    var particles = [];
    
    function setup() {
      createCanvas(window.innerWidth, window.innerHeight);
      loadUI();
    
    }
    
    function draw() {
      while (particles.length < config.numberOfParticles)
      {
        var c = color(random(config.minRed, config.maxRed), random(config.minGreen, config.maxGreen), random(config.minBlue, config.maxBlue), config.tailOpacity),
        life = random(config.minLife, config.maxLife),
        tailLength = random(config.minTailLength, config.maxTailLength),
        x = random(-config.spawnRange, config.spawnRange),
        y = random(-config.spawnRange, config.spawnRange),
        z = random(-config.spawnRange, config.spawnRange);
        particles.push(new Particle({ x: x, y: y, z: z }, config.dt, c, tailLength, config.zoom, life));
      }
    
      background(0);
      strokeWeight(config.strokeWeight);
      translate(width / 2, height / 2);
      for (var j = particles.length - 1; j >= 0; j--) {
        for (var i = 0; i < config.segmentsPerFrame; i++) {
          particles[j].flow(config.attractor);
        }
        particles[j].display();
        if (particles[j].dead || j >= config.numberOfParticles) {
          particles.splice(j, 1);
        }
      }
    }
    
    function loadUI() {
      var gui = new dat.GUI();
    
      gui.add(config, 'attractor', [
      'aizawa', // doesnt look good
      'dequanli',
      'halvorsen',
      'lorenz']);
      gui.add(config, 'dt').min(0.00001).max(0.01).step(0.0001);
      gui.add(config, 'maxLife').min(100).max(2500).step(1);
      gui.add(config, 'minLife').min(1).max(2500).step(1);
      gui.add(config, 'maxTailLength').min(1).max(500).step(1);
      gui.add(config, 'minTailLength').min(1).max(500).step(1);
      gui.add(config, 'numberOfParticles').min(1).step(1).max(250);
      gui.add(config, 'segmentsPerFrame').min(1).step.........完整代码请登录后点击上方下载按钮下载查看