trying to understand animation

var circX = 0;

var fr = 30; //starting FPS

var clr;

var img;

function preload() {

  img = loadImage("Spaceinvaders1.png");

}

​

function setup() {

  createCanvas(500, 500);

  //image(img, 0, 0);

  background(100);

  frameRate(fr); // Attempt to refresh at starting FPS

  clr = color(255,0,0);

}

​

function draw() {

  background(100);

  image(img, circX, 0);

  circX = circX += 3; // Move Rectangle

​

  if (circX >= width) { // If you go off screen.

    if (fr == 30) {

      clr = color(0,0,255);

      fr = 10;

      frameRate(fr); // make frameRate 10 FPS

    } else {

      clr = color(255,0,0);

      fr = 30;

      frameRate(fr); // make frameRate 30 FPS

    }

    circX = 0;

  }

  fill(clr);

  noStroke();

  ellipse(circX, 40, 20,20);

}