4-3粒子模擬

class Particle{

  constructor(){

    this.pos = createVector(width/2,height/2)

    this.vel = p5.Vector.random2D()

    this.acc = p5.Vector.random2D().mult(0.1)

  }

  update(){

    this.pos.add(this.vel)

    this.vel.add(this.acc)

    this.acc.mult(0.999)

  }

  draw(){

    push()

      fill(255)

      noStroke()

      translate(this.pos.x,this.pos.y)

      ellipse(0,0,2,2)

    pop()

  }

}

​

var particles = []

var midPoint

function setup() {

  createCanvas(windowWidth,windowHeight);

  background(0);

  for(var i=0;i<2000;i++){

    particles.push(new Particle)

  }

  midPoint = createVector(width/2,height/2)

}

​

function draw() {

  background(0,10)

  //get the boundary radius

  var r = pow(frameCount,0.95)

  //draw the boundary

  push()

    stroke(255,10)

    noFill()

    ellipse(width/2,height/2,r*2,r*2) 

  pop()

  for(var i=0;i<particles.length;i++){

    particles[i].update() 

    particles[i].draw() 

    //give partices reverse speed if it exceed constrain circle area

    var angle = particles[i].pos.copy().sub(midPoint).heading()

    if (particles[i].pos.dist(midPoint)>r + sin(angle/20 + frameCount/30)/2 ){

      //get the dist to circle boundary

      var distToCirBound = particles[i].pos.dist(midPoint)-r

      //get delta vector of particles position and mid point , then constraint it to modify the force

      var pullVel = midPoint.copy().sub(particles[i].pos).limit(5).normalize().mult( distToCirBound*3 )

      //apply force

      particles[i].vel.add(pullVel)

    }

  }

  // ellipse(mouseX, mouseY, 20, 20);

}