Differences

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

--- zoey-lin-generative [2021/06/20 18:05] – created zoey.lin
+++ zoey-lin-generative [2021/06/29 01:48] (current) – renick
@@ Line 1: / Line 1: @@
-=====Zoey cray dog =====
+=====Zoey Lin's crazyDog.js =====
+made by [[Zoey-Lin|zoey]]
 <HTML>
-<iframe src="https://editor.p5js.org/zoey.lin/present/3IkgA9LtF" width=99% height=799px></iframe>
+<iframe src="https://editor.p5js.org/renick/present/4Ms7Uqxek" width=99% height=799px></iframe>
 </HTML>
+===== about my crazyDog.js =====
+This is my crazyDog.js. I've been working on it all semester. The hardest thing was to learn how to animate the dogs. I'm proud of it because I have never coded anything before so I feel like I accomplished a lot from doing this. The code for my artwork is below.
+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 circleY = 10;
+function setup() {
+  createCanvas(1800, 780);
+}
+class Dog {
+  constructor (xposition, yposition, size, dColor, dPosition)
+  {
+    this.yposition = yposition;
+    this.xposition = xposition;
+    this.dogSize = size;
+    this.dogColor = dColor;
+    this.dogPosition = dPosition;
+  }
+  draw () {
+ //BODY//
+    fill(color("beige"))
+    //Ears//
+fill(Math.random()*255,Math.random()*255,Math.random()*225);
+circle(circleY+this.xposition+115, circleY+this.yposition+165, circleY+80);
+fill(Math.random()*255,Math.random()*255,Math.random()*225);
+circle(circleY+this.xposition+275, circleY+this.yposition+165,circleY+80);
+fill(Math.random()*255,Math.random()*255,Math.random()*225);
+circle(circleY+this.xposition+115, circleY+this.yposition+165,circleY+50);
+fill(Math.random()*255,Math.random()*255,Math.random()*225);
+circle(circleY+this.xposition+275, circleY+this.yposition+165,circleY+50);
+//Face//
+fill(Math.random()*255,Math.random()*255,Math.random()*225);
+circle(circleY+this.xposition+200, circleY+this.yposition+230, circleY+200);
+//Eyes//
+fill(0,0,0);
+circle(circleY+this.xposition+160,  circleY+this.yposition+215, circleY+40);
+fill(0,0,0);
+circle(circleY+this.xposition+250, circleY+this.yposition+215,circleY+40);
+fill(Math.random()*255,Math.random()*255,Math.random()*225);
+circle(circleY+this.xposition+165, circleY+this.yposition+215,circleY+20);
+fill(Math.random()*255,Math.random()*255,Math.random()*225);
+circle(circleY+this.xposition+245, circleY+this.yposition+215,circleY+20);
+// Mouth //
+noFill()
+stroke(0,0,0)
+arc(circleY+this.xposition+190,  circleY+this.yposition+270, circleY+40, 40, 0, PI);
+arc(circleY+this.xposition+220, circleY+this.yposition+270, circleY+40, 40, 0, PI);
+// Nose//
+fill(0,0,0)
+rect(circleY+this.xposition+193, circleY+this.yposition+262, circleY+25, 18, 5);
+//hat//
+fill(Math.random()*255,Math.random()*255,Math.random()*255);
+rect(circleY+this.xposition+165, circleY+this.yposition+30,circleY+70,100);
+ellipse(circleY+this.xposition+200, circleY+this.yposition+130, circleY+100,20);
+  }
+}
+class Background {
+  constructor (xposition, yposition, size, bColor, bposition)
+  {this.yposition = yposition;
+   this.xposition = xposition;
+    this.backgroundSize = size;
+    this.backgroundColor = bColor;
+    this.backgroundposition = bposition;
+  }
+  draw () {
+       fill(color("beige"))
+   fill(Math.random()*255,Math.random()*255,Math.random()*225);
+  rect(this.xposition+30,circleY+this.yposition+20,circleY+300,300);
+  fill(Math.random()*255,Math.random()*255,Math.random()*225);
+  rect(this.xposition+40,circleY+this.yposition+30,circleY+280,280);
+  }
+}
+function dogRow (n, x, y) {
+    let outputArray = [];
+    for (let i = 0; i < n ; i++) {
+        outputArray.push(new Dog (x + (i*300), 0 + y, 1000, 1000))
+    }
+    return outputArray
+}
+function backgroundRow (n, x, y) {
+    let outputArray = [];
+    for (let i = 0; i < n ; i++) {
+        outputArray.push(new Background (x + (i*300), 70 + y, 1000, 1000))
+    }
+    return outputArray
+}
+function allDogs (startingX, startingY, numberOfRows, rowLength) {
+  for(let i = 0; i < numberOfRows ; i++){
+    let myDogs = dogRow (rowLength, startingX, startingY+(i*350));
+    for(let i = 0; i < myDogs.length ; i++){
+      myDogs[i].draw()
+    }
+  }
+}
+function allBackground (startingX, startingY, numberOfRows, rowLength) {
+  for(let i = 0; i < numberOfRows ; i++){
+    let myBackground = backgroundRow (rowLength, startingX, startingY+(i*350));
+    for(let i = 0; i < myBackground.length ; i++){
+      myBackground[i].draw()
+    }
+  }
+}
+function draw() {
+  background(220);
+  //let background2 = new Background (200,100, 1000,1000);
+  //background2.draw();
+  //for(let i = 0; i < myBackgrounds.length ; i++){
+  //  myBackgrounds[i].draw()
+  //}
+  //let dog2 = new Dog (200,100, 1000, 1000);
+  //dog2.draw();
+  //for(let i = 0; i < myDogs.length ; i++){
+  //  myDogs[i].draw();
+  // }
+  allBackground (50, 50, 5, 5)
+  allDogs (50, 50, 5, 5);
+  circleY = circleY + 10;
+  circleY = (frameCount*25) % height
+}
+</Code>