绘制函数中背景覆盖 MousePressed() 椭圆

Question

我在 P5.js 中制作了一个粒子系统，它在 mousepressed() 上爆炸粒子。但是，我还想扩大圆圈以在 mousepressed() 上输出。我能够在 mousepressed() 上画一个圆圈，但它似乎在背景下。我在这件事上脑袋放屁。为什么圆圈没有与粒子一起出现在黑色背景之上？感谢帮助！

var lifeConstant = 50000;
var startVelMin = -10;
var startVelMax = 7;
var drag = -50;
var planetArray = [];
var planet;
var planet0;
var planet1;
var planet3;
//var planets = ['planet1.gif', 'planet2.gif', 'planet3.gif', 'planet4.gif']// for loop to loop through image files
//for (var i = 0; i < planets.length; i++) { //

function preload(){
//for (var i = 0; i < planetArray.length; i++) {
planet = loadImage('Assets/planet2.gif');
append(planetArray, planet);

planet3 = loadImage('Assets/planet3.gif');
append(planetArray, planet3);

planet0 = loadImage('Assets/planet4.gif');
append(planetArray, planet0);

planet1 = loadImage('Assets/planet1.gif');
append(planetArray, planet1);
}

//planetArray.add(planet);
function setup() {
  createCanvas(windowWidth, windowHeight);
  systems = [];
  background(51);
}

function draw() {
  background(0)
  for (i = 0; i < systems.length; i++) {
    systems[i].run();
    systems[i].addParticle();
  }
  if (systems.length==0) {
    fill(255);
    textAlign(CENTER);
    textSize(42);
    text("Click mouse to create Big Bangs", width/2, height/2);
  }
}

function mousePressed() {
  this.p = new ParticleSystem(createVector(mouseX, mouseY));
systems.push(p);
 fill(230,120, 0);
 ellipse(mouseX, mouseY, 100, 100);
}

// A simple Particle class
var Particle = function(position) {
  this.acceleration = createVector(0, .1);
  this.velocity = createVector(random(startVelMin,startVelMax), random(startVelMin,startVelMax));
  this.position = position.copy();
  this.lifespan = lifeConstant;
};

Particle.prototype.run = function() {
  this.update();
  this.display();
};

// Method to update position
Particle.prototype.update = function(){
  this.velocity.add(drag*this.acceleration);
  this.position.add(this.velocity);
  this.lifespan -= 150;
};

// Method to display
Particle.prototype.display = function () {
  //fill(random(255), random(255), random(200));
  //stroke(20, this.lifespan);
  //strokeWeight(1);
  //fill(random(255),this.lifespan);
  //ellipse(this.position.x, this.position.y, 15, 15);
  image(planetArray[floor(random(4))], this.position.x, this.position.y, 15, 15);
};

// Is the particle still useful?
Particle.prototype.isDead = function () {
  if (this.lifespan < 0) {
    return true;
  } else {
    return false;
  }
};

var ParticleSystem = function (position) {
  this.origin = position.copy();
  this.particles = [];
};

ParticleSystem.prototype.addParticle = function () {
  // Add either a Particle or CrazyParticle to the system
 if (int(random(0, 2)) == 0) {
   p = new Particle(this.origin);
  }
  else {
  p = new
  CrazyParticle(this.origin);
  }
  this.particles.push(p);
  };

ParticleSystem.prototype.run = function () {
  for (var i = this.particles.length - 1; i >= 0; i--) {
    var p = this.particles[i];
    p.run();
    if (p.isDead()) {
      this.particles.splice(i, 1);
    }
  }
};

// A subclass of Particle

function CrazyParticle(origin) {
  // Call the parent constructor, making sure (using Function#call)
  // that "this" is set correctly during the call
Particle.call(this, origin);

  // Initialize our added properties
this.theta = 0.0;
};

// Create a Crazy.prototype object that inherits from Particle.prototype.
// Note: A common error here is to use "new Particle()" to create the
// Crazy.prototype. That's incorrect for several reasons, not least 
// that we don't have anything to give Particle for the "origin" 
// argument. The correct place to call Particle is above, where we call 
// it from Crazy.
CrazyParticle.prototype = Object.create(Particle.prototype); // See note below

// Set the "constructor" property to refer to CrazyParticle
CrazyParticle.prototype.constructor = CrazyParticle;

// Notice we don't have the method run() here; it is inherited from Particle

// This update() method overrides the parent class update() method
CrazyParticle.prototype.update=function() {
  Particle.prototype.update.call(this);
  // Increment rotation based on horizontal velocity
 this.theta += (this.velocity.x * this.velocity.mag()) / 10.0;
 }

// This display() method overrides the parent class display() method
CrazyParticle.prototype.display=function() {
  // Render the ellipse just like in a regular particle
//  Particle.prototype.display.call(this);

}

Answer 1

只要按下鼠标按钮，就会调用mousePressed() 函数。 draw() 函数每秒调用 60 次。所以你在 mousePressed() 函数中绘制的任何东西几乎都会立即被你在 draw() 函数中绘制的任何东西覆盖。

您需要从 draw() 函数调用所有绘图代码。您可以通过使用一个跟踪鼠标是否被按下的变量来做到这一点。幸运的是，p5.js 已经有一个变量可以做到这一点：mouseIsPressed

绘制函数中背景覆盖 MousePressed() 椭圆

Background Over-riding MousePressed() Ellipse in Draw Function

background

processing

particle-system

p5.js