Rubyでクリエイティブコーディングをして遊んでみたよ

RubyKaigi 2024のLightning Talksで聞いたchobishibaさんのクリエイティブコーディングの話がとても楽しかったので、いまさらだけど遊んでみました。

やってみた

簡単なものからやってみよう、ということで、いま勤めている会社のロゴをコーディングすることにしました。

早速結果で、左が実際のロゴ画像、右がコーディングして描いた画像です。

すごく遠目から見たら誤魔化せるかな〜？くらいの完成度になりました。

まったくなにも分からない状態から始めて1時間半くらいでここまでできたので、簡単ですごい。ruby/wasm最高！p5.jsもp5.rbも最高！

もっと時間をかけてこだわろうと思えばいくらでもやれそうです。

妥協した点:

  • 位置調整（全体的にもうちょい上のほうがよかった）
    • このブログを書くまで横並びにすらせずになんとなくの目視で位置を決めていたので、その割にはマシなほうだとおもう
  • 図形の歪み（末端の変形や左から右にいくほど太くなっていく表現）
    • p5.jsで簡単につくれる図形の範囲でやりくりすることにしたので、実際のロゴの絶妙な形を表現できなかった
  • フォント
    • 実際のロゴで使われているフォントが分からなかった（週明け誰かに聞けば解決しそう）

参考にした情報:

書いたコード

index.html

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@ruby/3.3-wasm-wasi@2.6.2/dist/browser.script.iife.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.0/lib/p5.min.js"></script>
    <script type="text/ruby" src="https://raw.githubusercontent.com/ongaeshi/p5rb/master/docs/lib/p5.rb"></script>
    <script type="text/ruby" src="./lib/drawings/logo.rb"></script>
    <script type="text/ruby">P5::init()</script>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

lib/drawings/logo.rb

def setup
  createCanvas(250, 250)
  angleMode(DEGREES)
end

def draw
  background(255)
  draw_logo_line(x: -10, y: 60, w: 28, h: 13, degree: 30)
  draw_logo_line(x: -12, y: 90, w: 70, h: 12, degree: 22)
  draw_logo_line(x: -5, y: 118, w: 125, h: 12, degree: 14)
  draw_logo_line(x: 6, y: 145, w: 200, h: 12, degree: 8)
  draw_logo_text(x: 18, y: 218, font_size: 56)
end

def draw_logo_line(x:, y:, w:, h:, degree:)
  rotate(degree * -1)
  noStroke()
  fill(color(71, 102, 171))
  rect(x, y, w, h, 5)
  rotate(degree)
end

def draw_logo_text(x:, y:, font_size:)
  noStroke()
  fill(color(71, 102, 171))
  textSize(font_size)
  textStyle(BOLD)
  text('Leaner', x, y)
end

p5.rb Editor でも見れます

ゆる解説

とりあえず rect() を使って丸角の図形を書く

rect(x, y, w, [h], [tl], [tr], [br], [bl])

def setup
  createCanvas(250, 250) # 実際のロゴ画像と同じ250x250
end

def draw
  background(236) # 図形が分かりやすいように背景に色をつけておく

  # なんとなく横長の丸角の図形を描く
  # canvasの左上を原点とし、水平右方向がx軸の正、垂直下方向がy軸の正
  rect(30, 40, 30, 15, 5) 
end

rotate() で回転して角度をつける

rotate(angle, [axis])

def setup
  createCanvas(250, 250)

  # 角度を度数で指定できるように設定する（デフォルトはラジアン）
  angleMode(DEGREES) 
end

def draw
  background(236)

  # canvasの原点(左上)を中心として30度回転する（時計回り）
  rotate(30)
  rect(30, 40, 30, 15, 5)
end

右斜上に傾けたいので、回転角度と位置を調整する

def setup
  createCanvas(250, 250)
  angleMode(DEGREES)
end

def draw
  background(236)
  rotate(-30) # 反時計回りに30度
  rect(-10, 60, 30, 15, 5) # 左に寄せて下にずらす
end

図形の枠線を消して色を塗りつぶす

def setup
  createCanvas(250, 250)
  angleMode(DEGREES)
end

def draw
  background(236)
  rotate(-30)
  noStroke() # 枠線を消す
  fill(color(71, 102, 171)) # 塗りつぶす
  rect(-10, 60, 30, 15, 5)
end

ゆる解説以上！

ざっくりこの作業を4本分繰り返して図形を描いています。

本当にこんなんで良いんですかね、位置調整がめっちゃ大変なんですけど。 x, y を変えると回転の開始位置が変わって図形の角度が変わることになり、そのへんがすごくだるいです。

他にいい方法があるかなぁ。 shearX() とかをつかったほうがよかったのかしら。

今後やりたいこと

  • 実装方法を見直す
    • 上に書いたように、本当にこれで良いんか、ほかに方法があるだろ、という気持ちがある
    • たくさんの作品の実装方法を見たらヒントになるかもしれない
  • 妥協点を潰す
    • 位置調整、図形、フォント
  • 光らせる
    • ネオンっぽくする
  • 回す
    • 回せそうなので回す
  • Mouse EventやKeyboard Eventをトリガーとしてなにかする
  • ロゴ以外もなんかやる
    • キャラクター的なやつ