Canvasでピアノロールを作る ピアノロールを自作してみてわかった音楽と座標の関係 / Web Audio tokyo 7

2019/1/25、WebAudio.tokyo #7で発表した資料です。

Transcript

1. $BOWBTͰϐΞϊϩʔϧΛ࡞Δ
   ϐΞϊϩʔϧΛࣗ࡞ͯ͠ΈͯΘ͔ͬͨ
 Իָͱ࠲ඪͷؔ܎ +BO
   
   
   
   8FC"VEJPUPLZP
   
   !PLVOPLFOUBSP
2. ୭ w Ԟ໺ݡଠ࿠
   !PLVOPLFOUBSP
   w ΫϨε΢ΣΞ୅ද
   w ΞϓϦέʔγϣϯ ɾ ΤϯδχΞ
3. ࠷ۙ΍ͬͨ͜ͱ w 8FC
   .VTJDͰ͸Կ͕Ͱ͖Δͷ͔
 
   '30/5&/%
   $0/'&3&/$&
   
   w ೔ͷ τϥΠΤϥʔ͔Βੜ·Εͨେن໛ઃܭϊ΢ϋ΢
 
   'SPOUFOE
   $POGFSFODF
   'VLVPLB
   
   w ࣍ੈ୅8FCΧϯϑΝϨϯε
   8FC
   .VTJDηογϣϯ
 
   ࣍ੈ୅8FCΧϯϑΝϨϯε
4. ࠓ೔࿩͢͜ͱ w $BOWBTͰϐΞϊϩʔϧΛ࣮૷ͨ͠
   w Իָ࣌ؒ࣠Λඳը͢Δ্Ͱؾʹ͠ͳ͍ͱ͍͚ͳ͍͜ͱ
5. ϐΞϊϩʔϧͱ͸
6. ϐΞϊϩʔϧ ͍͍ͩͨͲͷԻ੍ָ࡞༻ͷιϑ τ΢ΣΞʹ΋࣮૷͞Ε͍ͯΔ
 ϝϩσΟ Λೖྗ͢ΔͨΊͷΤσΟ λը໘
7. Ͱ͖Δ͜ͱ Ϋ Ϧ οΫͰͷԻූͷೖྗ
 υϥ οάͰͷԻූ௕ͷมߋ
 ϐΞϊϩʔϧදࣔͷ9ํ޲ɺ :ํ޲ͷ֦େॖখɺ εΫϩʔϧ
 ʢσϞͯ͠ͳ͍͚Ͳɺ Իූͷίϐϖ΍࡟আ΋౰ͨΓલʹͰ͖Δʣ
8. ͳʹ͛ʹߴػೳ w Ի੍ָ࡞༻ιϑ τ
   %"8
   ͸ઐ໳ੑ͕ߴ͍ͨΊಛԽͨ͠ػೳ͕ଟ͍
   w ςΩε τΤσΟ λʹൺ΂Δͱང͔ʹಛघͳ࣮૷
   w طଘͷ΋͋Δ͚Ͳʜ
   w (6*࣮૷Λੜۀͱ͢Δϑϩϯ τΤϯ υ ɾ ΤϯδχΞͱͯ͠
 ͜ΕΛͪΌΜͱ࣮૷Ͱ͖ΔͱεΩϧΞοϓ͢ΔͷͰ͸
9. ΍ͬͯΈͨ
10. 3FBDU
    
    $BOWBT w $BOWBTΛ࢖͏͚ͩͳͷͰ7BOJMMB
    +4Ͱ΋͍͍͕3FBDUΛ࢖ͬͨ
    w )PPLTͷ࿅श΋͔ͨͬͨ͠ͷͰ3FBDUΛ࢖ͬͨ
11. %FNP
12. ίʔ υͷߏ଄ export default function App() { // ͻͨ͢Β useState() const canvasRef = useRef < HTMLCanvasElement > null; useEffect(() => { // ॳظඳը࣌ॲཧ }, []); useEffect(() => { // Իූ௥Ճ࣌ͷॲཧ }, [notes]); useEffect(() => { // εΫϩʔϧҐஔมߋ࣌ͷॲཧ }, [scrollLeft, scrollTop]); const onDragHorizontalScrollBarKnob = useCallback((ev: React.MouseEvent) => { // ਫฏεΫϩʔϧόʔυϥοά࣌ͷϋϯυϦϯά }, [originXY, mediator]); const onDragVerticalScrollBarKnob = useCallback((ev: React.MouseEvent) => { // ਨ௚εΫϩʔϧόʔυϥοά࣌ͷϋϯυϦϯά }, [originXY, mediator]); const onDragScreen = useCallback((ev: React.MouseEvent) => { // Canvas಺υϥοά࣌ͷૢ࡞ʢԻූ௕ͷมߋʣ }, [scrollBarCoord, currentUuid, originXY, notes]); const onMouseDown = useCallback((ev: React.MouseEvent) => { // Canvas಺ͰͷmousedownϋϯυϦϯά }, [ currentUuid, originXY, notes, scrollBarCoord, isDraggingHorizontalScrollBarKnob, isDraggingVerticalScrollBarKnob ]); const onMouseMove = useCallback((ev: React.MouseEvent) => { // canvas಺ͰͷmousemoveϋϯυϦϯά }, [ currentUuid, originXY, notes, isDraggingHorizontalScrollBarKnob, isDraggingVerticalScrollBarKnob ]); return ( <div className="App"> <canvas onMouseDown={ev => onMouseDown(ev)} onMouseMove={ev => onMouseMove(ev)} ref={canvasRef} width="600" height="400" /> </div> ); }
13. 3FBDU·ΘΓʹ͍ͭͯ͸લճͷεϥΠ υΛ https://speakerdeck.com/okunokentaro/ng-kyoto-angular-meetup-number-9
14. Իָ࣌ؒ࣠Λඳը࠲ඪʹม׵
15. ઈର࣌ؒ
    
    ૬ର࣌ؒ w ઈର࣌ؒ
    w ඵ
    w ඵͱ͍͏௕͞͸ࠃࡍ୯ҐܥͰఆٛ͞Ε͓ͯΓ
 ਓʹΑͬͯҧ͏ɺ ࠃʹΑͬͯҧ͏ɺ ۂʹΑͬͯҧ͏ɺ ͳΜͯ͜ͱ͸ͳ͍
    w ૬ର࣌ؒ
    w ഥ
    w ഥͷ௕͞͸ۂʹΑͬͯҟͳΔ
 ͳͥͳΒۂʹ͸ςϯϙͱ͍͏֓೦͕͋Γɺ ςϯϙͷ਺஋͕େ͖͍΄Ͳഥͷ௕͞͸୹͘ ͳΔ
16. ૬ର࣌ؒʹج४Λ w ૬ର࣌ؒ͸ۂʹΑͬͯ࠷খ୯Ґ͕ҟͳΔ
    w ͦ΋ͦ΋࠷খ୯ҐΛԿͱ͢Δ͔΋ਓʹΑΔ
 ʢ෼Իූ ʁ
    ෼Իූ ʣ
    w ػցͰॲཧ͢Δ্ͰԿΒ͔ͷج४ ʢ࢓༷ʣ ͕ඞཁ
17. ෼ղೳͱ͍͏ج४͕͋Δ w .*%* ʢݫີʹ͸4.'ʣ Ͱ͸جຊతʹ૬ର࣌ؒͰه࿥͞ΕΔ
    w ૬ର࣌ؒΛઈର࣌ؒʹม׵͢ΔͨΊͷج४Λه࿥͍ͯ͠Δ
    w ෼ղೳ
    w .5IE ʢ.*%*ϔομνϟϯΫʣ ͷ
    όΠ τ໨ʹه࿥͞ΕΔ஋
    w ૬ର࣌ؒΛઈର࣌ؒʹม׵͢ΔͨΊͷج४
18. ෼ղೳͱ͸ w ෼ԻූΛ͞ΒʹͲΕ͚ͩ෼ׂ͢Δ͔ͷ஋
    w ෼ղೳͳΒ͹ɺ ෼ԻූΛ෼ׂ͢Δ
    w ෼ׂ͞Εͨ࠷খͷ΋ͷΛςΟ οΫͱݺͿ
    w ςΟ οΫ
    
    ෼Իූ
    w ςΟ οΫ
    
    ෼Իූͷͷ௕͞
19. ςϯϙͱςΟ οΫͰઈର࣌ؒʹม׵ w ςϯϙ͕Θ͔Δͱ෼Իූͻͱͭ ʢ૬ର࣌ؒʣ ͕Կඵ ʢઈର࣌ؒʣ Ͱ͋Δ͔
 ม׵Ͱ͖Δ
    w ෼Իූͷ௕͕͞Θ͔Ε͹෼ղೳͷ஋Ͱ෼ׂ͢Δͱ
 ςΟ οΫ͕Կඵͳͷ͔Θ͔Δ
20. $BOWBTͷඳըʹ൓ө w ಛఆͷԻූ͕Կখઅ໨ͷԿഥ໨ ɾ ԿςΟ οΫ໨ͳͷ͔Λܭࢉ
    w ͦͷԻූ͸খઅ໨ഥ໨ςΟ οΫ໨͔Βܭࢉͯ͠Ԇ΂ԿςΟ οΫ໨ͳͷ͔ܭࢉ
 ʢ૬ର͚࣌ؒͩͰ͍͍৔߹͜͜·Ͱʣ
    w ςϯϙνΣϯδ͕ೖΔͱɺ ςϯϙνΣϯδૠೖςΟ οΫҎ߱͸
 ςΟ οΫͷ௕͕͞มΘΔͷͰͦΕ΋ߟྀ
    w Ԇ΂ςΟ οΫ਺ͱςϯϙνΣϯδ৘ใ͔ΒͦͷԻූ͸Կඵ໨ͳͷ͔ܭࢉ
    w $BOWBTͷݱࡏͷදࣔഒ཰Ͱ͸ࠨ୺͔Βӈ୺·Ͱ͕Կඵ͔ΒԿඵ·Ͱ͔ܭࢉ
    w ಛఆͷԻූ͕ݱࡏͷ$BOWBTͰYԿϐΫηϧ໨ɺ ZԿϐΫηϧ໨ͳͷ͔ܭࢉ
    w ͦͷԻූͷ௕͕͞ͲΕ͚ͩͳͷ͔ಉ༷ʹܭࢉ͠XJEUIԿϐΫηϧɺ IFJHIUԿϐΫηϧͳͷ͔ܭࢉ
    w Α ͏΍͘ඳըͰ͖Δ ʂ ʂ
21. ࠓޙඞཁͦ͏ͳ΋ͷ w ഥ਺ͱςΟ οΫ਺͔Βɺ Ԇ΂ԿςΟ οΫ໨ͳͷ͔Λܭࢉ͢Δؔ਺
    w ೚ҙͷԆ΂ςΟ οΫ໨ʹૠೖ͞Ε͍ͯΔςϯϙνΣϯδΛߟྀ͠
 ಛఆͷςΟ οΫ͕ઈର࣌ؒʹͯ͠Կඵͳͷ͔Λܭࢉ͢Δؔ਺
    w $BOWBTͷYZXIϐΫηϧܥΛ·ͱΊͯ؅ཧ͢ΔϞσϧ
    w ࠜؾ
22. 5IBOL
    ZPV ଓใΛ͓଴ͪԼ͍͞