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

Have particles appear OnClick function in p5.js

本文关键字：中的 OnClick 函数 js p5 粒子      更新时间：2024-04-21

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);
  }
}

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

function draw(){
   //draw code here
}
function mousePressed(){
   //mousePressed code here
}

如果我是你，我会从小处着手。你能创建一个画一个椭圆的程序吗？然后你能让它在你点击鼠标时出现一个椭圆吗？那你能让那个椭圆跟在鼠标后面吗？只有当你能让它自己完美地工作时，你才应该开始考虑添加多个省略号。

你试图从你的最终目标出发，向后努力，这只会让你感到困惑。相反，从最简单的草图开始，一步一个脚印。然后，如果你陷入困境，你可以发布一个MCVE和一个特定的问题，这样会更容易帮助你。

相关文章：