p5实现流场粒子流flowfield动画效果代码-html代码-BFW代码库

p5实现流场粒子流flowfield动画效果代码

代码语言：html

所属分类：粒子

代码描述：p5实现流场粒子流flowfield动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
body {
  margin: 0;
  background: white;
}

main {
  width: 100vw;
  height: 100vh;
  display: flex;
}

canvas {
  margin: auto;
}
</style>




</head>

<body>
  


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script>
      <script  >
function Particle(x, y) {
  this.pos = createVector(x, y)
  this.speed = createVector(0, 0)
  this.update = function(field) {
    const x = int(map(this.pos.x, 0, width, 0, width/res))
    const y = int(map(this.pos.y, 0, height, 0, height/res))
    const force = field[x][y].copy()
    force.div(res/4)
    this.speed.add(force)
    this.speed.limit(2)
    this.pos.add(this.speed)
    this.pos.x = (this.pos.x + width) % width
    this.pos.y = (this.pos.y + height) % height
  }
  this.draw = function() {
    push()
    fill(0, 0, 200)
    noStroke()
    ellipse(this.pos.x, this.pos.y, res*0.4)
    pop()
  }
}

let res
const field = []
let particles = []

function start() {
  particles = []
  
  // for (let i = 0; i < 160; i++) {
  //   particles.push(
  //     new Particle(random(width), random(height))
  //   )
  // }
  
  for (let x = 0; x < width/res; x++) {
    for (let y = 0; y.........完整代码请登录后点击上方下载按钮下载查看