CODEWITHSUNDEEP
javascriptparticle-systemp5.js
Claire
Claire

Reputation: 135

Have particles appear OnClick function in p5.js

New to p5.js and trying to learn more every day. Basically, I am currently learning about particle systems and objects, and getting confused by the amount of code. Anyways, I'd like that on function mousePressed(), an array of particles (particle system) that I've created appears. It'd also be awesome if the particle system could trail the position of the mouse. So, basically, if you click your mouse on the screen particles appear in that position, and also trail your mouse.

I can't figure out what I'm missing in the code. I feel kind of lost about what half of it is even doing (my professor wrote a lot of it). When I add in the mousePressed function, everything goes to pot. I feel like I'm too overwhelmed to even know what's missing. Any help, plus detailed insight into what I need to do and why that solution works would be super appreciated. Thank you!

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

Upvotes: 1

Views: 837

Answers (1)

Kevin Workman
Kevin Workman

Reputation: 42176

First of all, your mousePressed() function is inside your draw() function. That doesn't make a ton of sense. You want your mousePressed() function to be at the same level as your draw() function.

function draw(){
   //draw code here
}

function mousePressed(){
   //mousePressed code here
}

If I were you, I would start smaller. Can you create a program that draws a single ellipse? Can you then make it so that single ellipse appears when you click the mouse? Then can you have that ellipse follow the mouse? Only if you can get that working perfectly by itself, then you should start thinking about adding multiple ellipses.

You're trying to go from your end goal and work backwards, which is just going to confuse you. Instead, start from the simplest sketch possible and take one small step at a time. Then if you get stuck you can post an MCVE along with a specific question, and it'll be easier to help you.

Upvotes: 1

Related Questions