[G's Nite] Webなんでも勉強会Creative!【Webデザイン＆Webプログラミングでデジタル・アート、クリエイティブプログラミング】

1. Copyright © Akio Yonekura
音を奏でるプログラミング
p5.js / Sound
米倉明男

2. p5.js / Sound 音を奏でるプログラミング
Copyright © Akio Yonekura
米倉明男 Akio Yonekura
http://neuegrafik.jp
AOLのアートディレクターとしてWebアプリケーションのUI設計を担当したのち
2007年に独立、フリーランスとして活動。Max/MSPやProcessingが好きなUIデザイナー。
電子工作とインスタレーションが好きなクリエイター集団PanonPublicのメンバーとして
dotFes2014やMaker Faire Tokyo 2016に出展。
http://makezine.jp/event/makers2016/panon_music/
日本グラフィックデザイナー協会（JAGDA）正会員
デジタルハリウッド、和光大学、法政大学非常勤講師
profile

3. Copyright © Akio Yonekura
p5.js / Sound

4. p5.js / Sound 音を奏でるプログラミング
Copyright © Akio Yonekura
p5.js Sound とは
p5.jsのサウンド・ライブラリ
Web Audio APIを使用
Tone.jsがベースとなっている
音をプログラミングで生成することがで
きる（音響合成）
https://p5js.org/reference/#/libraries/p5.sound

5. p5.js / Sound 音を奏でるプログラミング
Copyright © Akio Yonekura
音響合成
音は空気の振動。
空気中に「波」として耳に伝わる（音波）
コンピュータでデジタル音を生成するには
波形を作る。
振幅（Amplitude）が音の大きさ
周波数（Frequency）が音の高さ

6. p5.js / Sound 音を奏でるプログラミング
Copyright © Akio Yonekura
オシレーター Oscillator
オシレーターと呼ばれる周波
数の波を発振する仕組みで音
を生成する
波の種類で音が変わる

7. p5.js / Sound 音を奏でるプログラミング
Copyright © Akio Yonekura
p5.js でコーディング
var osc = new p5.Oscillator('sine'); // オシレーター
osc.start();
osc.amp(0.5); // アンプ 音の大きさ
osc.freq(440); // 周波数 音の高さ

8. p5.js / Sound 音を奏でるプログラミング
Copyright © Akio Yonekura
エンベロープ Envelope
エンベロープとは音の時間と量の変化
音の変化で音色を表現する
Attack 最大音
Decay 持続音までの移行
Sustain 持続音
Release 音が消えるまでの移行

9. p5.js / Sound 音を奏でるプログラミング
Copyright © Akio Yonekura
その他 p5.js で出来る音の変化
ディレイ Delay： 遅延音
リバーブ Reverb: 残響音
フィルター Filter: 特定の周波数を通過させて、それ以外を通過させにくくする
ノイズ Noise: ホワイト、ピンク、ブラウンなどのノイズを発生させる

10. p5.js / Sound 音を奏でるプログラミング
Copyright © Akio Yonekura
MIDIノート番号と周波数
音階のMIDIナンバーを周波数に置き換える命令 midiToFreq()
var midiValue = 60; //ド
var freq = midiToFreq(midiValue);

11. p5.js / Sound 音を奏でるプログラミング
Copyright © Akio Yonekura
ステップ・シーケンサーで演奏
電子音楽で一般的に使われている
ループ音の組み合わせによる作曲
方法
monome Roland TR-808 Ableton Push

12. p5.js / Sound 音を奏でるプログラミング
Copyright © Akio Yonekura
デジタルハリウッド デジタルデザイン専攻 学生作品「DOTS」
沓掛 真佑美さん
https://www.behance.net/gallery/35356849/DOTS
ステップ・シーケンサーを応用したインスタレーション作品

13. p5.js / Sound 音を奏でるプログラミング
Copyright © Akio Yonekura
参照： p5.js https://p5js.org/
p5.js プログラミングガイド （カットシステム）
2061：Max オデッセイ （リットーミュージック）