title: Image is misaligned when speed is accelerating p5.js
body: <p>when these are ran the images slowly become misaligned with a gap between the two images.</p>
  <pre><code>class Road{
    constructor(image ,x, y, rWidth, rHeight, calcSpeed){
      this.image = image;
      this.x = x;
      this.y = y;
      this.width = rWidth;
      this.height = rHeight;
      this.speed = calcSpeed;
    }
    
    static setupRoad() {
      let tempRoad1 = new Road(roadBack, 0, 0, sW, sH, mainSpeed);
      let tempRoad2 = new Road(roadBack, 0, 0 - sH, sW, sH, mainSpeed);
    
      roadImages.push(tempRoad1, tempRoad2);
    }
  
    display (){
      image(this.image,this.x,this.y,this.width,this.height);
    }
    
    update (){
      
  
      this.y += this.speed;
      this.speed = mainSpeed;
    
    
    if(this.y &gt;= sH){
      this.y = -this.height;
     }
    }
  }
  class Car {
    constructor(speed){
  this.speed = speed //speed would be zero 0
  }
  movement (){
      if(keyIsDown(87)) {
        mainSpeed = this.speed;
        if(this.speed &lt; goSpeed){
          this.speed += .25;
        }
     
      }
      else {
        mainSpeed = stopSpeed;
        this.speed = 0;
    }
  
  }
  </code></pre>
  <p>Just a point in the right direction would be legendary.</p>