In-class

Homework

3D DRAGON

I wanted to add some sort of organism to the flower arrangement I had, so I decided to add a cute little dragon. At first, I tried using the standard p5 library to make the dragon circle around the vase, but it turned out to be trickier than I thought. So, I switched and experimented with WebGL instead.

My idea was to create the dragon using a chain of spheres to give it a smooth, snakelike motion. I started by adding a box to the scene for a clearer view in 3D space and made a class for it. Then, I set the dragon in motion, rotating it around the vase and adding some Perlin noise for a fluid, swimming effect.

update() {
  yoff += 0.05
  this.turbulance = map(noise((yoff) * 0.2),0,1,-0.6,1)
  this.v = createVector(0, this.turbulance, 0)
  this.pos.add(this.v);
  }

show() {
	push()
		translate(width/2, 0, 0)
		rotateY(this.rotationY + ((frameCount-this.len*10)/100));
	
		push()
			translate(this.pos.x, this.pos.y, this.pos.z -10 + (10 - this.len))
			stroke("black")
		  box(30)
	   pop()
	pop()
}

Screen Recording 2024-02-15 at 10.59.37 AM.mov

Then I added a loop to the class I created and added an offset based on the order of the boxes it’s in so it follows the previous noise pattern.

class Mover {
  constructor(len) {
    this.pos = createVector(100, height/2, 0);
    this.v = createVector(0, 0, 0);
    this.rotationY = 0;
    this.turbulance = 0;
    this.len = len
  }

  update() {
    yoff += 0.005
    this.turbulance = map(noise((yoff-this.len) * 0.2),0,1,-1,1)
    this.turbulanceX = map(noise((yoff+10000-this.len) * 0.2),0,1,-0.5,0.5)
    this.v = createVector(this.turbulanceX, this.turbulance, 0)
    this.pos.add(this.v);
  }
  show() {
    colorMode(HSB)
    push()
      translate(width/2, 0, 0)
      rotateY(this.rotationY + ((frameCount-this.len*10)/100));
      push()
    translate(this.pos.x, this.pos.y, this.pos.z -10 + (10 - this.len))   
    fill(0, 100, 100);
      stroke("black")
      box(20)
      pop()
    pop()
  }

}

Screen Recording 2024-02-15 at 11.12.35 AM.mov

Added some more stylistic shaoes to make it look more like a dragon.

Screen Recording 2024-02-14 at 11.46.08 PM.mov

Finally, implement it into the sketch.

Final Output for flower arrangement with dragon