如何在 p5.js 中给主圆添加加速？答案

【问题标题】：How to add acceleration to the main circle in p5.js?如何在 p5.js 中给主圆添加加速？
【发布时间】：2021-06-18 03:34:40
【问题描述】：

当我们按下鼠标并使用旋转圆圈改变方向时，我正在尝试绘制。但是速度是恒定的。如何在鼠标按下一段时间后缓慢启动并加速并限制其加速？

我们如何为此添加加速？我已经尝试在这里添加，

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>

【问题讨论】：

标签： javascript css animation dom p5.js

【解决方案1】：

向类添加vel 属性并将其初始化为0.0。当您按下鼠标并且该值低于最大速度时增加该属性。根据当前速度移动对象。释放鼠标时重置速度：

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(v.x) || Math.trunc(h[h.length-1].y) != Math.trunc(v.y)) { 
                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>

【讨论】：