Differences

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

--- marcus-hsieh-generative [2021/06/20 19:58] – marcus.hsieh
+++ marcus-hsieh-generative [2021/06/29 01:38] (current) – renick
@@ Line 1: / Line 1: @@
-=====Marcus's crazy dog.js=====
+=====Marcus Hsieh's crazy dog.js=====
+by  [[:marcus-hsieh|Marcus]]
 <HTML>
-<iframe src="https://editor.p5js.org/69/full/-Oe7jEdKB" width=99% height=799px></iframe>
+<iframe src="https://editor.p5js.org/renick/present/vQi7F7Foz" width=99% height=799px></iframe>
 </HTML>
-<Code:js>
-// Where is the circle
-let x, y;
+===== about my crazyDog.js =====
+I know more about coding and useing p5.js
+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>
 function setup() {
-  createCanvas(600, 470);
+  createCanvas(1800, 780);
-  // Starts in the middle
-  x = width / 2;
-  y = height;
 }
-function draw() {
+class Face {
-  background(20);
+  constructor (positionX,positionY)
+  { this.positionX= positionX
-  // Draw a circle
+   this.positionY= positionY
-  stroke(50);
+  }
+  draw () {
+     fill(10, 255, 68)
+ellipse(this.positionX+98,this.positionY+100,100)
+ellipse(this.positionX+55,this.positionY+60,45)
+ellipse(this.positionX+135,this.positionY+60,45)
+        fill(0,255,150)
+ellipse(this.positionX+135,this.positionY+100,35)
+    fill(0,255,150)
+ellipse(this.positionX+100,this.positionY+100,35)
+    fill(0, 189, 35)
+ellipse(this.positionX+120,this.positionY+125,15)
+  }
+}
+function faceArray (n) {
+    let outputArray = [];
+    for (let x = 0; x < n ; x++) {
+    for (let y = 0; y < n ; y++) {
+              outputArray.push(new Face ( (x*150),(y*150)))
+    }
+    }
+    return outputArray
+}
+let myFaces = faceArray(10);
+class Face2 {
+  constructor (positionX,positionY)
+  { this.positionX= positionX
+   this.positionY= positionY
+  }
+  draw (animateX,animateY) {
+    stroke(50);
  fill(10, 255, 68)
- ellipse(x+98,y+100,100)
+ ellipse(animateX+this.positionX+98,animateY+this.positionY+100,100)
-ellipse(x+55,y+60,45)
+ellipse(animateX+this.positionX+55,animateY+this.positionY+60,45)
-ellipse(x+135,y+60,45)
+ellipse(animateX+this.positionX+135,animateY+this.positionY+60,45)
         fill(0,255,150)
-ellipse(x+135,y+100,35)
+ellipse(animateX+this.positionX+135,animateY+this.positionY+100,35)
     fill(0,255,150)
-ellipse(x+100,y+100,35)
+ellipse(animateX+this.positionX+100,animateY+this.positionY+100,35)
     fill(0, 189, 35)
-ellipse(x+120,y+125,15)
+ellipse(animateX+this.positionX+120,animateY+this.positionY+125,15)
-  // Jiggling randomly on the horizontal axis
-  x = x + random(-1, 1);
-  // Moving up at a constant speed
-  y = y - 1;
-  // Reset to the bottom
-  if (y < 0) {
-    y = height;
   }
 }
+function faceArray2 (n) {
+    let outputArray = [];
+    for (let x = 0; x < n ; x++) {
+    for (let y = 0; y < n ; y++) {
+              outputArray.push(new Face2 ( (x*180),(y*150)))
+    }
+    }
+    return outputArray
+}
+let myFaces2 = faceArray2(10);
+function draw() {
+  background(220);
+    for (let x = 0; x < 12; x += 1) {
+    for (let y = 0; y < 12; y += 1) {
+      DrawCloud(x * 150, y * 120);
+    }
+  }
+  //for(let i = 0; i < myFaces.length ; i++){
+  //  myFaces[i].draw()
+  //}
+  for(let i = 0; i < myFaces.length ; i++){
+    myFaces2[i].draw(Math.random() * 2,(-1) * frameCount % height)
+  }
+}
+function DrawCloud(xPosition, yPosition) {
+  noStroke();
+  fill(252, 252, 252);
+  ellipse(50 + xPosition, 50 + yPosition, 60, 50);
+  ellipse(80 + xPosition, 40 + yPosition, 60, 50);
+  ellipse(130 + xPosition, 50 + yPosition, 60, 50);
+  ellipse(70 + xPosition, 70 + yPosition, 60, 50);
+  ellipse(110 + xPosition, 65 + yPosition, 60, 50);
+}
 </Code>