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; }
</style>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/p5.js"></script>
</head>
<body translate="no">

<script id="rendered-js">
let particlesPerAttractor = 12;
let numAttractors         = 14;
let attractorSpeed        = 1;
let particleSpeed         = 8;
let iterations            = 120;
let arrowPeriod           = 10;

let lineWidth             = 2;

class Particle{
  constructor(parent, x, y){
    this.p       = parent;
    this.offset  = v2(x, y);
    this.reset();
  }
  reset(){
    this.pos  = v2(this.p.pos.x + this.offset.x, this.p.pos.y + this.offset.y);
    this.prev = this.pos.copy();
  }
  update(){
    let earlyExit = false;
    let v         = v2(0, 0);
    
    //dneg and dpos for color calculations based on closest pos and neg attractors
    let dpos = 1e6;
    let dneg = 1e6;
    for (let t of attractors){
      let v2 = t.pos.copy().sub(this.pos).mult(t.polarity);
      let d = v2.mag();
      if (d < dneg && t.polarity == -1) dneg = d;
      if (d < dpos && t.polarity ==  1) dpos = d;
      if (d < particleSpeed*1.2 && t.polarity ==  1) earlyExit = true;
      v.add(v2.div(d*d)); //divide by d for distance squared calc
    }
    
    //color
    // let hue = .3 + (.3*dneg + -.3*dpos)/(dneg + dpos);
    let hue = .8 - (.2*dneg + -.2*dpos)/(dneg + dpos);
    stroke(hue, 1, 1);
    
    //heading
    v = v.normalize();
    this.prev = this.pos.copy();
    this.pos.add(v.mult(particleSpeed));
    return earlyExit;
  }
  render(){
    line(this.prev.x, this.prev.y, this.pos.x, this.pos.y);
  }
  renderTri(){
    let a = this.prev.copy().sub(this.pos).heading.........完整代码请登录后点击上方下载按钮下载查看