P5sound
- 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
- 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 オデッセイ (リットーミュージック)