Table of Contents

Steve Wang's crazyDog.js

about my crazyDog.js

I worked on this code for about a school term. I am also new to p5.js so it might not be that good. I think I have also improved in my programming skills. The first thing I made was the dog then the grenades, the clouds and the stars, and the sun. I think I have improved for every step of the way. However, it may not show because I went back to improve the older things I made. Overall, I think I did fine and I am very happy to have learnt programming.

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

The code for my crazyDog.js

<code javascript> let framen =40 let flyn=0.6 let mode =0

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

let starX=0 let starY=0 let starColor=255

class Star { 

constructor(starX,starY,starColor){
  this.starX=starX;
  this.starY=starY
  this.starColor=starColor
}

draw(){ 

fill(color(this.starColor,this.starColor,0));
noStroke()
  circle(28+this.starX,39+this.starY,27)

triangle(18+this.starX, 29+this.starY, 28+this.starX, 14+this.starY, 38+this.starX, 29+this.starY); triangle(18+this.starX,29+this.starY,3+this.starX,39+this.starY,18+this.starX,49+this.starY) triangle(18+this.starX,49+this.starY,28+this.starX,64+this.starY,38+this.starX,49+this.starY) triangle(38+this.starX,49+this.starY,53+this.starX,39+this.starY,38+this.starX,29+this.starY) } }

let Bigcloudx=0 let Bigcloudy=0 let Bigcloudcolor=0

class BigCloud { 

  constructor(Bigcloudx,Bigcloudy,Bigcloudcolor) {

this.Bigcloudx=Bigcloudx; this.Bigcloudy=Bigcloudy; this.Bigcloudcolor=Bigcloudcolor; } draw(){ 

  noStroke();
 fill(color(this.Bigcloudcolor,this.Bigcloudcolor,this.Bigcloudcolor))
    circle(160+this.Bigcloudx,80+this.Bigcloudy,120);
    circle(235+this.Bigcloudx,65+this.Bigcloudy,120);
    circle(300+this.Bigcloudx,115+this.Bigcloudy,120);
 circle(225+this.Bigcloudx,164+this.Bigcloudy,140);
   circle(180+this.Bigcloudx,164+this.Bigcloudy,120);
 circle(110+this.Bigcloudx,120+this.Bigcloudy,120);

}}

let FlatBottomCloudX =0 let FlatBottomCloudY =0 let FlatBottomCloudColor =0

class FlatBottomCloud { 

  constructor(FlatBottomCloudX,FlatBottomCloudY,FlatBottomCloudColor) {

this.FlatBottomCloudX=FlatBottomCloudX; this.FlatBottomCloudY=FlatBottomCloudY; this.FlatBottomCloudColor=FlatBottomCloudColor; } 

draw() {
noStroke();
     fill(color(this.FlatBottomCloudColor,this.FlatBottomCloudColor,this.FlatBottomCloudColor))
    circle(160+this.FlatBottomCloudX,80+this.FlatBottomCloudY,120);
    circle(235+this.FlatBottomCloudX,65+this.FlatBottomCloudY,120);
    circle(300+this.FlatBottomCloudX,120+this.FlatBottomCloudY,120);
 rect(170+this.FlatBottomCloudX,118+this.FlatBottomCloudY,170,60,20);
   rect(73+this.FlatBottomCloudX,118+this.FlatBottomCloudY,110,60,20);
circle(110+this.FlatBottomCloudX,120+this.FlatBottomCloudY,120);

}}

let CloudsX=0 let CloudsY=0 let CloudsColor=0

class Clouds { 

constructor(CloudsX,CloudsY,CloudsColor) {
  this.CloudsX=CloudsX;
  this.CloudsY=CloudsY;
  this.CloudsColor=CloudsColor;
}
draw() {
     noStroke();
 fill(color(this.CloudsColor,this.CloudsColor,this.CloudsColor))
    circle(140+this.CloudsX,60+this.CloudsY,100);
    circle(205+this.CloudsX,45+this.CloudsY,100);
    circle(270+this.CloudsX,95+this.CloudsY,100);
 circle(205+this.CloudsX,144+this.CloudsY,120);
   circle(140+this.CloudsX,144+this.CloudsY,100);
 circle(90+this.CloudsX,100+this.CloudsY,100);}

}

let GrenadesX=0 let GrenadesY=0 let GrenadesColors=0

class Grenades { 

constructor(GrenadesX,GrenadesY,GrenadesColors){
this.GrenadesX=GrenadesX;
this.GrenadesY=GrenadesY;
this.GrenadesColors=GrenadesColors;
}
draw () {
   //grenade
        rotate(-100 / 3.0)
     strokeWeight(1);
fill("Grey");
rect(72.5+this.GrenadesX,42+this.GrenadesY,42,10);
rect(73+this.GrenadesX,38+this.GrenadesY,15,35);
 rect(105+this.GrenadesX,42+this.GrenadesY,10,45);
fill(this.GrenadesColors);
ellipse(80+this.GrenadesX, 80+this.GrenadesY, 45, 60);
line(60+this.GrenadesX,70+this.GrenadesY,100+this.GrenadesX,70+this.GrenadesY);
 line(60+this.GrenadesX,90+this.GrenadesY,100+this.GrenadesX,90+this.GrenadesY);
line(68+this.GrenadesX,54+this.GrenadesY,68+this.GrenadesX,105+this.GrenadesY);
line(80+this.GrenadesX,50+this.GrenadesY,80+this.GrenadesX,110+this.GrenadesY);
line(92+this.GrenadesX,54+this.GrenadesY,92+this.GrenadesX,105+this.GrenadesY);
  noFill();
  strokeWeight(1.5);
circle(75+this.GrenadesX,55+this.GrenadesY,20);
 square(75+this.GrenadesX,43+this.GrenadesY,5)
}

}

class Dog { 

    constructor (x,y,amount,sizes,colors,i){
  this.x=x;
  this.y=y;
  this.number=amount
  this.sizes=sizes;
  this.colors=colors;
    this.i=i;
}

draw () { 

  let amountarray=[]
  let number=0
let options=0
let w =0
let g =0
let h =0
let b=0
let k=0
let kk=0
  translate(this.x,this.y);
    rotate(100 / 3.0)
    b=this.number+(5*this.i);
    options=Math.floor(random(0,2))
    if (options==1) {w=50;h=25;}
    else{w=20;h=45}

legs fill(this.colors) rect(175,128,this.sizes[this.i],45); rect(168,128,this.sizes[this.i+1],45); rect(205,128,this.sizes[this.i+2],45); rect(200,128,this.sizes[this.i+3],45); tail 

    g= this.sizes[b]+150

let p1 = { x: g, y: 108 }; let p2 = { x: 255, y: 108 }; let p3 = { x: 255, y: 118}; let p4 = { x: g, y: 118}; curve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y); stroke(0); curve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y); curve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.y); 

    //Body

ellipse(190,113,this.sizes[this.i],45); 

    //Face

circle(130,100,90); 

    //ears

ellipse(90,80,w,h); 

ellipse(170,80,w,h);
    //Eyes
circle(115,95,20);
     circle(143,95,20);
    fill("black")
circle(115,95,10);
   circle(143,95,10);
 //fill(0,0,0)
    //Nose
    fill("black")
 circle(130,108,10);
    //mouth
    fill ("red")
rect(118,116,25+(random(0,20)),9+(random(0,10)));

drawteeth(); 

        function drawteeth () {
let toprow=Math.floor(random(1,4));
  let bottomrow=Math.floor(random(1,4));
  let toprowa=[];
  let bottomrowa= [];
   for (let i = 0; i < toprow; i++) {

toprowa.push(Math.floor(random(0,2)))} 

           for (let i = 0; i < bottomrow; i++) {

bottomrowa.push(Math.floor(random(0,2)))} for (let i = 0; i < toprow; i++) { 

fill("White")
if (toprowa[i]==0) {triangle(118+(i*4), 116, 128+(i*4), 124, 130+(i*4), 116);}
 if (toprowa[i]==1) {triangle(118+(i*10), 116, 128+(i*10), 134, 130+(i*10), 116)}

} 

  for (let i = 0; i < bottomrow; i++) {
fill("White")
if (bottomrowa[i]==0) {
  triangle(114+(i*4), 130, 120+(i*4), 120, 126+(i*4), 130);}
 if (bottomrowa[i]==1) {

triangle(114+(i*10), 130, 120+(i*10), 120, 136+(i*10), 130);} } 

        }

fill(color(255,255,255)) triangle(118+(x)+i,116+(this.y)+(i*2),128+(x)+i,120+(this.y)+i,128+(x)+i,126+(this.y)+(i*4)); 

//triangle(128+(x)-i,126+(this.y)-(i*2),138+(x)-i,120+(this.y)-i,138+(x)-i,126+(this.y)-(i*4))}
    fill(this.colors)

} }

function sizeArray (length) { 

let newarray= []
let amountarray=[]
for (let i = 0; i < length; i++) {
  amountarray.push(0)
}
amountarray.forEach(sizeArray2)

return newarray 

function sizeArray2 (x,i) {
  newarray.push(1 + (Math.random() * 100))

}}

function loopedArray (n, fillItem) { 

outputArray = [];

let a=0; 

let amountarray=[]
for (let i = 0; i < n; i++) {
  amountarray.push(0)
}
amountarray.forEach(loopedArray2)
function loopedArray2 (x,i) {

a=a+1; 

if (i==0) {a=0}

if (a>=fillItem.length) {a=0} 

  outputArray.push(fillItem[a]);
}
return outputArray

}

let originalnumbarray= [“blue”,“red”,“orange”,“yellow”,“green”] 

let colorarray= loopedArray(200,originalnumbarray);
let sizearray=(sizeArray(200));

function dogObjectCreator (sizearray,colorarray) { 

let doginfo=[]

for (let i = 0; i < 60; i++) { dog = { 

xq:600+(30*i),
y:0,
//30+(20*i)
amount:100,
sizearray:sizearray,
color:colorarray[i],

}; 

  doginfo.push(dog)

} 

return doginfo

}

let cloudarray= [] let drawingarray = [] let option2 = 2 

 let mm=1500
 let option=0
 let counter2=0;

let counter3=0 let b=0 let DrawCloudX =0 let DrawCloudY =[] let cloudc =100 let sunOut=[] let rown=0 let DrawCloudX2 =0 let cSpeed=[] let cSpeed2=[]

function drawcloud (x,i,DrawCloudY,cloudc,cSpeed) { 

 DrawCloudX+=cSpeed[i]
 if (DrawCloudX>=1500) {DrawCloudX=0;option+=1;}
 if (option>=3) {option=0}

if (option==0){ let cloud= new Clouds (DrawCloudX+DrawCloudX*i,DrawCloudY[i],cloudc) cloud.draw();} if (option==1) { let cloud= new BigCloud(DrawCloudX+DrawCloudX*i,DrawCloudY[i],cloudc) cloud.draw();} if (option==2){ let cloud= new FlatBottomCloud (DrawCloudX+DrawCloudX*i,DrawCloudY[i],cloudc); cloud.draw();} 

      }

function drawcloud2 (x,i,DrawCloudY,cloudc,cSpeed2) { 

 DrawCloudX2+=cSpeed2[i]
 if (DrawCloudX2>=1500) {DrawCloudX2=0;option+=1;}
 if (option>=3) {option=0}

if (option==0){ let cloud= new Clouds (DrawCloudX2+DrawCloudX2*i,DrawCloudY[i],cloudc) cloud.draw();} if (option==1) { let cloud= new BigCloud(DrawCloudX2+DrawCloudX2*i,DrawCloudY[i],cloudc) cloud.draw();} if (option==2){ let cloud= new FlatBottomCloud (DrawCloudX2+DrawCloudX2*i,DrawCloudY[i],cloudc); cloud.draw();} 

      }
let doginfoB=dogObjectCreator (sizearray,colorarray)

let allDogObjects = doginfoB.map1) 

GrenadesY =10

function drawing (doginfo,x,i){ 

GrenadesY+= flyn
if (GrenadesY>=1500) {GrenadesY=-3000}
     let grenade = new Grenades (doginfoB[x].xq,GrenadesY,colorarray[Math.floor(Math.random()*colorarray.length)]);
  grenade.draw();

}

let xlevel=0 let ylevel=780 let sunOutput=0 let greenb=50

function sun (sunOutput){ 

 counter2+=1
 if (counter2<=100){
    xlevel+=9
    ylevel-=7
 greenb+=2
 cloudc+=5}
 else{xlevel+=9;ylevel+=7;greenb-=1;cloudc-=2.5;
    starArray.forEach((x,i)=> drawStar(x,i,cloudc))}
 if (counter2>=300){xlevel=0;ylevel=780;counter2=0;}
 if (sunOutput==1)
 {fill("Yellow")
circle(xlevel,ylevel,130);}
 if (sunOutput==1){return greenb}
    if (sunOutput==2){return cloudc}

}

let starCounter=0 let starXYarray=[] let newStarX = Math.random()*1800; let newStarX1 =Math.random()*1800; let newStarX2 =Math.random()*1800; let newStarX3 =Math.random()*1800; let newStarY =Math.random()*500; let newStarY1 =Math.random()*500; let newStarY2 =Math.random()*500; let newStarY3 =Math.random()*500;

function drawStar (x,i,starColor){ 

let star= new Star(newStarX,newStarY,starColor)
star.draw();
 let star1= new Star(newStarX1,newStarY1,starColor)
star1.draw()
   let star2= new Star(newStarX2,newStarY2,starColor)
star2.draw() ;  
let star3= new Star(newStarX3,newStarY3,starColor)
star3.draw();

} let lengthofCInfo=0 let makingCloudInfo=[]

function makeCloudInfo(lengthofCInfo){ 

for (let c = 0; c < lengthofCInfo; c++) {

makingCloudInfo.push(random(0,300)) } 

return makingCloudInfo}

let makingCloudSpeed=[]

function cloudSpeedCreator (lengthofCInfo){ 

  for (let c = 0; c < lengthofCInfo; c++) {

makingCloudSpeed.push(random(1,3)) } 

return makingCloudSpeed}

let starArray=[];

for (let v = 0; v < 20; v++) { 

if(v==5){ starArray.push(1)

} 

starArray.push(0)
      }

for (let b = 0; b < 5; b++) { 

        cloudarray.push(0)
      }

for (let i = 0; i < 50; i++) { 

        drawingarray.push(0)
      }

let cloudInfo=[]; let cloudInfo2 =[]; let cloudSpeed =[] let cloudSpeed2 =[]

function draw() { 

background(color(52, greenb, 235));

       frameRate(framen);
c1=Math.floor(random() * 3)
greenb=sun(1)
cloudc=sun(2)
cloudInfo=makeCloudInfo(cloudarray.length);
  cloudInfo2=makeCloudInfo(cloudarray.length);
cloudSpeed=cloudSpeedCreator(cloudarray.length);
  cloudSpeed2=cloudSpeedCreator(cloudarray.length);
        cloudarray.forEach((x,i)=> drawcloud(x,i,cloudInfo,cloudc,cloudSpeed));    
          cloudarray.forEach((x,i)=> drawcloud2(x,i,cloudInfo2,cloudc,cloudSpeed2));

if (greenb>=177) {greenb=177} 

fill("Green")
rect(0,740,1900,100)
      
allDogObjects.forEach(x => x.draw())
drawingarray.forEach((x,i)=> drawing(doginfoB,x,i));
   }

</Code>

1)
x,i) ⇒ new Dog (x.xq, x.y, x.amount, x.sizearray, x.color,i