$30 off During Our Annual Pro Sale. View Details »

console.animate

katashin
September 15, 2017

 console.animate

ToKyoto.js ― Kyoto.js in Tokyo
https://kyotojs.connpass.com/event/64310/

katashin

September 15, 2017
Tweet

More Decks by katashin

Other Decks in Programming

Transcript

  1. console.animate

    View Slide

  2. !LUTO LBUBTIJO

    View Slide

  3. ͬͪ͜ͷ࿩͡Όͳ͍Ͱ͢

    View Slide

  4. IUUQTEFWPSPDPN

    View Slide

  5. View Slide

  6. View Slide

  7. render(‘͜Μʹͪ͸’)
    ͜Μʹͪ͸

    [0, 0, 0, 0, 0, 0, 0, 209, 0, …]
    ImageData

    View Slide

  8. [0, 0, 0, 0,
    0, 0, 0, 209,
    0, 0, 0, 255, …]
    ImageData
    SFE HSFFO CMVF BMQIB

    View Slide

  9. BMQIBͰUSVFɹͦΕҎ֎ͰGBMTF
    [
    [f, f, f, f, f, f, … ],
    [f, f, f, f, f, f, … ],
    [f, f, f, f, t, t, … ],
    [f, f, f, f, t, t, … ],
    [f, f, f, f, f, f, … ],

    ]

    View Slide

  10. पลͷGBMTFΛמΓऔΔ
    [
    [f, f, f, f, f],
    [f, t, t, t, f],
    [f, t, t, t, f],
    [f, f, f, f, f]
    ]

    View Slide

  11. 5SVFˠ˙ɹGBMTFˠ˘
    [
    [˘, ˘, ˘, ˘, ˘],
    [˘, ˙, ˙, ˙, ˘],
    [˘, ˙, ˙, ˙, ˘],
    [˘, ˘, ˘, ˘, ˘]
    ]

    View Slide

  12. 7JFXQPSUΛͣΒͯ͠Ξχϝʔγϣϯ
    DPOTPMFDMFBSˠDPOTPMFMPHˠʜ
    [
    [˘, ˘, ˘, ˘, ˘],
    [˘, ˙, ˙, ˙, ˘],
    [˘, ˙, ˙, ˙, ˘],
    [˘, ˘, ˘, ˘, ˘]
    ]

    View Slide

  13. ΧʔιϧͳΜͯͳ͍ͷͰ
    DPOTPMFDMFBSˠDPOTPMFMPHˠʜ

    View Slide

  14. ʊਓਓਓਓʊ

    ʼɹ׬੒ɹʻ

    ʉ:?:?:?:ʉ

    View Slide

  15. 'JSFGPY
    $ISPNF
    4BGBSJ

    View Slide

  16. ͳ͔ͥ'JSFGPYͷEFWUPPMͷύϑΥʔϚϯε
    ͕܈Λൈ͍ͯྑ͍
    DPOTPMFMPHͷୈೋҾ਺ʹ͸ελΠϧΛ౉ͤΔ
    console.log('%cfoo’, 'font-size: 10px;')
    DBOWBTʹେ͖Ίʹॻ͍͔ͯΒ
    খ͍͞αΠζͰDPOTPMFMPH͢Δͷ͕ྑ͍ײ͡
    ஌ݟ

    View Slide

  17. ࣍͸Τοδݕग़ʜʜʁ
    render(‘’)

    View Slide