All the cars move at the same time. I would also like to know how can I make the car a picture. I have this gif file of a car which is perfect for the game. Thank you

[code=java]
final int WIDTH = 800;
final int HEIGHT = 400;
final int SHOULDER_HEIGHT = 50;
final int MARKER_HEIGHT = 10;
final int LANE_MARKER_COLOR = color(240);
final int EXTENDED_SHOULDER_HEIGHT =
            SHOULDER_HEIGHT + MARKER_HEIGHT + MARKER_HEIGHT / 2;
final int DRIVEABLE_HEIGHT =
           HEIGHT - 2 * EXTENDED_SHOULDER_HEIGHT;
final int LANE_MARKER_WIDTH = 80;
final int NUMBER_OF_LANES = 4;

final color SHOULDER_COLOR = color( 0, 112, 0);
final color ROAD_COLOR     = color( 64);
final color ROAD_MARKER_COLOR = color( 240, 230, 20);

final color RED = color(255, 0, 0);
final color GREEN = color(0, 255, 0);
final color YELLOW = color(255, 255, 0);

final float LINE_THICKNESS = 15.0;

Car c1, c2, c3, c4;
Frog frog;

void setup()
{
  //3 Cars setup.
  size(WIDTH, HEIGHT);
  noStroke();
  c1 =  new Car(100);
  c2 =  new Car(165);
  c3 =  new Car(233);
  c4 =  new Car(300);
  frog = new Frog();
  textSize(25);

}

void draw()
{
  drawRoadway();
  drawCars();
  frog.draw();
  fill(255);
  text("Use the Arrow Keys to Play the Game", 10, 30);
 


  if(frog.isHitBy(c1))
  {frog.alive = false;  text("GAME OVER", 350, 200);   }
  if(frog.isHitBy(c2))
  {frog.alive = false; text("GAME OVER", 350, 200); }
 
  if(frog.isHitBy(c3))
  {frog.alive = false; text("GAME OVER", 350, 200); }
  
   if(frog.isHitBy(c4))
  {frog.alive = false; text("GAME OVER", 350, 200); }
}



void drawCars()
{
  //Drawing the 3 cars.
  c1.display();
  c1.move();
  c2.display();
  c2.move();
  c3.display();
  c3.move();
  c4.display();
  c4.move();
}
void drawRoadway()
{
 //Plant the Grass.
 background(SHOULDER_COLOR);
 
 //Lay the blacktop.
 rectMode(CORNER);
 fill(ROAD_COLOR);
 rect(0, SHOULDER_HEIGHT, width, height - 2 * SHOULDER_HEIGHT);
 
 //Paint the edge road markers.
 fill(ROAD_MARKER_COLOR);
 rect(0, SHOULDER_HEIGHT + MARKER_HEIGHT,
      width, MARKER_HEIGHT);
 rect(0, height - SHOULDER_HEIGHT - 2 * MARKER_HEIGHT,
      width, MARKER_HEIGHT);
     
 //Paint the lane markers.
 rectMode(CENTER);
 fill(LANE_MARKER_COLOR);
 for(int y = EXTENDED_SHOULDER_HEIGHT + DRIVEABLE_HEIGHT / NUMBER_OF_LANES;
         y < EXTENDED_SHOULDER_HEIGHT + DRIVEABLE_HEIGHT - MARKER_HEIGHT;
         y += DRIVEABLE_HEIGHT / NUMBER_OF_LANES)
         {
           for(int x = 0; x <= width; x += 2 * LANE_MARKER_WIDTH) {
           rect(x, y, LANE_MARKER_WIDTH, MARKER_HEIGHT);
           }
      }
}

void keyPressed()
{
 frog.move(keyCode);
}
class Frog
{
    PImage LIVE_FROG   = loadImage("frog.gif");
    PImage DEAD_FROG   = loadImage("frogsplat.gif");
    final int    HALF_WIDTH  = LIVE_FROG.width  / 2;
    final int    HALF_HEIGHT = LIVE_FROG.height / 2;
 
    final int    DY          = 5;
    final int    DX          = 5;

   
    int x, y;          
    boolean alive;    

  
    Frog()
    {
        this.x = width / 2;
        this.y = height - 45;
        this.alive = true;
    }

  
    void draw()
    {
        if (this.alive)
            image(LIVE_FROG, this.x, this.y);
        else {
            image(DEAD_FROG, this.x, this.y);
            noLoop();
        }
    }

  
    void move(int keyCode)
    {

        switch (keyCode) {
        case UP:
            this.y = constrain(this.y - DY,
                HALF_HEIGHT, height - HALF_HEIGHT);
            break;
        case DOWN:
            this.y = constrain(this.y + DY,
                HALF_HEIGHT, height - HALF_HEIGHT);
                break;
                case LEFT:
            this.x = constrain(this.x - DX,
                HALF_HEIGHT, width - HALF_WIDTH);
            break;
        case RIGHT:
            this.x = constrain(this.x + DX,
                HALF_HEIGHT, width - HALF_WIDTH);
            break;
           
        }
    }

 void die()
    { this.alive = false; }
   

   boolean isHitBy(Car car)
    {
       
        int cw2 = Car.WIDTH / 2;
        int ch2 = Car.HEIGHT / 2;
    
        int fw2 = HALF_WIDTH;
        int fh2 = HALF_HEIGHT;

       
        int cl = car.x - cw2;
        int cr = car.x + cw2;
        int ct = car.y - ch2;
        int cb = car.y + ch2;

        int fl = this.x - fw2;
        int fr = this.x + fw2;
        int ft = this.y - fh2;
        int fb = this.y + fh2;

    
        if (cr < fl) return false;
        if (fr < cl) return false;
        if (cb < ft) return false;
        if (fb < ct) return false;
        return true;
    }
}

class Car {
 int speed = int(random(3,5));
 static final int WIDTH = 50;
 static final int HEIGHT = 50;
 int x = 20;
 int y = 50;
 
 Car(int Y) {
   this.y = Y;
 }


void display() {
  rectMode(CENTER);
  fill(random(0,255),random(0,255),random(0,255));
  rect(x,y,100,50);
}
void move() {
  x = x + speed;
  if (x > width) {
    x = 0;
  }
  if (x < 0) {
    x = 800;
  }
}

}


[/code]

This is my code so far. I need help so the first circle/ellipse is 50 and then it progresses by 10 to 150.
Thank you
int i = 0;

void setup(){
size (200,200);
noFill();
smooth();
}

void draw(){
  while (i < 150) {
    ellipse(width/2,height/2,i*50,i*50);
    i++;
  }
}