Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Creative coding starting with Ruby
Search
chobishiba
September 09, 2023
Programming
2
2.9k
Creative coding starting with Ruby
「Rubyではじめるクリエイティブコーディング」大阪Ruby会議03で発表した資料です
chobishiba
September 09, 2023
Tweet
Share
More Decks by chobishiba
See All by chobishiba
クリエイティブコーディングとRuby学習 / Creative Coding and Learning Ruby
chobishiba
0
3.4k
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
2.5k
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
2
370
Enjoy Creative Coding with Ruby (RubyKaigi2024)
chobishiba
0
7.6k
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding and Ruby
chobishiba
1
690
プログラミングを楽しもう! / Enjoy Programming
chobishiba
1
1.4k
らくらくスペースレイアウト / rakuraku space layout
chobishiba
0
110
巨大スポンサーに埋もれないノベルティの作り方 / novelty not buried in huge sponsors
chobishiba
0
440
Other Decks in Programming
See All in Programming
DevTools extensions で 独自の DevTool を開発する | FlutterKaigi 2024
kokiyoshida
0
430
PaaSとSaaSの境目で信頼性と開発速度を両立する 〜TROCCO®︎のこれまでとこれから〜
gtnao
6
6.8k
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
7
3.3k
Modular Monolith Monorepo ~シンプルさを保ちながらmonorepoのメリットを最大化する~
yuisakamoto
11
3.9k
Symfony Mapper Component
soyuka
2
470
AWS認定資格を勉強した先に何があったか
satoshi256kbyte
2
180
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ!
maroon1st
0
230
テスト自動化失敗から再挑戦しチームにオーナーシップを委譲した話/STAC2024 macho
ma_cho29
1
510
CSC305 Lecture 25
javiergs
PRO
0
110
42 best practices for Symfony, a decade later
tucksaun
1
110
アニメーションを最深まで理解してパフォーマンスを向上させる
mine2424
0
100
デザインパターンで理解するLLMエージェントの作り方 / How to develop an LLM agent using agentic design patterns
rkaga
11
3.2k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
18
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Agile that works and the tools we love
rasmusluckow
328
21k
GraphQLとの向き合い方2022年版
quramy
44
13k
Music & Morning Musume
bryan
46
6.2k
Unsuck your backbone
ammeep
669
57k
The Cult of Friendly URLs
andyhume
78
6.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
Building Applications with DynamoDB
mza
91
6.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
It's Worth the Effort
3n
183
27k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Transcript
Rubyではじめる クリエイティブコーディング 2023/09/09 小芝美由紀
小芝美由紀 / chobishiba • 出身:京都 • 大学:高槻の山の上 • 最初の会社:淀屋橋 •
RubyKaigi2016(京都):ヘルパー • 現職:株式会社万葉 ◦ マネジメント・実装 ◦ 問い合わせ調査 • 趣味:美術館めぐり、クリエイティブ コーディング 共著 ノベルティ職人
小芝美由紀 / chobishiba • 出身:京都 • 大学:高槻の山の上 • 最初の会社:淀屋橋 •
RubyKaigi2016(京都):ヘルパー • 現職:株式会社万葉 ◦ マネジメント・実装 ◦ 問い合わせ調査 • 趣味:美術館めぐり、クリエイティブ コーディング 共著 ノベルティ職人
クリエイティブコーディングとは • コーディングはすべからくクリエイティブな行為という考えもあるが • この発表では「プログラミングでビジュアルを作る」くらいの意味合い • ジェネラティブアートとも近い ◦ “アート”とつくと敷居が高く感じる人もいそうで避けました •
「プログラミングでのお絵描き」くらいの気軽さで受け止めてもらえれば
クリエイティブコーディングとは こんなポストしてました 見かけたことあるって方✋
このグラフィックコードで作りました!
クリエイティブコーディングとは • 「プログラミングでビジュアルを作る」 • ソフトウェア開発のプログラミングとは違う面白さがある ◦ よく使われるのがランダム関数 ◦ 実行する度に結果が変わる ▪
作成者も実行するまでわからない ▪ でもすべてを偶然にまかせているわけでもない ▪ 偶然に任せる部分、まかせない部分 ▪ 塩梅を調整しながら作る ◦ 一風変わった体験 ▪ 仕事だと冪等性を求められることの方が多い
クリエイティブコーディング • クリエイティブコーディングをして何になるの? ◦ 何にもならないかもしれないし、なるかもしれない ◦ ただ自分が楽しむためだけに作る ▪ 作る行為自体を楽しむ ▪
常に何かしらが描画されるのでわりと短時間で結果が得られる ▪ 結果が得られる=達成感がある ◦ 役に立つことだけがプログラミングをやる意義の全てでもない ◦ 気軽にプログラミングを楽しんでもいいのでは ◦ やっているとなにか起こるかもしれない(今日の登壇みたいに)
クリエイティブコーディングの歴史 https://x.com/tadokoro/status/961822247936671744 独断と偏見に基づくクリエイティブ・コーディング年表、改訂版(田所 淳)
クリエイティブコーディングの歴史 https://x.com/tadokoro/status/961822247936671744 独断と偏見に基づくクリエイティブ・コーディング年表、改訂版(田所 淳)
Processing • Javaをベースにしたプログラミング 言語でありIDE • コーディングによる表現に関する部 分に集中できるよう設計 • 登場した2001年以降改良が重ねら れ、現在では教育の場でも使われて
いる
Processigの歴史 https://maxoffsky.com/research/research-essay-the-history-of-processing/ Research essay: The History of Processing (MAKS SURGUY)
Processigの歴史 https://maxoffsky.com/research/research-essay-the-history-of-processing/ Research essay: The History of Processing (MAKS SURGUY)
processingを他の言語でも できるようにしたもの
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
Rubyでできるとは p5.jsやprocessingのメソッドをRubyのプログラム内から呼べる p5.js rbCanvas/p5, p5.rb
• 10年くらい前からRubyでできるようにする試みはあった ◦ JRubyを使ってとか、gemでとか • 私もやろうとした ◦ RubyKaigi2018(福岡)でOpalの発表聞いて作りかけた ▪ 会場で作りはじめて空港で追加して家でも…
▪ 途中で力尽きた😇 Rubyとクリエイティブコーディングの関係 https://github.com/ksbmyk/rp5js/
今日紹介するもの - rbCanvas/p5 と p5.rb • rbCanvas/p5 • https://rbcanvas.net/p5/ •
Opal • 使える構文に制限がある • エラーメッセージがわかりやすい • p5.rb • https://p5rb.ongaeshi.me/editor • WASM • 使える構文に制限はない • エラーメッセージがわかりにくい
Rubyでできると何が嬉しいか • クリエイティブコーディングはRubyでやるべきと言いたいわけじゃない ◦ でも、Rubyを扱えるならやらない手はない • 手に馴染んだ道具なので絵作りに集中できる ◦ Rubyの構文に馴染んでいる ◦
「Rubyだったらああ書くんだけど、JSだったらどうだっけ」 ◦ いっそRubyで書きたい、作りたいものに集中したい ▪ 私はRubyでやるようになってから作品数が増えた ▪ Rubyすごい!
Rubyでできると何が嬉しいか • クリエイティブコーディングはRubyでやるべきと言いたいわけじゃない ◦ でも、Rubyを扱えるならやらない手はない • 手に馴染んだ道具なので絵作りに集中できる ◦ Rubyの構文に馴染んでいる ◦
「Rubyだったらああ書くんだけど、JSだったらどうだっけ」 ◦ いっそRubyで書きたい、作りたいものに集中したい 手に馴染んでるあまり車輪の再発明をしてしまうのはご愛嬌 得たい結果をイメージシすぎてメソッド用意されているのに力技し てしまった…
Rubyでできると何が嬉しいか クリエイティブコーディングに慣れたらまた違う道具を使うのもいい でも今Rubyが好きで使っているなら 最初の一歩はRubyではじめてみませんか?
紹介 • 基本の仕組み • 簡単な作例 • どうやって作りたいものを見つけるか
基本の仕組み - 座標の指定 • 描画したい場所の座標を指定 • 座標は(x, y)で表す • 左上が座標(0,0)
• (400,400)だと幅400、高さ400位置 を表す (0,0) x y (400,400) 数学のy座標は下方向だとマイナスなので最初は戸惑うかも
基本の仕組み - 円を描く • ellipse ◦ 円を描画する ◦ 円の中心座標と幅高さを指定 ◦
ellipse(400, 400, 300, 300) ▪ x400, y400の位置に幅, 高 さ300の円を描画 (0,0) x y 幅 高さ
基本の仕組み - 塗りと線を指定する • 塗りつぶし ◦ fill ▪ 塗りつぶす色を指定 ◦
noFill ▪ 塗りつぶさない指定 • 輪郭線 ◦ stroke ▪ 輪郭線の色を指定 ◦ noStroke ▪ 輪郭線をつけない指定 fill(255) noStroke fill(255) stroke(0) noFill stroke(0)
基本の仕組み - 用意されているメソッド • setup ◦ 最初の1回だけ実行 • draw ◦
ずっとくり返す くり返し 1回 Arduino触ったことがあればイメージしやすいかも
setup • 最初の1回だけ実行 ◦ createCanvas ▪ 描画領域のサイズ指定 ▪ createCanvas(400,400) •
縦横400 ◦ background ▪ 背景の色を指定 ▪ background(255) • 背景を白にする
draw • ずっとくり返す ◦ noStroke ▪ 輪郭線なしで ◦ fill(‘#aac8ff’) ▪
色#aac8ffで塗りつぶす ◦ 円を描く ▪ x, y それぞれ0〜400のラ ンダムな位置に、縦横30 の円を描く せっかくなのでrubyのランダムを使っています p5.jsのランダムを使うなら random(0,400)
実行-くり返す アニメーション的な表現ができる
くり返し「なし」にもできる • くりかえさなくていい、1回でいい場 合 • =静止画的な表現がしたい場合 • noLoopと設定しておくとdraw内は 1回だけ実行される •
たとえば100回だけ円をランダムな 位置に描く ◦ 100回なら100.times と書けるところ個 人的にRubyの好きなところです
実行-くり返し「なし」 • こうなる
もう少し手を加えるとこういうこともできる
公式リファレンス 公式リファレンス https://p5js.org/ 日本語化プロジェクト https://p5js-i18n-ja.pages.dev/ja/
p5.js ビギナー向けチートシート https://bmoren.github.io/p5js-cheat-sheet/ja.html
理屈はわかった、でも何を描けばいいのか • 「面白そうだけどどうすればいいかわからない」という話も聞く ◦ やりたいことが明確であれば方法を調べてできる • 日常の中から見つける ◦ 身の回りで見たもの、自分の好きなものから派生させる
例:RubyKaigiロゴを描いたときのこと • 最初に紹介したRubyKaigiのロゴ • これをどうやって作ったか • いきなり完成形を思い描いていたわ けじゃない • ちょっとずつ作って、会場で人と会っ
て話して浮かんだアイデア盛り込ん で完成させた
そこに素敵なロゴがあった • RubyKaigi楽しみだな • ロゴかわいいな • 配色も好きだな • 松本どんなところだろうな •
Sみたい?(信州のSだった) • 円と半円と円弧でできてる? • コードで描けるのでは…? • やってみよう!! デザインby attsumi https://x.com/atttsumi/status/1656896898555584513
ロゴを描いてみる • どういう法則で並んでるか • 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⃣
ロゴを描いてみる • どういう法則で並んでるか • 7つの図形でできてる ◦ 赤い円1⃣ 2⃣ ◦ 濃いグレーの半円3⃣
4⃣ ◦ グレーの扇形5⃣ 6⃣ 7⃣ • 1マス=nで考えてみる • 描いてみる 半円や扇形=円弧はarc()中心 座標、高さと幅、開始の角度と 終了の角度を引数に渡す 幅 高 さ 開始(90) 終了(360) 赤い円 1⃣2⃣ 濃いグレーの半円 3⃣4⃣ グレーの扇形 5⃣6⃣7⃣
描けた! 赤い円 1⃣2⃣ 濃いグレーの半円 3⃣4⃣ グレーの扇形 5⃣6⃣7⃣
描きたいところに描くだけでは物足りない • RubyKaigi前にロゴだけ作って公開 していたので、当日面白がっても らったが • クリエイティブコーディングの楽しい ところは、実行の度結果の変わると ころ 図形をランダムに並べてみよう
まず図形を敷きつめる(例:円弧を敷きつめる) (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)座標を起点に円弧 を描く
色をランダムにする 色の配列 配列内の色をランダムで指定
表示する図形もランダムにする 描画する図形を 5種類作っ てランダムに表示
微調整 ロゴ以外は少し薄くす る ランダムに図形を並べ得 た上にロゴを描く ロゴ
ベースは同じでも違った印象のものができる グリッド上に並べるは覚 えておくといろいろ応用 がきく技法
テーマの見つけ方 • テーマの見つけ方 ◦ 身の回りで見たもの、自分の好きなものから派生させる ▪ 見かけた模様 ▪ 季節ネタから連想するもの ▪
好きな配色 七夕 花火大会 睡蓮 \作ったり試したもの置いてます/ https://ksbmyk.github.io/sketch/
テーマの見つけ方 • SNS上で開催されている企画に参加する ◦ 一定期間出されるお題に沿って作る( #minacoding 等) ◦ 1ツイートで作品を作る #つぶやきProcessing
◦ 毎日5p.jsのメソッドを紹介してくれる #dailycodingseed https://x.com/kim___megane/status/1661 356431868825602 https://x.com/p5js_i18n_ja/status/1668000150902681600
テーマの見つけ方 • お気に入りRubyメソッドをテーマにしてみる ◦ RubyKaigiでよく聞いたArray#compact!とか ◦ 気になって挙動を調べたメソッドとか
日常のいろんなことが出発点になる • 気持ちをコードで表せる ◦ 喜怒哀楽いろんな感情を表せる • 写真に撮ったりやイラストを描いたり、詩歌を詠んだりなどとも近い • プログラミングを表現手段の1つとして使う •
それを慣れ親しんだRubyでやる
作ったものをもっと楽しむには • 公開してみてもよし • 作ったものをSNSのヘッダーにしてみてもよし • グッズにしてみてもよし • 技術同人誌の表紙にしてみてもよし •
時間を置いて前に作ったものをベースにまた作り直してもよし • ずっと楽しんでられる!!
クリエイティブコーディングの楽しさ • 普段やっているコーディングとはまた違った面白さ • Rubyとの関わり方の幅が広がれば、もっとRubyが楽しくなる • クリエイティブコーディング(たのしい)にRuby(たのしい)かけあわせたらめっ ちゃ楽しくなる やってみませんか?
やってみてはじめてわかる面白さ • ベースになるコードを公開している のでこれをベースにはじめてみま せんか? https://gist.github.com/ksbmyk/e950ac3c71d01341218c635df8bdefab デフォルトの配色は今回の大阪 Ruby 会議03をイメージ
やってみてはじめてわかる面白さ https://gist.github.com/ksbmyk/e950ac3c71d01341218c635df8bdefab 色を別のものに 図形を重ねたり
やってみてはじめてわかる面白さ • もちろんゼロからでもOK • とっかかりあったほうがやりやす いって方は使って下さい • 作ったらぜひ公開してみてくださ い! https://gist.github.com/ksbmyk/e950ac3c71d01341218c635df8bdefab
Rubyではじめるクリエイティブコーディング Enjoy Ruby! 結構駆け足だったので休憩時間にでもコードや動かし方に質問あれば聞いて下さい〜