【Ruby】RubyKaigi でクリエイティブコーディングなるものと出会ったのでやってみた
こんにちは!
ラブグラフエンジニアのひろです。
RubyKaigi 2024 にフォトスポンサーとして参加し、写真をたくさん撮ってきました!
撮影をしながら各セッションをつまみ食いしたんですが、初日の Keynote [1] と2日目の Lightning Talks [2] のなかで クリエイティブコーディング というものが紹介されていました。
初めて聞いた言葉だったので、クリエイティブコーディングとはどんなものなのか、実際に挑戦してみました!
クリエイティブコーディングとは
コードを書いて絵やアニメーション、サウンドなどを作る活動だそうです。
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 のアイコンを描画することができました〜!
コードの解説
それぞれのコードの意味を解説していきます。
前提として、ブラウザ上で動作させたかったのでHTMLファイルで作っています。
HTML で Ruby を実行できるようにする部分は Findy さんのテックブログを参考にさせていただきました!
さっそくコードを分解していきましょう。
(間違った理解をしている部分があるかもしれません。。その場合はやさしく教えていただけると幸いです)
まずは必要なライブラリを読み込みます。
<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 でのクリエイティブコーディングに挑戦してみてください!
-
@tompng さんによる Writing Weird Code
https://rubykaigi.org/2024/presentations/tompng.html#day1 ↩︎ -
chobishiba さんによる Enjoy Creative Coding with Ruby
https://rubykaigi.org/2024/presentations/lt/#:~:text=Enjoy Creative Coding with Ruby ↩︎ -
ruby.wasm
https://github.com/ruby/ruby.wasm ↩︎
Discussion