Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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. 小芝美由紀 / chobishiba • 出身:京都 • 大学:高槻の山の上 • 最初の会社:淀屋橋 •

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

    RubyKaigi2016(京都):ヘルパー • 現職:株式会社万葉 ◦ マネジメント・実装 ◦ 問い合わせ調査 • 趣味:美術館めぐり、クリエイティブ コーディング 共著 ノベルティ職人
  3. クリエイティブコーディングとは • 「プログラミングでビジュアルを作る」 • ソフトウェア開発のプログラミングとは違う面白さがある ◦ よく使われるのがランダム関数 ◦ 実行する度に結果が変わる ▪

    作成者も実行するまでわからない ▪ でもすべてを偶然にまかせているわけでもない ▪ 偶然に任せる部分、まかせない部分 ▪ 塩梅を調整しながら作る ◦ 一風変わった体験 ▪ 仕事だと冪等性を求められることの方が多い
  4. クリエイティブコーディング • クリエイティブコーディングをして何になるの? ◦ 何にもならないかもしれないし、なるかもしれない ◦ ただ自分が楽しむためだけに作る ▪ 作る行為自体を楽しむ ▪

    常に何かしらが描画されるのでわりと短時間で結果が得られる ▪ 結果が得られる=達成感がある ◦ 役に立つことだけがプログラミングをやる意義の全てでもない ◦ 気軽にプログラミングを楽しんでもいいのでは ◦ やっているとなにか起こるかもしれない(今日の登壇みたいに)
  5. 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
  6. 今日紹介するもの - rbCanvas/p5 と p5.rb • rbCanvas/p5 • https://rbcanvas.net/p5/ •

    Opal • 使える構文に制限がある • エラーメッセージがわかりやすい • p5.rb • https://p5rb.ongaeshi.me/editor • WASM • 使える構文に制限はない • エラーメッセージがわかりにくい
  7. Rubyでできると何が嬉しいか • クリエイティブコーディングはRubyでやるべきと言いたいわけじゃない ◦ でも、Rubyを扱えるならやらない手はない • 手に馴染んだ道具なので絵作りに集中できる ◦ Rubyの構文に馴染んでいる ◦

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

    「Rubyだったらああ書くんだけど、JSだったらどうだっけ」 ◦ いっそRubyで書きたい、作りたいものに集中したい 手に馴染んでるあまり車輪の再発明をしてしまうのはご愛嬌 得たい結果をイメージシすぎてメソッド用意されているのに力技し てしまった…
  9. 基本の仕組み - 座標の指定 • 描画したい場所の座標を指定 • 座標は(x, y)で表す • 左上が座標(0,0)

    • (400,400)だと幅400、高さ400位置 を表す (0,0) x y (400,400) 数学のy座標は下方向だとマイナスなので最初は戸惑うかも
  10. 基本の仕組み - 円を描く • ellipse ◦ 円を描画する ◦ 円の中心座標と幅高さを指定 ◦

    ellipse(400, 400, 300, 300) ▪ x400, y400の位置に幅, 高 さ300の円を描画 (0,0) x y 幅 高さ
  11. 基本の仕組み - 塗りと線を指定する • 塗りつぶし ◦ fill ▪ 塗りつぶす色を指定 ◦

    noFill ▪ 塗りつぶさない指定 • 輪郭線 ◦ stroke ▪ 輪郭線の色を指定 ◦ noStroke ▪ 輪郭線をつけない指定 fill(255) noStroke fill(255) stroke(0) noFill stroke(0)
  12. 基本の仕組み - 用意されているメソッド • setup ◦ 最初の1回だけ実行 • draw ◦

    ずっとくり返す くり返し 1回 Arduino触ったことがあればイメージしやすいかも
  13. setup • 最初の1回だけ実行 ◦ createCanvas ▪ 描画領域のサイズ指定 ▪ createCanvas(400,400) •

    縦横400 ◦ background ▪ 背景の色を指定 ▪ background(255) • 背景を白にする
  14. draw • ずっとくり返す ◦ noStroke ▪ 輪郭線なしで ◦ fill(‘#aac8ff’) ▪

    色#aac8ffで塗りつぶす ◦ 円を描く ▪ x, y それぞれ0〜400のラ ンダムな位置に、縦横30 の円を描く せっかくなのでrubyのランダムを使っています p5.jsのランダムを使うなら random(0,400)
  15. くり返し「なし」にもできる • くりかえさなくていい、1回でいい場 合 • =静止画的な表現がしたい場合 • noLoopと設定しておくとdraw内は 1回だけ実行される •

    たとえば100回だけ円をランダムな 位置に描く ◦ 100回なら100.times と書けるところ個 人的にRubyの好きなところです
  16. そこに素敵なロゴがあった • RubyKaigi楽しみだな • ロゴかわいいな • 配色も好きだな • 松本どんなところだろうな •

    Sみたい?(信州のSだった) • 円と半円と円弧でできてる? • コードで描けるのでは…? • やってみよう!! デザインby attsumi https://x.com/atttsumi/status/1656896898555584513
  17. ロゴを描いてみる • どういう法則で並んでるか • 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⃣
  18. ロゴを描いてみる • どういう法則で並んでるか • 7つの図形でできてる ◦ 赤い円1⃣ 2⃣ ◦ 濃いグレーの半円3⃣

    4⃣ ◦ グレーの扇形5⃣ 6⃣ 7⃣ • 1マス=nで考えてみる • 描いてみる 半円や扇形=円弧はarc()中心 座標、高さと幅、開始の角度と 終了の角度を引数に渡す 幅 高 さ 開始(90) 終了(360) 赤い円 1⃣2⃣ 濃いグレーの半円 3⃣4⃣ グレーの扇形 5⃣6⃣7⃣
  19. まず図形を敷きつめる(例:円弧を敷きつめる) (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)座標を起点に円弧 を描く
  20. テーマの見つけ方 • SNS上で開催されている企画に参加する ◦ 一定期間出されるお題に沿って作る( #minacoding 等) ◦ 1ツイートで作品を作る #つぶやきProcessing

    ◦ 毎日5p.jsのメソッドを紹介してくれる #dailycodingseed https://x.com/kim___megane/status/1661 356431868825602 https://x.com/p5js_i18n_ja/status/1668000150902681600