$30 off During Our Annual Pro Sale. View Details »

Creative coding starting with Ruby

chobishiba
September 09, 2023

Creative coding starting with Ruby

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

chobishiba

September 09, 2023
Tweet

More Decks by chobishiba

Other Decks in Programming

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