Neu bei p5.js und versuchen, jeden Tag mehr zu lernen. Im Grunde lerne ich gerade über Partikelsysteme und Objekte und werde durch die Menge an Code verwirrt. Wie auch immer, ich möchte, dass auf der Funktion mousePressed(), ein Array von Partikeln (Partikelsystem), die ich erstellt habe, erscheint. Es wäre auch toll, wenn das Partikelsystem die Position der Maus verfolgen könnte. Also, im Grunde, wenn Sie mit der Maus auf dem Bildschirm klicken Partikel erscheinen in dieser Position, und auch Ihre Maus verfolgen.Haben Partikel erscheinen OnClick-Funktion in p5.js
Ich kann nicht herausfinden, was ich im Code fehlt. Ich fühle mich irgendwie verloren, was die Hälfte davon macht (mein Professor hat viel davon geschrieben). Wenn ich die mousePressed-Funktion hinzufüge, geht alles in den Pot. Ich fühle mich wie zu überwältigt, um zu wissen, was fehlt. Jede Hilfe und ein detaillierter Einblick in das, was ich tun muss und warum diese Lösung funktioniert, wäre sehr willkommen. Vielen Dank!
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);
}
}