Differences

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

--- olivia-wang-generative [2021/06/20 18:33] – created olivia.wang
+++ olivia-wang-generative [2021/06/29 01:39] (current) – renick
@@ Line 1: / Line 1: @@
-=====Olivia's crazy dog=====
+======Olivia Wang's crazyDog.js======
+by [[olivia-wang|Olivia Wang]]
 <HTML>
-<iframe src="https://editor.p5js.org/olivia.wang/present/wy9Q7611N" width=99% height=799px></iframe>
+<iframe src="https://editor.p5js.org/renick/present/ZxdfB2dgx" width=99% height=799px></iframe>
 </HTML>
+===== about my crazyDog.js =====
+For this class, I think the most difficult part is the beginning. Because at the beginning I have to learn many functions and try to understand how it works. This part will consume a lot of brainpower, but when I understand I get a lot of sense of accomplishment too. Also, after I learned many functions, I can start put to them together in different ways and that's my favorite part. The good points about that studying programming. I think for me the most useful part is study programming will train my logic skills, because programming itself is a completely rational existence. There are certain specifications for what to put in every place, so in the process I learned how to follow the instructions.
+對於這堂課程，我覺得最難的部分是一開始的時候，因為在一開始，我需要學習很多種功能，並且了解它們是如何運作的。在這個過程中會耗費掉許多腦力，但是當我了解了它們是如何運作的之後，我感受到了很多的成就感。此外，我學習了許多功能之後，我就可以開始以不同的方式將它們組合在一起，這是我最喜歡的部分。學習編程的優點，我覺得對我來說最有用的部分是學習編程會訓練我的邏輯能力，因為編程本身就是一種完全理性的存在，所以每個地方要放什麼都會有一定的規範，所以在這個過程中我學習到了如何按照規範一步一步完成一件事情。
+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 x, y;
 function setup() {
-  createCanvas(2000, 420);
+  createCanvas(1800, 780);
   x = width;
   y = height / 2;
 }
 class Dog {
-  constructor (fColor1, fColor2, nColor, eColor1, eColor2, Ecolor1, Ecolor2, Bcolor, bColor, tColor, rColor, lColor1, lColor2, lColor3, x, y)
+  constructor (fColor1, fColor2, nColor, eColor1, eColor2, Ecolor1, Ecolor2, Bcolor, bColor, tColor, rColor, lColor1, lColor2, lColor3,fcolor,fcolor2, x, y)
   {
     this.faceColor1 = fColor1;
@@ Line 29: / Line 40: @@
     this.legColor2 = lColor2;
     this.legColor3 = lColor3;
+    this.flowerColor = fcolor;
+    this.flowerColor2 = fcolor2;
     this.x = x;
     this.y = y;
   }
   draw () {
     //ear
     fill(color(this.earColor1));
-  arc(this.x+70, this.y+235, 20, 20, 30, PI + QUARTER_PI, PIE);
+  arc(this.x+70, this.y+565, 20, 20, 30, PI + QUARTER_PI, PIE);
   fill(color(this.earColor2));
-  square(this.x+100, this.y+223, 20, 20, 15, 10, 5);
+  square(this.x+100, this.y+553, 20, 20, 15, 10, 5);
       //legs
       fill(color(this.rotateColor));
-  rect(this.x+90, this.y+310, 15, 55, 5);
+  rect(this.x+90, this.y+640, 15, 55, 5);
   fill(color(this.legColor1));
-rect(this.x+98, this.y+310, 15, 55, 5);
+rect(this.x+98, this.y+640, 15, 55, 5);
   fill(color(this.legColor2));
-  rect(this.x+160, this.y+310, 15, 55, 5);
+  rect(this.x+160, this.y+640, 15, 55, 5);
   fill(color(this.legColor3));
-  rect(this.x+170, this.y+310, 15, 55, 5);
+  rect(this.x+170, this.y+640, 15, 55, 5);
       //body
       fill(color(this.bodyColor));
-  rect(this.x+90 , this.y+280, 100, 55, 20);
+  rect(this.x+90 , this.y+610, 100, 55, 20);
     fill(color(this.bellyColor));
-    rect(this.x+115 , this.y+320, 60, 15, 20);
+    rect(this.x+115 , this.y+650, 60, 15, 20);
     fill(color(this.tailColor));
-ellipse(this.x+185 , this.y+260, 10, 55);
+ellipse(this.x+185 , this.y+590, 10, 55);
       //face
     fill(color(this.faceColor1));
-  circle(this.x+94 ,this.y+260, 50);
+  circle(this.x+94 ,this.y+590, 50);
   fill(color(this.faceColor2));
-  circle(this.x+94, this.y+270, 20);
+  circle(this.x+94, this.y+600, 20);
   //nose
 fill(color(this.noseColor));
-  circle(this.x+94, this.y+265, 10);
+  circle(this.x+94, this.y+595, 10);
   //eyes
   fill(color(this.eyeColor1));
-  circle(this.x+105 , this.y+255, 10);
+  circle(this.x+105 , this.y+585, 10);
   fill(color(this.eyeColor1));
-  circle(this.x+80, this.y+255, 10);
+  circle(this.x+80, this.y+585, 10);
   fill(color(this.eyeColor2));
-  circle(this.x+105, this.y+253, 5);
+  circle(this.x+105, this.y+583, 5);
       fill(color(this.eyeColor2));
-      circle(this.x+80, this.y+253, 5);
+      circle(this.x+80, this.y+583, 5);
+  //flower
+    fill(color(this.flowerColor));
+    circle(this.x+20, this.y+670, frameCount %10);
+    fill(color(this.flowerColor));
+    circle(this.x+30, this.y+675, frameCount %10);
+    fill(color(this.flowerColor));
+    circle(this.x+10, this.y+675, frameCount %10);
+    fill(color(this.flowerColor));
+    circle(this.x+25, this.y+685, frameCount %10);
+    fill(color(this.flowerColor));
+    circle(this.x+14, this.y+685, frameCount %10);
+    fill(color(this.flowerColor));
+    fill(color(this.flowerColor2));
+    circle(this.x+20, this.y+678, frameCount %10);
   }
 }
 function dogArray (n) {
     let outputArray = [];
     for (let i = 0; i < n ; i++) {
-        outputArray.push(new Dog ("red", "lightblue", "green", Math.random()*255, "pink", Math.random()*255, "purple", "yellow", "orange", Math.random()*255, "lightpink", "blue", "lightgreen", Math.random()*255, 10+(i*250), 20))
+        outputArray.push(new Dog ("red", "lightblue", "green", Math.random()*255, "pink", Math.random()*255, "purple", "yellow", "orange", Math.random()*255, "lightpink", "blue", "lightgreen", Math.random()*255, "pink", "yellow", 10+(i*250), 20))
     }
     return outputArray
 }
 let myDogs = dogArray(15);
 //console.log(myDogs);
 class Background {
   constructor(gColor, Scolor, cColor, x, y)
@@ Line 98: / Line 125: @@
   this.y = y;
 }
   draw (){
-    //here
+    //sun
-    noStroke();
-    fill(color(this.groundColor));
-    rect(x+this.x+0, this.y+370, 400, 50);
     fill(color(this.sunColor));
-    circle(x+this.x+70, this.y+70, 70);
+    circle(x+this.x+70, this.y+70, 120);
     fill(color(this.cloudColor));
     //cloud
-  circle(x+this.x+240, this.y+110, 40);
+  circle(x+this.x+20, this.y+240, 70);
   fill(color(this.cloudColor));
-  circle(x+this.x+260, this.y+120, 40);
+  circle(x+this.x+40, this.y+250, 70);
   fill(color(this.cloudColor));
-  circle(x+this.x+220, this.y+130, 40);
+  circle(x+this.x+5, this.y+260, 70);
   fill(color(this.cloudColor));
-  circle(x+this.x+250, this.y+140, 40);
+  circle(x+this.x+30, this.y+270, 70);
   fill(color(this.cloudColor));
-  circle(x+this.x+280, this.y+120, 40);
+  circle(x+this.x+60, this.y+250, 70);
     strokeWeight(2);
-    x = x - 1;
-if (x < 0) {
-    x = width;
-  }
   }}
 function BackgroundArray (n) {
     let outputArray = [];
@@ Line 132: / Line 153: @@
     return outputArray
 }
 let myBackground = BackgroundArray(15);
 //console.log(myBackground);
 function draw () {
-  background("lightblue");
+  background(frameCount %203, frameCount %245, frameCount %238);
+   noStroke();
+    fill(color("green"));
+    rect(0, 700, width, 80);
+    x = (-3) * frameCount % width;
   //let Background1 = new Background ("green", "yellow", "white", 20, 10);
   //Background1.draw();
   for(let i = 0; i < myBackground.length ; i++){
     myBackground[i].draw()
   //let Dog1 = new Dog (10+(i*100), 20+(i*100), "red", "lightblue", "green", Math.random()*255, "pink", Math.random()*255, "purple", "yellow", "orange", Math.random()*255, "lightpink", "blue", "lightgreen", Math.random()*255, 10, 20);
   //Dog1.draw();
@@ Line 150: / Line 178: @@
 }
   }}
 </Code>