Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
LiveCoding入門
Search
Takahiro Hirata
October 17, 2022
Programming
0
270
LiveCoding入門
Takahiro Hirata
October 17, 2022
Tweet
Share
More Decks by Takahiro Hirata
See All by Takahiro Hirata
GPT-4oをAzureで試してみた!
checche
0
260
Azure Machine Learning 使ってみた
checche
0
24
PKIの説明など
checche
0
35
よさそう! AWS CDK
checche
0
82
Other Decks in Programming
See All in Programming
Conform を推す - Advocating for Conform
mizoguchicoji
3
690
CI改善もDatadogとともに
taumu
0
110
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
130
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
270
WebDriver BiDiとは何なのか
yotahada3
1
140
Immutable ActiveRecord
megane42
0
140
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.9k
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
220
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
320
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.2k
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.2k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How to Ace a Technical Interview
jacobian
276
23k
It's Worth the Effort
3n
184
28k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Optimizing for Happiness
mojombo
376
70k
Adopting Sorbet at Scale
ufuk
74
9.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Six Lessons from altMBA
skipperchong
27
3.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Typedesign – Prime Four
hannesfritz
40
2.5k
Transcript
LiveCoding入門 平田恭嘉
音楽 高校からいままでドラム ここ数年はギターとかもやッてます
LiveCoding?
LiveCodingとは 講演等でコーディングしながら解説するという意味合いで使われることが多いが、 ここで言うライブコーディングとは即興的にコーディングを行う、一種のパフォーミングアートのこと である。音楽や映像を即興で実装し表現する。
コミュニティ TOPLAP Algorave ICLC
TOPLAP Alex McLeanとNick Collinsにより発足された、ライブコーディングのコミュニティである。 ライブコーディングの探求と普及を目的としている。 すでに日本支部も存在している。 (規模は小さいようだ ) https://toplap.org/
Algorave Algorithmic Raveを省略した造語。TOPLAPコミュニティが主要メンバーのライブイベント。 条件を満たせば誰でも開催することができる。 『Algoraveは「条件式の繰り返しを絶え間なく送り出していくことで全面的ないしは全般的に特徴付 けられた音」によって作られる。』らしい。 https://algorave.com/ https://algorave.tokyo/ レイヴ: ダンス音楽を一晩中流す大規模な音楽イベントやパーティのこと
International Conference on Live Coding (ICLC) ICLCはライブコーディングを専門とした国際学会である。 論文発表やポスターセッションはもちろんのこと、ライブも行われる。 世界中のライブコーディングに関わる研究者、プログラマ、ミュージシャン、デザイナーが集まる。 予稿集のリンク
https://zenodo.org/communities/ iclc/?page=1&size=20
音楽 サウンドをライブコーディングする ツール紹介 FoxDotのセットアップ
ライブコーディングのツール SuperCollider: 音響生成エンジン。ほかのツールでもよく利用される。 FoxDot: Pythonベースのライブコーディング環境。 Tidal Cycles: Haskellベースのライブコーディングのプログラミング言語。ライブコーディング 創始者の1人であるAlex McLeanを中心に開発された。
SonicPi: rubyベースのライブコーディング環境。インストールしたら GUIですぐ遊べます。
Installation SuperCollider SC3 Plugins FoxDot
SuperColliderのセットアップ https://supercollider.github.io/download ↑こちらから自分のOSにあったものをダウンロード /インストールする。 今回は3.11.2をインストール。 コマンドとかを書く ヘルプとか見れる コマンドの実行結果等 SuperColliderのUI
SC3 Pluginsのインストール https://github.com/supercollider/sc3-plugins/releases ↑こちらから自分のOSにあったsc3-plugins-3.11.1をダウンロードし、解凍する。 解凍後、出力されたディレクトリの中身 (たくさんあります)を拡張機能のディレクトリにコピーす る。 SC3 PluginsはSuperColliderの様々な拡張機能の詰め合わせのセット。 macOS
~/Library/Application Support/SuperCollider/Extensions/ Linux ~/.local/share/SuperCollider/Extensions/ Win C:\Users\"ユーザー名"\AppData\Local\SuperCollider\Extensions 拡張機能のディレクトリのパス
FoxDotのインストール pip install FoxDotでPython環境にインストール。 SuperColliderを起動し、Quarks.install("FoxDot")入力し実行。 上のメニューバーから Language -> Recompile Class
Libraryで再コンパイル
音を鳴らす
FoxDotを起動する 1. SuperColliderでFoxDot.startを実行 2. python -m FoxDotを実行 FoxDotのGUIが開けば成功🎉
サンプラー play(): サンプラーの音を出力する。 x: Bass drum o: Snare drum -:
Hi hat closed []: 1拍に音を詰めて再生する (): 順番に1つ選ぶ {}: ランダムに1つ選ぶ d1 >> play("x-o-") d1 >> play("(x-)(-x)o[---]") // x-o[---]-xo[---]
シンセ p1 >> pads([0,1,2,3])といった感じに記述すると、 p1にプレイヤーオブジェクトを割り当てるこ とができる。 pads(): ぽーん。まるい感じ pluck(): ぴょん。爪弾いたような音。
star(): みょーん。シンセのストリングっぽい音? bass(): ぶーん。低音。
音を止める ⌘ + . で全部の音が止まる。 p1.stop()でp1を止める事ができる。
プレイヤーのオプション dur: 音価(音の長さ)を決める、配列で指定可能 amp: 音量を決める 例 p1 >> pluck([0, 2,
4], dur=[1, 1/2, 1/2], amp=0.75) # ドーミソドーミソ
パターン パターンはFoxDotで配列をいい感じにするためのもの。 P[0, 2, 4]またはP(0, 2, 4)という具合に記述する []:順番に鳴らす。():和音 例 p
= P[0, 2, 4] pluck(p) PRange(start, stop, step): pythonのrange()の要領でパターンを作成する。 Pattern.rotate() Pattern.reverse() Pattern.sort()
スケールやキーの設定 マイナースケールに変える Scale.default.set("minor") Scale.default.set(Scale.minor) Scale.default.set([0,2,3,5,7,10]) # 12音階表記 キーを変える Root.default.set(1) #
12音階表記 Root.default.set("C#") BPM Clock.bpm = 144
感想
個人的におもったことなど - かなりアンビエントな感じで現代音楽っぽい - よって退屈さは否めない - 音価を数字で表現できたり、異なる長さのループを再生できることで、手軽にポリリズムを作れ る。また、変拍子も簡単に組める - 音価をよしなに等分してくれるので、
n連符を楽につくれる - ランダムがいい味だしてくれる - 度数を理解している人からすると、メジャースケールが 0,1,2,3,4,5,6で表現されているため コード構成がややこしい (ex. IM9は0,2,4,6,8、普通1,3,5,7,9と捉えたい) - むずかしいかったです
映像 ヴィジュアルをライブコーディング する LiveCodeLab Hydra
LiveCodeLab https://livecodelab.net/play/index.html アクセスすればすぐに使える。 WebGLをつかっている。CoffeeScriptの文法を使っているらしい。 物体をリアルタイムにレンダリングして 場を盛り上げる。
使い方ざっくり 以下の設定を駆使する。わりと簡単。 - 背景: background - 物体の位置/回転: move, rotate -
物体の色とライティング : fill/stroke, ambientLight - 物体の形: box, ball, peg - 繰り返し/条件分岐 - jsの数学系の関数: sin(), cos()
Hydra https://hydra.ojack.xyz/ アクセスすればすぐに使える。 書き方はアナログモジュラーシンセサイザーにおける信号の生成とパッチングをモチーフにしている。 最終的にGLSL(OpenGL Shading Language)というシェーディング言語を使ってレンダリングしてい る。これによりGPUが利用できる。 抽象的な映像をリアルタイムにレンダリングして場を盛り上げる。 個人的にはこっちのほうがアガる。
酔いそうになるので注意。 KORG MS-20 mini
使い方ざっくり アナログシンセのように発振し、メソッドチェーンで変換処理をかけていくイメージでできる。 信号の生成 - osc(周波数, 移動速度, RGBのオフセット): 映像の波がでる - solid(R,
G, B, opacity): 単色 - noise(scale, speed): もわもわしたノイズ - shape(num_edge, size): 多角形 変調 - rotate(rad) - kaleid(n): 万華鏡みたいになる。すっごい 信号の合成 - add, diff, blend, multi 出力 - out(out_name): 最後に書く。引数に出力変数名を記述して合成に使える。フィードバックもできる。
その他の信号生成 カメラ入力をつかう - s0.initCam(): s0にカメラの入力を割り当てる。 マイク入力を使う - a.show(): aにマイクの入力を割り当てる。 -
a.setBins(n): 周波数帯域をnつに分ける。 - a.fft[i]: nつに分けた周波数帯域の i番目要素を取得
参考リンク
https://github.com/toplap/awesome-livecoding 演奏するプログラミング、ライブコーディングの思想と実践
入出力の流れ こんな感じでやりました