如何在p5.js（javascript）中将变量逐渐设置为0？

Question

I'm trying to control an ellipse with the up,down,left,right keys. I want to make it smooth, so the ellipse doesn't stop immediately. Also when its moving to the left and you press the right arrow, it turns around faster.

Minimal, Complete, and Verifiable example:

var x,y,speed,xspeed,yspeed,size;

function setup() {
createCanvas(window.innerWidth-20,window.innerHeight-20);
x = width / 2;
y = height - 20;
speed = 5.5;
yspeed = 0;
xspeed = 0;
size = 20;
}

function draw() {
background(0);
fill(255,0,0);
ellipse(x-size/2,y-size/2,size,size);
checkKeys();

x=constrain(xspeed+x,0+size,width);
y=constrain(yspeed+y,0+size,height);
}


function accelerateUP() {
  if(-1*(speed) <= yspeed && yspeed<= 0){yspeed-=0.5;}
  else if (0 < yspeed) yspeed=lerp(yspeed,0,0.5);
}
function accelerateDOWN(){
  if(yspeed >=0 && yspeed <= speed){yspeed+=0.5;}
  else if (yspeed <0) yspeed=lerp(yspeed,0,0.5);
}
function accelerateLEFT(){
  if(xspeed <=0 && xspeed >= -1*(speed)){xspeed-=0.5;}
  else if (xspeed >0) xspeed=lerp(xspeed,0,0.5);
}
function  accelerateRIGHT (){
  if(speed >= xspeed && xspeed >=0){xspeed+=0.5;}
  else if (0  > xspeed ) xspeed=lerp(xspeed,0,0.5);
}



function checkKeys (){

   if (keyIsDown(UP_ARROW)){
    accelerateUP();
   }          
   else if (keyIsDown(DOWN_ARROW)){
     this.accelerateDOWN(); 
   }else yspeed = lerp(yspeed,0,0.5);


   if (keyIsDown(LEFT_ARROW)){
     this.accelerateLEFT();
   }    
  else if (keyIsDown(RIGHT_ARROW)){
     accelerateRIGHT();
   }else
   xspeed = lerp(xspeed,0,0.5); 

 }

Answer 1

Lerp probably isn't suitable for this, I found a way to code it,that is close enough. If you have a better way, please comment. I'm kind of new to this, so don't bash my code.

var x, y, speed, xspeed, yspeed, size;

function setup() {
  createCanvas(window.innerWidth-20, window.innerHeight-20);
  x = width / 2;
  y = height - 20;
  speed = 7;
  yspeed = 0;
  xspeed = 0;
  size = 20;
}

function draw() {

  background(0);
  fill(255, 0, 0);
  ellipse(x-size/2, y-size/2, size, size);
  checkKeys();

  x=constrain(xspeed+x, 0+size, width);
  y=constrain(yspeed+y, 0+size, height);
}

function accelerateUP () {
  if (-1*(speed) <= yspeed && yspeed<= 0) {
    yspeed-=0.5;
  } else if (0 < yspeed) {  
    this.yspeed*=0.8; 
    if (-0.2 <yspeed && 0.2  > yspeed) yspeed =0;
  }
}

function accelerateDOWN() {
  if (yspeed >=0 && yspeed <= speed) {
    this.yspeed+=0.5;
  } else if (yspeed <0) { 
    yspeed*=0.8; 
    if (-0.2 <yspeed && 0.2  > yspeed) yspeed =0;
  }
}

function accelerateLEFT() {
  if (xspeed <=0 && xspeed >= -1*(speed)) {
    xspeed-=0.5;
  } else if (xspeed >0) { 
    xspeed*=0.8; 
    if (-0.2 <xspeed && 0.2  > xspeed) xspeed =0;
  }
}

function accelerateRIGHT() {
  if (speed >= xspeed && xspeed >=0) {
    xspeed+=0.5;
  } else if (0  > xspeed ) { 
    xspeed*=0.8; 
    if (-0.2 <xspeed && 0.2  > xspeed) xspeed =0;
  }
}



function checkKeys() {

  if (keyIsDown(UP_ARROW)) {
    accelerateUP();
  } else
    if (keyIsDown(DOWN_ARROW)) {
      accelerateDOWN();
    } else if (yspeed !=0) {
      if (yspeed > 0.2 || yspeed < -0.2)  yspeed*=0.9;
      else yspeed = 0;
    }



  if (keyIsDown(LEFT_ARROW)) {
    accelerateLEFT();
  } else
    if (keyIsDown(RIGHT_ARROW)) {
      accelerateRIGHT();
    } else if (xspeed !=0) {
      if (xspeed > 0.2 || xspeed < -0.2)  xspeed*=0.9; 
      else xspeed =0;
    }
};