READY FOR THE BATTLE? -Introduction to Live Coding-

A brief introduction to GLSL and livecoding, presented at TokyoDemoFest 2018.

Transcript

1. BNBHJUBLBZPTJ
   READY
   FOR THE
   BA
   TTLE
   READY
   FOR THE
   BA
   TTLE
   READY
   FOR THE
   BA
   TTLE
   

   View Slide

2. @amagitakayosi
   

   View Slide

3. View Slide

4. VEDA
   (GLSLϥΠϒίʔσΟϯά؀ڥ)
   ͷ࡞ऀͰ͢
   

   View Slide

5. ϥΠϒίʔσΟϯάVJͯ͠·͢
   

   View Slide

6. ࠓ೔ͷϝχϡʔ
   w ϥΠϒίʔσΟϯάJTԿ
   w (-4-ͷجૅ
   w ͕Μ͹Ζ͏
   

   View Slide

7. 8IBUJT
   -JWF$PEJOH
   

   View Slide

8. View Slide

9. ϥΠϒίʔσΟϯά
   w ϥΠϒͰίʔσΟϯά͢Δ͜ͱ
   w ٕज़ܥΧϯϑΝϨϯεͷσϞͱͯ͠
   w ઌਐతͳԻָө૾ύϑΥʔϚϯεͱͯ͠
   

   View Slide

10. ϥΠϒίʔσΟϯάจԽ
    w 501-"1DPNNVOJUZ ʙ
    
    w *$-$ ʙ
    
    w "MHPSBWF
    

    View Slide

11. View Slide

12. View Slide

13. -JWF$PEJOHJO
    %FNPTDFOF
    

    View Slide

14. EFNPTDFOFʹ͓͚ΔϥΠϒίʔσΟϯά
    w 3FWJTJPOͳͲͷσϞύʔςΟͰ

    ότϧ͕ߦΘΕΔΑ͏ʹ
    w ٕज़ྗॏࢹ
    w ؀ڥΛଗ͑ͯɺ੍ݶ࣌ؒ಺ʹ

    ͲΕ͚ͩੌ͍ϏδϡΞϧΛ࡞ΕΔ͔ڝ͏
    w উഊ͸౤ථPS׻੠Ͱܾ·Δ
    

    View Slide

15. 3FWJTJPOͷΑ͏͢
    IUUQTXXXZPVUVCFDPNXBUDI W0[&P%%X
    

    View Slide

16. සग़ωλ
    w ϨΠϚʔνϯά
    w ڑ཭ؔ਺ͰਤܗΛඳը
    w ϑϥΫλϧ
    w ਤܗΛ࠶ؼతʹมܗ͍ͯ͘͜͠ͱͰ

    ϝνϟϝνϟෳࡶͳਤܗΛඳ͚Δ
    

    View Slide

17. සग़ωλ
    w ϨΠϚʔνϯά
    w ڑ཭ؔ਺ͰਤܗΛඳը
    w ϑϥΫλϧ
    w ਤܗΛ࠶ؼతʹมܗ͍ͯ͘͜͠ͱͰ

    ϝνϟϝνϟෳࡶͳਤܗΛඳ͚Δ
    レイマーチングこわ……
    難しそう……
    

    View Slide

18. ϨΠϚʔνϯάແ͠Ͱ΋উͯΔͧʂ
    w ڈ೥(-4-(SBQIJDTҐͷ࡞඼͸

    ϨΠϚʔνϯάͰ͸ͳ͍
    w ΞΠσΞɺ͢͝͞ɺ͔ͬ͜Α͕͞େࣄ
    

    View Slide

19. (-4-
    JOUSPEVDUJPO
    

    View Slide

20. ͜ͷষͷ໨ඪ
    w ϑϥάϝϯτγΣʔμʔ͚ͩͰਤܗΛඳ͘
    w (-4-ͷجૅจ๏ΛֶͿ
    

    View Slide

21. (-4-JTԿ
    w γΣʔμʔݴޠͷҰͭ
    w %$(ͰɺӄӨ΍ςΫενϟͷॲཧΛ͢Δҝʹ

    ࡞ΒΕͨݴޠ
    w ʁʁʁʮ୯ମͰΞχϝʔγϣϯ࡞ΕΔ͡ΌΜʯ

    ˠσϞ΍Ξʔτք۾Ͱ࢖ΘΕΔΑ͏ʹ
    

    View Slide

22. γΣʔμʔͷछྨ
    w ௖఺γΣʔμʔ
    w ϑϥάϝϯτγΣʔμʔ
    w ίϯϐϡʔτγΣʔμʔ
    w δΦϝτϦʔγΣʔμʔ

    

    ৄ͘͠͸ʮϨϯμϦϯάύΠϓϥϯʯͰάάͬͯ͘Ε
    ˡࠓճ͸͜Ε͚ͩ
    

    View Slide

23. ϑϥάϝϯτγΣʔμʔͷྲྀΕ
    w γΣʔμʔ͸ϐΫηϧຖʹ࣮ߦ͞ΕΔ
    w HM@'SBH$PMPSʹɺͦͷϐΫηϧͷ৭Λ

    WFD S H C B
    ܗࣜͰೖΕͯ͋͛Δ
    

    View Slide

24. View Slide

25. View Slide

26. ԁΛඳ͍ͯΈΑ͏
    

    View Slide

27. ԁΛඳ͍ͯΈΑ͏
    ݪ఺͔Βͷ
    ڑ཭͕Ұఆ
    ݪ఺͔Βͷ
    ڑ཭͕Ұఆ
    ݪ఺͔Βͷ
    ڑ཭͕Ұఆ
    

    View Slide

28. WFD MFOHUI Q
    
    
    

    View Slide

29. WFD TUFQ MFOHUI Q
    
    
    
    

    View Slide

30. ஋ͷछྨ
    w JOU੔਺
    w qPBUුಈখ਺఺਺
    w WFDdWFDϕΫτϧ
    

    View Slide

31. JOU੔਺
    w $ݴޠͳͲͰ͓ͳ͡Έ
    w AJOUBAͱॻ͘
    w ͋Μ·࢖Θ΁Μ
    w GPSϧʔϓͷΠϯσοΫε͘Β͍
    

    View Slide

32. qPBUුಈখ਺఺਺
    w AqPBUBAຢ͸ɹɹɹɹɹɹͱͱॻ͘
    w খ਺఺Λ๨ΕΔͱΤϥʔʹͳΔͷͰ஫ҙʂ
    w ϑΝΠϧઌ಄ͷɹɹɹɹɹ͸

    qPBUͷਫ਼౓Λࢦఆ͍ͯ͠Δ
    w MPXQ NFEJVNQ IJHIQͷॱʹਫ਼౓͕ߴ͘ͳΔ
    w ͍͍ͩͨNFEJVNQͰे෼
    

    View Slide

33. WFD WFD WFDϕΫλʔ
    w AqPBUBɹɹɹɹPS
    w ͱॻ͍ͯ΋0,

    ʢத਎͕JOUʹͳΔ༁Ͱ͸ͳ͍ʣ
    w ɹɹɹɹɹɹɹɹͱ͢Δͱ

    C͸WFD
    ʹͳΔ TXJ[[MF
    
    

    View Slide

34. جຊςΫ
    w ܁Γฦ͠
    w ϊΠζ
    w CBDLCV⒎FSΛ༻͍ͨදݱ
    w ΦʔσΟΦϦΞΫςΟϒͳԿ͔
    

    View Slide

35. ܁Γฦ͠
    w UJNFΛ࢖ͬͯɺಈ͖΍ΤϑΣΫτΛ܁Γฦ͠
    w TJO
    DPT
    ͳͲͷࡾ֯ؔ਺
    w GSBDU
    NPE
    Ͱ
    w ࠲ඪΛ܁Γฦ͢ͱɺਤܗΛίϐʔͰ͖Δͧʂ
    

    View Slide

36. ܁Γฦ͠ಈ͖ͷϧʔϓ
    

    View Slide

37. ܁Γฦ͠ਤܗͷίϐʔ
    

    View Slide

38. ϊΠζ
    w ཚ਺Λݩʹɺ༗ػతͳಈ͖ςΫενϟΛදݱ
    w ΤϑΣΫτ΍ಈ͖ͷ੍ޚʹ࢖͏ͱ

    ܁Γฦ͠ײΛݮΒͤͯΦεεϝʂ
    

    View Slide

39. ϊΠζΏ͕Έ
    

    View Slide

40. ϊΠζಈ͖
    

    View Slide

41. ϊΠζϒϩοΫϊΠζ
    

    View Slide

42. CBDLCVGGFSΛ༻͍ͨදݱ
    w CBDLCV⒎FSʹ͸ϑϨʔϜલͷ݁Ռ͕ೖͬͯΔ
    w ࢒૾͕࢒ΔΑ͏ʹͨ͠Γʜʜ
    w 3(#ΛͣΒͨ͠Γʜʜ
    

    View Slide

43. CBDLCVGGFS࢒૾
    

    View Slide

44. CBDLCVGGFS3(#ͣΒ͠
    

    View Slide

45. ΦʔσΟΦϦΞΫςΟϒͳԿ͔
    w 7&%" #PO[PNBUJD౳ͷ؀ڥͰ͸

    Ի੠ೖྗΛར༻Ͱ͖Δ
    w 7+ͬΆ͍ࣄ͢Δ࣌͸΄΅ඞਢ
    

    View Slide

46. %&.0ʜ
    

    View Slide

47. ҰาਐΜͩදݱςΫ
    w TFUDIJ͞ΜͷࢿྉΦεεϝͰ͢
    w IUUQTEPDTHPPHMFDPNQSFTFOUBUJPOE
    3SRZ"L'BO,NG-;)WI%$P[&
    @S,'1M6:7XFK@CD
    

    View Slide

48. 7+
    -*7&$0%*/(
    

    View Slide

49. ϥΠϒίʔσΟϯάύʔςΟ
    w "MHPSBWF౳
    w ੝Γ্͛ॏࢹ
    w 7+ͬͯݴ͏ͱౖΒΕΔ͔΋
    

    View Slide

50. 7+γʔϯʹ͓͚Δ(-4-
    w δΣωϥςΟϒͳ7+؀ڥͰ͸େମରԠͯ͠Δ

    ʢ5PVDI%FTJHOFS WWWW FUDʣ
    w 7%.9 $P(FͳͲͷ7+ιϑτ΋ରԠ
    w 7%.9͸*4'ͱ͍͏ಠࣗن֨·Ͱ࡞ͬͯΔ
    

    View Slide

51. 5PVDI%FTJHOFS
    w ࠷ۙྲྀߦͬͯΔɺϦΞϧλΠϜॲཧ޲͚

    ΦʔσΟΦϏδϡΞϧ؀ڥ
    w (-4-ͷόʔδϣϯΛࣗ༝ʹબΜͩΓɺ

    ඳըύεΛ؆୯ʹ௥ՃͰ͖Δ
    w ίϯϐϡʔτγΣʔμʔ΋ͬ͘͞ͱॻ͚Δ
    

    View Slide

52. ԻָϥΠϒίʔσΟϯά
    w 5JEBM$ZDMFT 4POJD1JͳͲ
    w 4IBEFSUPZ 7&%"Ͱ͸

    (-4-ͰԻָΛԋ૗Ͱ͖Δʢʁʁʁʁʣ
    

    View Slide

53. View Slide

54. ࠷ޙʹ
    w (-4-ΊͬͪΌָ͍͠ͷͰ

    օνϟϨϯδͯ͘͠ΕΔͱ͍͍ͳʙ
    w ࣭໰΍ײ૝͸ɺ͜ͷ͋ͱͷۭ͖࣌ؒ΍

    5XJUUFS౳Ͱ͓ؾܰʹͲ͏ͧʂ
    

    View Slide

55. (-4-ͷࢀߟϦϯΫ
    w 5IF#PPL0G4IBEFST

    IUUQTUIFCPPLPGTIBEFSTDPN MBOKQ
    w XHMEPSHc(-4-

    IUUQTXHMEPSHEHMTM
    w 7&%"

    IUUQTWFEBHM
    

    View Slide

56. @amagitakayosi
    

    View Slide