====== 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 [[https://www.gnu.org/licenses/old-licenses/lgpl-2.1.en.html|GNU Lesser General Public License v2.1]].
===== The code for my crazyDog.js =====
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.map((x,i) => new Dog (x.xq, x.y, x.amount, x.sizearray, x.color,i))
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));
}