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
}

如果我是你，我会从小做起。你能创建一个绘制单个椭圆的程序吗？你可以这样做，以便当你点击鼠标时出现单个椭圆？那么椭圆可以跟着鼠标吗？只有你能够自己完美地工作，那么你应该开始考虑添加多个省略号。

你试图从最终目标出发并向后工作，这只会让你感到困惑。相反，从最简单的草图开始，一次只做一小步。然后，如果您遇到问题，您可以发布MCVE以及特定问题，这将更容易为您提供帮助。

在p5.js中有粒子出现OnClick函数

1 个答案: