p5.js有粒子出现OnClick函数

Question

p5.js 的新手，每天都在努力学习更多。基本上，我目前正在学习粒子系统和对象，并且对代码量感到困惑。无论如何，我希望在函数 mousePressed() 上出现我创建的粒子数组（粒子系统）。如果粒子系统可以跟踪鼠标的位置，那也很棒。所以，基本上，如果您在屏幕上单击鼠标，粒子就会出现在该位置，并且还会拖曳您的鼠标。

我不知道我在代码中遗漏了什么。我什至对其中一半在做什么感到迷茫（我的教授写了很多）。当我添加 mousePressed 函数时，一切都变得很糟糕。我觉得自己不知所措，甚至不知道缺少了什么。任何帮助，以及对我需要做什么以及该解决方案为何有效的详细见解，我将不胜感激。谢谢！

var particles = [];
var now = null;

function setup() {
  createCanvas(windowWidth, windowHeight);

}

function draw() {
  background(255, 25, 25);
  function mousePressed() {
  particles.push(new Particle(new p5.Vector(mouseX, mouseY)));


//particles.push(new Particle(new p5.Vector(width / 2, height / 1.5)));
  for (var i = 0; i < particles.length; i++) {
    // if our particle is dead, remove it
    if (particles[i].lifespan <= 0) {
      //splice is a way of removing a specific
      //element from an array
      particles.splice(i, 2);
    } else {
      particles[i].update();
      particles[i].display();
    }



      //this.particle = new ParticleSystem(createVector(mouseX, mouseY));
 // patricles.push(p);

    }
  }
}

function Particle(loc) {
  this.loc = loc;
  this.acc = new p5.Vector();
  this.vel = new p5.Vector(random(-100, 100), random(-2, 0));
  this.lifespan = 555;
}

Particle.prototype = {
  constructor: Particle,
  update: function() {
    this.vel.add(this.acc);
    this.loc.add(this.vel);
    this.lifespan -= 4.0;

  },
  display: function() {
    stroke(random(0), this.lifespan);
    fill(random(255), random(255), random(255))
    ellipse(this.loc.x, this.loc.y, 20, 20);
  }
}

Answer 1

首先，您的 mousePressed() 函数在您的 draw() 函数中。这没有多大意义。您希望 mousePressed() 函数与 draw() 函数处于同一级别。

function draw(){
   //draw code here
}

function mousePressed(){
   //mousePressed code here
}

如果我是你，我会从小一点开始。你能编写一个绘制单个椭圆的程序吗？然后你能不能让它在你点击鼠标时出现一个椭圆？那你能让那个椭圆跟随鼠标吗？只有当你能够让它自己完美地工作时，你才应该开始考虑添加多个省略号。

您试图从您的最终目标出发并倒退，这只会让您感到困惑。相反，从最简单的草图开始，一次一小步。然后，如果你遇到困难，你可以 post 一个 MCVE 连同一个具体的问题，它会更容易帮助你。

p5.js有粒子出现OnClick函数

Have particles appear OnClick function in p5.js

javascript

particle-system

p5.js