Differences

This shows you the differences between two versions of the page.

--- steve-wang-generative [2021/06/20 17:58] – created steve.wang
+++ steve-wang-generative [2021/08/18 00:47] (current) – scott.chen
@@ Line 1: / Line 1: @@
-===== Steve's crazyDog.js =====
+====== Steve Wang's crazyDog.js ======
+Made by [[steve-wang|Steve]].
 <HTML>
-<iframe src="https://editor.p5js.org/Mrname5/present/2KYWNj0sG" width=99% height=799px></iframe>
+<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>