let i = -400; //start positions off the canvas to have the trains gradually enter the screen

let j = 400;

​

let tracksarray = [];

​

​

class traincar{

  constructor(xpos, ypos){

    this.x = xpos;

    this.y = ypos;

    this.xspeed = random(5,20); //to have varying speeds

    this.yspeed = 0;

    this.xdirection = 1;

    this.ydirection = 1;

    this.xstartpos = this.x;

    this.ystartpos = this.y;

​

  }

  show(){

    for(let i = 0; i<3 ; i++){

      //displaying the train cars  

      fill(164,0,0);

      rect(this.x + (i*105),this.y, 100, 40, 110,110, 0 , 0);

      //logo on the train car

      fill(255,69,0);

      ellipse(this.x +50 + (i*105),this.y+30,20,10);

​

      fill(255,159,0);

      ellipse(this.x +43 + (i*105),this.y+30,12);

      fill(0);

      rect(this.x +2 + (i*105),this.y+20,97,2);

      //windows

      fill(160);

      for(let j = 0; j<80;j+= 20) {

      square(this.x+15+j+(i*105) ,this.y+5,10);}

    }

    fill(0);

    rect(this.x +2 ,this.y+20,97,2);

    //car linkers

    fill(50);

    ellipse(this.x+103, this.y+35, 10)

    ellipse(this.x+208, this.y+35, 10)

​

    }

  move(direction) {

​

    if(direction == 1){

        this.x = this.x + this.xspeed * this.xdirection;

        this.y = this.y + this.yspeed * this.ydirection;

    }else{if(direction == -1){

            this.x = this.x - this.xspeed * this.xdirection;

            this.y = this.y + this.yspeed * this.ydirection;

    }

    }

    // have the train come back on screen gradually

    //check which direction of motion and re assign the start position accordingly

    if(direction == 1 && this.x > width+900){ 

      this.x = this.xstartpos;

    }

    if(direction == -1 && this.x < -1000){

      this.x = this.xstartpos;

    }

​

  }

​

}

​

​

class tracks{

  constructor(ypos){

    this.x = 0;

    this.y = ypos;

  }

  show(){

    fill(128,128,128);

    for(let i = 0; i < 10; i++){

      rect(this.x+(i* width/10), this.y, width/10-3, 7);

      rect(this.x+(i* width/10), this.y+10, width/10-3, 7);

​

    }

  }   

}

​

​

​

​

function setup() {

  createCanvas(400, 400);

  let direction = 1; //to determine direction of previous car

  let positionx = height/4; //to avoid having trains in first quarter of screen (sky)

  for(let num = 0; num < 7; num++){

    if(direction == 1){

      train.push(new traincar(i++, positionx))

      direction = -1;

    }else{

      train.push(new traincar(j--, positionx))

      direction = 1;

    }

    tracksarray.push(new tracks(positionx+30));

    positionx = positionx + random(50,100); //having randomly spaced tracks

    if(positionx> height-20){break;}//to avoid having a track start in the end of the screen

  }

​

}

​

function draw() {

  if(keyIsPressed == true){//night

    fill('darkblue')

    rect(0,0,width, height/4);

    fill(200);

    ellipse(40,40,30);

    fill('darkgreen');

    rect(0,height/4,width, 3*height/4);

  }else{ //day

      fill('skyblue');

      rect(0,0,width, height/4);

      fill(255, 195, 0 );

      ellipse(40,40,50);

​

      fill(50, 205, 50);

      rect(0,height/4,width, 3*height/4);

  }

  //display the tracks

  for(let i = 0; i < tracksarray.length; i++){

    tracksarray[i].show();

  }

  //display the trains

  let direction = 1; // variable that saves and controls the direction of motion of train

  for(let k = 0; k < train.length; k++){

    train[k].show();

    train[k].move(direction);

    if(direction == 1){

      direction = -1;

    }else{

      direction = 1;

    }

  }

}

​

​

​

function mouseClicked(){ // screen is paused for one second and replayed

  for(let k = 0; k < train.length; k++){

    train[k].xspeed = 0;

    } 

  // timer to restart motion after 1 second (1000 milliseconds ) of mouse click

  setTimeout( function start(){

  for(let k = 0; k < train.length; k++){

    train[k].xspeed = random(5,15);

    }

}, 1000);

​

}

​

​

​

​