Creative coding starting with Ruby

「Rubyではじめるクリエイティブコーディング」大阪Ruby会議03で発表した資料です

Transcript

1. Rubyではじめる
   クリエイティブコーディング
   2023/09/09 小芝美由紀
   

   View Slide

2. 小芝美由紀 / chobishiba
   ● 出身：京都
   ● 大学：高槻の山の上
   ● 最初の会社：淀屋橋
   ● RubyKaigi2016(京都)：ヘルパー
   ● 現職：株式会社万葉
   ○ マネジメント・実装
   ○ 問い合わせ調査
   ● 趣味：美術館めぐり、クリエイティブ
   コーディング
   共著
   ノベルティ職人
   

   View Slide

3. 小芝美由紀 / chobishiba
   ● 出身：京都
   ● 大学：高槻の山の上
   ● 最初の会社：淀屋橋
   ● RubyKaigi2016(京都)：ヘルパー
   ● 現職：株式会社万葉
   ○ マネジメント・実装
   ○ 問い合わせ調査
   ● 趣味：美術館めぐり、クリエイティブ
   コーディング
   共著
   ノベルティ職人
   

   View Slide

4. クリエイティブコーディングとは
   ● コーディングはすべからくクリエイティブな行為という考えもあるが
   ● この発表では「プログラミングでビジュアルを作る」くらいの意味合い
   ● ジェネラティブアートとも近い
   ○ “アート”とつくと敷居が高く感じる人もいそうで避けました
   ● 「プログラミングでのお絵描き」くらいの気軽さで受け止めてもらえれば
   

   View Slide

5. クリエイティブコーディングとは
   こんなポストしてました
   見かけたことあるって方✋
   

   View Slide

6. このグラフィックコードで作りました！
   

   View Slide

7. クリエイティブコーディングとは
   ● 「プログラミングでビジュアルを作る」
   ● ソフトウェア開発のプログラミングとは違う面白さがある
   ○ よく使われるのがランダム関数
   ○ 実行する度に結果が変わる
   ■ 作成者も実行するまでわからない
   ■ でもすべてを偶然にまかせているわけでもない
   ■ 偶然に任せる部分、まかせない部分
   ■ 塩梅を調整しながら作る
   ○ 一風変わった体験
   ■ 仕事だと冪等性を求められることの方が多い
   

   View Slide

8. クリエイティブコーディング
   ● クリエイティブコーディングをして何になるの？
   ○ 何にもならないかもしれないし、なるかもしれない
   ○ ただ自分が楽しむためだけに作る
   ■ 作る行為自体を楽しむ
   ■ 常に何かしらが描画されるのでわりと短時間で結果が得られる
   ■ 結果が得られる＝達成感がある
   ○ 役に立つことだけがプログラミングをやる意義の全てでもない
   ○ 気軽にプログラミングを楽しんでもいいのでは
   ○ やっているとなにか起こるかもしれない（今日の登壇みたいに）
   

   View Slide

9. クリエイティブコーディングの歴史
   https://x.com/tadokoro/status/961822247936671744
   独断と偏見に基づくクリエイティブ・コーディング年表、改訂版（田所 淳）
   

   View Slide

10. クリエイティブコーディングの歴史
    https://x.com/tadokoro/status/961822247936671744
    独断と偏見に基づくクリエイティブ・コーディング年表、改訂版（田所 淳）
    

    View Slide

11. Processing
    ● Javaをベースにしたプログラミング
    言語でありIDE
    ● コーディングによる表現に関する部
    分に集中できるよう設計
    ● 登場した2001年以降改良が重ねら
    れ、現在では教育の場でも使われて
    いる
    

    View Slide

12. Processigの歴史
    https://maxoffsky.com/research/research-essay-the-history-of-processing/
    Research essay: The History of Processing (MAKS SURGUY)
    

    View Slide

13. Processigの歴史
    https://maxoffsky.com/research/research-essay-the-history-of-processing/
    Research essay: The History of Processing (MAKS SURGUY)
    processingを他の言語でも
    できるようにしたもの
    

    View Slide

14. Processigの歴史
    https://maxoffsky.com/research/research-essay-the-history-of-processing/
    Research essay: The History of Processing (MAKS SURGUY)
    Rubyでもできます！
    RubySketch(iOS) 2021
    rbCanvas(ブラウザ) 2022
    p5.rb(ブラウザ) 2023
    

    View Slide

15. Rubyでできるとは
    p5.jsやprocessingのメソッドをRubyのプログラム内から呼べる
    p5.js rbCanvas/p5, p5.rb
    

    View Slide

16. ● 10年くらい前からRubyでできるようにする試みはあった
    ○ JRubyを使ってとか、gemでとか
    ● 私もやろうとした
    ○ RubyKaigi2018(福岡)でOpalの発表聞いて作りかけた
    ■ 会場で作りはじめて空港で追加して家でも…
    ■ 途中で力尽きた😇
    Rubyとクリエイティブコーディングの関係
    https://github.com/ksbmyk/rp5js/
    

    View Slide

17. 今日紹介するもの - rbCanvas/p5 と p5.rb
    ● rbCanvas/p5
    ● https://rbcanvas.net/p5/
    ● Opal
    ● 使える構文に制限がある
    ● エラーメッセージがわかりやすい
    ● p5.rb
    ● https://p5rb.ongaeshi.me/editor
    ● WASM
    ● 使える構文に制限はない
    ● エラーメッセージがわかりにくい
    

    View Slide

18. Rubyでできると何が嬉しいか
    ● クリエイティブコーディングはRubyでやるべきと言いたいわけじゃない
    ○ でも、Rubyを扱えるならやらない手はない
    ● 手に馴染んだ道具なので絵作りに集中できる
    ○ Rubyの構文に馴染んでいる
    ○ 「Rubyだったらああ書くんだけど、JSだったらどうだっけ」
    ○ いっそRubyで書きたい、作りたいものに集中したい
    ■ 私はRubyでやるようになってから作品数が増えた
    ■ Rubyすごい！
    

    View Slide

19. Rubyでできると何が嬉しいか
    ● クリエイティブコーディングはRubyでやるべきと言いたいわけじゃない
    ○ でも、Rubyを扱えるならやらない手はない
    ● 手に馴染んだ道具なので絵作りに集中できる
    ○ Rubyの構文に馴染んでいる
    ○ 「Rubyだったらああ書くんだけど、JSだったらどうだっけ」
    ○ いっそRubyで書きたい、作りたいものに集中したい
    手に馴染んでるあまり車輪の再発明をしてしまうのはご愛嬌
    得たい結果をイメージシすぎてメソッド用意されているのに力技し
    てしまった…
    

    View Slide

20. Rubyでできると何が嬉しいか
    クリエイティブコーディングに慣れたらまた違う道具を使うのもいい
    でも今Rubyが好きで使っているなら
    最初の一歩はRubyではじめてみませんか？
    

    View Slide

21. 紹介
    ● 基本の仕組み
    ● 簡単な作例
    ● どうやって作りたいものを見つけるか
    

    View Slide

22. 基本の仕組み - 座標の指定
    ● 描画したい場所の座標を指定
    ● 座標は(x, y)で表す
    ● 左上が座標(0,0)
    ● (400,400)だと幅400、高さ400位置
    を表す
    (0,0) x
    y
    (400,400)
    数学のy座標は下方向だとマイナスなので最初は戸惑うかも
    

    View Slide

23. 基本の仕組み - 円を描く
    ● ellipse
    ○ 円を描画する
    ○ 円の中心座標と幅高さを指定
    ○ ellipse(400, 400, 300, 300)
    ■ x400, y400の位置に幅, 高
    さ300の円を描画
    (0,0) x
    y
    幅
    高さ
    

    View Slide

24. 基本の仕組み - 塗りと線を指定する
    ● 塗りつぶし
    ○ fill
    ■ 塗りつぶす色を指定
    ○ noFill
    ■ 塗りつぶさない指定
    ● 輪郭線
    ○ stroke
    ■ 輪郭線の色を指定
    ○ noStroke
    ■ 輪郭線をつけない指定
    fill(255)
    noStroke
    fill(255)
    stroke(0)
    noFill
    stroke(0)
    

    View Slide

25. 基本の仕組み - 用意されているメソッド
    ● setup
    ○ 最初の1回だけ実行
    ● draw
    ○ ずっとくり返す
    くり返し
    1回
    Arduino触ったことがあればイメージしやすいかも
    

    View Slide

26. setup
    ● 最初の1回だけ実行
    ○ createCanvas
    ■ 描画領域のサイズ指定
    ■ createCanvas(400,400)
    ● 縦横400
    ○ background
    ■ 背景の色を指定
    ■ background(255)
    ● 背景を白にする
    

    View Slide

27. draw
    ● ずっとくり返す
    ○ noStroke
    ■ 輪郭線なしで
    ○ fill(‘#aac8ff’)
    ■ 色#aac8ffで塗りつぶす
    ○ 円を描く
    ■ x, y それぞれ0〜400のラ
    ンダムな位置に、縦横30
    の円を描く
    せっかくなのでrubyのランダムを使っています
    p5.jsのランダムを使うなら random(0,400)
    

    View Slide

28. 実行-くり返す
    アニメーション的な表現ができる
    

    View Slide

29. くり返し「なし」にもできる
    ● くりかえさなくていい、1回でいい場
    合
    ● =静止画的な表現がしたい場合
    ● noLoopと設定しておくとdraw内は
    1回だけ実行される
    ● たとえば100回だけ円をランダムな
    位置に描く
    ○ 100回なら100.times と書けるところ個
    人的にRubyの好きなところです
    

    View Slide

30. 実行-くり返し「なし」
    ● こうなる
    

    View Slide

31. もう少し手を加えるとこういうこともできる
    

    View Slide

32. 公式リファレンス
    公式リファレンス https://p5js.org/
    日本語化プロジェクト https://p5js-i18n-ja.pages.dev/ja/
    

    View Slide

33. p5.js ビギナー向けチートシート
    https://bmoren.github.io/p5js-cheat-sheet/ja.html
    

    View Slide

34. 理屈はわかった、でも何を描けばいいのか
    ● 「面白そうだけどどうすればいいかわからない」という話も聞く
    ○ やりたいことが明確であれば方法を調べてできる
    ● 日常の中から見つける
    ○ 身の回りで見たもの、自分の好きなものから派生させる
    

    View Slide

35. 例：RubyKaigiロゴを描いたときのこと
    ● 最初に紹介したRubyKaigiのロゴ
    ● これをどうやって作ったか
    ● いきなり完成形を思い描いていたわ
    けじゃない
    ● ちょっとずつ作って、会場で人と会っ
    て話して浮かんだアイデア盛り込ん
    で完成させた
    

    View Slide

36. そこに素敵なロゴがあった
    ● RubyKaigi楽しみだな
    ● ロゴかわいいな
    ● 配色も好きだな
    ● 松本どんなところだろうな
    ● Sみたい？（信州のSだった）
    ● 円と半円と円弧でできてる？
    ● コードで描けるのでは…？
    ● やってみよう！！
    デザインby attsumi
    https://x.com/atttsumi/status/1656896898555584513
    

    View Slide

37. ロゴを描いてみる
    ● どういう法則で並んでるか
    ● 7つの図形でできてる
    ○ 赤い円1⃣ 2⃣
    ○ 濃いグレーの半円3⃣ 4⃣
    ○ グレーの扇形5⃣ 6⃣ 7⃣
    ● 1マス=nで考えてみる
    ● 描いてみる
    n
    (n, n)
    (0, n*2)
    (n*2, n)
    (n*2, n*2)
    (n, n*3)
    (n/2, n*2+n/2)
    (n+n/2, n+n/2)
    ・
    ・
    ・
    ・
    ・
    ・
    ・
    ・ (0, 0)
    1⃣
    2⃣
    3⃣
    4⃣
    5⃣
    6⃣
    7⃣
    

    View Slide

38. ロゴを描いてみる
    ● どういう法則で並んでるか
    ● 7つの図形でできてる
    ○ 赤い円1⃣ 2⃣
    ○ 濃いグレーの半円3⃣ 4⃣
    ○ グレーの扇形5⃣ 6⃣ 7⃣
    ● 1マス=nで考えてみる
    ● 描いてみる
    半円や扇形=円弧はarc()中心
    座標、高さと幅、開始の角度と
    終了の角度を引数に渡す
    幅
    高
    さ
    開始(90)
    終了(360)
    赤い円 1⃣2⃣
    濃いグレーの半円 3⃣4⃣
    グレーの扇形 5⃣6⃣7⃣
    

    View Slide

39. 描けた！
    赤い円 1⃣2⃣
    濃いグレーの半円 3⃣4⃣
    グレーの扇形 5⃣6⃣7⃣
    

    View Slide

40. 描きたいところに描くだけでは物足りない
    ● RubyKaigi前にロゴだけ作って公開
    していたので、当日面白がっても
    らったが
    ● クリエイティブコーディングの楽しい
    ところは、実行の度結果の変わると
    ころ
    図形をランダムに並べてみよう
    

    View Slide

41. まず図形を敷きつめる（例：円弧を敷きつめる）
    (0,0) (0,640)
    (0,80)
    (640,640)
    80 * 9 = 720
    side = 80
    (80,0)
    (0,640) (80,640)
    1マス80のマス目を縦横
    9並べられるサイズにす
    る
    0から描画域の幅 (=width)、高さ
    (=height)になるまで80(=$side)ずつ
    増やしていく
    (0, 0) (0,80)…(0,640)
    (80,0)(80,80)…(80,640)
    …
    (640,0)…(640,640)
    (x, y)座標を起点に円弧
    を描く
    

    View Slide

42. 色をランダムにする
    色の配列
    配列内の色をランダムで指定
    

    View Slide

43. 表示する図形もランダムにする
    描画する図形を 5種類作っ
    てランダムに表示
    

    View Slide

44. 微調整
    ロゴ以外は少し薄くす
    る
    ランダムに図形を並べ得
    た上にロゴを描く
    ロゴ
    

    View Slide

45. ベースは同じでも違った印象のものができる
    グリッド上に並べるは覚
    えておくといろいろ応用
    がきく技法
    

    View Slide

46. テーマの見つけ方
    ● テーマの見つけ方
    ○ 身の回りで見たもの、自分の好きなものから派生させる
    ■ 見かけた模様
    ■ 季節ネタから連想するもの
    ■ 好きな配色
    七夕 花火大会
    睡蓮
    ＼作ったり試したもの置いてます／
    https://ksbmyk.github.io/sketch/
    

    View Slide

47. テーマの見つけ方
    ● SNS上で開催されている企画に参加する
    ○ 一定期間出されるお題に沿って作る（ #minacoding 等）
    ○ 1ツイートで作品を作る #つぶやきProcessing
    ○ 毎日5p.jsのメソッドを紹介してくれる #dailycodingseed
    https://x.com/kim___megane/status/1661
    356431868825602
    https://x.com/p5js_i18n_ja/status/1668000150902681600
    

    View Slide

48. テーマの見つけ方
    ● お気に入りRubyメソッドをテーマにしてみる
    ○ RubyKaigiでよく聞いたArray#compact!とか
    ○ 気になって挙動を調べたメソッドとか
    

    View Slide

49. 日常のいろんなことが出発点になる
    ● 気持ちをコードで表せる
    ○ 喜怒哀楽いろんな感情を表せる
    ● 写真に撮ったりやイラストを描いたり、詩歌を詠んだりなどとも近い
    ● プログラミングを表現手段の1つとして使う
    ● それを慣れ親しんだRubyでやる
    

    View Slide

50. 作ったものをもっと楽しむには
    ● 公開してみてもよし
    ● 作ったものをSNSのヘッダーにしてみてもよし
    ● グッズにしてみてもよし
    ● 技術同人誌の表紙にしてみてもよし
    ● 時間を置いて前に作ったものをベースにまた作り直してもよし
    ● ずっと楽しんでられる！！
    

    View Slide

51. クリエイティブコーディングの楽しさ
    ● 普段やっているコーディングとはまた違った面白さ
    ● Rubyとの関わり方の幅が広がれば、もっとRubyが楽しくなる
    ● クリエイティブコーディング（たのしい）にRuby（たのしい）かけあわせたらめっ
    ちゃ楽しくなる
    やってみませんか？
    

    View Slide

52. やってみてはじめてわかる面白さ
    ● ベースになるコードを公開している
    のでこれをベースにはじめてみま
    せんか？
    https://gist.github.com/ksbmyk/e950ac3c71d01341218c635df8bdefab
    デフォルトの配色は今回の大阪 Ruby
    会議03をイメージ
    

    View Slide

53. やってみてはじめてわかる面白さ
    https://gist.github.com/ksbmyk/e950ac3c71d01341218c635df8bdefab
    色を別のものに 図形を重ねたり
    

    View Slide

54. やってみてはじめてわかる面白さ
    ● もちろんゼロからでもOK
    ● とっかかりあったほうがやりやす
    いって方は使って下さい
    ● 作ったらぜひ公開してみてくださ
    い！
    https://gist.github.com/ksbmyk/e950ac3c71d01341218c635df8bdefab
    

    View Slide

55. Rubyではじめるクリエイティブコーディング
    Enjoy Ruby！
    結構駆け足だったので休憩時間にでもコードや動かし方に質問あれば聞いて下さい〜
    

    View Slide