Creative coding starting with Ruby

by chobishiba

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

ロゴを描いてみる ● どういう法則で並んでるか ● 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⃣

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

まず図形を敷きつめる（例：円弧を敷きつめる） (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)座標を起点に円弧を描く

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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