Differences

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

--- yuna-wu-generative [2021/06/20 18:09] – yuna.wu
+++ yuna-wu-generative [2021/06/29 01:47] (current) – renick
@@ Line 1: / Line 1: @@
-====== Yuna's crazyDog.js ======
+====== Yuna Wu's crazyDog.js ======
+By:[[yuna-wu|Yuna Wu]]
 <HTML>
-<iframe src="https://editor.p5js.org/YunaWu/present/2Wjw6n8FF" width=99% height=799px></iframe>
+<iframe src="https://editor.p5js.org/renick/present/vRAuk_syA" width=99% height=799px></iframe>
 </HTML>
+===== about my crazyDog.js =====
+This is my code. I have been working on it a long time. I think programing is very hard to me, but in this code the hardest one is the animation. I'm proud of my code, because I have been working on my code the whole semester and I have try so hard to do it. I hope everyone will like my code!!!
+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(1800,780)
+  // Starts in the middle
+  x = width / 2;
+  y = height / 2;
+ //noLoop();
+}
+class Sun {
+  constructor (sSize, sColor, cColor, startingX, startingY)
+  { this.sunSize = sSize;
+    this.sunColor = sColor;
+    this.center = cColor;
+    this.positionX = startingX;
+    this.positionY = startingY;
+  }
+  draw () {
+     push();
+  noStroke();
+  fill(255, 244, 25);
+  translate(this.positionX+103, this.positionY+100);
+  rotate(radians(40));
+  ellipse(this.positionX+75, this.positionY+0, 45, 15); // start from 75 (tip of ellipse, 150/2), since ellipse is 150 wide
+  rotate(radians(40));
+  ellipse(this.positionX+75, this.positionY+0, 45, 15);
+  rotate(radians(40));
+  ellipse(this.positionX+75, this.positionY+0, 45, 15);
+  rotate(radians(40));
+  ellipse(this.positionX+75, this.positionY+0, 45, 15);
+  rotate(radians(40));
+  ellipse(this.positionX+75, this.positionY+0, 45, 15);
+  rotate(radians(40));
+  ellipse(this.positionX+75, this.positionY+0, 45, 15);
+  rotate(radians(40));
+  ellipse(this.positionX+75, this.positionY+0, 45, 15);
+  rotate(radians(40));
+  ellipse(this.positionX+75, this.positionY+0, 45, 15);
+  rotate(radians(40));
+  ellipse(this.positionX+75, this.positionY+0, 45, 15);
+  pop();
+  //center of Sun
+  noStroke();
+  fill(255, 174, 13);
+  ellipse(this.positionX+100, 107, 80, 80);
+}
+}
+class CrazyDog {
+  constructor (cSize, cColor, colorarr, numberarr, startingX, startingY)
+  { this.crazyDogSize = cSize;
+    this.crazyDogColor = cColor;
+    this.colorarr = colorarr;
+    this.numberarr = numberarr;
+    this.positionX = startingX;
+    this.positionY = startingY;
+  }
+  draw (bodyColor,earColor,eyeSize1,eyeSize2) {
+    //dog
+    for (let i = 0; i < 1; i++){
+    this.colorarr= [255, 500, 200]
+    let r = random(this.colorarr);
+    strokeWeight(2);
+    stroke(0);
+ //let myRandoms = [Math.random()*r, Math.random()*r, Math.random()*r]
+  //fill(myRandoms[0], myRandoms[1], myRandoms[2]);
+      fill(bodyColor);
+  //front left side feet
+  rect(this.positionX + 60, this.positionY+298, 10, 35, 20);
+  //front right side feet
+  rect(this.positionX + 65, this.positionY+298, 10, 35, 20);
+  //back left side feet
+  rect(this.positionX + 110, this.positionY+298, 10, 35, 20);
+  //back right side feet
+  rect(this.positionX + 115, this.positionY+298, 10, 35, 20);
+  //tail
+  for (let i = 0; i < 1; i++){
+    this.numberarr = [0, 15, 10, 5]
+    let r = random(this.numberarr)
+  rect(this.positionX + 130, this.positionY+283,40+r,8);
+  }
+  //body
+  rect(this.positionX + 50, this.positionY+253, 85, 55);
+  //head
+  circle(this.positionX + 50, this.positionY+253, 40);
+  //Left side ear
+  fill(earColor);
+  circle(this.positionX + 25, this.positionY+236, 20);
+  fill(earColor.map(x => x*3));
+  //fill((frameCount*10) % 255, frameCount % 255, frameCount % 255)
+  circle(this.positionX + 25, this.positionY + 236, 10);
+  //Right side ear
+  fill(earColor);
+  //fill(myRandoms[0], myRandoms[1], myRandoms[2]);
+  circle(this.positionX + 65,this.positionY + 228, 20);
+        fill(earColor.map(x => x*3));
+  //fill((frameCount*10) % 255, frameCount % 255, frameCount % 255)
+  circle(this.positionX + 65, this.positionY+229, 10);
+  }
+   for (let i = 0; i < 1; i++){
+    this.numberarr = [0, 15, 10, 5]
+    let r = random(this.numberarr)
+  fill(0)
+  //Left eyes(black)
+  circle(this.positionX + 40, this.positionY+253, 7+eyeSize1);
+  //Right eyes(black)
+  circle(this.positionX + 60, this.positionY+253, 7+eyeSize2);
+    fill(255)
+  //Left eyes(white)
+    circle(this.positionX + 40, this.positionY+253, 3+eyeSize1);
+  //Right eyes(white)
+    circle(this.positionX + 60, this.positionY+253, 3+eyeSize2);
+   }
+}
+}
+function dogArray (n, y) {
+    let outputArray = [];
+    for (let i = 0; i < n ; i++) {
+        outputArray.push(new CrazyDog (10, Math.random(), 10, 10, 10+(i*150), 10 + y))
+    }
+    return outputArray
+}
+class Ground {
+  constructor (gSize, gColor, startingX, startingY)
+  { this.groundSize = gSize;
+    this.groundColor = gColor;
+    this.positionX = startingX;
+    this.positionY = startingY;
+  }
+  draw () {
+    //ground
+    strokeWeight(2);
+    stroke(0);
+  fill(162, 232, 181);
+  rect(1, 344, 15400, 55);
+  rect(1, 644, 15400, 55);
+}
+}
+class Cloud {
+  constructor (cSize, cColor, startingX, startingY)
+  { this.cloudSize = cSize;
+    this.cloudColor = cColor;
+    this.positionX = startingX;
+    this.positionY = startingY;
+  }
+  draw () {
+    noStroke();
+  fill(color(this.cloudColor));
+  ellipse(this.positionX+250,50,60,50);
+  ellipse(this.positionX+280,40,60,50);
+  ellipse(this.position+230,50,60,50);
+  ellipse(this.positionX+270,70,60,50);
+  ellipse(this.positionX+300,65,60,50);
+    }
+}
+function cloudArray (n) {
+    let outputArray = [];
+    for (let i = 0; i < n ; i++) {
+        outputArray.push(new Cloud (100, "white", 20+(i*130), 20))
+    }
+    return outputArray
+}
+let myClouds = cloudArray(114);
+function randomColorArray(n) {
+  let output = [];
+  for (let i = 0; i < n; i++){
+    output.push([Math.floor(255* Math.random()),Math.floor(255* Math.random()),Math.floor(255* Math.random())])
+  }
+  return output
+}
+function randomNumberArray(n, max) {
+  let output = [];
+  for (let i = 0; i < n; i++){
+    output.push(max * Math.random())
+  }
+  return output
+}
+let dogColors = randomColorArray(12);
+let dogEyeSizes1 =  randomNumberArray(12,10);
+let dogEyeSizes2 =  randomNumberArray(12,10);
+function draw() {
+  background(187, 226, 242);
+  let sun1 = new Sun (10, "yellow", "orange", 10, 10)
+  sun1.draw();
+  let ground1 = new Ground (10, "green", 10, 20);
+  ground1.draw();
+   //let cloud1 = new Cloud (100, "white", 20, 20);
+  //cloud1.draw();
+ //let crazyDog1 = new CrazyDog (10, Math.random(), 10, 10, 10, 10);
+ // crazyDog1.draw();
+  x = 150;
+  // THE IMPORTANT LINE CONTROLLING THE ANIMATION UP AND DOWN!
+  //   the center point                   the speed       the range
+  y = -240 + (height * (1/2)) + (Math.sin(frameCount/10) * (height/5));
+  let myDogs = dogArray(12, y);
+  for(let i = 0; i < myDogs.length ; i++){
+    myDogs[i].draw((dogColors[i]),(dogColors[i].map(x => x/2)),dogEyeSizes1[i],dogEyeSizes2[i])
+  }
+  for(let i = 0; i < myClouds.length ; i++){
+    myClouds[i].draw()
+  }
+}
 </Code>