APIs for VJ-ing

ToKyoto.js https://kyotojs.connpass.com/event/64310/

Transcript

1. APIs
   for
   VJ-ing
   APIs
   for
   VJ-ing
   amagitaJayosi
   

   View Slide

2. @amagitakayosi
   

   View Slide

3. ࠷ۙAtomύοέʔδΛ࡞ͬͯ·͢
   

   View Slide

4. ࠓ೔͸๻͕࡞ͬͨ
   "UPNύοέʔδΛ

   ঺հσϞͭͭ͠
   ࢖͍ͬͯΔ"1*Λ
   ղઆ͠·͢ʂʂʂʂ
   

   View Slide

5. glsl
   livecoder
   

   View Slide

6. HMTMMJWFDPEFS
   w "UPNͰ7+Ͱ͖Δύοέʔδ
   w (-4-ͷ࣮ߦ؀ڥ
   w (-4-Ͱө૾ΛϦΞϧλΠϜʹੜ੒ͨ͠Γ
   w ಈըը૾Λϩʔυͯ͠

   (-4-ͰՃ޻Ͱ͖ΔΑ͏ʹͨ͠Γ
   

   View Slide

7. (-4-γΣʔμʔͷҰछ
   w %$(ͰӄӨΛܭࢉ͢ΔͨΊͷݴޠ
   w )-4- %JSFDU9
   ͱ͔ɺ.FUBM NBD04
   ͱ͔
   w ߦྻܭࢉʹศརͳϏϧτΠϯؔ਺
   w qPBUEPU WFDB WFDC
   ͱ͔
   

   View Slide

8. γΣʔμʔΞʔτ
   w (-4-͸(16ύϫʔΛϑϧ׆༻Ͱ͖Δ
   w ʮ(-4-͚ͩͰෳࡶͳάϥϑΟοΫදݱΛ

   ɹඳըͰ͖ΔͷͰ͸ʁʯ
   w Ұ෦ͷਓʑ͕େڵฃ
   

   View Slide

9. View Slide

10. ࢀߟLJOUSPl&MFWBUFEz
    IUUQTXXXZPVUVCFDPNXBUDI WK#W#NJ5SP
    

    View Slide

11. ී௨ͷ%άϥϑΟοΫε
    w ਺ઍʙ਺ສϙϦΰϯγΣʔμʔ
    

    View Slide

12. ൘ϙϦ
    w ࡾ֯ܗݸγΣʔμʔ͚ͩͰશͯΛදݱ
    

    View Slide

13. طଘͷϥΠϒίʔσΟϯά؀ڥ
    w ,PEFMJGFNFUBMͰॻ͚ΔσεΫτοϓΞϓϦ
    w 4IBEFSUPOF&NBDT$MPKVSF
    w ):-0(&/)BTLFMM੡"MU(-4-؀ڥ
    w 4ZOUIDMJQTFδϟό
    

    View Slide

14. 4ZOUIDMJQTF
    

    View Slide

15. طଘ؀ڥ΁ͷෆຬ
    • ίʔυิ׬͍ͨ͠
    • linter࢖͍͍ͨ
    • ϞδϡʔϧγεςϜ࢖͍͍ͨ
    • GLSLʹ͸جຊincludeͱ͔ͳ͍
    

    View Slide

16. "UPNύοέʔδͱͯࣗ͠࡞
    w طଘͷύοέʔδΛར༻Ͱ͖Δ
    w MJOUFS BVUPDPNQMFUF FUDʜ
    w &MFDUSPOͳͷͰɺϒϥ΢βͷ༷ʑͳ

    "1*Λར༻Ͱ͖Δ
    w +4੡(-4-όϯυϥʔΛ࢖͑Δ
    

    View Slide

17. DeMO
    

    View Slide

18. IUUQTXXXqJDLSDPNQIPUPTIFMMPDBUGPPE
    API
    

    View Slide

19. HMTMMJWFDPEFSͰར༻ͯ͠Δ"1*
    w 8FC"VEJP"1*
    w 8FC.*%*"1*
    w (BNFQBE"1*
    w HFU6TFS.FEJB
    w 04$ 8*1
    
    

    View Slide

20. 8FC"VEJP"1*
    w ݴΘͣͱ஌ΕͨԻΛग़͢΍ͭ
    w γϯηͱ͔΋࡞ΕΔ
    w ࢓༷͕ίϩίϩมΘΔ
    w (JU)VCͰٞ࿦͕ݟΕΔ
    

    View Slide

21. Ի੠ೖྗ͔Βछྨͷ৘ใΛऔಘ
    w Իྔ
    w ೾ܗ
    w εϖΫτϥϜ
    w प೾਺ଳ͝ͱͷԻྔΛղੳͨ͠΋ͷ
    

    View Slide

22. Ի੠ೖྗ͔Βछྨͷ৘ใΛऔಘ
    w Իྔ
    w ೾ܗ
    w εϖΫτϥϜ
    w प೾਺ଳ͝ͱͷԻྔΛղੳͨ͠΋ͷ
    AnalyserNodeͰ
    ҰؾʹऔಘͰ͖Δ
    

    View Slide

23. (-4-ʹσʔλΛ౉͢
    w +4͔Β(-4-ʹ౉ͤΔσʔλͷ਺͸্ݶ͕͋Δ
    w େྔͷσʔλΛ౉͢ʹ͸ςΫενϟΛ࢖͏ʂ
    w ೾ܗΛ6JOU"SSBZʹม׵͠ɺ

    5)3&&%BUB5FYUVSFͰ(16ଆʹૹΔ
    

    View Slide

24. ೾ܗΛUFYUVSFͱͯ͠දݱ
    

    View Slide

25. εϖΫτϥϜ΋ಉ༷
    

    View Slide

26. 8FC.*%*"1*
    w .*%*ָثͷԋ૗৘ใͷن֨
    w ϒϥ΢β͔ΒָثΛ໐Βͨ͠Γ
    w .*%*ίϯτϩʔϥʔͰ

    8FCΞϓϦΛૢ࡞ͨ͠Γ
    

    View Slide

27. .*%*ϝοηʔδͷߏ଄
    w .*%*ίϯ౳Ͱ࢖ΘΕΔϝοηʔδ͸όΠτ
    0xB0 0x00 0x7F
    ϝοηʔδͷछྨ ίϯτϩʔϧ൪߸ ஋
    

    View Slide

28. UFYUVSFʹม׵
    w YͷUFYUVSFʹϚοϐϯά
    w CZUF໨Y࣠
    w CZUF໨Z࣠
    w CZUF໨஋
    

    View Slide

29. ྫY#YY'
    256
    128
    

    View Slide

30. ྫY#YY'
    x=0xB0=172
    y=0
    0x7F
    = 128 (/255)
    = ໌Δ͞൒෼
    

    View Slide

31. OPUFPOPGG͸ಛผѻ͍͍ͨ͠
    w OPUFPOP⒎͸όΠτ໨͕YY
    w YͷςΫενϟΛ࡞Δ
    x=Իͷߴ͞
    ৭=Իྔ
    

    View Slide

32. (BNFQBE"1*
    w ήʔϜύουͷ৘ใΛऔಘ͢Δ
    w ϑϨʔϜຖʹϙʔϦϯά͢Δඞཁ͕͋Δ
    

    View Slide

33. ήʔϜύουͷ઀ଓΛ଴ͬͯ
    rAF಺ͰຖϑϨʔϜ
    Ϙλϯ৘ใΛऔಘ͢Δ
    

    View Slide

34. HFU6TFS.FEJB
    w ϚΠΫ΍Χϝϥͷө૾ΛऔಘͰ͖Δ
    w WJEFPཁૉͷTSDʹࢦఆͰ͖Δ
    

    View Slide

35. getUserMediaͷ݁Ռ͔Β
    videoཁૉΛ࡞ͬͯ
    THREE.VideoTextureͰ
    GLSLʹ౉͢
    

    View Slide

36. 04$ ະରԠ
    
    w .*%*ΑΓ΋ॊೈͰɺ

    ༷ʑͳϝοηʔδΛఆٛͰ͖Δϓϩτίϧ
    w ָثͱ͔ϥΠϒίʔσΟϯάۀքͰ͸

    σϑΝΫτʹͳΓͭͭ͋Δ
    w ରԠͯ͠΁Μͷʁͱ͍͏ཁ๬͕͋ͬͨ
    

    View Slide

37. 04$ϝοηʔδͷߏ଄
    w Ϛδ͔Α
    /foo/bar 1 baz [1 2 3]
    OSCΞυϨε
    ೚ҙͷจࣈྻ
    OSCҾ਺

    ೚ҙݸͷҾ਺
    

    View Slide

38. 04$ʹରԠ͢Δʹ͸
    w NJEJYZ[Έ͍ͨͳΤϯυϙΠϯτͰ

    .*%*ͬΆ͘ରԠ͢Δ͔͠ͳ͍ʜʜʁ
    w 5PVDI04$ʹ͸.*%*ϒϦοδ͕͋Γɺ

    ࣅͨΑ͏ͳ͜ͱΛ΍͍ͬͯΔͬΆ͍
    

    View Slide

39. ͓·͚TUBDLHMHMTMJGZ
    w CSPXTFSJGZͷ(-4-൛
    w 

    ͱ͔ॻ͘ͱόϯυϧͯ͘͠ΕΔ
    w HMTMJGZ༻ͷϥΠϒϥϦ͕

    OQNͰଟ਺ެ։͞ΕͯΔ
    

    View Slide

40. ݟ֮͑͋Δ։ൃਞ
    

    View Slide

41. ͍ΖΜͳϥΠϒϥϦ͕͋Δɻੈքʜʜ
    

    View Slide

42. ࡢ೔HMTMJGZαϙʔτ͠·ͨ͠
    

    View Slide

43. ·ͱΊ
    

    View Slide

44. (-4-ͨͷ͍͠ʂʂʂ
    w ࠷ۙझຯͰ8FCΞϓϦશવॻ͍ͯͳ͍
    w ΈΜͳ(-4-΍Ζ͏ͥ
    

    View Slide

45. 1BUDIFTXFMDPNF
    

    View Slide

46. eNJOY
    VJ-ING!!!
    eNJOY
    VJ-ING!!!
    

    View Slide