JavaScript
processing
p5.js

p5.jsでヒレが元気に動く魚を作ってみた!

先日、魚のマウスストーカーが実装される拡張機能を作りました!
kakucyou.gif

gif動画では確認しにくいのですが、実はこの魚たちはp5.jsで作られていて、ヒレや尾びれも元気に動いています笑

ここでは、p5.jsにおける魚の作り方を紹介します。参考になれば幸いです。

成果物

fishMoving.gif

魚の基本形

まずプログラムを紹介し、その後に解説を進めていきます!

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をsinにぶち込むことで、ヒレが円運動します!もしヒレの速さや振れ幅を変えたいときは、rotate内の数字をいじってみて下さい!

最後に

ここではp5.jsで魚を表現するプログラミングを紹介しました。ここから派生して、色々な魚を作ることができますので、ぜひ色々お試しください!

おまけ:フィッシュマウスストーカーの拡張機能

fishMouseStalker