Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

cab_kyabe
February 02, 2019

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

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

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

cab_kyabe

February 02, 2019
Tweet

More Decks by cab_kyabe

Other Decks in Design

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