Zenn
ラブグラフのエンジニアブログPublicationへの投稿
🎨

【Ruby】RubyKaigi でクリエイティブコーディングなるものと出会ったのでやってみた

水瀬ひろ
2024/05/29に公開
Ruby
クリエイティブコーディング
RubyKaigi
tech

こんにちは！
ラブグラフエンジニアのひろです。

RubyKaigi 2024 にフォトスポンサーとして参加し、写真をたくさん撮ってきました！
スポンサーボードに載っているラブグラフのロゴ

撮影をしながら各セッションをつまみ食いしたんですが、初日の Keynote [1] と2日目の Lightning Talks [2] のなかで クリエイティブコーディング というものが紹介されていました。
初めて聞いた言葉だったので、クリエイティブコーディングとはどんなものなのか、実際に挑戦してみました！

クリエイティブコーディングとは

コードを書いて絵やアニメーション、サウンドなどを作る活動だそうです。
https://zenn.dev/gin_graphic/articles/1ba83b346c0b94

ChatGPT にも聞いてみた

やってみた

文章だけだとまだ分かりませんね。
実際に書いてみましょう！

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/ruby-3_2-wasm-wasi@next/dist/browser.script.iife.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
    <script type="text/ruby" src="https://raw.githubusercontent.com/ksbmyk/sketch/main/public/p5.rb"></script>
    <script type="text/ruby">
      def setup
        createCanvas(400, 400)
      end

      def draw
        translate(width / 2, height / 2)
        back_color = "#f5f5f5"
        logo_color = "#A91401"
        background(back_color)
        fill(logo_color)
        stroke(back_color)

        beginShape()
        vertex(-45, -45)
        vertex(45, -45)
        vertex(70, -10)
        vertex(0, 65)
        vertex(-70, -10)
        endShape(CLOSE)

        line(-45, -45, -22, -10)
        line(-22, -10, 0, -45)
        line(0, -45, 22, -10)
        line(22, -10, 45, -45)
        line(-70, -10, 70, -10)
        line(-22, -10, 0, 65)
        line(22, -10, 0, 65)
      end

      P5::init()
    </script>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

こんなコードが出来上がりました。
ブラウザに表示してみると・・・

クリエイティブコーディングによる　Ruby　のアイコン

こちらです！
初めてだったのでめちゃくちゃ時間がかかりましたが、無事に Ruby のアイコンを描画することができました〜！

コードの解説

それぞれのコードの意味を解説していきます。
前提として、ブラウザ上で動作させたかったのでHTMLファイルで作っています。

HTML で Ruby を実行できるようにする部分は Findy さんのテックブログを参考にさせていただきました！
https://tech.findy.co.jp/entry/2024/05/22/083000

さっそくコードを分解していきましょう。
（間違った理解をしている部分があるかもしれません。。その場合はやさしく教えていただけると幸いです）

まずは必要なライブラリを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/ruby-3_2-wasm-wasi@next/dist/browser.script.iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
<script type="text/ruby" src="https://raw.githubusercontent.com/ksbmyk/sketch/main/public/p5.rb"></script>
  • ruby.wasm
    • Ruby コードを WebAssembly に変換するためのライブラリ [3]
  • p5.js
    • ブラウザ上で描画するためのライブラリ [4]
  • p5.rb
    • Ruby で p5.js を使うためのライブラリ [5]

続いてキャンバスを作ります。

def setup
  createCanvas(400, 400)
end

そして本体となる描画部分です。

def draw
  translate(width / 2, height / 2)　# 原点をキャンバスの中心に
  back_color = "#f5f5f5"
  logo_color = "#A91401"
  background(back_color)
  fill(logo_color)
  stroke(back_color)

  # 多角形の頂点を座標で指定
  beginShape()
  vertex(-45, -45) # 左に45、上に45の位置を頂点とする
  vertex(45, -45)
  vertex(70, -10)
  vertex(0, 65)
  vertex(-70, -10)
  endShape(CLOSE)

  # 描画した図形に、座標を指定して線を引く
  line(-45, -45, -22, -10) # 左に45、上に45 の位置から 左に22、上に10 の位置まで線を引く
  line(-22, -10, 0, -45)
  line(0, -45, 22, -10)
  line(22, -10, 45, -45)
  line(-70, -10, 70, -10)
  line(-22, -10, 0, 65)
  line(22, -10, 0, 65)
end

初めて見るメソッドもあると思いますが、分解してみるとシンプルなものですね。

終わりに

これで無事にクリエイティブコーディングの世界に入門できました！
今回はベタ書きに近いものだったので、 Ruby のメソッドを使ったりしてより複雑なものにも挑戦してみたいです。

ぜひみなさんも Ruby でのクリエイティブコーディングに挑戦してみてください！

脚注

  1. @tompng さんによる Writing Weird Code
    https://rubykaigi.org/2024/presentations/tompng.html#day1 ↩︎

  2. chobishiba さんによる Enjoy Creative Coding with Ruby
    https://rubykaigi.org/2024/presentations/lt/#:~:text=Enjoy Creative Coding with Ruby ↩︎

  3. ruby.wasm
    https://github.com/ruby/ruby.wasm ↩︎

  4. p5.js
    https://github.com/processing/p5.js ↩︎

  5. p5.rb
    https://github.com/ongaeshi/p5rb ↩︎

ラブグラフのエンジニアブログ
ラブグラフのエンジニアブログPublication

corporate.lovegraph.me 出張写真撮影サービス『ラブグラフ』やオンライン写真教室『ラブグラフアカデミー』を提供しています

Discussion