let x, y;
function setup() {
  createCanvas(2000, 420);
  x = width;
  y = height / 2;
}

class Dog {
  constructor (fColor1, fColor2, nColor, eColor1, eColor2, Ecolor1, Ecolor2, Bcolor, bColor, tColor, rColor, lColor1, lColor2, lColor3, x, y)
  {
    this.faceColor1 = fColor1;
    this.faceColor2 = fColor2;
    this.noseColor = nColor;
    this.eyeColor1 = eColor1;
    this.eyeColor2 = eColor2;
    this.earColor1 = Ecolor1;
    this.earColor2 = Ecolor2;
    this.bodyColor = Bcolor;
    this.bellyColor = bColor;
    this.tailColor = tColor;
    this.rotateColor = rColor;
    this.legColor1 = lColor1;
    this.legColor2 = lColor2;
    this.legColor3 = lColor3;
    this.x = x;
    this.y = y;
  }

  draw () {
    //ear
    fill(color(this.earColor1));
  arc(this.x+70, this.y+235, 20, 20, 30, PI + QUARTER_PI, PIE);
  fill(color(this.earColor2));
  square(this.x+100, this.y+223, 20, 20, 15, 10, 5);
      //legs
      fill(color(this.rotateColor));
  rect(this.x+90, this.y+310, 15, 55, 5);
  fill(color(this.legColor1));
rect(this.x+98, this.y+310, 15, 55, 5);
  fill(color(this.legColor2));
  rect(this.x+160, this.y+310, 15, 55, 5);
  fill(color(this.legColor3));
  rect(this.x+170, this.y+310, 15, 55, 5);
      //body
      fill(color(this.bodyColor));
  rect(this.x+90 , this.y+280, 100, 55, 20);
    fill(color(this.bellyColor));
    rect(this.x+115 , this.y+320, 60, 15, 20);
    fill(color(this.tailColor));
ellipse(this.x+185 , this.y+260, 10, 55);
      //face
    fill(color(this.faceColor1));
  circle(this.x+94 ,this.y+260, 50);
  fill(color(this.faceColor2));
  circle(this.x+94, this.y+270, 20);
  //nose
fill(color(this.noseColor));
  circle(this.x+94, this.y+265, 10);
  //eyes
  fill(color(this.eyeColor1));
  circle(this.x+105 , this.y+255, 10);
  fill(color(this.eyeColor1));
  circle(this.x+80, this.y+255, 10);
  fill(color(this.eyeColor2));
  circle(this.x+105, this.y+253, 5);
      fill(color(this.eyeColor2));
      circle(this.x+80, this.y+253, 5);
  }
}


function dogArray (n) {
    let outputArray = [];
    for (let i = 0; i < n ; i++) {
        outputArray.push(new Dog ("red", "lightblue", "green", Math.random()*255, "pink", Math.random()*255, "purple", "yellow", "orange", Math.random()*255, "lightpink", "blue", "lightgreen", Math.random()*255, 10+(i*250), 20))
    }
    return outputArray
}


let myDogs = dogArray(15);
//console.log(myDogs);


class Background {
  constructor(gColor, Scolor, cColor, x, y)
{
  this.groundColor = gColor;
  this.sunColor = Scolor;
  this.cloudColor = cColor;
  this.x = x;
  this.y = y;
}

  draw (){
    //here
    noStroke();
    fill(color(this.groundColor));
    rect(x+this.x+0, this.y+370, 400, 50);
    fill(color(this.sunColor));
    circle(x+this.x+70, this.y+70, 70);
    fill(color(this.cloudColor));
    //cloud
  circle(x+this.x+240, this.y+110, 40);
  fill(color(this.cloudColor));
  circle(x+this.x+260, this.y+120, 40);
  fill(color(this.cloudColor));
  circle(x+this.x+220, this.y+130, 40);
  fill(color(this.cloudColor));
  circle(x+this.x+250, this.y+140, 40);
  fill(color(this.cloudColor));
  circle(x+this.x+280, this.y+120, 40);
    strokeWeight(2);
    x = x - 1;
if (x < 0) {
    x = width;
  }
  }}


function BackgroundArray (n) {
    let outputArray = [];
    for (let i = 0; i < n ; i++) {
        outputArray.push(new Background ("green", "yellow", "white", 0+(i*200), 10))
    }
    return outputArray
}


let myBackground = BackgroundArray(15);
//console.log(myBackground);

function draw () {
  background("lightblue");
  //let Background1 = new Background ("green", "yellow", "white", 20, 10);
  //Background1.draw();
  for(let i = 0; i < myBackground.length ; i++){
    myBackground[i].draw()

  //let Dog1 = new Dog (10+(i*100), 20+(i*100), "red", "lightblue", "green", Math.random()*255, "pink", Math.random()*255, "purple", "yellow", "orange", Math.random()*255, "lightpink", "blue", "lightgreen", Math.random()*255, 10, 20);
  //Dog1.draw();
  for(let i = 0; i < myDogs.length ; i++){
    myDogs[i].draw()
}
  }}