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>