Processingを活用して アニメーションLINEスタンプを作った話

2019.2.2
Processing Community Day Tokyo 2019
https://pcd-tokyo.github.io/

上記イベントでのLightning Talk発表資料です。
Processingを活用して画像を生成し、
結合していかにリリースに持っていくかという話です。

Transcript

1. 1SPDFTTJOHΛ׆༻ͯ͠
   Ξχϝʔγϣϯ-*/&ελϯϓ
   Λ࡞ͬͨ࿩
   Processing Community Day in Tokyo 2019
   ͖Ό΂ (@cab_kyabe)
   
   
   

   View Slide

2. ͖Ό΂
   @cab_kyabe
   https://kyabe.net
   

   View Slide

3. Processingͱͷग़ձ͍
   2008೥ தֶ3೥ੜ
   (·ͱ΋ʹ࢖͑ΔΑ͏ʹͳͬͨͷ͸େֶੜͷ͜Ζ͔Β)
   

   View Slide

4. ϑΝογϣϯγϣʔͷഎܠө૾@ਆށ
   2016.11 ϑΝογϣϯγϣʔͷഎܠө૾@ਆށ
   

   View Slide

5. YoutubeͰߨ࠲഑৴
   ͳΜͪΌͬͯδΣωϥςΟϒΞʔτΛ࡞Γͳ͕Β
   ϓϩάϥϛϯάΛֶͿίϯςϯπ
   

   View Slide

6. ຊ୊
   

   View Slide

7. ಈ͘ϥΠϯελϯϓΛ࡞ͬͨ
   

   View Slide

8. ੈքͷར༻ऀ਺ͷ΂1200ਓ
   

   View Slide

9. ΤσΟλͰίʔυೖྗ͢ΔΑ͏ͳ
   Ξχϝʔγϣϯ
   

   View Slide

10. ࠓ೔͓࿩͍ͨ͜͠ͱ
    1. ࡞੒ͷϑϩʔ
    2. ϊ΢ϋ΢ڞ༗
    

    View Slide

11. ࡞੒·Ͱ
    1. ΞΠσΞ͕

    ߱Γͯ͘Δ
    2. ࣮ݱํ๏Λ

    ɹ ୳Δ
    3. ࣮૷
    

    View Slide

12. ࡞੒·Ͱ
    1. ΞΠσΞ͕

    ߱Γͯ͘Δ
    2. ࣮ݱํ๏Λ

    ɹ ୳Δ
    3. ࣮૷
    ͜͜ΛͰ͖Δ͚ͩૣ͘΍Δͷ͕େࣄʂ
    

    View Slide

13. 1. ΞΠσΞ͕߱Γͯ͘Δ
    

    View Slide

14. ࣮૷ʹҠΔલͷઃܭ͕͍ͩ͡
    

    View Slide

15. όάࠞೖͯ͠·ͨ͠
    

    View Slide

16. ڭ܇
    

    View Slide

17. 2. ࣮ݱํ๏Λ୳Δ
    1. ը૾Λੜ੒ 2. ͍ͬͺ͍ੜ੒ 3. ݁߹
    

    View Slide

18. ग़య: https://creator.line.me/ja/guideline/animationsticker/
    

    View Slide

19. ग़య: https://ja.wikipedia.org/wiki/Animated_Portable_Network_Graphics
    

    View Slide

20. 2. ࣮ݱํ๏Λ୳Δ
    1. ը૾Λੜ੒ 2. ͍ͬͺ͍ੜ੒ 3. ݁߹
    ͋
    apngasm
    

    View Slide

21. 1. γεςϚςΟοΫʹ
    2. ಈը૾Λѻ͑Δ
    3. ؆୯ʹ࣮૷Ͱ͖Δ
    

    View Slide

22. 3. ࣮૷
    https://github.com/cabbage63/code_anim
    

    View Slide

23. ProcessingͰ΍͍ͬͯΔ͜ͱ
    01_goodevening
    02_bye
    …
    01.png
    02.png
    …
    …
    03.png
    04.png
    05.png
    

    View Slide

24. APNG߹੒༻Shell
    for d in $(find . -depth 1 -type d); do
    count=$(ls $d -l | wc -l | tr -d ' ')
    apngasm -o $d.png $d/*.png -d$((2000/($count-1))) -l1
    done
    APNG Assembler
    https://github.com/apngasm/apngasm
    

    View Slide

25. APNG߹੒༻Shell
    for d in $(find . -depth 1 -type d); do
    count=$(ls $d -l | wc -l | tr -d ' ')
    apngasm -o $d.png $d/*.png -d$((2000/($count-1))) -l1
    done
    01_hello
    02_bye
    …
    01.png
    02.png
    …
    σΟϨΫτϦϦετऔಘ
    

    View Slide

26. APNG߹੒༻Shell
    for d in $(find . -depth 1 -type d); do
    count=$(ls $d -l | wc -l | tr -d ' ')
    apngasm -o $d.png $d/*.png -d$((2000/($count-1))) -l1
    done
    01_hello
    02_bye
    …
    01.png
    02.png
    …
    ϑΝΠϧ਺Χ΢ϯτ
    

    View Slide

27. APNG߹੒༻Shell
    for d in $(find . -depth 1 -type d); do
    count=$(ls $d -l | wc -l | tr -d ' ')
    apngasm -o $d.png $d/*.png -d$((2000/($count-1))) -l1
    done
    01_hello
    02_bye
    …
    01.png
    02.png
    …
    01_hello.png
    apngʹ݁߹
    

    View Slide

28. APNG߹੒༻Shell
    for d in $(find . -depth 1 -type d); do
    count=$(ls $d -l | wc -l | tr -d ' ')
    apngasm -o $d.png $d/*.png -d$((2000/($count-1))) -l1
    done
    σΟϨΫτϦ໊ͷPNGϑΝΠϧΛੜ੒
    01_hello
    02_bye
    …
    01.png
    02.png
    …
    01_hello.png
    apngʹ݁߹
    

    View Slide

29. APNG߹੒༻Shell
    for d in $(find . -depth 1 -type d); do
    count=$(ls $d -l | wc -l | tr -d ' ')
    apngasm -o $d.png $d/*.png -d$((2000/($count-1))) -l1
    done
    ಡΈࠐΉϑΝΠϧΛࢦఆ
    01_hello
    02_bye
    …
    01.png
    02.png
    …
    01_hello.png
    apngʹ݁߹
    

    View Slide

30. APNG߹੒༻Shell
    for d in $(find . -depth 1 -type d); do
    count=$(ls $d -l | wc -l | tr -d ' ')
    apngasm -o $d.png $d/*.png -d$((2000/($count-1))) -l1
    done
    delayΛ 2000 / (ϑϨʔϜ਺)ʹઃఆ
    ࠷େ࠶ੜ࣌ؒΛͪΐ͏Ͳ2ඵʹ͢Δ
    

    View Slide

31. APNG߹੒༻Shell
    for d in $(find . -depth 1 -type d); do
    count=$(ls $d -l | wc -l | tr -d ' ')
    apngasm -o $d.png $d/*.png -d$((2000/($count-1))) -l1
    done
    ϧʔϓճ਺Λ1ճʹ͢Δ = ϧʔϓ͠ͳ͍
    

    View Slide

32. PRͦͷ1: 2ͭͷόʔδϣϯΛ഑৴த
    

    View Slide

33. ٕज़ॻయ6ͰProcessingຊ
    Λॻ͘༧ఆͰ͢
    https://techbookfest.org/event/tbf06
    ڵຯ͋ΔํҰॹʹͭ͘Γ·ͤΜ͔ʂ
    PRͦͷ2: ٕज़ಉਓࢽॻ͖͍ͨ
    

    View Slide

34. View Slide