Olivia Wang's crazyDog.js

by Olivia Wang

For this class, I think the most difficult part is the beginning. Because at the beginning I have to learn many functions and try to understand how it works. This part will consume a lot of brainpower, but when I understand I get a lot of sense of accomplishment too. Also, after I learned many functions, I can start put to them together in different ways and that's my favorite part. The good points about that studying programming. I think for me the most useful part is study programming will train my logic skills, because programming itself is a completely rational existence. There are certain specifications for what to put in every place, so in the process I learned how to follow the instructions.

對於這堂課程，我覺得最難的部分是一開始的時候，因為在一開始，我需要學習很多種功能，並且了解它們是如何運作的。在這個過程中會耗費掉許多腦力，但是當我了解了它們是如何運作的之後，我感受到了很多的成就感。此外，我學習了許多功能之後，我就可以開始以不同的方式將它們組合在一起，這是我最喜歡的部分。學習編程的優點，我覺得對我來說最有用的部分是學習編程會訓練我的邏輯能力，因為編程本身就是一種完全理性的存在，所以每個地方要放什麼都會有一定的規範，所以在這個過程中我學習到了如何按照規範一步一步完成一件事情。

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

let x, y;
function setup() {
  createCanvas(1800, 780);
  x = width;
  y = height / 2;
}
 
class Dog {
  constructor (fColor1, fColor2, nColor, eColor1, eColor2, Ecolor1, Ecolor2, Bcolor, bColor, tColor, rColor, lColor1, lColor2, lColor3,fcolor,fcolor2, 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.flowerColor = fcolor;
    this.flowerColor2 = fcolor2;
    this.x = x;
    this.y = y;
  }
 
  draw () {
    //ear
    fill(color(this.earColor1));
  arc(this.x+70, this.y+565, 20, 20, 30, PI + QUARTER_PI, PIE);
  fill(color(this.earColor2));
  square(this.x+100, this.y+553, 20, 20, 15, 10, 5);
      //legs
      fill(color(this.rotateColor));
  rect(this.x+90, this.y+640, 15, 55, 5);
  fill(color(this.legColor1));
rect(this.x+98, this.y+640, 15, 55, 5);
  fill(color(this.legColor2));
  rect(this.x+160, this.y+640, 15, 55, 5);
  fill(color(this.legColor3));
  rect(this.x+170, this.y+640, 15, 55, 5);
      //body
      fill(color(this.bodyColor));
  rect(this.x+90 , this.y+610, 100, 55, 20);
    fill(color(this.bellyColor));
    rect(this.x+115 , this.y+650, 60, 15, 20);
    fill(color(this.tailColor));
ellipse(this.x+185 , this.y+590, 10, 55);
      //face
    fill(color(this.faceColor1));
  circle(this.x+94 ,this.y+590, 50);
  fill(color(this.faceColor2));
  circle(this.x+94, this.y+600, 20);
  //nose
fill(color(this.noseColor));
  circle(this.x+94, this.y+595, 10);
  //eyes
  fill(color(this.eyeColor1));
  circle(this.x+105 , this.y+585, 10);
  fill(color(this.eyeColor1));
  circle(this.x+80, this.y+585, 10);
  fill(color(this.eyeColor2));
  circle(this.x+105, this.y+583, 5);
      fill(color(this.eyeColor2));
      circle(this.x+80, this.y+583, 5);
  //flower
    fill(color(this.flowerColor));
    circle(this.x+20, this.y+670, frameCount %10);
    fill(color(this.flowerColor));
    circle(this.x+30, this.y+675, frameCount %10);
    fill(color(this.flowerColor));
    circle(this.x+10, this.y+675, frameCount %10);
    fill(color(this.flowerColor));
    circle(this.x+25, this.y+685, frameCount %10);
    fill(color(this.flowerColor));
    circle(this.x+14, this.y+685, frameCount %10);
    fill(color(this.flowerColor));
    fill(color(this.flowerColor2));
    circle(this.x+20, this.y+678, frameCount %10);
  }
}
 
 
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, "pink", "yellow", 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 (){
    //sun
    fill(color(this.sunColor));
    circle(x+this.x+70, this.y+70, 120);
    fill(color(this.cloudColor));
    //cloud
  circle(x+this.x+20, this.y+240, 70);
  fill(color(this.cloudColor));
  circle(x+this.x+40, this.y+250, 70);
  fill(color(this.cloudColor));
  circle(x+this.x+5, this.y+260, 70);
  fill(color(this.cloudColor));
  circle(x+this.x+30, this.y+270, 70);
  fill(color(this.cloudColor));
  circle(x+this.x+60, this.y+250, 70);
    strokeWeight(2);
  
  }}
 
 
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(frameCount %203, frameCount %245, frameCount %238);
  
   noStroke();
    fill(color("green"));
    rect(0, 700, width, 80);
  
    x = (-3) * frameCount % width;
  
  //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()
}
  }}