How to add acceleration to the main circle in p5.js?

Question

I am trying to draw while we mouse press and change the direction using a rotating circle. But the speed is constant. how can we start slowly and accelerate after some time of mouse press and limit its acceleration?

How can we add acceleration to this?. I have tried adding here,

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

it is speeding up but it is not changing its direction.

when I just increasing the value of 0.025 it's working, but I need to steadily increase its velocity. can you please help?

I was unable to use acc = createVector() and add those acc.x and acc.y to my code. `

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

user_5577765 · Answer

Add an vel property to the class and initialize it to 0.0. Increase the property when you press the mouse and the value is below the maximum speed. Move the object depending on the current speed. Reset the speed when the mouse is released:

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

How to add acceleration to the main circle in p5.js?

1 Answers