p5.jsのOnClick関数にパーティクルが表示される

Question

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

Answer 1

まず第一に、あなたのmousePressed()機能が中にあなたdraw()機能です。それは意味をなさない。あなたの機能がdraw()機能と同じレベルになるようにします。

function draw(){ 
    //draw code here 
} 

function mousePressed(){ 
    //mousePressed code here 
} 

私があなただった場合、私はより小さく始めます。単一の楕円を描くプログラムを作成できますか？マウスをクリックすると、単一の楕円が現れるようにすることはできますか？次に、その楕円をマウスに追従させることができますか？あなた自身が完全に機能することができる場合にのみ、複数の楕円を追加することを考え始めるべきです。

あなたは最終目標を達成しようとしており、逆戻りしています。これはあなたを混乱させるだけです。代わりに、可能な限り簡単なスケッチから始めて、一度に1つの小さなステップを実行してください。あなたが立ち往生した場合は、具体的な質問とともにMCVEを投稿することができます。