var hours;

var list;

var val;

var images_blackBoards = [];

var count;

var blackBoards_val1 = 60;

var backgroundimg;

var forground;

​

var blackBoards = [];

var illuminations = [];

var letters = [];

function preload(){

  images_blackBoards.push(loadImage("images/backBoard_11580.png"));

  images_blackBoards.push(loadImage("images/backBoard_11587.png"));

  images_blackBoards.push(loadImage("images/backBoard_81121.png"));

  images_blackBoards.push(loadImage("images/backBoard_9776.png"));

  images_blackBoards.push(loadImage("images/blackBoard_10879.png"));

  images_blackBoards.push(loadImage("images/blackBoard_10983.png"));

  images_blackBoards.push(loadImage("images/blackBoard_7580.png"));

  illuminations.push(loadImage("images/Illumination_B.png"));

  illuminations.push(loadImage("images/Illumination_B1.png"));

  illuminations.push(loadImage("images/Illumination_C1.png"));

  illuminations.push(loadImage("images/Illumination_C2.png"));

  illuminations.push(loadImage("images/Illumination_D.png"));

  illuminations.push(loadImage("images/Illumination_D1.png"));

  illuminations.push(loadImage("images/Illumination_D2.png"));

  illuminations.push(loadImage("images/Illumination_D3.png"));

  illuminations.push(loadImage("images/Illumination_D4.png"));

  illuminations.push(loadImage("images/Illumination_G.png"));

  illuminations.push(loadImage("images/Illumination_L.png"));

  illuminations.push(loadImage("images/Illumination_L1.png"));

  illuminations.push(loadImage("images/Illumination_L2.png"));

  illuminations.push(loadImage("images/Illumination_P.png"));

  illuminations.push(loadImage("images/Illumination_P1.png"));

  illuminations.push(loadImage("images/Illumination_Q.png"));

  illuminations.push(loadImage("images/Illumination_Q1.png"));

  illuminations.push(loadImage("images/Illumination_S.png"));

  illuminations.push(loadImage("images/Illumination_T.png"));

  illuminations.push(loadImage("images/Illumination_c.png"));

  illuminations.push(loadImage("images/Illumination_h.png"));

  illuminations.push(loadImage("images/Illumination_n.png"));

  backgroundimg = loadImage("images/backvines.png");

  forground = loadImage("images/forground.png");

  illuminations.push(loadImage("images/Illumination_p2.png"));

  f = loadFont("OldLondon.ttf");

}

function setup() {

  createCanvas(800, 600);

  count = 0;

  val = blackBoards_val1

  mins = minute();

  seconds = second();

  hours = hour();

  for(var i = 0; i < 32;i++){

    val = blackBoards_val1 + 135* (floor(i/8)) ;

    blackBoards.push(new BlackBoard());

  }

  makeIllum();

}

function makeBoards(){

  count = 0;

  val = blackBoards_val1

  mins = minute();

  print(mins)

  for(var i = 0; i < 32;i++){

    val = blackBoards_val1 + 135* (floor(i/8)) ;

    blackBoards.push(new BlackBoard());

    letters.push(char(random(65,90))); 

  }

}

function makeLetters(){

  letters = []

  blackBoards[0].letter = blackBoards[blackBoards.length-1].letter;

  for(var i =  31; i >0; i--){

    if(blackBoards[i-1].letter == ""){

      blackBoards[i].letter = blackBoards[i - 2].letter;

      i = i-1;

    }else{

      blackBoards[i].letter = blackBoards[i - 1].letter;

    }

  }

}

function makeIllum(){

  var rand = int(random(0,33))

  blackBoards[rand].image = illuminations[(hour()%22)-1];

  blackBoards[rand].letter = ""; 

}

class BlackBoard {

  constructor() {

    if(blackBoards.length %8 == 0){

      this.x = 0;

    }else{

      this.x = blackBoards[blackBoards.length - 1].x + blackBoards[blackBoards.length - 1].rwidth; 

    }

    this.y = random(val-10,val+10);

    this.image = random(images_blackBoards);

    this.rwidth = random(90, 110);

    if((this.rwidth + this.x) > width - 90 ){

      this.rwidth = width - this.x;

    }

    this.rheight = random(80,100);

    this.illum = false;

    this.letter = char(random(65,90));

  }

  display() {

    if(this.letter == ""){

      image(this.image,this.x-15, this.y-20);

    }else{

      image(this.image,this.x, this.y,this.rwidth,this.rheight);

      fill(255);

      textFont(f,85);

      text(this.letter, this.x +(this.rwidth/5),this.y + this.rheight - (this.rheight/5));

    }

  }

}

​

function draw() {

  if(mins+1== minute()){

    blackBoards = [];

    makeBoards();

    makeIllum();

  }

  if(((seconds+1)%60) == second()){

    makeLetters();

    seconds++;

  }

  background(1, 9, 89);

  image(backgroundimg,-80,-50);

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

    if (!(blackBoards[i].letter == "")){

      blackBoards[i].display();

    }

  }

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

    if (blackBoards[i].letter == ""){

      blackBoards[i].display();

    }

  }

  image(forground,-25,-5);

}