title: Canvas, changing movement of animated objects
body: <p>So I have 2 objects moving right now, circles and squares.  Both of them function fine, except for the movement of the square.  It has a very small radius which it rotates around, while the circle has a larger one.  </p>
  
  <p>I'm not sure exactly what code to manipulate to change the squares because all my tinkering does nothing.</p>
  
  <p>Here is my set up for movement for both of them.  I've been trying to mirror them to no avail.</p>
  
  <pre><code>function setupCircles() {
  for (var i = 0; i &lt; 25; i++) {
      var randomX = Math.round(-200 + Math.random() * 700);
      var randomY = Math.round(-200 + Math.random() * 700);
      var speed = .2 + Math.random() * 3;
      var size = 5 + Math.random() * 100;
      var radius = 5 + Math.random() * 100;
  
      var circle = new Circle(radius, speed, size, randomX, randomY);
      circles.push(circle);
  }
  drawAndUpdate();
  }
  setupCircles();
  
  function setupSquares() {
  for (var i = 0; i &lt; 25; i++) {
      var randomX = Math.round(-100 + Math.random() * 700);
      var randomY = Math.round(-100 + Math.random() * 700);
      var speed = .2 + Math.random() * 3;
      var size = 5 + Math.random() * 100;
      var radius = 2 + Math.random() * 100;
  
      var square = new Square(radius, speed, size, randomX, randomY);
      squares.push(square);
  }
  drawAndUpdate();
  }
   setupSquares();
  </code></pre>
  
  <p>Also for reference, here's the object itself</p>
  
  <pre><code>  function Circle(radius, speed, width, xPos, yPos) {
    this.radius = radius;
    this.speed = speed;
    this.width = width;
    this.xPos = xPos;
    this.yPos = yPos;
    this.opacity = .1 + Math.random() * .5;
  
    this.counter = 0;
  
    var signHelper = Math.floor(Math.random() * 2);
  
    if (signHelper == 1) {
      this.sign = -1;
    } else {
      this.sign = 1;
    }
    }
  
   function Square(radius, speed, width, xPos, yPos) {
   this.speed = speed;
   this.width = width;
   this.xPos = xPos;
   this.yPos = yPos;
   this.opacity = .1 + Math.random() * .5;
  
  this.counter = 0;
  
  var signHelper = Math.floor(Math.random() * 2);
  
  if (signHelper == 1) {
      this.sign = -1;
  } else {
      this.sign = 1;
  }
  }
  </code></pre>