let circleY = 10;

function setup() {
  createCanvas(1800, 780);

}
 
class Dog {
  constructor (xposition, yposition, size, dColor, dPosition)
  {
    this.yposition = yposition;
    this.xposition = xposition;
    this.dogSize = size;
    this.dogColor = dColor;
    this.dogPosition = dPosition;
  }          
 
  draw () {
 //BODY//
    fill(color("beige"))
    //Ears//
fill(Math.random()*255,Math.random()*255,Math.random()*225);
circle(circleY+this.xposition+115, circleY+this.yposition+165, circleY+80);
fill(Math.random()*255,Math.random()*255,Math.random()*225);
circle(circleY+this.xposition+275, circleY+this.yposition+165,circleY+80);
fill(Math.random()*255,Math.random()*255,Math.random()*225);
circle(circleY+this.xposition+115, circleY+this.yposition+165,circleY+50);
fill(Math.random()*255,Math.random()*255,Math.random()*225);
circle(circleY+this.xposition+275, circleY+this.yposition+165,circleY+50);
//Face//
fill(Math.random()*255,Math.random()*255,Math.random()*225);
circle(circleY+this.xposition+200, circleY+this.yposition+230, circleY+200);
//Eyes//
fill(0,0,0);
circle(circleY+this.xposition+160,  circleY+this.yposition+215, circleY+40);
fill(0,0,0);
circle(circleY+this.xposition+250, circleY+this.yposition+215,circleY+40);
fill(Math.random()*255,Math.random()*255,Math.random()*225);
circle(circleY+this.xposition+165, circleY+this.yposition+215,circleY+20);
fill(Math.random()*255,Math.random()*255,Math.random()*225);
circle(circleY+this.xposition+245, circleY+this.yposition+215,circleY+20);
// Mouth //
noFill()
stroke(0,0,0)
arc(circleY+this.xposition+190,  circleY+this.yposition+270, circleY+40, 40, 0, PI);
arc(circleY+this.xposition+220, circleY+this.yposition+270, circleY+40, 40, 0, PI);
// Nose//
fill(0,0,0)
rect(circleY+this.xposition+193, circleY+this.yposition+262, circleY+25, 18, 5);
//hat//
fill(Math.random()*255,Math.random()*255,Math.random()*255);
rect(circleY+this.xposition+165, circleY+this.yposition+30,circleY+70,100);
ellipse(circleY+this.xposition+200, circleY+this.yposition+130, circleY+100,20);
 
  }
}
 
class Background {
  constructor (xposition, yposition, size, bColor, bposition)
  {this.yposition = yposition;
   this.xposition = xposition;
    this.backgroundSize = size;
    this.backgroundColor = bColor;
    this.backgroundposition = bposition;
  }
  draw () {
       fill(color("beige"))
   fill(Math.random()*255,Math.random()*255,Math.random()*225);
  rect(this.xposition+30,circleY+this.yposition+20,circleY+300,300);
  fill(Math.random()*255,Math.random()*255,Math.random()*225);
  rect(this.xposition+40,circleY+this.yposition+30,circleY+280,280);
  }
}
 
 
function dogRow (n, x, y) {
    let outputArray = [];
    for (let i = 0; i < n ; i++) {
        outputArray.push(new Dog (x + (i*300), 0 + y, 1000, 1000))
    }
    return outputArray
}
 
function backgroundRow (n, x, y) {
    let outputArray = [];
    for (let i = 0; i < n ; i++) {
        outputArray.push(new Background (x + (i*300), 70 + y, 1000, 1000))
    }
    return outputArray
}
 
function allDogs (startingX, startingY, numberOfRows, rowLength) {
  for(let i = 0; i < numberOfRows ; i++){
    let myDogs = dogRow (rowLength, startingX, startingY+(i*350));
    for(let i = 0; i < myDogs.length ; i++){
      myDogs[i].draw()
    }
  }
}
 
function allBackground (startingX, startingY, numberOfRows, rowLength) {
  for(let i = 0; i < numberOfRows ; i++){
    let myBackground = backgroundRow (rowLength, startingX, startingY+(i*350));
    for(let i = 0; i < myBackground.length ; i++){
      myBackground[i].draw()
    }
  }
}
function draw() {
  background(220);
  //let background2 = new Background (200,100, 1000,1000);
  //background2.draw();
  //for(let i = 0; i < myBackgrounds.length ; i++){
  //  myBackgrounds[i].draw()
  //}
  //let dog2 = new Dog (200,100, 1000, 1000);
  //dog2.draw();
  //for(let i = 0; i < myDogs.length ; i++){
  //  myDogs[i].draw();
  // }
  allBackground (50, 50, 5, 5)
  allDogs (50, 50, 5, 5);
  circleY = circleY + 10;
  circleY = (frameCount*25) % height
}