Parçacıkların p5.js

Question

'da OnClick işlevi görmesini sağlayın Yeni p5.js'ye ve her gün daha fazla bilgi almaya çalışın. Temel olarak, şu anda parçacık sistemleri ve nesneleri öğreniyorum ve kod miktarı ile karıştırıyorum. Her neyse, bunu mousePressed() işlevinde kullanmak istiyorum, yarattığım parçacıkların (parçacık sistemi) bir dizi belirir. Parçacık sistemi farenin konumunu izleyebilirse harika olurdu. Yani, temelde, eğer fare tıklarsanız ekran parçacıkları bu pozisyonda görünür ve ayrıca farenizi izler.

Kodda neleri kaçırdığımı anlayamıyorum. Ne kadarının yarısı olduğunu bile hissetmiyorum (profesörüm bir çok şey yazdı). MousePressed işlevine eklediğimde, her şey pot'a gider. Neyin eksik olduğunu bile bilmemek için çok üzüldüm. Herhangi bir yardım, ne yapmam gerektiğine ve çözümün neden işe yarayacağına dair ayrıntılı bir anlayışa minnettar oluruz. Teşekkür ederim! Her şeyden

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

Öncelikle mousePressed() fonksiyon sizin draw() fonksiyon içindedir. Bu pek bir anlam ifade etmiyor. mousePressed() işlevinizin, draw() işlevinizle aynı düzeyde olmasını istiyorsunuz.

function draw(){ 
    //draw code here 
} 

function mousePressed(){ 
    //mousePressed code here 
} 

Senin yerinde olsaydım daha küçük başlarım. Tek bir elips çizen bir program oluşturabilir misin? Daha sonra fareyi tıklattığınızda tek elipsin görünmesini sağlayabilirsiniz mi? O zaman elipsin fareyi takip edebilir misin? Sadece bunu kendi başına mükemmel bir şekilde halledebilirseniz, birden fazla elips eklemeyi düşünmeye başlamalısınız.

Son hedefinizden gitmeye ve geriye doğru çalışmaya çalışıyorsunuz, ki bu sadece kafanızı karıştırıyor. Bunun yerine, mümkün olan en basit taslaktan başlayın ve bir seferde küçük bir adım atın. Sonra sıkışırsanız, belirli bir soruyla birlikte bir MCVE gönderebilirsiniz ve size yardımcı olmak daha kolay olacaktır.