p5.js 绘图中的粒子系统

Question

我正在尝试在 basic-shape 绘图中创建粒子系统。粒子应从最左侧结构的顶部发射（注释为“标题”）并向下流动，类似于喷泉。我已经弄清楚了大部分粒子 class，但是当我运行绘制草图时会出现与变量相关的错误消息。

根据答案应用了一些编辑，但无法显示粒子系统。修改后的代码如下。

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, 75, 130, 20);
  
////Body
  fill ('#1FA600');
  ellipse (305, 495, 450, 400);
  
///Heading (Spout)
 //rect(100, 140, 80, 140, 15); //Top segment
 //triangle (100, 150, 180, 150, 140, 100); //"Neck" segment
 // rect(120, 75, 40, 40); //SPOUT TIP
 // ellipse(140, 115, 100, 45); //Spout "bulb"  
  rect(120, 350, 40, 30); //Bottom pipe
  rect(100, 290, 80, 60, 20); //Bottom segment
  rect(100, 277, 80, 15); //Midway segment
  
//////Pressure Condenser Unit Grille
  fill('#989E9B');
  rect(390, 135, 140, 130);
  line (410, 305, 410, 100);
  line (430, 305, 430, 100);
  line (450, 305, 450, 100);
  line (470, 305, 470, 100);
  line (490, 305, 490, 100);
  line (510, 305, 510, 100);
  
////Pressure Condenser Unit
  fill ('#1FA600');
  arc(460, 265, 140, 140, 0, HALF_PI+HALF_PI);
  arc(460, 135, 140, 140, PI, 0);
  
////Tube
  noFill();
  stroke('#1FA250');
  strokeWeight(10);
  beginShape();
  vertex(110, 270);
  quadraticVertex(10, 200, 110, 150);
  endShape();

}

Answer 1

首先，您不必声明一个全局粒子变量，class 就可以做到。

您没有在粒子数组上调用 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()
                }
}

这可能是创建粒子系统最简单的方法。如果此答案没有帮助，请查看以下链接：编码火车：https://thecodingtrain.com/CodingChallenges/078-simple-particle-system.html

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

p5.js 绘图中的粒子系统

Particle system within a drawing in p5.js

p5.js