Differences

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

--- shannia-lin-generative [2021/06/20 17:56] – created renick
+++ shannia-lin-generative [2021/06/29 01:43] (current) – renick
@@ Line 1: / Line 1: @@
-====== Shannia's crazyDog.js ======
+====== Shannia Lin's crazyDog.js ======
+Made by: [[shannia-lin|Shannia Lin]]
 <HTML>
-<iframe src="https://editor.p5js.org/renick/present/tSA_blmRT" width=99% height=799px></iframe>
+<iframe src="https://editor.p5js.org/renick/present/2UvNo_H2l" width=99% height=799px></iframe>
 </HTML>
+===== about my crazyDog.js =====
+This is my crazydog.js. I've been working on this the whole semester learning javascript and p5.js. I think the hardest part of this was to make it work how I wanted to. Some parts would just go everywhere or it will just not show up. I'm proud that I now have something that works how I want it to. This the code for my art 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 x = 10;
+let speed = 0.1;
+function setup() {
+  createCanvas(1800, 780);
+  rectMode(CENTER)
+  frameRate(10)
+}
+function cartPolarX (kall){
+xcp=kall*10*cos(kall*PI/10)
+}
+function cartPolarY (kall){
+ycp=kall*10*sin(kall*PI/10)
+}
+class Dog {
+  constructor (x, y, earxl, earyl, earxr, earyr, color, tounge, numberarray, collar)
+  {
+    this.x = x
+    this.y = y
+    this.earxl = earxl
+     this.earyl = earyl
+      this.earxr = earxr
+     this.earyr = earyr
+    this.color = color
+    this.tocol = tounge
+    this.numberarr = numberarray
+    this.collar = collar
+  }
+  draw () {
+   push()
+     translate(this.x, this.y);
+  rotate(frameCount * 0.25)
+fill(this.collar)
+  ellipse (100 + this.x,140 + this.y ,70,50);
+          fill(this.color);
+       let r = random(0,40)
+  ellipse(100+ this.x, 100+ this.y, 100+r);
+  noFill();
+         for(let i = 0; i<1; i++) {
+   let r = random(this.numberarr)
+  fill(50);
+  ellipse(75+ this.x, 90+ this.y, 10+r, 10+r);
+             ellipse(120 + this.x , 90+ this.y, 10+r, 10+r);
+         }
+      fill(50);
+  triangle(110+this.x, 105+this.y, 90+this.x, 105+this.y, 100+this.x, 115+this.y);
+  noFill();
+    line(100+this.x, 115+this.y, 100+this.x, 120+this.y);
+  line(100+this.x, 120+this.y, 90+this.x, 125+this.y);
+  line(100+this.x, 120+this.y, 112+this.x, 125+this.y);
+      for(let i = 0; i<1; i++) {
+  fill(this.tocol);
+       let r = random(this.numberarr)
+  arc(100 + this.x, 125+this.y, 10+r, 30, 75, 60, OPEN);
+  noFill();
+    translate(xcp,ycp)
+    push()
+        //ear
+  fill(this.color);
+  rotate(-1*PI/ 10);
+  ellipse(25+ this.earxl, 80+ this.earyl, 55, 40);
+  noFill();
+//ear
+  fill(this.color);
+  rotate(PI/5);
+  ellipse(160+ this.earxr, 25+ this.earyr, 55, 40);
+  noFill();
+  rotate(-1 *PI/ 10);
+    pop()
+}
+    pop()
+  }
+}
+class Diamond {
+ constructor(x,y,size)
+  {
+    this.x = x
+    this.y = y
+    this.size = size
+}
+  draw(){
+    for(let i = 0; i < 10;i++){
+    fill(255,255, 10*i ,30*i)
+        rotate(2.7/PI)
+rect(this.x, this.y, this.size+10+Math.sin(frameCount % 359)*200/(i+1))
+    rotate(-1*2.7/PI)
+    noFill()
+      var k= i
+    }
+    fill(255)
+    rotate(2.7/PI)
+rect(this.x, this.y, this.size*10/k)
+    rotate(-1*2.7/PI)
+}
+}
+function backgroundPattern (xy,yx) {
+  push()
+  noFill()
+for(let i = 0; i < 100; i++){
+  fill (36, 41, 138, 25)
+beginShape(TRIANGLE_FAN);
+vertex((57.5*i)-100, (50*i)-100);
+vertex((57.5*i)-100, (15*i)-100);
+vertex((92*i)-100, (50*i)-100);
+vertex((57.5*i)-100, (85*i)-100);
+vertex((22*i)-100, (50*i)-100);
+vertex((57.5*i)-100, (15*i)-100);
+endShape()
+  noFill()
+  fill(1000/i,0,10*i)
+circle((x*i)-100,(x)*i-100,48)
+  circle((x*i)-100,(x)*i-150,48)
+  circle((x*i)-100,(x)*i-200,48)
+  noFill()
+    x = x + speed;
+  if(x > 100 - 10 || x < 10){
+    speed = -speed;
+  }
+}
+  pop()
+}
+function draw() {
+  background(220);
+    backgroundPattern()
+    noStroke()
+      for(let i=0; i <25; i++){
+   r =  random(-2500,2500)
+        b= random(-2500,2500)
+   diamond = new Diamond (500-r,100+b,50)
+  diamond.draw()
+      }
+  stroke(1)
+    for(let i=0; i <100; i++){
+cartPolarX(i)
+  cartPolarY(i)
+    dog1 = new Dog (xcp, ycp, 0, 0, 0, 0,'#8D6E63', '#FFCDD2', [0, 15, 20, 10, 5], 'orange' )
+   dog2 = new Dog (xcp+100, ycp+100, 70, 130, 130, 70,'#3E7D5F', '#FFCDD2', [0, 15, 20, 10, 5], '#514E9D ')
+     dog3 = new Dog (xcp+200, ycp+200, 130, 250, 250, 130,'#F59F81', '#FFCDD2', [0, 15, 20, 10, 5], '#B53636')
+           dogarr = [
+    dog1,
+dog2,
+    dog3,
+  ]
+      dogarr.forEach(x => x.draw())
+    }
+}
+</Code>