Sharon Chou' crazyDog.js

Made By: Sharon Chou

Our class has this class called function class or programming class. What we do there is learn about some programming and functions. Recently we have been on this site call P5.JS. There we use functions to create different and unique dogs. We make one of them and then use this function that makes them loop. This also follows the design process from before. We made a sketch thing and then we made corrections over and over again. Currently we are trying to make animation using P5.JS!

This is my crazyDog.js. I've been working on it all semester. The hardest thing was that a lot of the times the teacher will teach me, but then I don't get it even though he has explained it multiple times. I'm proud of it because I actually managed to complete it with a animation with no errors! The code for my artwork is below.

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

//let x1 = 0;
//let y2 = 0;

function setup() {
createCanvas(1800,780)
//noLoop()
//  let x, y;
// x1 = width / 2;
//  y2 = height;
}
 
function backgroundPatternRow (startx1,starty1,size,N){
 for (let i=0;i<N;i++) {
  fill ("pink");
  square(startx1+(i*100), starty1, size);
  }
}
 
function backgroundPatternRowCircle (startx1,starty1,N){
 for (let i=0;i<N;i++) {
  fill (255, 254, 214)
  circle(startx1+(i*5), starty1, 105)
 }
 }
 
 class Background {
  constructor (xstart,ystart,size,xN,yN)
  { this.startx = xstart;
   this.starty= ystart;
   this.size= size;
   this.Loopx= xN;
   this.LoopY= yN;
  }
   draw () {
  for (let i=0;i < this.LoopY;i++) {
    //backgroundPatternRow (this.startx,20 + (i * this.starty), this.size, this.Loopx);
    backgroundPatternRowCircle (this.startx, 20 + (i*this.starty),this.Loopx);
    backgroundPatternRow (this.startx, 20 + (i*this.starty), this.size, this.Loopx);
  }
  }
 }
    
  
 
 
       class Dog {
  constructor (positionx, positiony)
  { this.xposition = positionx;
   this.yposition= positiony;
  }
  //earlope1
  draw(){
    fill (Math.random()*255,Math.random()*255,Math.random()*255)
    square(this.xposition+90, this.yposition+66, 100, 20);
    fill(Math.random()*255,Math.random()*255,Math.random()*255);
    circle(this.xposition+132, this.yposition+96,50);
 
    //ear lope2
    fill(Math.random()*255,Math.random()*255,Math.random()*255);
    square(this.xposition+170, this.yposition+65, 100, 20);
    fill(Math.random()*255,Math.random()*255,Math.random()*255);
    circle(this.xposition+226, this.yposition+92,50);
 
    //body
    ellipse(this.xposition+185, this.yposition+256,155);
 
  //hands
  fill (Math.random()*255,Math.random()*255,Math.random()*255)
    circle(this.xposition+150, this.yposition+300,25);
 
  //HAND
  fill (Math.random()*255,Math.random()*255,Math.random()*255)
    circle(this.xposition+210, this.yposition+300,25);
 
  //hands
   fill (Math.random()*255,Math.random()*255,Math.random()*255)
    circle(this.xposition+210, this.yposition+250,25);
  //hands
  fill (Math.random()*255,Math.random()*255,Math.random()*255)
    circle(this.xposition +150, this.yposition+250,25);
    //head
      fill (Math.random()*255,Math.random()*255,Math.random()*255)
    circle(this.xposition +180, this.yposition+140,155);
 
    //eyes2
      fill (Math.random()*255,Math.random()*255,Math.random()*255)
    circle(this.xposition+210, this.yposition+135,50);
 
    //eyeballs2
    fill (Math.random()*255,Math.random()*255,Math.random()*255)
    circle (this.xposition+209,this.yposition+140,35)
 
  //eyeballs3
     fill (255,255,255)
    circle (this.xposition+209,this.yposition+145,20)
 
    //eyeballs 1
    fill (1,1,1)
    circle (this.xposition+150,this.yposition+140,30)
 
    //inside eyeballs
    fill (255,255,255)
    circle (this.xposition+150,this.yposition+140,15)
 
 
    //mouth
      fill (Math.random()*255,Math.random()*255,Math.random()*255)
    ellipse(this.xposition+180, this.yposition+180, 80, 30);
    //mouth1
     fill (Math.random()*255,Math.random()*255,Math.random()*255)
    ellipse(this.xposition+180, this.yposition+180, 45, 20);
 

    
}
      }
 
function backgroundPatternArray (n) {
    let outputArray = [];
    for (let i = 0; i < n ; i++) {
        outputArray.push(new Background (8 + (i*10),100,(10 + (i*2)),900,10));
    }
    return outputArray  
  }
 
function dogArray (n, y) {
    let outputArray = [];
  for(let k = 0; k <n ; k++){
    for (let i = 0; i < n ; i++) {
        outputArray.push(new Dog ((100+100)*i,y + (225+50)*k));
    }
}
    return outputArray  
  }
 
let myBackground = backgroundPatternArray (1);
console.log(myBackground);

function draw() {
  background(0);
  //let background1 = new Background (8,100,10,900,10);
  //background1.draw(); 
  //for(let i = 0; i< myBackground.length; i++){
  //myBackground[i].draw();
  //}

  let trashdog = dogArray (9,-1 * (frameCount% 3000));

    for(let i = 0; i< trashdog.length; i++){
  trashdog[i].draw();
    }
  text(("this is the frameCount: ") + frameCount, 50, 50);

}

All of our dogs