如何在 p5.js 中給主圓添加加速？

Question

當我們按下鼠標並使用旋轉圓圈改變方向時，我正在嘗試繪制。 但是速度是恆定的。 我們如何才能在鼠標按下一段時間后緩慢啟動並加速並限制其加速？

我們如何為此添加加速？ 我試過在這里添加，

this.center.x = (1-0.025)*this.center.x + 0.025*(this.line.x + this.center.x);
this.center.y = (1-0.025)*this.center.y + 0.025*(this.line.y + this.center.y);

它正在加速，但它並沒有改變它的方向。

當我只是增加 0.025 的值時它正在工作，但我需要穩定地增加它的速度。 你能幫忙嗎？

我無法使用acc = createVector()並將這些acc.x和acc.y添加到我的代碼中。 `

 class Particle{ constructor(){ this.center = createVector(0,0); this.radius = 20; this.theta = 0; this.line = createVector(0,0); this.history = []; this.velocity = createVector(); } render(){ translate(60,60); circle(this.center.x,this.center.y,this.radius); circle(this.line.x+this.center.x, this.line.y+this.center.y,10); beginShape(); for(let i=0;i < this.history.length; i++){ let pos = this.history[i]; noFill(); vertex(pos.x, pos.y); endShape(); } } update(){ this.line.x = this.radius*cos(this.theta); this.line.y = this.radius*sin(this.theta); if (mouseIsPressed){ this.center.x = (1-0.025)*this.center.x + 0.025*(this.line.x + this.center.x); this.center.y = (1-0.025)*this.center.y + 0.025*(this.line.y + this.center.y); let v = createVector(this.center.x, this.center.y); this.history.push(v); } else{ this.theta += 0.01; } } } let particle; function setup() { createCanvas(windowWidth, windowHeight); particle = new Particle(); } function draw() { background(220); particle.render(); particle.update(); }

 <html> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script> </body> </html>

Answer 1

將vel屬性添加到 class 並將其初始化為 0.0。 當您按下鼠標並且該值低於最大速度時增加該屬性。 根據當前速度移動 object。 釋放鼠標時重置速度：

class Particle{
    constructor(){
        // [...]

        this.vel = 0.0;
    }

    // [...]

    update(){
        this.line.x = this.radius*cos(this.theta);
        this.line.y = this.radius*sin(this.theta);

        if (mouseIsPressed){
            if (this.vel < 1.0) {
                this.vel += 0.001
            }
            this.center.x += this.line.x * this.vel;
            this.center.y += this.line.y * this.vel;
            
            // [...]
        
        } else{
            this.vel = 0.0  
            this.theta += 0.01;
        } 
    }
}

 class Particle{ constructor(){ this.center = createVector(0,0); this.radius = 20; this.theta = 0; this.line = createVector(0,0); this.history = []; this.velocity = createVector(); this.vel = 0.0; } render(){ translate(60,60); circle(this.center.x,this.center.y,this.radius); circle(this.line.x+this.center.x, this.line.y+this.center.y,10); beginShape(); for(let i=0;i < this.history.length; i++){ let pos = this.history[i]; noFill(); vertex(pos.x, pos.y); } endShape(); } update(){ this.line.x = this.radius*cos(this.theta); this.line.y = this.radius*sin(this.theta); if (mouseIsPressed){ if (this.vel < 1.0) { this.vel += 0.001 } this.center.x += this.line.x * this.vel; this.center.y += this.line.y * this.vel; let v = createVector(this.center.x, this.center.y); let h = this.history; if (h.length == 0 || Math.trunc(h[h.length-1].x).= Math.trunc(vx) || Math.trunc(h[h.length-1].y).= Math.trunc(vy)) { this;history.push(v). } } else{ this.vel = 0.0 this;theta += 0;01, } } } let particle; function setup() { createCanvas(windowWidth; windowHeight); particle = new Particle(). } function draw() { background(220); particle.render(); particle.update(); }

 <html> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script> </body> </html>

如何在 p5.js 中給主圓添加加速？

問題描述

1 個解決方案

解決方案1
2 已采納 2021-03-21 07:59:16

如何在 p5.js 中給主圓添加加速？

問題描述

1 個解決方案

解決方案1 2 已采納 2021-03-21 07:59:16

解決方案1
2 已采納 2021-03-21 07:59:16