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>

  
</head>

<body translate="no">
  <div id="controls"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5-1.9.0.js"></script>
      <script id="rendered-js" >
//see https://codepen.io/tientq64/pen/gOEvxqb

let numTypes  = 5;
let goalTypes = 5;
let drag      = .15;
let numPoints = 1000;
let maxTypes  = 20;

let rInt = (b, a=0) => Math.floor(Math.random()*(b-a) + a);

class Particle{
  constructor({x, y, type=random(), dx=0, dy=0}){
    Object.assign(this, {x, y, type, dx, dy});
  }
  addForce(p){
    let entry = controlGrid[floor(this.type*numTypes)][floor(p.type*numTypes)];
    let dx = this.x-p.x;
    let dy = this.y-p.y;
    let d  = dx*dx + dy*dy;
    let f  = ((entry.goalDist*100)**2-d);
    
    let ddx = dx*f*.001/d;
    let ddy = dy*f*.001/d;
    
    this.dx += ddx + ddy*entry.strafe;
    this.dy += ddy + ddx*entry.strafe*-1;
  }
  update(){
    let d = Math.hypot(this.dx, this.dy);
    d = max(d, 2)/2;
    this.x += this.dx/d;
    this.y += this.dy/d;
    this.angle += this.spin;
    this.dx *= drag;
    this.dy *= drag;
  }
  render(){
    fill(floor(this.type*numTypes)/numTypes, 1, 1);
    ellipse(this.x, this.y, 5);
  }
}

function setup (){
  pixelDensity(1);
  createCanvas();
  colorMode(HSB, 1, 1, 1);
  window.controlGrid = makeControlGrid();
  window.goalGrid    = makeControlGrid();
  windowResized();
  init();
}

let init = () => {
  points = [];
  for (let i = 0; i < numPoints; i++){
    points.push(new Particle({x:random()*width, y:random()*height}));
  }
}

let makeControlGrid = () => {
  controlGrid = [];
  strafeMod = random() < .3 .........完整代码请登录后点击上方下载按钮下载查看