p5.j​​s中图形中的粒子系统

如何解决p5.j​​s中图形中的粒子系统

我正在尝试在基本形状的图形中创建一个粒子系统。粒子应从最左侧结构的顶部发出（注释为“标题”）并向下流动，类似于喷泉。我了解了大部分的Particle类，但是在运行草图时会出现与变量相关的错误消息。

基于答案应用了一些编辑，但无法显示粒子系统。下面列出了修改后的代码。

var particles = [ ];

function Particle() {
  initialization() 
    this.x = 135;
    this.y = 75;
    this.vx = random(-1,1);
    this.vx = random(-5,-1);
    this.alpha = 255;
  
  update() 
    this.x += this.vx;
    this.y += this.vy;
    this.alpha -= 5;
  
  show() 
    noStroke();
    fill ('#1E740C');
    ellipse (this.x,this.y,8,8);
}

function setup() {  
  createCanvas(600,400);
  
  //Particle Array
  for(var i = 0; i < particles.length; i++) {
  particles[i] = new Particle();
  }
}

function draw() {  
  background('#87D9E8'); 
  stroke(0);
  strokeWeight(1);
  
    //Loop array and alter each element
  for(var i=0; i < particles.length; i++) {
    particles[i].show();
    particles[i].update();
  }
  
//SLIME GEYSER
  
///Center Pipe
  fill ('#1FA600');
  rect(340,75,20,290);
  rect(340,130,20);
  
////Body
  fill ('#1FA600');
  ellipse (305,495,450,400);
  
///Heading (Spout)
 //rect(100,140,80,15); //Top segment
 //triangle (100,150,180,100); //"Neck" segment
 // rect(120,40,40); //SPOUT TIP
 // ellipse(140,115,100,45); //Spout "bulb"  
  rect(120,350,30); //Bottom pipe
  rect(100,290,60,20); //Bottom segment
  rect(100,277,15); //Midway segment
  
//////Pressure Condenser Unit Grille
  fill('#989E9B');
  rect(390,135,130);
  line (410,305,410,100);
  line (430,430,100);
  line (450,100);
  line (470,470,100);
  line (490,490,100);
  line (510,510,100);
  
////Pressure Condenser Unit
  fill ('#1FA600');
  arc(460,265,HALF_PI+HALF_PI);
  arc(460,PI,0);
  
////Tube
  noFill();
  stroke('#1FA250');
  strokeWeight(10);
  beginShape();
  vertex(110,270);
  quadraticVertex(10,200,110,150);
  endShape();

}

解决方法

首先，您不必声明全局的Particle变量，该类便可以这样做。

您没有在粒子数组上调用show函数，因此它不会显示粒子。

相反，您可以执行以下操作

function Particle() {
                                
                this.x = 120; 
                this.y = 200; 
                this.vx = random(-1,1); 
                this.vy = random(-5,1); 
                
                this.alpha = 255; 
            
                this.show = function() { 
                                noStroke(); 
                                fill("#1E740C"); 
                                
                                ellipse(this.x,this.y,8,8);
                                
                }
                
                this.update = function() {
                                this.x += this.vx;
                                this.y += this.vy;
                                //console.log("run")
                }
}

var p = [];

function setup() {
    createCanvas(345,400);
                
                for(var i = 0; i < 10; i++) {
                                p[i] = new Particle();
                }
}

function draw() {
                
                background(0);
                
                for(var i = 0; i < p.length; i++) {
                                
                                p[i].show();
                                p[i].update()
                }
}

这可能是创建粒子系统的最简单方法。如果此答案无济于事，请查看以下链接： CodingTrain：https://thecodingtrain.com/CodingChallenges/078-simple-particle-system.html

或查看p5自己的示例： https://p5js.org/examples/simulate-multiple-particle-systems.html