p5实现跨纬度蠕虫三维蠕动动画效果代码-html代码-BFW代码库

p5实现跨纬度蠕虫三维蠕动动画效果代码

代码语言：html

所属分类：动画

代码描述：p5实现跨纬度蠕虫三维蠕动动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
  
<style>
* { margin:0; padding:0; } 
html, body { width:100%; height:100%; overflow: hidden; background:black;} 
canvas { display:block; }
#controls {
  z-index: 2;
  margin: 20px;
  position: absolute;
  top: 0; left: 0;
  color: white;
}
</style>


  
</head>

<body translate="no">
  <div id="controls"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.0.10.2.js"></script>
      <script  >
let maxPoints = 2000;
let addSpeed  = 4;

class Vec3{
  constructor(x, y, z, r=10){
    this.x = x;
    this.y = y;
    this.z = z;
    this.r = r;
    this.count = 0;
  }
  op(p, f){
    this.x = f(this.x, p.x != undefined ? p.x : p);
    this.y = f(this.y, p.y != undefined ? p.y : p);
    this.z = f(this.z, p.z != undefined ? p.z : p);
    return this;
  }
  plus  (p){return this.op(p, (a, b) => a + b)}
  minus (p){return this.op(p, (a, b) => a - b)}
  times (p){return this.op(p, (a, b) => a * b)}
  div   (p){return this.op(p, (a, b) => a / b)}
  distTo(p){return Math.hypot(this.x-p.x, this.y-p.y, this.x-p.z)}
  clone  (){return new Vec3(this.x, this.y, this.z, this.r)}
  updateRotation(){
    let {x, y, z} = this.clone().minus(origin);
    this.screenCoord = [
      (x*cx - y*sx),
      (y*cx + x*sx)*cy + sy*z
    ];
    this.depth = z*cy - sy*(y*cx + x*sx);
  }
  render(){
    this.count++;
    
    let amt = this.count/maxPoints;
    amt = 1-(cos(amt*addSpeed*TAU)+1)/2;
    amt = pow(amt, .5);
    
    noFill();
    stroke(this.hue, .3, 1, .05);
    strokeWeight(.5);
    
    let r = noise((this.x+frameCount)/200, this.y/200, this.z/200)*50 + 10;
    rect(...this.screenCoord, r*amt, r*amt);
  }
}

function setup (){
  pixelDensity(1);
  createCanvas();
  colorMode(HSB, 1, 1, 1);
  rectMode(CENTER);
  windowResized();
}

let points = [];
let r = (n) => random(-n, n);
let v3 = (x, y, z) => new Vec3(x, y, z);
let l3 = (p1, p2, c) => new Line(p1, p2, c);
let rPoint = (n) => v3(r(n), r(n), r(n));

let step = 0;
let d = 200;
let t = 0;
let p = 0;.........完整代码请登录后点击上方下载按钮下载查看