steve-wang-generative [Wan-Wan Wander No More]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Steve Wang's crazyDog.js ======

Made by [[steve-wang|Steve]].
<HTML>
<iframe src="https://editor.p5js.org/renick/present/XM9IxFZk5" width=99% height=799px></iframe>
</HTML>

===== 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 =====

<Code: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));
     }
</Code>