title: Animating a circle using PIXI.js with Typescript
body: <p>I am using Typescript to animate a circle using PIXI.js. Currently, the circle is bouncing off of the bottom boundary then from the right boundary. I also need it to bounce from the top and left.</p>
  
  <p>I am very new to this language and I'm having some difficulties understanding, well, most of it. I have tried nestling 'else' statements but I'm not sure if that's even suppose to be incorporated in this case.</p>
  
  <p>'main.ts'</p>
  
  <pre><code>///&lt;reference path="PIXI.d.ts"/&gt;
  ///&lt;reference path="setup.ts"/&gt;
  
  var drawing:PIXI.Graphics = new PIXI.Graphics();
  stage.addChild(drawing);
  
  animate();
  function animate() {
      renderer.render(stage);
      draw();
      requestAnimationFrame(animate);
  }
  
  var x:number = 0;
  var y:number = 0;
  
  var xspeed:number = 2;
  var yspeed:number = 2;
  
  // MY CODE
  
  function draw(){
  
      // clear drawing
      drawing.clear();
  
      // draw circle
      drawing.beginFill(0x999999);
      drawing.drawCircle(x,y,100);
  
      // move circle down and to the right for the next frame
      x += xspeed;
      y += yspeed;
  
      // set boundary for circle to bounce from y
      if(y &gt; 600){
          // bounce the circle
          yspeed *= -1;
          // affix to the bottom of the stage
          y = 600;
      }
  
      // set boundary for circle to bounce from x
      if(x &gt; 800){
          xspeed *= -1;
          x = 800;
      }
  
  }
  </code></pre>
  
  <p>HTML
      
      
      
          
      
      </p>
  
  <pre><code>    &lt;script src="src/pixi.js"&gt;&lt;/script&gt;
      &lt;script src="src/setup.js"&gt;&lt;/script&gt;
      &lt;script src="src/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>