Brendon Chang's crazyDog.js

Programmed by Brendon.

This is my crazyDog.js. I started learning coding this year, and it is hard when you are trying to connect everything. There is one place that I took more time on. The part when you want the cloud to move but the dog to stay. When I code, either the cloud don't move, or both move. I am proud that the dog change color and clouds moves correctly.

The animation code is released under the GNU Lesser General Public License v2.1

//Dog

function setup() {
  createCanvas(1800, 780);
  x = width / 2;
  y = height;
}

function patternsBack(x, y, n) {
  for (let i = 0; i < n; i++) {
    noStroke();
    fill(255, 182, 193);
    circle(x + i * 200, y + 70, 360);
    fill(65, 200, 225);
    circle(x + i * 200, y + 70, 230);

    fill(10, 255, 10);
    rect(0, 400, 1800, 780);
  }
}

function row(n) {
  for (let i = 0; i < n; i++) {
    patternsBack(0, 0 + i * 290, 40);
  }
}

class DrawDog {
  constructor(xposition, yposition, size, hColor, eColor) {
    this.xposition = xposition;
    this.yposition = yposition;
  }

  draw(x) {
    x = 10;
    stroke(1);
    fill(Math.random() * 255, Math.random() * 250, Math.random() * 250);
    //tail
    triangle(
      this.xposition + 460,
      210,
      this.xposition + 390,
      320,
      this.xposition + 300,
      340
    );
    //legs
    rect(this.xposition + 380, 230, 20, 195);
    rect(this.xposition + 255, 230, 20, 195);
    rect(this.xposition + 265, 240, 20, 195);
    rect(this.xposition + 390, 240, 20, 195);
    //body
    rect(this.xposition + 240, 220, 185, 135, 20);
    //ears
    square(this.xposition + 120, 100, 65, 20);
    square(this.xposition + 240, 100, 65, 20);
    square(this.xposition + 125, 105, 60, 20);
    square(this.xposition + 240, 105, 60, 20);
    //head
    circle(this.xposition + 210, 190, 180);
    //eye
    fill(255, 255, 255);
    circle(this.xposition + 165, 170, 40);
    circle(this.xposition + 250, 170, 40);
    fill(0, 0, 0);
    circle(this.xposition + 165, 170, 5);
    circle(this.xposition + 250, 170, 5);
    //eyebrow
    line(this.xposition + 270, 140, this.xposition + 230, 150);
    line(this.xposition + 150, 140, this.xposition + 190, 150);
    //nose
    ellipse(this.xposition + 210, 200, 40, 20);
    //mouth
    fill(255, 255, 255);
    stroke(1);
    rect(this.xposition + 170, 220, 80, 40);
    fill(0, 0, 0);
  }
}

function dogArray(n) {
  let outputArray = [];
  for (let i = 0; i < n; i++) {
    outputArray.push(
      new DrawDog(10 + i * 400, 10 + i * 400, 100, "red", "blue")
    );
  }
  return outputArray;
}

let myDog = dogArray(30);

function draw() {
  row(30);

  
  fill(255, 255, 255);
  circle(50 + (frameCount % 1800), 200, 60);
  circle(80 + (frameCount % 1800), 190, 60);
  circle(100 + (frameCount % 1800), 180, 60);
  circle(110 + (frameCount % 1800), 220, 60);
  circle(120 + (frameCount % 1800), 220, 60);
  circle(110 + (frameCount % 1800), 230, 60);
  circle(100 + (frameCount % 1800), 200, 60);

  circle(450 + (frameCount % 1800), 200, 60);
  circle(480 + (frameCount % 1800), 190, 60);
  circle(500 + (frameCount % 1800), 180, 60);
  circle(510 + (frameCount % 1800), 220, 60);
  circle(520 + (frameCount % 1800), 220, 60);
  circle(510 + (frameCount % 1800), 230, 60);
  circle(500 + (frameCount % 1800), 200, 60);
  
   circle(850 + (frameCount % 1800), 200, 60);
  circle(880 + (frameCount % 1800), 190, 60);
  circle(900 + (frameCount % 1800), 180, 60);
  circle(910 + (frameCount % 1800), 220, 60);
  circle(920 + (frameCount % 1800), 220, 60);
  circle(910 + (frameCount % 1800), 230, 60);
  circle(900 + (frameCount % 1800), 200, 60);
  
  
  
  for (let i = 0; i < myDog.length; i++) {
    myDog[i].draw();
  }
}