How can i set a variable to 0 gradually in p5.js (javascript)?

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

 }

I'm not really sure what you're asking. Can you please post a [mcve] that demonstrates the problem? — Kevin Workman, Mar 17 '18 at 15:34

score 0 · Answer 1 · answered Mar 18 '18 at 16:37

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

How can i set a variable to 0 gradually in p5.js (javascript)?

1 Answers1