Creative coding starting with Ruby

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

Transcript

1. Rubyではじめる クリエイティブコーディング 2023/09/09 小芝美由紀
2. 小芝美由紀 / chobishiba • 出身：京都 • 大学：高槻の山の上 • 最初の会社：淀屋橋 • RubyKaigi2016(京都)：ヘルパー • 現職：株式会社万葉 ◦ マネジメント・実装 ◦ 問い合わせ調査 • 趣味：美術館めぐり、クリエイティブ コーディング 共著 ノベルティ職人
3. 小芝美由紀 / chobishiba • 出身：京都 • 大学：高槻の山の上 • 最初の会社：淀屋橋 • RubyKaigi2016(京都)：ヘルパー • 現職：株式会社万葉 ◦ マネジメント・実装 ◦ 問い合わせ調査 • 趣味：美術館めぐり、クリエイティブ コーディング 共著 ノベルティ職人
4. クリエイティブコーディングとは • コーディングはすべからくクリエイティブな行為という考えもあるが • この発表では「プログラミングでビジュアルを作る」くらいの意味合い • ジェネラティブアートとも近い ◦ “アート”とつくと敷居が高く感じる人もいそうで避けました • 「プログラミングでのお絵描き」くらいの気軽さで受け止めてもらえれば
5. クリエイティブコーディングとは こんなポストしてました 見かけたことあるって方✋
6. このグラフィックコードで作りました！
7. クリエイティブコーディングとは • 「プログラミングでビジュアルを作る」 • ソフトウェア開発のプログラミングとは違う面白さがある ◦ よく使われるのがランダム関数 ◦ 実行する度に結果が変わる ▪ 作成者も実行するまでわからない ▪ でもすべてを偶然にまかせているわけでもない ▪ 偶然に任せる部分、まかせない部分 ▪ 塩梅を調整しながら作る ◦ 一風変わった体験 ▪ 仕事だと冪等性を求められることの方が多い
8. クリエイティブコーディング • クリエイティブコーディングをして何になるの？ ◦ 何にもならないかもしれないし、なるかもしれない ◦ ただ自分が楽しむためだけに作る ▪ 作る行為自体を楽しむ ▪ 常に何かしらが描画されるのでわりと短時間で結果が得られる ▪ 結果が得られる＝達成感がある ◦ 役に立つことだけがプログラミングをやる意義の全てでもない ◦ 気軽にプログラミングを楽しんでもいいのでは ◦ やっているとなにか起こるかもしれない（今日の登壇みたいに）
9. クリエイティブコーディングの歴史 https://x.com/tadokoro/status/961822247936671744 独断と偏見に基づくクリエイティブ・コーディング年表、改訂版（田所 淳）
10. クリエイティブコーディングの歴史 https://x.com/tadokoro/status/961822247936671744 独断と偏見に基づくクリエイティブ・コーディング年表、改訂版（田所 淳）
11. Processing • Javaをベースにしたプログラミング 言語でありIDE • コーディングによる表現に関する部 分に集中できるよう設計 • 登場した2001年以降改良が重ねら れ、現在では教育の場でも使われて いる
12. Processigの歴史 https://maxoffsky.com/research/research-essay-the-history-of-processing/ Research essay: The History of Processing (MAKS SURGUY)
13. Processigの歴史 https://maxoffsky.com/research/research-essay-the-history-of-processing/ Research essay: The History of Processing (MAKS SURGUY) processingを他の言語でも できるようにしたもの
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
15. Rubyでできるとは p5.jsやprocessingのメソッドをRubyのプログラム内から呼べる p5.js rbCanvas/p5, p5.rb
16. • 10年くらい前からRubyでできるようにする試みはあった ◦ JRubyを使ってとか、gemでとか • 私もやろうとした ◦ RubyKaigi2018(福岡)でOpalの発表聞いて作りかけた ▪ 会場で作りはじめて空港で追加して家でも… ▪ 途中で力尽きた😇 Rubyとクリエイティブコーディングの関係 https://github.com/ksbmyk/rp5js/
17. 今日紹介するもの - rbCanvas/p5 と p5.rb • rbCanvas/p5 • https://rbcanvas.net/p5/ • Opal • 使える構文に制限がある • エラーメッセージがわかりやすい • p5.rb • https://p5rb.ongaeshi.me/editor • WASM • 使える構文に制限はない • エラーメッセージがわかりにくい
18. Rubyでできると何が嬉しいか • クリエイティブコーディングはRubyでやるべきと言いたいわけじゃない ◦ でも、Rubyを扱えるならやらない手はない • 手に馴染んだ道具なので絵作りに集中できる ◦ Rubyの構文に馴染んでいる ◦ 「Rubyだったらああ書くんだけど、JSだったらどうだっけ」 ◦ いっそRubyで書きたい、作りたいものに集中したい ▪ 私はRubyでやるようになってから作品数が増えた ▪ Rubyすごい！
19. Rubyでできると何が嬉しいか • クリエイティブコーディングはRubyでやるべきと言いたいわけじゃない ◦ でも、Rubyを扱えるならやらない手はない • 手に馴染んだ道具なので絵作りに集中できる ◦ Rubyの構文に馴染んでいる ◦ 「Rubyだったらああ書くんだけど、JSだったらどうだっけ」 ◦ いっそRubyで書きたい、作りたいものに集中したい 手に馴染んでるあまり車輪の再発明をしてしまうのはご愛嬌 得たい結果をイメージシすぎてメソッド用意されているのに力技し てしまった…
20. Rubyでできると何が嬉しいか クリエイティブコーディングに慣れたらまた違う道具を使うのもいい でも今Rubyが好きで使っているなら 最初の一歩はRubyではじめてみませんか？
21. 紹介 • 基本の仕組み • 簡単な作例 • どうやって作りたいものを見つけるか
22. 基本の仕組み - 座標の指定 • 描画したい場所の座標を指定 • 座標は(x, y)で表す • 左上が座標(0,0) • (400,400)だと幅400、高さ400位置 を表す (0,0) x y (400,400) 数学のy座標は下方向だとマイナスなので最初は戸惑うかも
23. 基本の仕組み - 円を描く • ellipse ◦ 円を描画する ◦ 円の中心座標と幅高さを指定 ◦ ellipse(400, 400, 300, 300) ▪ x400, y400の位置に幅, 高 さ300の円を描画 (0,0) x y 幅 高さ
24. 基本の仕組み - 塗りと線を指定する • 塗りつぶし ◦ fill ▪ 塗りつぶす色を指定 ◦ noFill ▪ 塗りつぶさない指定 • 輪郭線 ◦ stroke ▪ 輪郭線の色を指定 ◦ noStroke ▪ 輪郭線をつけない指定 fill(255) noStroke fill(255) stroke(0) noFill stroke(0)
25. 基本の仕組み - 用意されているメソッド • setup ◦ 最初の1回だけ実行 • draw ◦ ずっとくり返す くり返し 1回 Arduino触ったことがあればイメージしやすいかも
26. setup • 最初の1回だけ実行 ◦ createCanvas ▪ 描画領域のサイズ指定 ▪ createCanvas(400,400) • 縦横400 ◦ background ▪ 背景の色を指定 ▪ background(255) • 背景を白にする
27. draw • ずっとくり返す ◦ noStroke ▪ 輪郭線なしで ◦ fill(‘#aac8ff’) ▪ 色#aac8ffで塗りつぶす ◦ 円を描く ▪ x, y それぞれ0〜400のラ ンダムな位置に、縦横30 の円を描く せっかくなのでrubyのランダムを使っています p5.jsのランダムを使うなら random(0,400)
28. 実行-くり返す アニメーション的な表現ができる
29. くり返し「なし」にもできる • くりかえさなくていい、1回でいい場 合 • =静止画的な表現がしたい場合 • noLoopと設定しておくとdraw内は 1回だけ実行される • たとえば100回だけ円をランダムな 位置に描く ◦ 100回なら100.times と書けるところ個 人的にRubyの好きなところです
30. 実行-くり返し「なし」 • こうなる
31. もう少し手を加えるとこういうこともできる
32. 公式リファレンス 公式リファレンス https://p5js.org/ 日本語化プロジェクト https://p5js-i18n-ja.pages.dev/ja/
33. p5.js ビギナー向けチートシート https://bmoren.github.io/p5js-cheat-sheet/ja.html
34. 理屈はわかった、でも何を描けばいいのか • 「面白そうだけどどうすればいいかわからない」という話も聞く ◦ やりたいことが明確であれば方法を調べてできる • 日常の中から見つける ◦ 身の回りで見たもの、自分の好きなものから派生させる
35. 例：RubyKaigiロゴを描いたときのこと • 最初に紹介したRubyKaigiのロゴ • これをどうやって作ったか • いきなり完成形を思い描いていたわ けじゃない • ちょっとずつ作って、会場で人と会っ て話して浮かんだアイデア盛り込ん で完成させた
36. そこに素敵なロゴがあった • RubyKaigi楽しみだな • ロゴかわいいな • 配色も好きだな • 松本どんなところだろうな • Sみたい？（信州のSだった） • 円と半円と円弧でできてる？ • コードで描けるのでは…？ • やってみよう！！ デザインby attsumi https://x.com/atttsumi/status/1656896898555584513
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⃣
38. ロゴを描いてみる • どういう法則で並んでるか • 7つの図形でできてる ◦ 赤い円1⃣ 2⃣ ◦ 濃いグレーの半円3⃣ 4⃣ ◦ グレーの扇形5⃣ 6⃣ 7⃣ • 1マス=nで考えてみる • 描いてみる 半円や扇形=円弧はarc()中心 座標、高さと幅、開始の角度と 終了の角度を引数に渡す 幅 高 さ 開始(90) 終了(360) 赤い円 1⃣2⃣ 濃いグレーの半円 3⃣4⃣ グレーの扇形 5⃣6⃣7⃣
39. 描けた！ 赤い円 1⃣2⃣ 濃いグレーの半円 3⃣4⃣ グレーの扇形 5⃣6⃣7⃣
40. 描きたいところに描くだけでは物足りない • RubyKaigi前にロゴだけ作って公開 していたので、当日面白がっても らったが • クリエイティブコーディングの楽しい ところは、実行の度結果の変わると ころ 図形をランダムに並べてみよう
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)座標を起点に円弧 を描く
42. 色をランダムにする 色の配列 配列内の色をランダムで指定
43. 表示する図形もランダムにする 描画する図形を 5種類作っ てランダムに表示
44. 微調整 ロゴ以外は少し薄くす る ランダムに図形を並べ得 た上にロゴを描く ロゴ
45. ベースは同じでも違った印象のものができる グリッド上に並べるは覚 えておくといろいろ応用 がきく技法
46. テーマの見つけ方 • テーマの見つけ方 ◦ 身の回りで見たもの、自分の好きなものから派生させる ▪ 見かけた模様 ▪ 季節ネタから連想するもの ▪ 好きな配色 七夕 花火大会 睡蓮 ＼作ったり試したもの置いてます／ https://ksbmyk.github.io/sketch/
47. テーマの見つけ方 • SNS上で開催されている企画に参加する ◦ 一定期間出されるお題に沿って作る（ #minacoding 等） ◦ 1ツイートで作品を作る #つぶやきProcessing ◦ 毎日5p.jsのメソッドを紹介してくれる #dailycodingseed https://x.com/kim___megane/status/1661 356431868825602 https://x.com/p5js_i18n_ja/status/1668000150902681600
48. テーマの見つけ方 • お気に入りRubyメソッドをテーマにしてみる ◦ RubyKaigiでよく聞いたArray#compact!とか ◦ 気になって挙動を調べたメソッドとか
49. 日常のいろんなことが出発点になる • 気持ちをコードで表せる ◦ 喜怒哀楽いろんな感情を表せる • 写真に撮ったりやイラストを描いたり、詩歌を詠んだりなどとも近い • プログラミングを表現手段の1つとして使う • それを慣れ親しんだRubyでやる
50. 作ったものをもっと楽しむには • 公開してみてもよし • 作ったものをSNSのヘッダーにしてみてもよし • グッズにしてみてもよし • 技術同人誌の表紙にしてみてもよし • 時間を置いて前に作ったものをベースにまた作り直してもよし • ずっと楽しんでられる！！
51. クリエイティブコーディングの楽しさ • 普段やっているコーディングとはまた違った面白さ • Rubyとの関わり方の幅が広がれば、もっとRubyが楽しくなる • クリエイティブコーディング（たのしい）にRuby（たのしい）かけあわせたらめっ ちゃ楽しくなる やってみませんか？
52. やってみてはじめてわかる面白さ • ベースになるコードを公開している のでこれをベースにはじめてみま せんか？ https://gist.github.com/ksbmyk/e950ac3c71d01341218c635df8bdefab デフォルトの配色は今回の大阪 Ruby 会議03をイメージ
53. やってみてはじめてわかる面白さ https://gist.github.com/ksbmyk/e950ac3c71d01341218c635df8bdefab 色を別のものに 図形を重ねたり
54. やってみてはじめてわかる面白さ • もちろんゼロからでもOK • とっかかりあったほうがやりやす いって方は使って下さい • 作ったらぜひ公開してみてくださ い！ https://gist.github.com/ksbmyk/e950ac3c71d01341218c635df8bdefab
55. Rubyではじめるクリエイティブコーディング Enjoy Ruby！ 結構駆け足だったので休憩時間にでもコードや動かし方に質問あれば聞いて下さい〜