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

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

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

2bedb1eb8f841cd3c3ae584600b016e0?s=128

OKUNOKENTARO

January 25, 2019
Tweet

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. 5IBOLZPV ଓใΛ͓଴ͪԼ͍͞