title: p5.js - achieving smooth animation with draw function
body: <p>I am making a Monopoly style game written in javascript (Using the p5.js library). I am trying to create an animation of a card, using <code>rect</code>, sliding on top of a 2d object with a fixed width and height. Here are my 3 functions that show my thought process:</p>
  
  <p><strong>card_property.js:</strong></p>
  
  <pre><code>function PropertyCard(posX, posY, width, height, property){
    this.width = width;
    this.height = height;
    this.posX = posX;
    this.posY = posY;
    this.property = property;
  
    this.display = function(){
      rect(this.posX, this.posY, this.width, this.height);
    };
    this.update = function(){
        // not sure if I need to use this
    };
  }
  </code></pre>
  
  <p>This is a snippet of my <code>draw</code> function (p5.js function which is invoked continuously unless conditional logic is used or a p5.js <code>noLoop</code> function is called) inside of my <strong>game.js:</strong></p>
  
  <pre><code>var propCards = []
  ...
  function draw(){
    ...
    for (var j = propCards.length - 1; j &gt;= 0; j--){
      frameRate(10)
      console.log(propCards)
      while (propCards[j].posX &gt; 90){
        propCards[j].display();
        propCards[j].posX -= 5;
      }
    }
  }
  </code></pre>
  
  <p>Lastly, this function creates an instance of the property card that I'm trying to animate:</p>
  
  <pre><code>function addCard(property){
    propCard = new PropertyCard(680, 760, 20, 40, property);
    propCards.push(propCard);
  }
  </code></pre>
  
  <p>When I try to create the animation, I end up rendering a static image that shows the cards overlapping each other across descending <code>x</code> values. How can I get the card to slide over my created rectangle and stop at a certain point? The picture below shows what I am seeing:</p>
  
  <p><a href="https://i.stack.imgur.com/MeJn3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MeJn3.png" alt="Card animation attempt"></a></p>