p5.js에서 지느러미가 건강하게 움직이는 물고기를 만들어 보았다!

요 전날 생선 마우스 스토커가 구현되는 확장 기능을 만들었습니다!


gif 동영상으로는 확인하기 어렵습니다만, 실은 이 물고기는 p5.js
여기에서는 p5.js 에서 물고기를 만드는 방법을 소개합니다. 도움이되면 다행입니다.

아티팩트

물고기의 기본형

우선 프로그램을 소개하고, 그 후 해설을 진행시켜 갑니다!

p5.js

class Fish {
  constructor(x, y) {
    this.position = createVector(x, y)
    this.theta = 0
    this.color = { filet: color(153, 206, 255), body: color(30, 144, 255) }
  }

  update() {
    this.theta += PI / 100
  }

  display() {
    push()
    noStroke()
    translate(this.position.x, this.position.y)

    //左右のヒレ
    for (let i = -1; i <= 1; i += 2) {
      push()
      fill(this.color.filet)
      translate(0, 10)
      rotate((PI / 12) * sin(this.theta * 2) * i)

      beginShape()
      vertex(0, 0)
      vertex(12 * i, 4)
      vertex(10 * i, 10)
      vertex(0, 4)
      endShape()
      pop()
    }
    ////////////

    //尻尾
    push()
    fill(this.color.filet)
    translate(0, 25)
    rotate((PI / 12) * sin(this.theta * 2))
    beginShape()
    vertex(0, 0)
    bezierVertex(0, 0, 5, 5, 3, 15)
    bezierVertex(3, 15, 0, 8, 0, 8)
    bezierVertex(0, 8, 0, 8, -3, 15)
    bezierVertex(-3, 15, -5, 5, 0, 0)
    endShape()
    pop()

    //胴体
    beginShape()
    fill(this.color.body)
    vertex(0, 30)
    bezierVertex(0, 30, -10, 10, 0, 0)
    bezierVertex(0, 0, 10, 10, 0, 30)
    endShape()

    pop()
  }
}

let fish

function setup() {
  createCanvas(300, 200)
  fish = new Fish(width / 2, height / 2)
}

function draw() {
  background(0)
  fish.update()
  fish.display()
}

매우 간단하게 정리하면, display 가 물고기의 묘사, update 가 지느러미에 관여하는 theta 를 갱신하는 함수가 됩니다!

지느러미가 움직이는 원리

지느러미는 기본형을 rotate 로 회전시켜 몸통에 붙어 있습니다.

여기에서 theta 만약 지느러미의 속도나 흔들림 폭을 바꾸고 싶을 때는 rotate 안의 숫자를 만져보세요!

마지막으로

여기에서는 p5.js 에서 물고기를 표현하는 프로그래밍을 소개했습니다. 여기에서 파생하여 다양한 물고기를 만들 수 있으므로, 꼭 여러가지 시험해 주세요!

덤: 생선 마우스 스토커 확장

· fishMouseStalker